@extends('layouts.app')
@section('title', 'Dasbor')

@section('content')
<div class="row g-3 mb-3">
    <div class="col-md-6 col-xl-3">
        <div class="stat-card bg-hijau">
            <div class="d-flex justify-content-between align-items-start">
                <div><small>Penerimaan {{ $tanggal ? $tanggal->translatedFormat('d M Y') : 'Hari Ini' }}</small>
                    <div class="nilai">{{ rp($totalHari) }}</div></div>
                <i class="bi bi-calendar-day ikon"></i>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-3">
        <div class="stat-card bg-biru">
            <div class="d-flex justify-content-between align-items-start">
                <div><small>Penerimaan {{ $bulan ? $bulan->translatedFormat('F Y') : 'Bulan Ini' }}</small>
                    <div class="nilai">{{ rp($totalBulan) }}</div></div>
                <i class="bi bi-calendar-month ikon"></i>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-3">
        <div class="stat-card" style="background:linear-gradient(140deg,#5cc4b3,#3FB2A0)">
            <div class="d-flex justify-content-between align-items-start">
                <div><small>Total Penerimaan</small>
                    <div class="nilai">{{ rp($totalSemua) }}</div></div>
                <i class="bi bi-cash-stack ikon"></i>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-3">
        <div class="stat-card" style="background:linear-gradient(140deg,#89c4ec,#6FB1E4)">
            <div class="d-flex justify-content-between align-items-start">
                <div><small>Sisa Tunggakan &amp; {{ $jumlahSiswa }} Siswa</small>
                    <div class="nilai">{{ rp($sisaTunggakan) }}</div></div>
                <i class="bi bi-people ikon"></i>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">
    <div class="col-lg-8">
        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                <span><i class="bi bi-graph-up-arrow text-hijau"></i> Tren Penerimaan 12 Bulan</span>
                <form class="d-flex gap-2 flex-wrap" method="GET">
                    <input type="date" name="tanggal" value="{{ request('tanggal') }}" class="form-control form-control-sm" style="width:150px">
                    <input type="month" name="bulan" value="{{ request('bulan') }}" class="form-control form-control-sm" style="width:150px">
                    <button class="btn btn-sm btn-primary"><i class="bi bi-funnel"></i> Filter</button>
                    @if(request('tanggal') || request('bulan'))
                        <a href="{{ route('dashboard') }}" class="btn btn-sm btn-outline-primary"><i class="bi bi-x-lg"></i></a>
                    @endif
                </form>
            </div>
            <div class="card-body"><canvas id="trendChart" height="110"></canvas></div>
        </div>

        <div class="card">
            <div class="card-header"><i class="bi bi-clock-history text-hijau"></i> Transaksi Terbaru</div>
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead><tr><th>No Transaksi</th><th>Tanggal</th><th>Siswa</th><th class="text-end">Total</th><th></th></tr></thead>
                    <tbody>
                    @forelse($transaksiTerbaru as $t)
                        <tr>
                            <td class="fw-semibold">{{ $t->no_transaksi }}</td>
                            <td>{{ $t->tanggal->translatedFormat('d M Y') }}</td>
                            <td>{{ $t->student->nama ?? '-' }}<br><small class="text-muted">{{ $t->student->kelas ?? '' }}</small></td>
                            <td class="text-end fw-bold text-hijau">{{ rp($t->total) }}</td>
                            <td><a href="{{ route('payments.kwitansi', $t) }}" class="btn btn-sm btn-outline-primary"><i class="bi bi-receipt"></i></a></td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="text-center text-muted py-4">Belum ada transaksi.</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card mb-3">
            <div class="card-header"><i class="bi bi-pie-chart text-hijau"></i> Detail Penerimaan per Jenis</div>
            <div class="card-body">
                @if(count($perJenis))
                    <canvas id="jenisChart" height="180"></canvas>
                    <ul class="list-group list-group-flush mt-3">
                        @foreach($perJenis as $label => $total)
                            <li class="list-group-item d-flex justify-content-between px-0">
                                <span>{{ $label }}</span><b>{{ rp($total) }}</b>
                            </li>
                        @endforeach
                    </ul>
                @else
                    <p class="text-muted text-center py-4 mb-0">Belum ada data pada periode ini.</p>
                @endif
            </div>
        </div>
        <div class="card">
            <div class="card-header"><i class="bi bi-lightning-charge text-hijau"></i> Menu Cepat</div>
            <div class="card-body d-grid gap-2">
                <a href="{{ route('payments.create') }}" class="btn btn-primary"><i class="bi bi-cash-coin"></i> Input Pembayaran</a>
                <a href="{{ route('students.index') }}" class="btn btn-outline-primary"><i class="bi bi-people"></i> Data Siswa</a>
                <a href="{{ route('reminder.index') }}" class="btn btn-info"><i class="bi bi-whatsapp"></i> Pengingat WhatsApp</a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendor/chart.umd.min.js') }}"></script>
<script>
    const trend = @json($trend);
    new Chart(document.getElementById('trendChart'), {
        type:'line',
        data:{ labels: trend.map(t=>t.label),
            datasets:[{ label:'Penerimaan', data: trend.map(t=>t.total), fill:true,
                borderColor:'#3FB2A0', backgroundColor:'rgba(63,178,160,.12)', tension:.35, pointBackgroundColor:'#3FB2A0' }]},
        options:{ animation:false, plugins:{legend:{display:false}}, scales:{ y:{ ticks:{ callback:v=>'Rp '+v.toLocaleString('id') } } } }
    });
    @if(count($perJenis))
    new Chart(document.getElementById('jenisChart'), {
        type:'doughnut',
        data:{ labels: @json(array_keys($perJenis)),
            datasets:[{ data: @json(array_values($perJenis)), backgroundColor:['#3FB2A0','#6FB1E4','#9ad9cd'] }]},
        options:{ animation:false, plugins:{legend:{position:'bottom'}} }
    });
    @endif
</script>
@endpush