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

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

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <h1>Data Mustahik Seluruh Masjid</h1>
        <p>Rekap data mustahik dari semua masjid yang terdaftar di sistem</p>
    </div>
</div>

{{-- Filter Bar --}}
<form method="GET" action="{{ url('/superadmin/data-mustahik') }}">
<div class="card" style="padding:16px 20px; margin-bottom:20px;">
    <div class="filter-grid">
        <div class="search-wrap">
            <i class="bi bi-search"></i>
            <input type="text" name="search" class="search-input" placeholder="Cari nama mustahik / NIK 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 class="select-wrap">
            <select name="status" class="form-ctrl" onchange="this.form.submit()">
                <option value="">— Semua Status —</option>
                <option value="Pending"   {{ request('status')=='Pending'   ? 'selected':'' }}>Pending</option>
                <option value="Disetujui" {{ request('status')=='Disetujui' ? 'selected':'' }}>Disetujui</option>
                <option value="Ditolak"   {{ request('status')=='Ditolak'   ? 'selected':'' }}>Ditolak</option>
            </select>
        </div>
        <div class="select-wrap">
            <select name="kategori" class="form-ctrl" onchange="this.form.submit()">
                <option value="">— Semua Asnaf —</option>
                <option value="Fakir"     {{ request('kategori')=='Fakir'     ? 'selected':'' }}>Fakir</option>
                <option value="Miskin"    {{ request('kategori')=='Miskin'    ? 'selected':'' }}>Miskin</option>
                <option value="Gharim"    {{ request('kategori')=='Gharim'    ? 'selected':'' }}>Gharim</option>
                <option value="Ibnu Sabil"{{ request('kategori')=='Ibnu Sabil'? 'selected':'' }}>Ibnu Sabil</option>
            </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> Terapkan Filter
        </button>
        <a href="{{ url('/superadmin/data-mustahik') }}" 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 --}}
<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-person-lines-fill" style="color:var(--green-primary);"></i> Data Mustahik
        </div>
        <span style="font-size:12px; color:var(--text-muted);">{{ $mustahik->total() }} data ditemukan</span>
    </div>
    <div class="table-responsive">
    <table class="data-table">
        <thead>
            <tr>
                <th>No</th>
                <th>Nama Mustahik</th>
                <th>Masjid</th>
                <th>Wilayah RT/RW</th>
                <th>Kategori Asnaf</th>
                <th>Pendapatan/Bulan</th>
                <th>Status</th>
                <th>Tgl Pengajuan</th>
            </tr>
        </thead>
        <tbody>
            @forelse($mustahik as $i => $m)
            <tr>
                <td style="color:var(--text-muted);">{{ $mustahik->firstItem() + $i }}</td>
                <td>
                    <div style="font-weight:600;">{{ $m->nama_mustahik }}</div>
                    <div style="font-size:12px; color:var(--text-muted);">NIK KK: {{ $m->nik_kepala_kk }}</div>
                </td>
                <td>
                    <span style="background:#f0fdf4; color:#166534; padding:2px 8px; border-radius:6px; font-size:12px; font-weight:600;">
                        {{ $m->masjid->nama_masjid ?? '—' }}
                    </span>
                </td>
                <td style="font-size:13px;">
                    @if($m->kk && $m->kk->wilayah)
                        RT {{ str_pad($m->kk->wilayah->rt, 2, '0', STR_PAD_LEFT) }} /
                        RW {{ str_pad($m->kk->wilayah->rw, 2, '0', STR_PAD_LEFT) }}
                    @else —
                    @endif
                </td>
                <td>
                    @php
                        $asnafClass = ['Fakir'=>'badge-fakir','Miskin'=>'badge-miskin','Gharim'=>'badge-gharim','Ibnu Sabil'=>'badge-sabil'];
                    @endphp
                    <span class="badge-pill {{ $asnafClass[$m->kategori_asnaf] ?? 'badge-gray' }}">{{ $m->kategori_asnaf }}</span>
                </td>
                <td style="font-size:13px;">Rp {{ number_format($m->pendapatan_bulanan, 0, ',', '.') }}</td>
                <td>
                    @php
                        $statusStyle = match($m->status) {
                            'Disetujui' => 'background:#dcfce7; color:#166534;',
                            'Ditolak'   => 'background:#fee2e2; color:#991b1b;',
                            default     => 'background:#fef9c3; color:#854d0e;',
                        };
                    @endphp
                    <span class="badge-pill" style="{{ $statusStyle }}">{{ $m->status }}</span>
                </td>
                <td style="font-size:12.5px;">
                    {{ \Carbon\Carbon::parse($m->tanggal_pengajuan)->format('d M Y') }}
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="8" 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 mustahik ditemukan.
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
    </div>
    @if($mustahik->hasPages())
    <div class="pagination-wrap">
        <span>Menampilkan {{ $mustahik->firstItem() }}–{{ $mustahik->lastItem() }} dari {{ $mustahik->total() }}</span>
        <div class="pagination-btns">
            @if($mustahik->onFirstPage())
                <button class="page-btn" disabled><i class="bi bi-chevron-left"></i></button>
            @else
                <a href="{{ $mustahik->previousPageUrl() }}" class="page-btn"><i class="bi bi-chevron-left"></i></a>
            @endif
            @foreach($mustahik->getUrlRange(max(1, $mustahik->currentPage()-2), min($mustahik->lastPage(), $mustahik->currentPage()+2)) as $page => $url)
                <a href="{{ $url }}" class="page-btn {{ $mustahik->currentPage() == $page ? 'active' : '' }}">{{ $page }}</a>
            @endforeach
            @if($mustahik->hasMorePages())
                <a href="{{ $mustahik->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