@extends('layouts.admin.master')

@section('content')
    <div class="container-fluid py-3">
        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3 mb-4">
            <div>
                <h3 class="mb-1">Data Keluarga</h3>
                <p class="text-muted mb-0">Daftar keluarga dan kepala keluarga hasil normalisasi dari master data penduduk.</p>
            </div>
            <div class="d-flex flex-wrap gap-2">
                <a href="{{ route('admin.penduduk') }}" class="btn btn-outline-secondary btn-sm">Data Penduduk</a>
            </div>
        </div>

        <div class="row g-3 mb-4">
            <div class="col-md-6 col-xl-3"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="small text-muted mb-1">Total Keluarga</div><div class="fw-semibold fs-5">{{ number_format($stats['total_keluarga']) }}</div></div></div></div>
            <div class="col-md-6 col-xl-3"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="small text-muted mb-1">Keluarga Aktif</div><div class="fw-semibold fs-5">{{ number_format($stats['total_aktif']) }}</div></div></div></div>
            <div class="col-md-6 col-xl-3"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="small text-muted mb-1">Sudah Diverifikasi</div><div class="fw-semibold fs-5">{{ number_format($stats['total_verified']) }}</div></div></div></div>
            <div class="col-md-6 col-xl-3"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="small text-muted mb-1">Anggota Aktif</div><div class="fw-semibold fs-5">{{ number_format($stats['total_anggota_aktif']) }}</div></div></div></div>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <form method="GET" action="{{ route('admin.penduduk.keluarga') }}" class="row g-3 align-items-end mb-4">
                    <div class="col-md-6">
                        <label class="form-label">Cari KK / Kepala Keluarga</label>
                        <input type="text" name="q" value="{{ $filters['q'] ?? '' }}" class="form-control" placeholder="Nomor KK, nama, atau NIK">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Status</label>
                        <select name="status" class="form-select">
                            <option value="">Semua</option>
                            @foreach (['Aktif', 'Nonaktif', 'Perlu Review'] as $status)
                                <option value="{{ $status }}" @selected(($filters['status'] ?? '') === $status)>{{ $status }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3 d-grid">
                        <button type="submit" class="btn btn-primary">Terapkan Filter</button>
                    </div>
                </form>

                <div class="table-responsive">
                    <table class="table align-middle">
                        <thead>
                            <tr>
                                <th>Nomor KK</th>
                                <th>Kepala Keluarga</th>
                                <th>Wilayah</th>
                                <th>Anggota</th>
                                <th>Status</th>
                                <th class="text-end">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($keluargas as $keluarga)
                                <tr>
                                    <td>
                                        <div class="fw-semibold">{{ $keluarga->nomor_kk }}</div>
                                        <div class="small text-muted">{{ $keluarga->alamat ?: 'Alamat belum diringkas' }}</div>
                                    </td>
                                    <td>
                                        <div class="fw-semibold">{{ $keluarga->kepalaKeluarga?->nama ?: 'Belum ditetapkan' }}</div>
                                        <div class="small text-muted">{{ $keluarga->kepalaKeluarga?->nomor_ktp ?: '-' }}</div>
                                    </td>
                                    <td>
                                        {{ $keluarga->village?->name ?: '-' }}<br>
                                        <small class="text-muted">{{ $keluarga->lingkungan?->name ?: '-' }}</small>
                                    </td>
                                    <td>{{ $keluarga->anggota_aktif_count }}</td>
                                    <td><span class="badge {{ $keluarga->status === 'Aktif' ? 'bg-success' : 'bg-secondary' }}">{{ $keluarga->status ?: 'Belum diatur' }}</span></td>
                                    <td class="text-end"><a href="{{ route('admin.penduduk.keluarga.show', $keluarga) }}" class="btn btn-outline-primary btn-sm">Detail</a></td>
                                </tr>
                            @empty
                                <tr><td colspan="6" class="text-center text-muted py-4">Belum ada keluarga yang cocok dengan filter ini.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                {{ $keluargas->links() }}
            </div>
        </div>
    </div>
@endsection