@extends('adminlte::page')

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

@section('content_header')
    <div class="d-flex justify-content-between align-items-center pt-3 pb-2">
        <div>
            <h1 class="text-royal font-weight-bold mb-1" style="font-size: 1.5rem;">Dashboard Syahriah</h1>
            <p class="text-muted mb-0" style="font-weight: 500;">Overview keuangan pesantren & tagihan santri.</p>
        </div>
        <div>
            {{-- Tombol Filter (Opsional) --}}
            <button class="btn btn-light text-royal shadow-sm rounded-pill font-weight-bold px-3 mr-2">
                <i class="fas fa-filter mr-2"></i> Filter
            </button>

            {{-- [PENTING] Tombol ini sekarang Link (GET), bukan Form (POST) --}}
            {{-- Mengarah ke route: pesantren.keuangan.tagihan.create --}}
            <a href="{{ route('pesantren.keuangan.tagihan.create') }}" class="btn btn-royal rounded-pill font-weight-bold shadow-md px-4 hover-lift">
                <i class="fas fa-magic mr-2"></i> Generate Tagihan
            </a>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid pb-5 px-0">
    
    <div class="row">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="apex-card bg-gradient-green text-white h-100 overflow-hidden position-relative">
                <div class="card-body position-relative z-1">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <p class="text-white-50 text-uppercase font-weight-bold ls-1 mb-1" style="font-size: 0.7rem;">Pemasukan Bulan Ini</p>
                            {{-- Menggunakan Null Coalescing (?? 0) agar tidak error jika variabel belum dikirim controller --}}
                            <h3 class="font-weight-bold mb-0">Rp {{ number_format($pemasukan ?? 0, 0, ',', '.') }}</h3>
                        </div>
                        <div class="icon-circle bg-white-20 text-white">
                            <i class="fas fa-arrow-down"></i>
                        </div>
                    </div>
                    <span class="badge bg-white-20 rounded-pill px-2 font-weight-normal text-xs">
                        <i class="fas fa-check-circle mr-1"></i> Terverifikasi
                    </span>
                </div>
                <svg class="wave-shape" viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg">
                    <path fill="rgba(255,255,255,0.2)" d="M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,224C672,245,768,267,864,250.7C960,235,1056,181,1152,165.3C1248,149,1344,171,1392,181.3L1440,192V320H0Z"></path>
                </svg>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="apex-card bg-gradient-orange text-white h-100 overflow-hidden position-relative">
                <div class="card-body position-relative z-1">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <p class="text-white-50 text-uppercase font-weight-bold ls-1 mb-1" style="font-size: 0.7rem;">Total Tunggakan</p>
                            <h3 class="font-weight-bold mb-0">Rp {{ number_format($tunggakan ?? 0, 0, ',', '.') }}</h3>
                        </div>
                        <div class="icon-circle bg-white-20 text-white">
                            <i class="fas fa-exclamation-triangle"></i>
                        </div>
                    </div>
                    <span class="badge bg-white-20 rounded-pill px-2 font-weight-normal text-xs">
                        Perlu Penagihan
                    </span>
                </div>
                <svg class="wave-shape" viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg">
                    <path fill="rgba(255,255,255,0.2)" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,122.7C960,117,1056,171,1152,197.3C1248,224,1344,224,1392,224L1440,224V320H0Z"></path>
                </svg>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="apex-card bg-gradient-teal text-white h-100 overflow-hidden position-relative">
                <div class="card-body position-relative z-1">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <p class="text-white-50 text-uppercase font-weight-bold ls-1 mb-1" style="font-size: 0.7rem;">Dana Tabungan</p>
                            <h3 class="font-weight-bold mb-0">Lihat Data</h3>
                        </div>
                        <div class="icon-circle bg-white-20 text-white">
                            <i class="fas fa-wallet"></i>
                        </div>
                    </div>
                    {{-- Link ke Tabungan --}}
                    <a href="{{ route('pesantren.tabungan.index') }}" class="badge bg-white-20 rounded-pill px-2 font-weight-normal text-xs text-white text-decoration-none hover-lift">
                        Buka Tabungan <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>
                <svg class="wave-shape" viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg">
                    <path fill="rgba(255,255,255,0.2)" d="M0,192L48,170.7C96,149,192,107,288,112C384,117,480,171,576,197.3C672,224,768,224,864,202.7C960,181,1056,139,1152,122.7C1248,107,1344,117,1392,122.7L1440,128V320H0Z"></path>
                </svg>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="apex-card bg-gradient-pink text-white h-100 overflow-hidden position-relative">
                <div class="card-body position-relative z-1">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <p class="text-white-50 text-uppercase font-weight-bold ls-1 mb-1" style="font-size: 0.7rem;">Master Biaya</p>
                            <h3 class="font-weight-bold mb-0">Kelola Pos</h3>
                        </div>
                        <div class="icon-circle bg-white-20 text-white">
                            <i class="fas fa-tags"></i>
                        </div>
                    </div>
                    {{-- Link ke Jenis Pembayaran --}}
                    <a href="{{ route('pesantren.keuangan.jenis.index') }}" class="badge bg-white-20 rounded-pill px-2 font-weight-normal text-xs text-white text-decoration-none hover-lift">
                        Atur Syahriah <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>
                <svg class="wave-shape" viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg">
                    <path fill="rgba(255,255,255,0.2)" d="M0,160L48,176C96,192,192,224,288,213.3C384,203,480,149,576,122.7C672,96,768,96,864,112C960,128,1056,160,1152,165.3C1248,171,1344,149,1392,138.7L1440,128V320H0Z"></path>
                </svg>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8 mb-4">
            <div class="apex-card bg-white h-100 p-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="font-weight-bold text-dark mb-0">Analisis Keuangan</h5>
                    <div>
                        <span class="badge badge-light text-muted mr-2"><i class="fas fa-circle text-success" style="font-size: 8px;"></i> Masuk</span>
                        <span class="badge badge-light text-muted"><i class="fas fa-circle text-danger" style="font-size: 8px;"></i> Keluar</span>
                    </div>
                </div>
                <div id="financeChart" style="height: 350px;"></div>
            </div>
        </div>

        <div class="col-lg-4 mb-4">
            <div class="apex-card bg-white h-100">
                <div class="card-header border-0 bg-transparent py-4 px-4">
                    <h5 class="font-weight-bold text-dark mb-0">Aksi Cepat</h5>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        {{-- Link ke Tambah Pos --}}
                        <a href="{{ route('pesantren.keuangan.jenis.index') }}" class="list-group-item list-group-item-action d-flex align-items-center py-3 border-light">
                            <div class="icon-circle bg-soft-royal text-royal mr-3">
                                <i class="fas fa-plus"></i>
                            </div>
                            <div>
                                <h6 class="font-weight-bold text-dark mb-0">Tambah Pos Biaya</h6>
                                <small class="text-muted">Buat tagihan baru (ex: Kitab)</small>
                            </div>
                        </a>
                        {{-- Link ke Tabungan --}}
                        <a href="{{ route('pesantren.tabungan.index') }}" class="list-group-item list-group-item-action d-flex align-items-center py-3 border-light">
                            <div class="icon-circle bg-soft-success text-success mr-3">
                                <i class="fas fa-hand-holding-usd"></i>
                            </div>
                            <div>
                                <h6 class="font-weight-bold text-dark mb-0">Transaksi Tabungan</h6>
                                <small class="text-muted">Setor atau tarik uang saku</small>
                            </div>
                        </a>
                        {{-- Tombol Dummy Laporan (Bisa diarahkan nanti) --}}
                        <a href="#" class="list-group-item list-group-item-action d-flex align-items-center py-3 border-light">
                            <div class="icon-circle bg-soft-info text-info mr-3">
                                <i class="fas fa-print"></i>
                            </div>
                            <div>
                                <h6 class="font-weight-bold text-dark mb-0">Laporan Keuangan</h6>
                                <small class="text-muted">Cetak rekapitulasi bulanan</small>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@stop

@section('css')
<style>
    /* --- APEX MODERN VARIABLES --- */
    :root {
        --royal: #5B247A;
        --bg-canvas: #F5F8FA;
        --soft-royal: rgba(91, 36, 122, 0.1);
        --soft-success: #E8FFF3;
        --soft-info: #EEE5FF;
    }
    
    body { background-color: var(--bg-canvas) !important; font-family: 'Poppins', sans-serif; }
    .content-wrapper { background-color: var(--bg-canvas) !important; }
    .text-royal { color: var(--royal) !important; }
    .bg-soft-royal { background-color: var(--soft-royal); }
    .bg-soft-success { background-color: var(--soft-success); color: #1BC5BD; }
    .bg-soft-info { background-color: var(--soft-info); color: #8950FC; }
    .bg-white-20 { background-color: rgba(255,255,255,0.2); }

    /* GRADIENTS */
    .bg-gradient-green { background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%); }
    .bg-gradient-orange { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); }
    .bg-gradient-teal { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
    .bg-gradient-pink { background: linear-gradient(135deg, #EF4765 0%, #FF9A9E 100%); }

    /* CARDS */
    .apex-card {
        border: none; border-radius: 20px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        background: #fff; transition: transform 0.3s;
    }
    .apex-card:hover { transform: translateY(-5px); }

    /* BUTTONS & ICONS */
    .btn-royal { background-color: var(--royal); color: white; border: none; }
    .btn-royal:hover { background-color: #4a1d63; color: white; }
    .hover-lift:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    .icon-circle { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
    
    /* UTILS */
    .ls-1 { letter-spacing: 0.5px; }
    .wave-shape { position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; opacity: 0.6; pointer-events: none; }
    .z-1 { z-index: 1; }
    .border-light { border-color: #f3f6f9 !important; }
</style>
@stop
@section('js')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
    // Ambil data dari Controller & ubah ke format JSON
    var dataPemasukan = @json($pemasukanChart);
    var dataPengeluaran = @json($pengeluaranChart);
    var labelBulan = @json($bulanLabel);

    var options = {
        series: [{
            name: 'Pemasukan',
            data: dataPemasukan // Data Real
        }, {
            name: 'Pengeluaran',
            data: dataPengeluaran // Data Real (Saat ini 0)
        }],
        chart: {
            height: 350,
            type: 'area',
            toolbar: { show: false },
            fontFamily: 'Poppins, sans-serif'
        },
        dataLabels: { enabled: false },
        stroke: { curve: 'smooth', width: 3 },
        colors: ['#00b09b', '#EF4765'], 
        fill: {
            type: 'gradient',
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.7,
                opacityTo: 0.9,
                stops: [0, 90, 100]
            }
        },
        grid: { borderColor: '#f1f1f1', strokeDashArray: 4 },
        xaxis: { 
            categories: labelBulan, // Jan, Feb, Mar... dinamis
        },
        tooltip: { 
            theme: 'light',
            y: {
                formatter: function (val) {
                    // Format angka ke Rupiah di tooltip
                    return "Rp " + new Intl.NumberFormat('id-ID').format(val);
                }
            }
        }
    };

    var chart = new ApexCharts(document.querySelector("#financeChart"), options);
    chart.render();
</script>
@stop