@extends('layouts.app')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')
@section('breadcrumb', 'Beranda / Dashboard')

@push('styles')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
@endpush

@section('content')

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

    <div class="stat-card">
        <div class="stat-icon" style="background:#e8f5f1; color:#1e6f5c;">
            <i class="fa-solid fa-child-reaching"></i>
        </div>
        <div class="stat-info">
            <div class="label">Total Anak Yatim Piatu</div>
            <div class="value">{{ $totalAnak }}</div>
            <div class="sub">terdaftar</div>
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-icon" style="background:#fef9c3; color:#854d0e;">
            <i class="fa-solid fa-qrcode"></i>
        </div>
        <div class="stat-info">
            <div class="label">Hadir Hari Ini</div>
            <div class="value">{{ $hadirHariIni }}</div>
            <div class="sub">dari {{ $totalAnak }} anak</div>
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-icon" style="background:#d1fae5; color:#065f46;">
            <i class="fa-solid fa-arrow-trend-up"></i>
        </div>
        <div class="stat-info" style="min-width:0; overflow:hidden;">
            <div class="label">Total Pemasukan</div>
            <div class="value" style="font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                Rp {{ number_format($totalPemasukan, 0, ',', '.') }}
            </div>
            <div class="sub">dari {{ $totalDonatur }} donatur</div>
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-icon" style="background:#fee2e2; color:#991b1b;">
            <i class="fa-solid fa-arrow-trend-down"></i>
        </div>
        <div class="stat-info" style="min-width:0; overflow:hidden;">
            <div class="label">Total Pengeluaran</div>
            <div class="value" style="font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                Rp {{ number_format($totalPengeluaran, 0, ',', '.') }}
            </div>
            <div class="sub">&nbsp;</div>
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-icon" style="background:#dbeafe; color:#1e40af;">
            <i class="fa-solid fa-wallet"></i>
        </div>
        <div class="stat-info" style="min-width:0; overflow:hidden;">
            <div class="label">Saldo</div>
            <div class="value" style="font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:{{ $saldo >= 0 ? '#065f46' : '#991b1b' }};">
                Rp {{ number_format($saldo, 0, ',', '.') }}
            </div>
            <div class="sub">{{ $saldo >= 0 ? 'surplus' : 'defisit' }}</div>
        </div>
    </div>

</div>

{{-- Row 2: Chart + Hari Ini --}}
<div style="display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-bottom:20px;">

    {{-- Chart Keuangan --}}
    <div class="card">
        <div class="card-header">
            <i class="fa-solid fa-chart-bar" style="color:#1e6f5c;"></i>
            <span class="card-title">Pemasukan vs Pengeluaran (6 Bulan Terakhir)</span>
        </div>
        <div class="card-body">
            <canvas id="chartKeuangan" height="90"></canvas>
        </div>
    </div>

    {{-- Kehadiran Hari Ini --}}
    <div class="card">
        <div class="card-header">
            <i class="fa-solid fa-calendar-check" style="color:#1e6f5c;"></i>
            <span class="card-title">Scan Hari Ini</span>
            <span class="badge badge-green">{{ $hadirHariIni }} hadir</span>
        </div>
        <div class="card-body" style="padding:0;">
            @if($scanHariIni->isEmpty())
                <div style="text-align:center; padding:32px 16px; color:#9db8ac;">
                    <i class="fa-solid fa-circle-xmark" style="font-size:32px; margin-bottom:8px; display:block;"></i>
                    Belum ada scan hari ini
                </div>
            @else
                <div style="max-height:280px; overflow-y:auto;">
                    @foreach($scanHariIni as $scan)
                    <div style="padding:10px 18px; border-bottom:1px solid #f0f5f2; display:flex; align-items:center; gap:10px;">
                        <div style="width:34px; height:34px; border-radius:50%; background:#e8f5f1; display:grid; place-items:center; font-size:13px; font-weight:700; color:#1e6f5c; flex-shrink:0;">
                            {{ strtoupper(substr($scan->anakYatim->nama, 0, 1)) }}
                        </div>
                        <div style="flex:1; min-width:0;">
                            <div style="font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ $scan->anakYatim->nama }}</div>
                            <div style="font-size:11px; color:#7aaa94;">{{ $scan->scanned_at->format('H:i') }} — {{ $scan->anakYatim->mushola }}</div>
                        </div>
                        <span class="badge badge-green"><i class="fa-solid fa-check"></i></span>
                    </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>

</div>

{{-- Row 3: Anak Yatim + Donatur Terbaru --}}
<div style="display:grid; grid-template-columns:1fr 1fr; gap:20px;">

    {{-- Anak Yatim Terbaru --}}
    <div class="card">
        <div class="card-header">
            <i class="fa-solid fa-child-reaching" style="color:#1e6f5c;"></i>
            <span class="card-title">Anak Yatim Terbaru</span>
            <a href="{{ route('anak-yatim.index') }}" class="btn btn-outline btn-sm">Lihat Semua</a>
        </div>
        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Kode</th>
                        <th>Nama</th>
                        <th>Mushola</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($anakTerbaru as $anak)
                    <tr>
                        <td><span class="badge badge-blue">{{ $anak->kode }}</span></td>
                        <td style="font-weight:500;">{{ $anak->nama }}</td>
                        <td style="color:#6b8f7e; font-size:12px;">{{ Str::limit($anak->mushola, 25) }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="3" style="text-align:center; color:#9db8ac; padding:24px;">Belum ada data</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Donatur Terbaru --}}
    <div class="card">
        <div class="card-header">
            <i class="fa-solid fa-hand-holding-heart" style="color:#1e6f5c;"></i>
            <span class="card-title">Donatur Terbaru</span>
            <a href="{{ route('donatur.index') }}" class="btn btn-outline btn-sm">Lihat Semua</a>
        </div>
        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Nama</th>
                        <th>Jumlah</th>
                        <th>Tanggal</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($donaturTerbaru as $donatur)
                    <tr>
                        <td style="font-weight:500;">{{ $donatur->nama }}</td>
                        <td style="color:#065f46; font-weight:600;">Rp {{ number_format($donatur->jumlah, 0, ',', '.') }}</td>
                        <td style="color:#6b8f7e; font-size:12px;">{{ \Carbon\Carbon::parse($donatur->tanggal)->format('d M Y') }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="3" style="text-align:center; color:#9db8ac; padding:24px;">Belum ada data</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script>
const labels = @json($chartLabels);
const pemasukan = @json($chartPemasukan);
const pengeluaran = @json($chartPengeluaran);

const ctx = document.getElementById('chartKeuangan').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels,
        datasets: [
            {
                label: 'Pemasukan',
                data: pemasukan,
                backgroundColor: 'rgba(30, 111, 92, 0.75)',
                borderRadius: 6,
            },
            {
                label: 'Pengeluaran',
                data: pengeluaran,
                backgroundColor: 'rgba(220, 38, 38, 0.65)',
                borderRadius: 6,
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { position: 'bottom', labels: { font: { family: 'Plus Jakarta Sans', size: 12 } } },
            tooltip: {
                callbacks: {
                    label: ctx => 'Rp ' + ctx.parsed.y.toLocaleString('id-ID')
                }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: v => 'Rp ' + (v/1000000).toFixed(1) + 'jt',
                    font: { family: 'Plus Jakarta Sans', size: 11 }
                },
                grid: { color: 'rgba(0,0,0,.05)' }
            },
            x: {
                ticks: { font: { family: 'Plus Jakarta Sans', size: 11 } },
                grid: { display: false }
            }
        }
    }
});
</script>
@endpush