@extends('layouts.app')

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

@push('styles')
<style>
    .info-box-number { font-size: 1.5rem; font-weight: bold; }
    .card-title { font-weight: 600; }
    .table-valign-middle td { vertical-align: middle; }
    .badge-soft-success { background-color: #d1e7dd; color: #0f5132; }
    .badge-soft-danger { background-color: #f8d7da; color: #842029; }
    .badge-soft-warning { background-color: #fff3cd; color: #664d03; }
</style>
@endpush

@section('content')
<div class="row mb-3">
    <div class="col-12">
        <div class="alert alert-info alert-dismissible bg-info text-white border-0 fade show shadow-sm" role="alert">
            <i class="fas fa-info-circle mr-1"></i> Selamat datang, <strong>{{ Auth::user()->name ?? 'User' }}</strong>. 
            @if($tahunAktif)
            Tahun Ajaran: <strong>{{ $tahunAktif->tahun }}</strong>
            @else
            <span class="text-warning">Belum ada Tahun Ajaran yang aktif.</span>
            @endif
            <button type="button" class="close text-white" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </div>
</div>

<!-- Summary Cards (6 Cards) -->
<div class="row">
    <div class="col-12 col-sm-6 col-md-4">
        <div class="info-box shadow-sm mb-3">
            <span class="info-box-icon bg-primary elevation-1"><i class="fas fa-users"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Total Siswa Aktif</span>
                <span class="info-box-number">{{ number_format($totalSiswa, 0, ',', '.') }} <small>Siswa</small></span>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-md-4">
        <div class="info-box shadow-sm mb-3" style="cursor: pointer;" data-toggle="modal" data-target="#modalTotalPemasukan">
            <span class="info-box-icon bg-success elevation-1"><i class="fas fa-wallet"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Total Pemasukan Per Tahun</span>
                <span class="info-box-number"><small>Rp</small> {{ number_format($totalPendapatan, 0, ',', '.') }}</span>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-md-4">
        <div class="info-box shadow-sm mb-3" style="cursor: pointer;" data-toggle="modal" data-target="#modalTagihanBelumLunas">
            <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-file-invoice"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Tagihan Belum Lunas</span>
                <span class="info-box-number">{{ number_format($tagihanBelumLunas, 0, ',', '.') }} <small>Tagihan</small></span>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-md-4">
        <div class="info-box shadow-sm mb-3">
            <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-user-times"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Siswa Menunggak</span>
                <span class="info-box-number">{{ number_format($siswaMenunggak, 0, ',', '.') }} <small>Siswa</small></span>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-md-4">
        <div class="info-box shadow-sm mb-3" style="cursor: pointer;" data-toggle="modal" data-target="#modalPembayaranHariIni">
            <span class="info-box-icon bg-purple elevation-1"><i class="fas fa-cash-register"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Pembayaran Hari Ini</span>
                <span class="info-box-number"><small>Rp</small> {{ number_format($pembayaranHariIni, 0, ',', '.') }}</span>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-md-4">
        <div class="info-box shadow-sm mb-3" style="cursor: pointer;" data-toggle="modal" data-target="#modalSisaTagihan">
            <span class="info-box-icon bg-secondary elevation-1"><i class="fas fa-money-check-alt"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Total Sisa Tagihan</span>
                <span class="info-box-number"><small>Rp</small> {{ number_format($totalSisaTagihan, 0, ',', '.') }}</span>
            </div>
        </div>
    </div>
</div>

<!-- Charts -->
<div class="row">
    <div class="col-lg-8">
        <div class="card shadow-sm">
            <div class="card-header border-0">
                <h3 class="card-title">Trend Pembayaran (6 Bulan Terakhir)</h3>
            </div>
            <div class="card-body">
                <div class="position-relative mb-4">
                    <canvas id="revenue-chart" height="250"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card shadow-sm">
            <div class="card-header border-0">
                <h3 class="card-title">Status Pembayaran</h3>
            </div>
            <div class="card-body">
                <div class="position-relative mb-4">
                    <canvas id="status-chart" height="250"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Sections: Tables -->
<div class="row">
    <div class="col-lg-6">
        <div class="card shadow-sm">
            <div class="card-header border-0">
                <h3 class="card-title">Transaksi Terbaru</h3>
                <div class="card-tools">
                    <a href="{{ route('transaksi.create') }}" class="btn btn-sm btn-primary">Lihat Semua</a>
                </div>
            </div>
            <div class="card-body table-responsive p-0">
                <table class="table table-striped table-valign-middle">
                    <thead>
                        <tr>
                            <th>Kode</th>
                            <th>Siswa</th>
                            <th>Tgl Bayar</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($transaksiTerbaru as $trx)
                        <tr>
                            <td>
                                <span class="text-muted">{{ $trx->kode_transaksi }}</span>
                            </td>
                            <td>{{ $trx->siswa->nama ?? '-' }}</td>
                            <td>{{ \Carbon\Carbon::parse($trx->tanggal_bayar)->format('d/m/Y') }}</td>
                            <td><strong>Rp {{ number_format($trx->total_bayar, 0, ',', '.') }}</strong></td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted">Belum ada transaksi</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card shadow-sm">
            <div class="card-header border-0">
                <h3 class="card-title text-danger"><i class="fas fa-exclamation-triangle mr-1"></i> Reminder Jatuh Tempo</h3>
            </div>
            <div class="card-body table-responsive p-0">
                <table class="table table-striped table-valign-middle">
                    <thead>
                        <tr>
                            <th>Siswa</th>
                            <th>Tagihan</th>
                            <th>Jatuh Tempo</th>
                            <th>Kekurangan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($reminderTagihan as $tagihan)
                        <tr>
                            <td>{{ $tagihan->siswa->nama ?? '-' }}</td>
                            <td>{{ $tagihan->tarifPembayaran->nama ?? '-' }}</td>
                            <td>
                                @php
                                    $jt = \Carbon\Carbon::parse($tagihan->tanggal_jatuh_tempo);
                                    $isPassed = $jt->isPast();
                                @endphp
                                <span class="badge {{ $isPassed ? 'badge-soft-danger' : 'badge-soft-warning' }}">
                                    {{ $jt->format('d/m/Y') }}
                                </span>
                            </td>
                            <td><strong>Rp {{ number_format($tagihan->jumlah_tagihan - $tagihan->jumlah_terbayar, 0, ',', '.') }}</strong></td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted">Tidak ada tagihan jatuh tempo terdekat</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal Detail Pemasukan -->
<div class="modal fade" id="modalTotalPemasukan" tabindex="-1" role="dialog" aria-labelledby="modalTotalPemasukanLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTotalPemasukanLabel">Rincian Total Pemasukan</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <ul class="list-group list-group-unbordered mb-3">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>Total SPP</b>
                        <span>Rp {{ isset($totalPendapatanSPP) ? number_format($totalPendapatanSPP, 0, ',', '.') : '0' }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>Total DPP</b>
                        <span>Rp {{ isset($totalPendapatanDPP) ? number_format($totalPendapatanDPP, 0, ',', '.') : '0' }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center bg-light">
                        <b class="text-success">Total Keseluruhan</b>
                        <span class="font-weight-bold text-success">Rp {{ isset($totalPendapatan) ? number_format($totalPendapatan, 0, ',', '.') : '0' }}</span>
                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Detail Pembayaran Hari Ini -->
<div class="modal fade" id="modalPembayaranHariIni" tabindex="-1" role="dialog" aria-labelledby="modalPembayaranHariIniLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalPembayaranHariIniLabel">Rincian Pembayaran Hari Ini</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <ul class="list-group list-group-unbordered mb-3">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>Pembayaran SPP</b>
                        <span>Rp {{ isset($pembayaranHariIniSPP) ? number_format($pembayaranHariIniSPP, 0, ',', '.') : '0' }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>Pembayaran DPP</b>
                        <span>Rp {{ isset($pembayaranHariIniDPP) ? number_format($pembayaranHariIniDPP, 0, ',', '.') : '0' }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center bg-light">
                        <b class="text-success">Total Keseluruhan</b>
                        <span class="font-weight-bold text-success">Rp {{ isset($pembayaranHariIni) ? number_format($pembayaranHariIni, 0, ',', '.') : '0' }}</span>
                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Detail Total Sisa Tagihan -->
<div class="modal fade" id="modalSisaTagihan" tabindex="-1" role="dialog" aria-labelledby="modalSisaTagihanLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalSisaTagihanLabel">Rincian Total Sisa Tagihan</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <ul class="list-group list-group-unbordered mb-3">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>Sisa Tagihan SPP</b>
                        <span>Rp {{ isset($totalSisaTagihanSPP) ? number_format($totalSisaTagihanSPP, 0, ',', '.') : '0' }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>Sisa Tagihan DPP</b>
                        <span>Rp {{ isset($totalSisaTagihanDPP) ? number_format($totalSisaTagihanDPP, 0, ',', '.') : '0' }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center bg-light">
                        <b class="text-secondary">Total Sisa Tagihan</b>
                        <span class="font-weight-bold text-secondary">Rp {{ isset($totalSisaTagihan) ? number_format($totalSisaTagihan, 0, ',', '.') : '0' }}</span>
                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Detail Tagihan Belum Lunas -->
<div class="modal fade" id="modalTagihanBelumLunas" tabindex="-1" role="dialog" aria-labelledby="modalTagihanBelumLunasLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTagihanBelumLunasLabel">Rincian Tagihan Belum Lunas</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <ul class="list-group list-group-unbordered mb-3">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>Tagihan Belum Lunas SPP</b>
                        <span>{{ isset($tagihanBelumLunasSPP) ? number_format($tagihanBelumLunasSPP, 0, ',', '.') : '0' }} <small>Tagihan</small></span>
                    </li>
                    <li class="list-group-item d-flex flex-column align-items-start">
                        <div class="d-flex w-100 justify-content-between">
                            <b>Tagihan Belum Lunas DPP</b>
                            <span>{{ isset($tagihanBelumLunasDPPBelumBayar) && isset($tagihanBelumLunasDPPKurang) ? number_format($tagihanBelumLunasDPPBelumBayar + $tagihanBelumLunasDPPKurang, 0, ',', '.') : '0' }} <small>Tagihan</small></span>
                        </div>
                        <div class="mt-2 text-muted small w-100">
                            <div class="d-flex justify-content-between">
                                <span>- Belum Bayar Sama Sekali:</span>
                                <span>{{ isset($tagihanBelumLunasDPPBelumBayar) ? number_format($tagihanBelumLunasDPPBelumBayar, 0, ',', '.') : '0' }} Tagihan</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span>- Kurang (Mencicil tapi belum lunas):</span>
                                <span>{{ isset($tagihanBelumLunasDPPKurang) ? number_format($tagihanBelumLunasDPPKurang, 0, ',', '.') : '0' }} Tagihan</span>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center bg-light">
                        <b class="text-warning">Total Tagihan Belum Lunas</b>
                        <span class="font-weight-bold text-warning">{{ isset($tagihanBelumLunas) ? number_format($tagihanBelumLunas, 0, ',', '.') : '0' }} <small>Tagihan</small></span>
                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(function () {
    // Data untuk Chart Revenue (Bar/Line)
    var revenueLabels = {!! json_encode($labelBulan) !!};
    var revenueData = {!! json_encode($dataPemasukan) !!};
    var revenueDataSPP = {!! json_encode($dataPemasukanSPP ?? []) !!};
    var revenueDataDPP = {!! json_encode($dataPemasukanDPP ?? []) !!};

    var revenueChartCanvas = $('#revenue-chart').get(0).getContext('2d')
    var revenueChartOptions = {
        maintainAspectRatio: false,
        responsive: true,
        plugins: {
            legend: { display: false },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        let index = context.dataIndex;
                        let total = context.parsed.y;
                        let spp = revenueDataSPP[index] || 0;
                        let dpp = revenueDataDPP[index] || 0;
                        
                        let formatRp = function(val) {
                            return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(val);
                        };
                        
                        return [
                            'Total Pendapatan: ' + formatRp(total),
                            'Pendapatan SPP: ' + formatRp(spp),
                            'Pendapatan DPP: ' + formatRp(dpp)
                        ];
                    }
                }
            }
        },
        scales: {
            x: { grid: { display: false } },
            y: { 
                grid: { borderDash: [4, 4] },
                ticks: {
                    callback: function(value, index, values) {
                        return 'Rp ' + (value / 1000000) + ' Jt';
                    }
                }
            }
        }
    }

    new Chart(revenueChartCanvas, {
        type: 'bar',
        data: {
            labels: revenueLabels,
            datasets: [{
                label: 'Pendapatan',
                backgroundColor: '#007bff',
                borderColor: '#007bff',
                borderWidth: 1,
                data: revenueData,
                borderRadius: 4
            }]
        },
        options: revenueChartOptions
    })

    // Data untuk Chart Status
    var statusLabels = {!! json_encode($chartStatus['labels']) !!};
    var statusData = {!! json_encode($chartStatus['data']) !!};
    var statusColors = {!! json_encode($chartStatus['colors']) !!};
    var statusLunasSPP    = {!! json_encode($chartStatus['lunasSPP']) !!};
    var statusLunasDPP    = {!! json_encode($chartStatus['lunasDPP']) !!};
    var statusTunggakanSPP = {!! json_encode($chartStatus['tunggakanSPP']) !!};
    var statusTunggakanDPP = {!! json_encode($chartStatus['tunggakanDPP']) !!};

    var statusChartCanvas = $('#status-chart').get(0).getContext('2d')
    new Chart(statusChartCanvas, {
        type: 'doughnut',
        data: {
            labels: statusLabels,
            datasets: [{
                data: statusData,
                backgroundColor: statusColors,
                borderWidth: 0
            }]
        },
        options: {
            maintainAspectRatio: false,
            responsive: true,
            cutout: '70%',
            plugins: {
                legend: { position: 'bottom' },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            var label = context.label || '';
                            var value = context.parsed || 0;
                            if (label === 'Lunas') {
                                return [
                                    ' Total Lunas: ' + value.toLocaleString('id-ID') + ' Tagihan',
                                    '  Lunas SPP: ' + statusLunasSPP.toLocaleString('id-ID') + ' Tagihan',
                                    '  Lunas DPP: ' + statusLunasDPP.toLocaleString('id-ID') + ' Tagihan'
                                ];
                            }
                            if (label === 'Tunggakan') {
                                return [
                                    ' Total Tunggakan: ' + value.toLocaleString('id-ID') + ' Tagihan',
                                    '  Tunggakan SPP: ' + statusTunggakanSPP.toLocaleString('id-ID') + ' Tagihan',
                                    '  Tunggakan DPP: ' + statusTunggakanDPP.toLocaleString('id-ID') + ' Tagihan'
                                ];
                            }
                            return ' ' + label + ': ' + value.toLocaleString('id-ID') + ' Tagihan';
                        }
                    }
                }
            }
        }
    })
})
</script>
@endpush