@extends(Auth::user()->int_role == 'superadmin' ? 'layouts.superadmin' : 'layouts.admin')

@section('title', 'Rekap Zakat')
@section('topbar_title', 'Rekap Zakat')

@section('content')

<div class="page-header">
    <div class="page-header-left">
        <h1>Rekap Zakat Masjid</h1>
    </div>
    {{-- Filter Bulan --}}
    <form method="GET" action="{{ url('/admin/rekap-zakat') }}"
          style="display:flex; gap:10px; align-items:center;">
        <div class="select-wrap">
            <select name="bulan" class="form-ctrl" style="width:220px; font-size:13px;" onchange="this.form.submit()">
                @foreach($daftarBulan as $num => $nama)
                    <option value="{{ $num }}" {{ $bulan == $num ? 'selected' : '' }}>
                        {{ $nama }} {{ $tahun }} (Masehi)
                    </option>
                @endforeach
            </select>
        </div>
        <div class="select-wrap">
            <select name="tahun" class="form-ctrl" style="width:70px; font-size:13px;" onchange="this.form.submit()">
                @foreach($daftarTahun as $y)
                    <option value="{{ $y }}" {{ $tahun == $y ? 'selected' : '' }}>{{ $y }}</option>
                @endforeach
            </select>
        </div>
    </form>
</div>

{{-- Stat Cards --}}
<div style="display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-bottom:24px;">

    <div class="stat-card">
        <div class="stat-card-top">
            <div class="stat-card-label">Total Penerimaan Zakat</div>
            <div class="stat-card-icon" style="background:#e8f5ee; color:#1a6b3c;">
                <i class="bi bi-arrow-down-circle-fill"></i>
            </div>
        </div>
        <div class="stat-card-value" style="font-size:22px; margin-bottom:6px;">
            Rp {{ number_format($totalPenerimaan, 0, ',', '.') }}
        </div>
        <div style="font-size:12px; color:#1a6b3c; font-weight:600;">
            <i class="bi bi-graph-up-arrow"></i> Total bulan ini
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-card-top">
            <div class="stat-card-label">Total Distribusi Zakat</div>
            <div class="stat-card-icon" style="background:#fff7ed; color:#ea580c;">
                <i class="bi bi-arrow-up-circle-fill"></i>
            </div>
        </div>
        <div class="stat-card-value" style="font-size:22px; margin-bottom:6px;">
            Rp {{ number_format($totalDistribusi, 0, ',', '.') }}
        </div>
        <div style="font-size:12px; color:#ea580c; font-weight:600;">
            <i class="bi bi-arrow-repeat"></i> Dalam proses penyaluran
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-card-top">
            <div class="stat-card-label">Saldo Zakat</div>
            <div class="stat-card-icon" style="background:#eff6ff; color:#2563eb;">
                <i class="bi bi-bank2"></i>
            </div>
        </div>
        <div class="stat-card-value" style="font-size:22px; margin-bottom:6px;">
            Rp {{ number_format($saldoZakat, 0, ',', '.') }}
        </div>
        <div style="font-size:12px; color:#2563eb; font-weight:600;">
            <i class="bi bi-info-circle"></i> Dana siap distribusikan
        </div>
    </div>

</div>

{{-- Tabel Penerimaan --}}
<div class="card" style="margin-bottom:20px;">
    <div style="display:flex; align-items:center; justify-content:space-between; padding: 18px 20px 0;">
        <div style="font-size:16px; font-weight:700;">Tabel Penerimaan Zakat</div>
        <a href="#" class="btn-outline" style="font-size:12.5px;">
            <i class="bi bi-download"></i> Export
        </a>
    </div>
    <div style="margin-top:14px;">
    <table class="data-table">
        <thead>
            <tr>
                <th style="width:50px;">No</th>
                <th>Nama Penyetor</th>
                <th>Atas Nama</th>
                <th>Jenis Zakat</th>
                <th>Jumlah</th>
                <th>Metode</th>
                <th>Tgl Masehi / Hijriah</th>
            </tr>
        </thead>
        <tbody>
            @forelse($penerimaan as $i => $p)
            <tr>
                <td style="color:var(--text-muted);">{{ $i + 1 }}</td>
                <td style="font-weight:600;">{{ $p->nama_penyetor }}</td>
                <td style="font-size:13px;">{{ $p->atas_name }} ({{ $p->jumlah_jiwa }} Jiwa)</td>
                <td>
                    <span class="badge-pill {{ $p->jenis_zakat === 'uang' ? 'badge-green' : 'badge-orange' }}"
                          style="text-transform:capitalize;">
                        {{ $p->jenis_zakat === 'uang' ? 'Fitrah' : 'Maal' }}
                    </span>
                </td>
                <td style="font-weight:600;">Rp {{ number_format($p->total_bayar, 0, ',', '.') }}</td>
                <td style="font-size:13px; text-transform:capitalize;">{{ ucfirst($p->metode_pembayaran) }}</td>
                <td style="font-size:12.5px;">
                    {{ \Carbon\Carbon::parse($p->tanggal_terima)->format('d M Y') }}
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="7" style="text-align:center; padding:32px; color:var(--text-muted);">
                    <i class="bi bi-inbox" style="font-size:28px; display:block; margin-bottom:8px;"></i>
                    Belum ada data penerimaan zakat bulan ini.
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
    </div>
</div>

{{-- Tabel Distribusi --}}
<div class="card">
    <div style="display:flex; align-items:center; justify-content:space-between; padding: 18px 20px 0;">
        <div style="font-size:16px; font-weight:700;">Tabel Distribusi Zakat</div>
        <a href="#" class="btn-outline" style="font-size:12.5px;">
            <i class="bi bi-download"></i> Export
        </a>
    </div>
    <div style="margin-top:14px;">
    <table class="data-table">
        <thead>
            <tr>
                <th style="width:50px;">No</th>
                <th>Nama Mustahik</th>
                <th>Wilayah</th>
                <th>Jumlah</th>
                <th>Status</th>
                <th>Petugas</th>
                <th>Tanggal</th>
            </tr>
        </thead>
        <tbody>
            @forelse($distribusi as $i => $d)
            <tr>
                <td style="color:var(--text-muted);">{{ $i + 1 }}</td>
                <td style="font-weight:600;">
                    {{ $d->mustahik->nama_mustahik ?? 'Tidak Diketahui' }}
                </td>
                <td style="font-size:13px;">
                    @if($d->mustahik && $d->mustahik->kk && $d->mustahik->kk->wilayah)
                        RT {{ str_pad($d->mustahik->kk->wilayah->rt, 2, '0', STR_PAD_LEFT) }} /
                        RW {{ str_pad($d->mustahik->kk->wilayah->rw, 2, '0', STR_PAD_LEFT) }}
                    @else
                        -
                    @endif
                </td>
                <td style="font-weight:600;">Rp {{ number_format($d->jumlah_distribusi, 0, ',', '.') }}</td>
                <td>
                    <span class="badge-pill {{ $d->status_terima === 'sudah' ? 'badge-green' : 'badge-orange' }}">
                        {{ $d->status_terima === 'sudah' ? 'Terdistribusi' : 'Menunggu' }}
                    </span>
                </td>
                <td style="font-size:13px;">{{ $d->petugas->nama_user ?? '-' }}</td>
                <td style="font-size:12.5px;">
                    {{ $d->tanggal_distribusi ? \Carbon\Carbon::parse($d->tanggal_distribusi)->format('d M Y') : '-' }}
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="7" style="text-align:center; padding:32px; color:var(--text-muted);">
                    <i class="bi bi-inbox" style="font-size:28px; display:block; margin-bottom:8px;"></i>
                    Belum ada data distribusi zakat bulan ini.
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
    </div>
</div>

@endsection
