@php $no = $anggota->firstItem(); @endphp

@forelse($anggota as $kk)
    @php $kskData = $kk->user->ksk ?? null; @endphp
    {{-- BARIS KEPALA KELUARGA --}}
    <tr class="row-kk" style="background-color: #f8fafc;">
        <td class="text-center sticky-no text-muted">{{ $no++ }}</td>
        <td class="text-center sticky-nis editable" data-id="{{ $kk->id }}" data-type="kk" data-field="nis">{{ $kk->user->nis ?? '-' }}</td>
        <td class="sticky-name text-primary">
            {{-- Indikator Foto & KSK --}}
            @if($kk->foto_path)
                <a href="{{ asset('storage/' . $kk->foto_path) }}" target="_blank" title="Lihat Foto">
                    <i class="fas fa-image text-success me-1"></i>
                </a>
            @endif
            @if($kskData && $kskData->file_path)
                <a href="{{ asset('storage/' . $kskData->file_path) }}" target="_blank" title="Lihat KSK">
                    <i class="fas fa-file-pdf text-danger me-1"></i>
                </a>
            @endif
            
            <span class="editable" data-id="{{ $kk->id }}" data-type="kk" data-field="nama_lengkap">
                {{ strtoupper($kk->nama_lengkap) }}
            </span>
        </td>
        <td class="editable" data-id="{{ $kk->id }}" data-type="kk" data-field="nik">{{ $kk->nik }}</td>
        <td class="text-center editable" data-id="{{ $kk->id }}" data-type="kk" data-field="rt">{{ $kskData->rt ?? '-' }}</td>
        
        <td class="editable" data-id="{{ $kk->id }}" data-type="kk" data-field="desa">{{ strtoupper($kskData->desa ?? '-') }}</td>
        <td class="editable" data-id="{{ $kk->id }}" data-type="kk" data-field="kecamatan">{{ strtoupper($kskData->kecamatan ?? '-') }}</td>
        <td class="editable" data-id="{{ $kk->id }}" data-type="kk" data-field="kabupaten">{{ strtoupper($kskData->kabupaten ?? '-') }}</td>

        <td class="editable text-center" data-id="{{ $kk->id }}" data-type="kk" data-field="tanggal_lahir">
            {{ $kk->tanggal_lahir ? date('Y-m-d', strtotime($kk->tanggal_lahir)) : '-' }}
        </td>

        <td class="editable" data-id="{{ $kk->id }}" data-type="kk" data-field="tempat_lahir">{{ strtoupper($kk->tempat_lahir) }}</td>
        <td class="text-center editable" data-id="{{ $kk->id }}" data-type="kk" data-field="jenis_kelamin">{{ $kk->jenis_kelamin == 'LAKI-LAKI' ? 'L' : 'P' }}</td>
        <td class="editable" data-id="{{ $kk->id }}" data-type="kk" data-field="status_perkawinan">{{ $kk->status_perkawinan ?? '-' }}</td>
        <td class="editable" data-id="{{ $kk->id }}" data-type="kk" data-field="agama">{{ $kk->agama }}</td>
        <td class="editable" data-id="{{ $kk->id }}" data-type="kk" data-field="pendidikan">{{ $kk->pendidikan }}</td>
        <td class="editable" data-id="{{ $kk->id }}" data-type="kk" data-field="pekerjaan">{{ $kk->pekerjaan }}</td>
        <td class="editable" data-id="{{ $kk->id }}" data-type="kk" data-field="no_telepon">{{ $kk->no_telepon }}</td>
        <td class="text-center editable" data-id="{{ $kk->id }}" data-type="kk" data-field="golongan_darah">{{ $kk->golongan_darah }}</td>
        <td class="editable" data-id="{{ $kk->id }}" data-type="kk" data-field="kewarganegaraan">{{ $kk->kewarganegaraan }}</td>
        <td class="text-center editable" data-id="{{ $kk->id }}" data-type="kk" data-field="nomor_ksk">{{ $kskData->nomor_ksk ?? '-' }}</td>
        
        <td>
            <div class="action-cell d-flex gap-1">
                <button class="btn btn-info btn-sm btn-upload" data-id="{{ $kk->id }}" data-name="{{ $kk->nama_lengkap }}" title="Upload Berkas">
                    <i class="fas fa-upload fa-xs"></i>
                </button>
                <button class="btn btn-warning btn-sm btn-reset" data-id="{{ $kk->user_id }}" data-name="{{ $kk->nama_lengkap }}" title="Reset Password">
                    <i class="fas fa-key fa-xs"></i>
                </button>
                <button class="btn btn-danger btn-sm btn-delete" data-id="{{ $kk->id }}" data-type="kk" title="Hapus">
                    <i class="fas fa-trash fa-xs"></i>
                </button>
            </div>
        </td>
    </tr>

    {{-- BARIS ANGGOTA KELUARGA --}}
    @if($kskData && $kskData->anggota)
        @foreach($kskData->anggota as $ag)
            @if(trim($ag->nik) == trim($kk->nik)) @continue @endif
            <tr class="row-anggota">
                <td class="text-center sticky-no text-muted">↳</td>
                <td class="text-center sticky-nis">-</td>
                <td class="sticky-name editable" data-id="{{ $ag->id }}" data-type="ag" data-field="nama">{{ strtoupper($ag->nama) }}</td>
                <td class="editable" data-id="{{ $ag->id }}" data-type="ag" data-field="nik">{{ $ag->nik }}</td>
                <td class="text-center small">{{ $kskData->rt }}</td>
                <td class="text-muted">-</td><td class="text-muted">-</td><td class="text-muted">-</td>
                
                <td class="editable text-center" data-id="{{ $ag->id }}" data-type="ag" data-field="tanggal_lahir">
                    {{ $ag->tanggal_lahir ? date('Y-m-d', strtotime($ag->tanggal_lahir)) : '-' }}
                </td>

                <td class="editable" data-id="{{ $ag->id }}" data-type="ag" data-field="tempat_lahir">{{ strtoupper($ag->tempat_lahir) }}</td>
                <td class="text-center editable" data-id="{{ $ag->id }}" data-type="ag" data-field="jenis_kelamin">{{ $ag->jenis_kelamin == 'LAKI-LAKI' ? 'L' : 'P' }}</td>
                <td class="editable" data-id="{{ $ag->id }}" data-type="ag" data-field="status_perkawinan">{{ $ag->status_perkawinan }}</td>
                <td class="editable" data-id="{{ $ag->id }}" data-type="ag" data-field="agama">{{ $ag->agama }}</td>
                <td class="editable" data-id="{{ $ag->id }}" data-type="ag" data-field="pendidikan">{{ $ag->pendidikan }}</td>
                <td class="editable" data-id="{{ $ag->id }}" data-type="ag" data-field="pekerjaan">{{ $ag->pekerjaan }}</td>
                <td class="editable" data-id="{{ $ag->id }}" data-type="ag" data-field="no_telepon">{{ $ag->no_telepon }}</td>
                <td class="text-center editable" data-id="{{ $ag->id }}" data-type="ag" data-field="golongan_darah">{{ $ag->golongan_darah }}</td>
                <td class="editable" data-id="{{ $ag->id }}" data-type="ag" data-field="kewarganegaraan">{{ $ag->kewarganegaraan }}</td>
                <td class="text-center small text-muted">{{ $kskData->nomor_ksk }}</td>
                <td>
                    <div class="action-cell">
                        <button class="btn btn-outline-danger btn-sm btn-delete" data-id="{{ $ag->id }}" data-type="ag" title="Hapus Anggota">
                            <i class="fas fa-times fa-xs"></i>
                        </button>
                    </div>
                </td>
            </tr>
        @endforeach
    @endif
@empty
    <tr>
        <td colspan="20" class="text-center py-5 text-muted">
            <i class="fas fa-folder-open fa-3x mb-3"></i><br>
            Data tidak ditemukan.
        </td>
    </tr>
@endforelse

{{-- FOOTER PAGINATION --}}
@if($anggota->hasPages())
<tr>
    <td colspan="20" class="bg-light py-2 px-3">
        <div class="d-flex justify-content-between align-items-center">
            <div class="small fw-bold text-muted">
                Menampilkan {{ $anggota->firstItem() }} - {{ $anggota->lastItem() }} dari {{ $anggota->total() }} data
            </div>
            <div class="pagination-wrapper">
                {{ $anggota->appends(request()->all())->links('pagination::bootstrap-4') }}
            </div>
        </div>
    </td>
</tr>
@endif