@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row m-1 border shadow-sm p-3 bg-white">
        <div class="col-12">
            <span class="fw-semibold text-secondary d-none d-md-inline my-4">DAFTAR KELUARGA</span>
            
            <div class="table-responsive mt-4">
                <table class="table table-sm small fw-light border">
                    <thead class="bg-warning">
                        <tr style="height:60px;">
                            <th width="15%" class="align-middle text-center text-uppercase text-dark" style="height:60px;">KK</th>
                            <th width="15%" class="align-middle text-center text-uppercase text-dark" style="height:60px;">KEPALA KELUARGA</th>
                            <th width="25%" class="align-middle text-center text-uppercase text-dark" style="height:60px;">ALAMAT</th>
                            <th width="15%" class="align-middle text-center text-uppercase text-dark" style="height:60px;">KECAMATAN</th>
                            <th width="15%" class="align-middle text-center text-uppercase text-dark" style="height:60px;">DESA</th>
                            <th width="5%" class="align-middle text-center text-uppercase text-dark" style="height:60px;">SKORE</th>
                            <th width="5%" class="align-middle text-center text-uppercase text-dark" style="height:60px;">JUMLAH ANGGOTA</th>
                            <th width="5%" class="align-middle text-center text-uppercase text-dark" style="height:60px;">AKSI</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($keluargas as $keluarga)
                            <tr>
                                <td>{{ $keluarga->kk }}</td>
                                <td><strong>
                                    {{ $keluarga->kepalaKeluarga->nama ?? '-' }}</strong><br>
                                    <small class="text-muted">{{ $keluarga->kepalaKeluarga->nik ?? '-' }}</small>
                                </td>
                                <td>{{ $keluarga->alamat }}</td>
                                <td>{{ $keluarga->kecamatan->nama_kecamatan ?? '-' }}</td>
                                <td>{{ $keluarga->desa->nama_desa ?? '-' }}</td>
                                <td class="text-center">{{ $keluarga->skore ?? '-' }}</td>
                                <td class="text-center">{{ $keluarga->anggota->count() }}</td>
                                <td>
                                    <a href="{{ route('keluarga.show', $keluarga) }}" class="btn btn-xs btn-primary w-100 rounded-0" title="Detail">
                                        <i class="bi bi-file-spreadsheet"></i>
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted py-4">
                                    <i>Belum ada data keluarga</i>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            <div class="d-flex justify-content-between align-items-center mt-3">
                <div class="text-muted">
                    Menampilkan {{ $keluargas->firstItem() }} - {{ $keluargas->lastItem() }} dari {{ $keluargas->total() }} data
                </div>
                <div>
                    {{ $keluargas->links('pagination::bootstrap-4') }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')size: 0.75rem;
<style>
    .btn-xs {
        padding: 0.125rem 0.375rem;ush
        font-size: 0.75rem;
    }
</style>
@endpush