@extends('layouts.superadmin')

@section('title', 'Dashboard Super Admin')

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

@section('header_actions')
<form method="GET" action="{{ url('/superadmin/dashboard') }}" 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;">Dashboard 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="">Belum 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>
</form>
@endsection

@section('content')

{{-- Global Alert untuk Pengajuan Masjid Baru --}}
@if($menungguVerifikasi > 0)
<div style="background:linear-gradient(135deg, #fef3c7, #fde68a); border-radius:16px; padding:20px 24px; margin-bottom:30px; display:flex; align-items:center; gap:20px; box-shadow:0 10px 15px -3px rgba(217,119,6,0.1);">
    <div style="background:#fffbeb; width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#d97706; font-size:24px; box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);">
        <i class="bi bi-building-exclamation"></i>
    </div>
    <div style="flex:1;">
        <h3 style="font-size:16px; font-weight:800; color:#92400e; margin-bottom:4px;">Pendaftaran Masjid Baru!</h3>
        <p style="font-size:13.5px; color:#b45309; margin:0; font-weight:500;">Terdapat <strong>{{ $menungguVerifikasi }} masjid</strong> yang mendaftar dan menunggu verifikasi Anda.</p>
    </div>
    <a href="{{ url('/superadmin/kelola-pengajuan') }}" style="background:#d97706; color:white; padding:10px 20px; border-radius:10px; font-weight:700; font-size:13.5px; text-decoration:none; display:flex; align-items:center; gap:8px; box-shadow:0 4px 6px -1px rgba(217,119,6,0.2); transition:all 0.2s;">
        <i class="bi bi-search"></i> Tinjau Pengajuan
    </a>
</div>
@endif

@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;">Silakan setujui pengajuan masjid terlebih dahulu.</p>
</div>
@else

{{-- Header Masjid Terpilih --}}
<div style="margin-bottom:24px; display:flex; flex-direction:column; gap:4px;">
    <h2 style="font-size:28px; font-weight:800; color:var(--text-dark); letter-spacing:-0.5px;">{{ $masjidTerpilih->nama_masjid }}</h2>
    <p style="font-size:14px; color:var(--text-muted); display:flex; align-items:center; gap:6px;">
        <i class="bi bi-geo-alt-fill" style="color:var(--green-primary);"></i> {{ $masjidTerpilih->alamat_masjid }}
    </p>
</div>

{{-- Baris 1: Susunan Pengurus --}}
<div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-bottom:30px;">
    <div style="background:white; border-radius:16px; padding:24px; border:1px solid #e2e8f0; box-shadow:0 4px 6px -1px rgba(0,0,0,0.02); display:flex; align-items:center; gap:20px; transition:transform 0.2s;">
        <div style="width:64px; height:64px; border-radius:16px; background:#f0fdf4; color:#16a34a; display:flex; align-items:center; justify-content:center; font-size:32px;">
            <i class="bi bi-person-badge"></i>
        </div>
        <div>
            <div style="font-size:13px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;">Admin Masjid</div>
            <div style="font-size:32px; font-weight:800; color:#0f172a; line-height:1;">{{ $stats['admin'] }} <span style="font-size:14px; color:#94a3b8; font-weight:600;">Orang</span></div>
        </div>
    </div>
    <div style="background:white; border-radius:16px; padding:24px; border:1px solid #e2e8f0; box-shadow:0 4px 6px -1px rgba(0,0,0,0.02); display:flex; align-items:center; gap:20px; transition:transform 0.2s;">
        <div style="width:64px; height:64px; border-radius:16px; background:#fff7ed; color:#ea580c; display:flex; align-items:center; justify-content:center; font-size:32px;">
            <i class="bi bi-person-vcard"></i>
        </div>
        <div>
            <div style="font-size:13px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;">Panitia Zakat (Amil)</div>
            <div style="font-size:32px; font-weight:800; color:#0f172a; line-height:1;">{{ $stats['amil'] }} <span style="font-size:14px; color:#94a3b8; font-weight:600;">Orang</span></div>
        </div>
    </div>
    <div style="background:white; border-radius:16px; padding:24px; border:1px solid #e2e8f0; box-shadow:0 4px 6px -1px rgba(0,0,0,0.02); display:flex; align-items:center; gap:20px; transition:transform 0.2s;">
        <div style="width:64px; height:64px; border-radius:16px; background:#eff6ff; color:#2563eb; display:flex; align-items:center; justify-content:center; font-size:32px;">
            <i class="bi bi-person-workspace"></i>
        </div>
        <div>
            <div style="font-size:13px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;">Ketua RT</div>
            <div style="font-size:32px; font-weight:800; color:#0f172a; line-height:1;">{{ $stats['rt'] }} <span style="font-size:14px; color:#94a3b8; font-weight:600;">Orang</span></div>
        </div>
    </div>
</div>

{{-- Baris 2: Statistik Mustahik & Wilayah --}}
<div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-bottom:30px;">
    <div style="background:linear-gradient(135deg, #10b981, #059669); border-radius:16px; padding:24px; color:white; box-shadow:0 10px 15px -3px rgba(16,185,129,0.3); position:relative; overflow:hidden;">
        <i class="bi bi-map" style="position:absolute; right:-20px; bottom:-20px; font-size:120px; opacity:0.1;"></i>
        <div style="font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; opacity:0.9; margin-bottom:8px;">Total Wilayah RT/RW</div>
        <div style="font-size:40px; font-weight:800; line-height:1;">{{ $stats['total_wilayah'] }}</div>
    </div>
    
    <div style="background:white; border-radius:16px; padding:20px; border:1px solid #e2e8f0; box-shadow:0 4px 6px -1px rgba(0,0,0,0.02);">
        <div style="display:flex; align-items:center; gap:12px; margin-bottom:16px;">
            <div style="width:40px; height:40px; border-radius:10px; background:#dcfce7; color:#16a34a; display:flex; align-items:center; justify-content:center; font-size:20px;">
                <i class="bi bi-person-check-fill"></i>
            </div>
            <div style="font-size:13px; font-weight:700; color:#64748b; text-transform:uppercase;">Mustahik Disetujui</div>
        </div>
        <div style="font-size:28px; font-weight:800; color:#0f172a;">{{ $stats['mustahik_disetujui'] }}</div>
    </div>
    
    <div style="background:white; border-radius:16px; padding:20px; border:1px solid #e2e8f0; box-shadow:0 4px 6px -1px rgba(0,0,0,0.02);">
        <div style="display:flex; align-items:center; gap:12px; margin-bottom:16px;">
            <div style="width:40px; height:40px; border-radius:10px; background:#fffbeb; color:#d97706; display:flex; align-items:center; justify-content:center; font-size:20px;">
                <i class="bi bi-person-exclamation"></i>
            </div>
            <div style="font-size:13px; font-weight:700; color:#64748b; text-transform:uppercase;">Mustahik Pending</div>
        </div>
        <div style="display:flex; align-items:baseline; justify-content:space-between;">
            <div style="font-size:28px; font-weight:800; color:#d97706;">{{ $stats['mustahik_pending'] }}</div>
            @if($stats['mustahik_pending'] > 0)
                <span class="pulse-dot" style="width:10px; height:10px; background:#ef4444; border-radius:50%; display:inline-block;"></span>
            @endif
        </div>
    </div>
    
    <div style="background:white; border-radius:16px; padding:20px; border:1px solid #e2e8f0; box-shadow:0 4px 6px -1px rgba(0,0,0,0.02);">
        <div style="display:flex; align-items:center; gap:12px; margin-bottom:16px;">
            <div style="width:40px; height:40px; border-radius:10px; background:#fee2e2; color:#ef4444; display:flex; align-items:center; justify-content:center; font-size:20px;">
                <i class="bi bi-person-x-fill"></i>
            </div>
            <div style="font-size:13px; font-weight:700; color:#64748b; text-transform:uppercase;">Mustahik Ditolak</div>
        </div>
        <div style="font-size:28px; font-weight:800; color:#ef4444;">{{ $stats['mustahik_ditolak'] }}</div>
    </div>
</div>

{{-- Baris 3: Zakat Bulan Ini & Tabel Mustahik Terbaru --}}
<div style="display:grid; grid-template-columns:1fr 2fr; gap:20px;">
    
    {{-- Zakat Panel --}}
    <div style="background:white; border-radius:16px; border:1px solid #e2e8f0; box-shadow:0 4px 6px -1px rgba(0,0,0,0.02); overflow:hidden; display:flex; flex-direction:column;">
        <div style="padding:20px 24px; border-bottom:1px solid #f1f5f9; background:#f8fafc;">
            <h3 style="font-size:15px; font-weight:800; color:#0f172a; margin:0; display:flex; align-items:center; gap:8px;">
                <i class="bi bi-cash-coin" style="color:var(--green-primary);"></i> Penerimaan Zakat Bulan Ini
            </h3>
        </div>
        <div style="padding:24px; flex:1; display:flex; flex-direction:column; gap:24px;">
            <div>
                <div style="font-size:13px; font-weight:700; color:#64748b; text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; gap:6px;">
                    <i class="bi bi-wallet2" style="color:#16a34a;"></i> Zakat Uang
                </div>
                <div style="font-size:28px; font-weight:800; color:#0f172a;">Rp {{ number_format($stats['penerimaan_uang'], 0, ',', '.') }}</div>
            </div>
            <div style="height:1px; background:#e2e8f0;"></div>
            <div>
                <div style="font-size:13px; font-weight:700; color:#64748b; text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; gap:6px;">
                    <i class="bi bi-bag-check" style="color:#d97706;"></i> Zakat Beras
                </div>
                <div style="font-size:28px; font-weight:800; color:#0f172a;">{{ number_format($stats['penerimaan_beras'], 1, ',', '.') }} <span style="font-size:16px; color:#64748b; font-weight:600;">Kg</span></div>
            </div>
        </div>
        <div style="padding:16px 24px; background:#f8fafc; border-top:1px solid #f1f5f9; text-align:center;">
            <a href="{{ url('/superadmin/laporan?masjid='.$selectedMasjidId) }}" style="font-size:13px; font-weight:700; color:var(--green-primary); text-decoration:none;">Lihat Laporan Lengkap <i class="bi bi-arrow-right"></i></a>
        </div>
    </div>

    {{-- Tabel Mustahik Terbaru --}}
    <div style="background:white; border-radius:16px; border:1px solid #e2e8f0; box-shadow:0 4px 6px -1px rgba(0,0,0,0.02); overflow:hidden;">
        <div style="padding:20px 24px; border-bottom:1px solid #f1f5f9; display:flex; justify-content:space-between; align-items:center;">
            <h3 style="font-size:15px; font-weight:800; color:#0f172a; margin:0; display:flex; align-items:center; gap:8px;">
                <i class="bi bi-hourglass-split" style="color:#d97706;"></i> Menunggu Verifikasi Amil/RT
            </h3>
            <a href="{{ url('/superadmin/verifikasi-mustahik?masjid='.$selectedMasjidId) }}" style="font-size:12px; font-weight:700; color:var(--green-primary); text-decoration:none;">Lihat Semua</a>
        </div>
        <div style="overflow-x:auto;">
            <table class="data-table" style="width:100%; min-width:600px;">
                <thead>
                    <tr>
                        <th style="padding:16px 24px; text-align:left; font-size:12px; font-weight:700; color:#64748b; border-bottom:1px solid #e2e8f0;">NAMA MUSTAHIK</th>
                        <th style="padding:16px 24px; text-align:left; font-size:12px; font-weight:700; color:#64748b; border-bottom:1px solid #e2e8f0;">KATEGORI</th>
                        <th style="padding:16px 24px; text-align:center; font-size:12px; font-weight:700; color:#64748b; border-bottom:1px solid #e2e8f0;">STATUS</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($mustahikTerbaru as $m)
                    <tr>
                        <td style="padding:16px 24px; border-bottom:1px solid #f1f5f9;">
                            <div style="font-weight:700; font-size:14px; color:#0f172a;">{{ $m->nama_mustahik }}</div>
                            <div style="font-size:12px; color:#64748b; margin-top:2px;">{{ $m->kk->wilayah->nama_wilayah ?? '-' }}</div>
                        </td>
                        <td style="padding:16px 24px; border-bottom:1px solid #f1f5f9;">
                            <span style="background:#f1f5f9; color:#475569; padding:6px 12px; border-radius:20px; font-size:12px; font-weight:600;">{{ $m->kategori_asnaf }}</span>
                        </td>
                        <td style="padding:16px 24px; text-align:center; border-bottom:1px solid #f1f5f9;">
                            <span style="background:#fffbeb; color:#d97706; padding:6px 12px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase;">Pending</span>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="3" style="text-align:center; padding:40px 24px; color:#64748b;">
                            <i class="bi bi-check2-circle" style="font-size:32px; color:#10b981; display:block; margin-bottom:12px;"></i>
                            <div style="font-weight:600; font-size:14px;">Semua mustahik sudah terverifikasi!</div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@endif

<style>
@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.pulse-dot {
    animation: pulse 2s infinite;
}
.data-table th, .data-table td {
    vertical-align: middle;
}
</style>

@endsection