@extends('layouts.admin')

@section('content')
<style>
    .content-wrapper { font-size: 0.875rem; background-color: #f8f9fc; }
    .card-custom { border: none; border-radius: 10px; box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1); background-color: #fff; overflow: hidden; }
    
    /* Header Tabel Solid */
    .table thead th { 
        background-color: #5a5c69; 
        color: #ffffff; 
        text-transform: uppercase; 
        font-size: 11px; 
        letter-spacing: 1px; 
        padding: 15px 12px !important;
        border: none;
    }
    
    .table td { vertical-align: middle !important; border-top: 1px solid #f2f4f8; padding: 12px 12px !important; }
    
    /* Footer Style */
    .footer-total { background-color: #f8f9fc; border-top: 2px solid #e3e6f0; }
    
    /* Filter Simpel & Rapi (Inline) */
    .filter-wrapper { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
    .filter-label { font-weight: bold; color: #333; margin-bottom: 0; white-space: nowrap; }
    .form-select-biasa { 
        padding: 0.375rem 0.75rem;
        font-size: 0.85rem;
        font-weight: bold;
        color: #333;
        border: 1px solid #ced4da;
        border-radius: 4px;
        background-color: #fff;
        outline: none;
    }

    /* Badge Pembeda */
    .badge-baru { background-color: #4e73df; color: white; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: bold; }
    .badge-pecah { background-color: #36b9cc; color: white; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: bold; }
</style>

<div class="container-fluid px-3 py-4">
    {{-- HEADER --}}
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <div>
            <h5 class="fw-bold mb-0 text-dark text-uppercase" style="letter-spacing: 1px;">
                <i class="fas fa-file-invoice-dollar me-2 text-secondary"></i> Laporan Registrasi Warga
            </h5>
            <small class="text-muted small">Daftar rincian pendaftaran baru & pecah KSK</small>
        </div>

        {{-- Filter Tahun Simpel & Sejajar --}}
        <form action="" method="GET" class="mt-sm-0 mt-3">
            <div class="filter-wrapper">
                <label class="filter-label small">PILIH TAHUN :</label>
                <select name="tahun" class="form-select-biasa shadow-sm" onchange="this.form.submit()">
                    @php $currentYear = date('Y'); @endphp
                    @for($i=$currentYear; $i>=2024; $i--)
                        <option value="{{ $i }}" {{ request('tahun', $currentYear) == $i ? 'selected' : '' }}>{{ $i }}</option>
                    @endfor
                </select>
            </div>
        </form>
    </div>

    {{-- TABEL --}}
    <div class="card card-custom">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0" style="font-size: 13px;"> 
                    <thead>
                        <tr>
                            <th class="text-center" width="5%">NO</th>
                            <th width="10%">NIS</th>
                            <th width="12%">NIK</th>
                            <th width="20%">NAMA LENGKAP</th>
                            <th width="10%" class="text-center">AGAMA</th>
                            <th>ALAMAT</th>
                            <th width="12%" class="text-center">KETERANGAN</th>
                            <th width="15%" class="text-right pr-4">NOMINAL</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($pendapatan as $index => $p)
                        @php $nom = $p->biayaRegistrasi->nominal ?? 0; @endphp
                        <tr>
                            <td class="text-center text-muted small">{{ $index + 1 }}</td>
                            <td class="font-weight-bold text-dark">{{ $p->nis }}</td>
                            <td>{{ $p->profile->nik ?? '-' }}</td>
                            <td class="fw-bold text-uppercase text-dark">{{ $p->profile->nama_lengkap ?? $p->name }}</td>
                            <td class="text-center">{{ $p->profile->agama ?? '-' }}</td>
                            <td><small class="text-muted text-uppercase text-truncate d-inline-block" style="max-width: 250px;">{{ $p->profile->alamat ?? '-' }}</small></td>
                            <td class="text-center">
                                @if($nom >= 1000000)
                                    <span class="badge-baru shadow-sm">BARU</span>
                                @else
                                    <span class="badge-pecah shadow-sm">PECAH KSK</span>
                                @endif
                            </td>
                            <td class="text-right font-weight-bold pr-4 text-dark">
                                Rp {{ number_format($nom, 0, ',', '.') }}
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center py-5 text-muted small uppercase">
                                <i class="fas fa-database d-block mb-2 fa-2x opacity-25"></i>
                                Tidak ada data pendaftar valid di tahun {{ request('tahun', date('Y')) }}
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                    
                    {{-- FOOTER TOTAL --}}
                    @if($pendapatan->count() > 0)
                    <tfoot class="footer-total">
                        <tr>
                            <td colspan="7" class="text-right py-3 text-uppercase font-weight-bold small text-dark">Total ({{ request('tahun', date('Y')) }}) :</td>
                            <td class="py-3 text-right pr-4 text-dark font-weight-bold" style="font-size: 14px;">
                                Rp {{ number_format($totalPendapatan, 0, ',', '.') }}
                            </td>
                        </tr>

                    </tfoot>
                    @endif
                </table>
            </div>
        </div>
    </div>
</div>

<style>
    .text-right { text-align: right !important; }
    .pr-4 { padding-right: 1.5rem !important; }
</style>
@endsection