@extends('layouts.superadmin')
@section('title', 'Data KK Warga')

@section('header_title')
    <h1 class="text-2xl font-bold text-primary">Data KK Warga</h1>
@endsection

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <h1>Data KK Warga Seluruh Masjid</h1>
        <p>Data Kepala Keluarga (KK) yang terdaftar lintas masjid</p>
    </div>
</div>

{{-- Filter Bar --}}
<form method="GET" action="{{ url('/superadmin/data-kk') }}">
<div class="card" style="padding:16px 20px; margin-bottom:20px;">
    <div class="filter-grid filter-grid-2">
        <div class="search-wrap">
            <i class="bi bi-search"></i>
            <input type="text" name="search" class="search-input" placeholder="Cari NIK / Nama Kepala KK..." value="{{ request('search') }}">
        </div>
        <div class="select-wrap">
            <select name="masjid" class="form-ctrl" onchange="this.form.submit()">
                <option value="">— Semua Masjid —</option>
                @foreach($daftarMasjid as $m)
                    <option value="{{ $m->id_masjid }}" {{ request('masjid') == $m->id_masjid ? 'selected' : '' }}>
                        {{ $m->nama_masjid }}
                    </option>
                @endforeach
            </select>
        </div>
    </div>
    <div style="text-align:right; margin-top:8px;">
        <button type="submit" class="btn-primary-green" style="padding:7px 16px; font-size:13px;">
            <i class="bi bi-search"></i> Cari
        </button>
        <a href="{{ url('/superadmin/data-kk') }}" class="btn-outline" style="margin-left:6px; padding:7px 14px; font-size:13px;">
            <i class="bi bi-x-lg"></i> Reset
        </a>
    </div>
</div>
</form>

{{-- Tabel Data KK --}}
<div class="card">
    <div style="padding:16px 20px; border-bottom:1px solid var(--border-color); display:flex; justify-content:space-between; align-items:center;">
        <div style="font-size:14px; font-weight:700;">
            <i class="bi bi-card-heading" style="color:var(--green-primary);"></i> Daftar Kartu Keluarga
        </div>
        <span style="font-size:12px; color:var(--text-muted);">{{ $datakk->total() }} data ditemukan</span>
    </div>
    
    <div class="table-responsive">
    <table class="data-table">
        <thead>
            <tr>
                <th>No</th>
                <th>NIK / Nama KK</th>
                <th>Alamat & Wilayah</th>
                <th>Masjid</th>
                <th>Jml Tanggungan</th>
                <th>Terdaftar Sejak</th>
            </tr>
        </thead>
        <tbody>
            @forelse($datakk as $i => $kk)
            <tr>
                <td style="color:var(--text-muted);">{{ $datakk->firstItem() + $i }}</td>
                <td>
                    <div style="font-weight:600;">{{ $kk->nama_kepala_kk }}</div>
                    <div style="font-size:12px; color:var(--text-muted);">NIK: {{ $kk->nik_kepala_kk }}</div>
                </td>
                <td>
                    <div style="font-size:13px; max-width:250px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                        {{ $kk->alamat_rumah }}
                    </div>
                    <div style="font-size:12px; color:var(--text-muted); font-weight:600; margin-top:2px;">
                        @if($kk->wilayah)
                            RT {{ str_pad($kk->wilayah->rt, 2, '0', STR_PAD_LEFT) }} /
                            RW {{ str_pad($kk->wilayah->rw, 2, '0', STR_PAD_LEFT) }}
                        @else
                            —
                        @endif
                    </div>
                </td>
                <td>
                    <span style="background:#f0fdf4; color:#166534; padding:2px 8px; border-radius:6px; font-size:12px; font-weight:600;">
                        {{ $kk->masjid->nama_masjid ?? '—' }}
                    </span>
                </td>
                <td style="text-align:center;">
                    <span style="background:#f3f4f6; padding:2px 8px; border-radius:6px; font-size:12px; font-weight:600;">
                        {{ $kk->jumlah_tanggungan }} Orang
                    </span>
                </td>
                <td style="font-size:12.5px;">
                    {{ $kk->created_at ? $kk->created_at->format('d M Y') : '—' }}
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="6" style="text-align:center; padding:40px; color:var(--text-muted);">
                    <i class="bi bi-inbox" style="font-size:32px; display:block; margin-bottom:10px; opacity:0.4;"></i>
                    Tidak ada data KK ditemukan.
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
    </div>

    @if($datakk->hasPages())
    <div class="pagination-wrap">
        <span>Menampilkan {{ $datakk->firstItem() }}–{{ $datakk->lastItem() }} dari {{ $datakk->total() }}</span>
        <div class="pagination-btns">
            @if($datakk->onFirstPage())
                <button class="page-btn" disabled><i class="bi bi-chevron-left"></i></button>
            @else
                <a href="{{ $datakk->previousPageUrl() }}" class="page-btn"><i class="bi bi-chevron-left"></i></a>
            @endif
            @foreach($datakk->getUrlRange(max(1, $datakk->currentPage()-2), min($datakk->lastPage(), $datakk->currentPage()+2)) as $page => $url)
                <a href="{{ $url }}" class="page-btn {{ $datakk->currentPage() == $page ? 'active' : '' }}">{{ $page }}</a>
            @endforeach
            @if($datakk->hasMorePages())
                <a href="{{ $datakk->nextPageUrl() }}" class="page-btn"><i class="bi bi-chevron-right"></i></a>
            @else
                <button class="page-btn" disabled><i class="bi bi-chevron-right"></i></button>
            @endif
        </div>
    </div>
    @endif
</div>
@endsection