@extends('layouts.superadmin')
@section('title', 'Laporan & Rekap')

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

@section('header_actions')
<form method="GET" action="{{ url('/superadmin/laporan') }}" style="display:flex; gap:12px; align-items:center; background:white; padding:8px 16px; border-radius:12px; border:1px solid #e2e8f0; box-shadow:0 1px 2px rgba(0,0,0,0.05);">
    
    <div style="display:flex; flex-direction:column; gap:2px;">
        <label style="font-size:10px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.5px;">Pilih Masjid</label>
        <select name="masjid" style="border:none; background:transparent; font-size:15px; font-weight:700; color:#0f172a; outline:none; cursor:pointer;" onchange="this.form.submit()">
            @if($daftarMasjid->isEmpty())
                <option value="">Tidak ada masjid terdaftar</option>
            @else
                @foreach($daftarMasjid as $m)
                    <option value="{{ $m->id_masjid }}" {{ $selectedMasjidId == $m->id_masjid ? 'selected' : '' }}>
                        {{ $m->nama_masjid }}
                    </option>
                @endforeach
            @endif
        </select>
    </div>

    <div style="width:1px; height:24px; background:#e2e8f0; margin:0 8px;"></div>

    <div style="display:flex; flex-direction:column; gap:2px;">
        <label style="font-size:10px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.5px;">Periode Zakat</label>
        <div style="display:flex; gap:6px;">
            <select name="bulan" style="border:none; background:transparent; font-size:14px; font-weight:600; color:#334155; outline:none; cursor:pointer;" onchange="this.form.submit()">
                @foreach($daftarBulan as $num => $nama)
                    <option value="{{ $num }}" {{ $bulan == $num ? 'selected' : '' }}>{{ $nama }}</option>
                @endforeach
            </select>
            <select name="tahun" style="border:none; background:transparent; font-size:14px; font-weight:600; color:#334155; outline:none; cursor:pointer;" onchange="this.form.submit()">
                @foreach($daftarTahun as $y)
                    <option value="{{ $y }}" {{ $tahun == $y ? 'selected' : '' }}>{{ $y }}</option>
                @endforeach
            </select>
        </div>
    </div>
</form>
@endsection

@section('content')
<style>
    .masjid-header {
        background: var(--green-primary);
        color: white;
        padding: 30px;
        border-radius: 16px;
        margin-bottom: 30px;
        box-shadow: 0 10px 25px -5px rgba(26, 107, 60, 0.3);
        position: relative;
        overflow: hidden;
    }
    .masjid-header::after {
        content: '\F1FA';
        font-family: 'Bootstrap-icons';
        position: absolute;
        right: -20px;
        bottom: -40px;
        font-size: 180px;
        color: rgba(255,255,255,0.05);
        pointer-events: none;
    }
    .masjid-title {
        font-size: 32px;
        font-weight: 800;
        margin-bottom: 8px;
        letter-spacing: -0.5px;
    }
    .masjid-subtitle {
        font-size: 15px;
        opacity: 0.9;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .section-title {
        font-size: 20px;
        font-weight: 800;
        color: var(--text-dark);
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .section-title i {
        color: var(--green-primary);
        background: var(--green-light);
        padding: 6px 10px;
        border-radius: 8px;
        font-size: 18px;
    }

    /* Kartu Pengurus */
    .pengurus-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-bottom: 30px;
    }
    .pengurus-card {
        background: white;
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 20px;
        box-shadow: var(--shadow-sm);
    }
    .pengurus-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px dashed var(--border-color);
    }
    .pengurus-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        flex-shrink: 0;
    }
    .pengurus-role {
        font-size: 13px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 700;
        margin-bottom: 2px;
    }
    .pengurus-count {
        font-size: 24px;
        font-weight: 800;
        color: var(--text-dark);
        line-height: 1;
    }
    .pengurus-list {
        list-style: none;
        padding: 0;
        margin: 0;
        max-height: 200px;
        overflow-y: auto;
    }
    .pengurus-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
        font-size: 14px;
        color: var(--text-dark);
        font-weight: 500;
    }
    .pengurus-item i {
        color: var(--green-primary);
    }
    
    /* Kartu Statistik Lebar */
    .stat-wide-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 30px;
    }
    .stat-wide-card {
        background: white;
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 24px;
        display: flex;
        align-items: center;
        gap: 20px;
        box-shadow: var(--shadow-sm);
    }
    .stat-wide-icon {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        flex-shrink: 0;
    }
    .stat-wide-label {
        font-size: 14px;
        color: var(--text-muted);
        font-weight: 600;
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .stat-wide-val {
        font-size: 36px;
        font-weight: 800;
        color: var(--text-dark);
        line-height: 1;
    }

    /* Zakat Section */
    .zakat-container {
        background: white;
        border: 1px solid var(--border-color);
        border-radius: 16px;
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }
    .zakat-header {
        background: #f8fafc;
        padding: 16px 24px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .zakat-header-title {
        font-size: 16px;
        font-weight: 800;
        color: var(--text-dark);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .zakat-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .zakat-col {
        padding: 30px;
    }
    .zakat-col:first-child {
        border-right: 1px solid var(--border-color);
    }
    .zakat-box {
        background: var(--bg-page);
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 20px;
    }
    .zakat-box-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 12px;
    }
    .zakat-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        font-size: 16px;
        font-weight: 700;
        color: var(--text-dark);
    }
    .zakat-item:not(:last-child) {
        border-bottom: 1px dashed #cbd5e1;
    }
    .zakat-label {
        font-weight: 600;
        color: #475569;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .status-badge {
        display: inline-block;
        padding: 8px 16px;
        border-radius: 30px;
        font-size: 15px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .status-surplus { background: #dcfce7; color: #166534; border: 2px solid #bbf7d0; }
    .status-minus { background: #fee2e2; color: #991b1b; border: 2px solid #fecaca; }
    .status-pas { background: #e0f2fe; color: #0c4a6e; border: 2px solid #bae6fd; }

    /* Scrollbar untuk pengurus list */
    .pengurus-list::-webkit-scrollbar { width: 4px; }
    .pengurus-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
</style>

@if(!$masjidTerpilih)
    <div style="text-align:center; padding:100px 20px;">
        <i class="bi bi-building-slash" style="font-size:64px; color:#cbd5e1; display:block; margin-bottom:16px;"></i>
        <h2 style="font-size:24px; font-weight:800; color:#475569; margin-bottom:8px;">Belum Ada Masjid</h2>
        <p style="color:#64748b;">Pilih atau daftarkan masjid terlebih dahulu untuk melihat laporan.</p>
    </div>
@else

    {{-- HEADER MASJID --}}
    <div class="masjid-header">
        <div class="masjid-title">{{ $masjidTerpilih->nama_masjid }}</div>
        <div class="masjid-subtitle">
            <i class="bi bi-geo-alt-fill"></i>
            {{ $masjidTerpilih->alamat_masjid ?? 'Alamat belum diatur' }}
        </div>
    </div>

    {{-- SECTION: PENGURUS --}}
    <h2 class="section-title">
        <i class="bi bi-people-fill"></i>
        Susunan Pengurus Masjid
    </h2>
    
    <div class="pengurus-grid">
        {{-- Admin --}}
        <div class="pengurus-card">
            <div class="pengurus-header">
                <div class="pengurus-icon" style="background:#eff6ff; color:#3b82f6;">
                    <i class="bi bi-person-gear"></i>
                </div>
                <div>
                    <div class="pengurus-role">Admin Masjid</div>
                    <div class="pengurus-count">{{ $pengurus['admin']->count() }} <span style="font-size:14px; color:var(--text-muted); font-weight:500;">Orang</span></div>
                </div>
            </div>
            <ul class="pengurus-list">
                @forelse($pengurus['admin'] as $u)
                    <li class="pengurus-item"><i class="bi bi-person-circle"></i> {{ $u->nama_user }}</li>
                @empty
                    <li class="pengurus-item" style="color:var(--text-muted); font-style:italic;">Belum ada admin terdaftar</li>
                @endforelse
            </ul>
        </div>

        {{-- Amil --}}
        <div class="pengurus-card">
            <div class="pengurus-header">
                <div class="pengurus-icon" style="background:#fef3c7; color:#d97706;">
                    <i class="bi bi-person-vcard"></i>
                </div>
                <div>
                    <div class="pengurus-role">Amil / Panitia Zakat</div>
                    <div class="pengurus-count">{{ $pengurus['amil']->count() }} <span style="font-size:14px; color:var(--text-muted); font-weight:500;">Orang</span></div>
                </div>
            </div>
            <ul class="pengurus-list">
                @forelse($pengurus['amil'] as $u)
                    <li class="pengurus-item"><i class="bi bi-person-circle"></i> {{ $u->nama_user }}</li>
                @empty
                    <li class="pengurus-item" style="color:var(--text-muted); font-style:italic;">Belum ada amil terdaftar</li>
                @endforelse
            </ul>
        </div>

        {{-- RT --}}
        <div class="pengurus-card">
            <div class="pengurus-header">
                <div class="pengurus-icon" style="background:#f3e8ff; color:#9333ea;">
                    <i class="bi bi-person-lines-fill"></i>
                </div>
                <div>
                    <div class="pengurus-role">Ketua RT</div>
                    <div class="pengurus-count">{{ $pengurus['rt']->count() }} <span style="font-size:14px; color:var(--text-muted); font-weight:500;">Orang</span></div>
                </div>
            </div>
            <ul class="pengurus-list">
                @forelse($pengurus['rt'] as $u)
                    <li class="pengurus-item"><i class="bi bi-person-circle"></i> {{ $u->nama_user }}</li>
                @empty
                    <li class="pengurus-item" style="color:var(--text-muted); font-style:italic;">Belum ada Ketua RT terdaftar</li>
                @endforelse
            </ul>
        </div>
    </div>

    {{-- SECTION: STATISTIK WILAYAH & MUSTAHIK --}}
    <h2 class="section-title" style="margin-top:40px;">
        <i class="bi bi-map-fill"></i>
        Cakupan Wilayah & Mustahik
    </h2>
    <div class="stat-wide-grid">
        <div class="stat-wide-card">
            <div class="stat-wide-icon" style="background:#f0fdf4; color:#16a34a;">
                <i class="bi bi-houses"></i>
            </div>
            <div>
                <div class="stat-wide-label">Total RT/RW Terdaftar</div>
                <div class="stat-wide-val">{{ $stats['total_wilayah'] }} <span style="font-size:16px; color:var(--text-muted); font-weight:600;">Wilayah</span></div>
            </div>
        </div>
        
        <div class="stat-wide-card">
            <div class="stat-wide-icon" style="background:#fef9c3; color:#ca8a04;">
                <i class="bi bi-people"></i>
            </div>
            <div>
                <div class="stat-wide-label">Total Mustahik (Disetujui)</div>
                <div class="stat-wide-val">{{ $stats['total_mustahik'] }} <span style="font-size:16px; color:var(--text-muted); font-weight:600;">Orang</span></div>
            </div>
        </div>
    </div>

    {{-- SECTION: ZAKAT --}}
    <h2 class="section-title" style="margin-top:40px;">
        <i class="bi bi-cash-coin"></i>
        Laporan Zakat & Status Logistik
    </h2>
    
    <div class="zakat-container">
        <div class="zakat-header">
            <div class="zakat-header-title">
                Periode Laporan: <span style="color:var(--green-primary);">{{ $daftarBulan[$bulan] }} {{ $tahun }}</span>
            </div>
        </div>
        
        <div class="zakat-grid">
            {{-- Kiri: Penerimaan & Distribusi --}}
            <div class="zakat-col">
                <div class="zakat-box">
                    <div class="zakat-box-title">Zakat Uang</div>
                    <div class="zakat-item">
                        <span class="zakat-label"><i class="bi bi-box-arrow-in-down" style="color:#16a34a;"></i> Masuk (Pendapatan)</span>
                        <span style="color:#16a34a;">Rp {{ number_format($stats['penerimaan_uang'], 0, ',', '.') }}</span>
                    </div>
                    <div class="zakat-item">
                        <span class="zakat-label"><i class="bi bi-people-fill" style="color:#0ea5e9;"></i> Kebutuhan Mustahik</span>
                        <span style="color:#0ea5e9;">Rp {{ number_format($stats['kebutuhan_uang'], 0, ',', '.') }}</span>
                    </div>
                    <div class="zakat-item">
                        <span class="zakat-label"><i class="bi bi-box-arrow-up" style="color:#dc2626;"></i> Aktual Dibagikan</span>
                        <span style="color:#dc2626;">Rp {{ number_format($stats['distribusi_uang'], 0, ',', '.') }}</span>
                    </div>
                </div>

                <div class="zakat-box">
                    <div class="zakat-box-title">Zakat Beras</div>
                    <div class="zakat-item">
                        <span class="zakat-label"><i class="bi bi-box-arrow-in-down" style="color:#16a34a;"></i> Masuk (Pendapatan)</span>
                        <span style="color:#16a34a;">{{ number_format($stats['penerimaan_beras'], 1, ',', '.') }} Kg</span>
                    </div>
                    <div class="zakat-item">
                        <span class="zakat-label"><i class="bi bi-people-fill" style="color:#0ea5e9;"></i> Kebutuhan Mustahik</span>
                        <span style="color:#0ea5e9;">{{ number_format($stats['kebutuhan_beras'], 1, ',', '.') }} Kg</span>
                    </div>
                    <div class="zakat-item">
                        <span class="zakat-label"><i class="bi bi-box-arrow-up" style="color:#dc2626;"></i> Aktual Dibagikan</span>
                        <span style="color:#dc2626;">{{ number_format($stats['distribusi_beras'] ?? 0, 1, ',', '.') }} Kg</span>
                    </div>
                </div>
            </div>

            {{-- Kanan: Hasil Rembukan / Status Akhir --}}
            <div class="zakat-col" style="display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; background:#f8fafc;">
                
                @if($masjidTerpilih->status_logistik_uang || $masjidTerpilih->status_logistik_beras)
                    <div style="font-size:16px; font-weight:800; color:var(--text-dark); margin-bottom:24px;">
                        Status Akhir Logistik <br> (Hasil Rembukan)
                    </div>

                    <div style="display:flex; flex-direction:column; gap:20px; width:100%;">
                        <div style="background:white; padding:20px; border-radius:16px; border:1px solid var(--border-color); box-shadow:var(--shadow-sm);">
                            <div style="font-size:13px; font-weight:700; color:var(--text-muted); text-transform:uppercase; margin-bottom:12px;">Status Uang</div>
                            @php 
                                $statusUang = $stats['status_uang'] ?? 'Pas';
                                $classUang = $statusUang == 'Surplus' ? 'status-surplus' : ($statusUang == 'Minus' ? 'status-minus' : 'status-pas');
                            @endphp
                            <div class="status-badge {{ $classUang }} w-full text-center mb-3">
                                💰 {{ $statusUang }}
                            </div>
                            <div style="text-align:center; font-size:14px; font-weight:600; color:#475569;">
                                Nilai: <span style="font-size:18px; font-weight:800; color:var(--text-dark);">Rp {{ number_format(abs($stats['selisih_uang']), 0, ',', '.') }}</span>
                            </div>
                        </div>

                        <div style="background:white; padding:20px; border-radius:16px; border:1px solid var(--border-color); box-shadow:var(--shadow-sm);">
                            <div style="font-size:13px; font-weight:700; color:var(--text-muted); text-transform:uppercase; margin-bottom:12px;">Status Beras</div>
                            @php 
                                $statusBeras = $stats['status_beras'] ?? 'Pas';
                                $classBeras = $statusBeras == 'Surplus' ? 'status-surplus' : ($statusBeras == 'Minus' ? 'status-minus' : 'status-pas');
                            @endphp
                            <div class="status-badge {{ $classBeras }} w-full text-center mb-3">
                                🌾 {{ $statusBeras }}
                            </div>
                            <div style="text-align:center; font-size:14px; font-weight:600; color:#475569;">
                                Nilai: <span style="font-size:18px; font-weight:800; color:var(--text-dark);">{{ number_format(abs($stats['selisih_beras']), 1, ',', '.') }} Kg</span>
                            </div>
                        </div>
                    </div>
                @else
                    <i class="bi bi-info-circle" style="font-size:48px; color:#cbd5e1; margin-bottom:16px;"></i>
                    <div style="font-size:16px; font-weight:700; color:var(--text-dark); margin-bottom:8px;">Belum Ada Status Logistik</div>
                    <div style="font-size:14px; color:var(--text-muted); max-width:80%;">
                        Pengurus masjid (Amil/Admin) belum mengisi Form Hasil Rembukan Distribusi Zakat untuk menentukan surplus atau minus.
                    </div>
                @endif
            </div>
        </div>
    </div>

@endif

@endsection