@extends('layouts.admin')

@section('title', 'Dashboard')
@section('topbar_title', 'Dashboard')

@section('content')



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

    <div class="stat-card">
        <div class="stat-card-top">
            <div>
                <div class="stat-card-label">Total Amil Terdaftar</div>
                <div class="stat-card-value">{{ $totalAmil }}</div>
            </div>
            <div class="stat-card-icon" style="background:#e8f5ee; color:#1a6b3c;">
                <i class="bi bi-people-fill"></i>
            </div>
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-card-top">
            <div>
                <div class="stat-card-label">Total Wilayah/RT</div>
                <div class="stat-card-value">{{ $totalWilayah }}</div>
            </div>
            <div class="stat-card-icon" style="background:#eff6ff; color:#2563eb;">
                <i class="bi bi-building-fill"></i>
            </div>
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-card-top">
            <div>
                <div class="stat-card-label">Mustahik Terverifikasi</div>
                <div class="stat-card-value">{{ $totalMustahikDisetujui }}</div>
            </div>
            <div class="stat-card-icon" style="background:#f0fdf4; color:#16a34a;">
                <i class="bi bi-shield-check-fill"></i>
            </div>
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-card-top">
            <div>
                <div class="stat-card-label">Total Zakat Diterima</div>
                <div class="stat-card-value" style="font-size:20px;">Rp {{ number_format($totalZakatBulanIni, 0, ',', '.') }}</div>
            </div>
            <div class="stat-card-icon" style="background:#fff7ed; color:#ea580c;">
                <i class="bi bi-cash-coin"></i>
            </div>
        </div>
        <div style="font-size:11px; color: var(--text-muted);">
            <span style="background:#e8f5ee; color:#1a6b3c; padding:2px 8px; border-radius:20px; font-weight:600;">Bulan Ini</span>
        </div>
    </div>

</div>

{{-- Chart --}}
<div class="card" style="padding: 24px;">
    <div style="display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px;">
        <div>
            <div style="font-size:17px; font-weight:700; color:var(--text-dark); margin-bottom:4px;">
                Penerimaan Zakat 6 Bulan Terakhir
            </div>
            <div style="font-size:12.5px; color:var(--text-muted);">Tren grafik penerimaan zakat (Masehi &amp; Hijriah)</div>
        </div>
        <a href="{{ url('/admin/rekap-zakat') }}" class="btn-outline" style="font-size:12.5px;">
            <i class="bi bi-download"></i> Unduh Laporan
        </a>
    </div>
    <canvas id="zakatChart" style="max-height: 280px;"></canvas>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" defer></script>
<script defer>
const labels = @json($chartLabels);
const data   = @json($chartData);

const ctx = document.getElementById('zakatChart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: 'Penerimaan Zakat (Rp)',
            data: data,
            backgroundColor: 'rgba(26, 107, 60, 0.75)',
            borderRadius: 6,
            borderSkipped: false,
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: false },
            tooltip: {
                callbacks: {
                    label: ctx => 'Rp ' + ctx.parsed.y.toLocaleString('id-ID')
                }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                grid: { color: '#f0f0f0' },
                ticks: {
                    callback: v => {
                        if (v >= 1000000) return (v/1000000) + 'Jt';
                        if (v >= 1000) return (v/1000) + 'K';
                        return v;
                    },
                    font: { size: 11 }
                }
            },
            x: {
                grid: { display: false },
                ticks: { font: { size: 11 } }
            }
        }
    }
});
</script>
@endpush