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

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

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <h1>Verifikasi Mustahik</h1>
        <p>Monitoring status persetujuan mustahik dari seluruh masjid (hanya Amil/RT yang dapat approve)</p>
    </div>
    @if($totalPending > 0)
    <div style="background:#fef9c3; border:1px solid #fde68a; border-radius:10px; padding:10px 16px; display:flex; align-items:center; gap:8px; font-size:13px; color:#854d0e; font-weight:600;">
        <i class="bi bi-exclamation-triangle-fill"></i>
        {{ $totalPending }} mustahik menunggu diverifikasi oleh Amil
    </div>
    @endif
</div>

{{-- Info Banner: Monitoring Only --}}
<div style="background:#eff6ff; border:1px solid #bfdbfe; border-radius:10px; padding:12px 16px; margin-bottom:20px; display:flex; align-items:center; gap:10px;">
    <i class="bi bi-info-circle-fill" style="color:#2563eb; font-size:17px; flex-shrink:0;"></i>
    <span style="font-size:13px; color:#1e40af; font-weight:500;">
        Halaman ini hanya untuk <strong>monitoring</strong>. Proses approve/reject mustahik hanya dapat dilakukan oleh <strong>Amil</strong> atau <strong>Ketua RT</strong> masing-masing masjid.
    </span>
</div>

{{-- Tab Status --}}
<div class="tab-list">
    @php
        $tabs = ['Pending' => 'Menunggu', 'Disetujui' => 'Disetujui', 'Ditolak' => 'Ditolak', 'semua' => 'Semua'];
    @endphp
    @foreach($tabs as $val => $label)
    <a href="{{ url('/superadmin/verifikasi-mustahik') . '?' . http_build_query(array_merge(request()->all(), ['status' => $val])) }}"
       class="tab-btn {{ $status == $val ? 'active' : '' }}">
        {{ $label }}
        @if($val == 'Pending' && $totalPending > 0)
            <span style="background:#ef4444; color:white; font-size:10px; font-weight:700; padding:1px 6px; border-radius:20px; margin-left:4px;">{{ $totalPending }}</span>
        @endif
    </a>
    @endforeach
</div>

{{-- Filter --}}
<form method="GET" action="{{ url('/superadmin/verifikasi-mustahik') }}">
    <input type="hidden" name="status" value="{{ $status }}">
    <div class="card" style="padding:14px 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 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>
        <button type="submit" class="btn-primary-green" style="margin-top:8px; padding:7px 14px; font-size:13px;">
            <i class="bi bi-search"></i> Cari
        </button>
    </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-patch-check" style="color:var(--green-primary);"></i>
            Data Mustahik — Status: <span style="color:var(--green-primary);">{{ $tabs[$status] ?? $status }}</span>
        </div>
        <span style="font-size:12px; color:var(--text-muted);">{{ $mustahik->total() }} data</span>
    </div>
    <div class="table-responsive">
    <table class="data-table">
        <thead>
            <tr>
                <th>No</th>
                <th>Nama Mustahik</th>
                <th>Masjid</th>
                <th>Kategori</th>
                <th>Kondisi</th>
                <th>Status</th>
                <th>Tgl Pengajuan</th>
                <th style="text-align:center;">Status Verifikasi</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:11.5px; color:var(--text-muted);">
                        {{ $m->pekerjaan }} · Rp {{ number_format($m->pendapatan_bulanan, 0, ',', '.') }}/bln
                    </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>
                    @php $asnaf = ['Fakir'=>'badge-fakir','Miskin'=>'badge-miskin','Gharim'=>'badge-gharim','Ibnu Sabil'=>'badge-sabil']; @endphp
                    <span class="badge-pill {{ $asnaf[$m->kategori_asnaf] ?? 'badge-gray' }}">{{ $m->kategori_asnaf }}</span>
                </td>
                <td style="font-size:12.5px;">{{ $m->status_kondisi_warga }}</td>
                <td>
                    @php
                        $sStyle = match($m->status) {
                            'Disetujui' => 'background:#dcfce7; color:#166534;',
                            'Ditolak'   => 'background:#fee2e2; color:#991b1b;',
                            default     => 'background:#fef9c3; color:#854d0e;',
                        };
                    @endphp
                    <span class="badge-pill" style="{{ $sStyle }}">{{ $m->status }}</span>
                </td>
                <td style="font-size:12.5px;">
                    {{ \Carbon\Carbon::parse($m->tanggal_pengajuan)->format('d M Y') }}
                </td>
                <td style="text-align:center;">
                    @if($m->status === 'Pending')
                        <span style="background:#fef9c3; color:#854d0e; font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:4px;">
                            <i class="bi bi-hourglass-split"></i> Menunggu Amil
                        </span>
                    @elseif($m->status === 'Disetujui')
                        <span style="background:#dcfce7; color:#166534; font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:4px;">
                            <i class="bi bi-check-circle-fill"></i> Disetujui
                        </span>
                    @else
                        <span style="background:#fee2e2; color:#991b1b; font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:4px;">
                            <i class="bi bi-x-circle-fill"></i> Ditolak
                        </span>
                    @endif
                </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>
                    @if($status === 'Pending')
                        Tidak ada mustahik yang menunggu verifikasi. Semua sudah diproses! ✅
                    @else
                        Tidak ada data untuk filter yang dipilih.
                    @endif
                </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