@extends('webview.saku.main')

@push('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.41.0/apexcharts.min.css">
    <style>
        /* RESET & DASAR */
        body {
            background-color: #f4f6f9;
        }

        .app-container {
            background-color: #ffffff;
            min-height: 100vh;
            max-width: 480px;
            margin: 0 auto;
            position: relative;
            overflow-x: hidden;
            font-family: 'Inter', sans-serif;
        }

        /* HEADER BIRU ANALITIK (TEMA BARU) */
        .header-gold-bg {
            background: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%);
            /* Gradasi Biru BCA/Mandiri */
            padding: 40px 20px 80px 20px;
            position: relative;
        }

        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }

        .header-title {
            color: #ffffff;
            font-size: 22px;
            font-weight: 700;
            margin: 0;
            letter-spacing: -0.5px;
        }

        /* TOMBOL FILTER KANAN ATAS */
        .btn-filter {
            background-color: #ffffff;
            color: #004B87;
            /* Teks filter jadi biru navy */
            border: none;
            border-radius: 20px;
            padding: 6px 14px;
            font-size: 13px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }

        .header-subtitle {
            color: rgba(255, 255, 255, 0.9);
            font-size: 12px;
            font-style: italic;
            margin-top: 4px;
        }

        /* KONTEN PUTIH OVERLAP */
        .content-body {
            background-color: #ffffff;
            border-radius: 30px 30px 0 0;
            margin-top: -40px;
            padding: 30px 20px 120px 20px;
            position: relative;
            z-index: 10;
            min-height: 100vh;
        }

        /* CARD STYLE UMUM */
        .analytic-card {
            background: #ffffff;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 16px;
            border: 1px solid #eef2fa;
            /* Border disesuaikan agar slightly blue */
            box-shadow: 0 4px 20px rgba(0, 75, 135, 0.05);
            /* Shadow ada sedikit tint biru */
        }

        .card-title-sm {
            font-size: 13px;
            color: #555;
            font-weight: 600;
            margin-bottom: 4px;
            text-transform: uppercase;
        }

        .card-amount-lg {
            font-size: 22px;
            font-weight: 800;
            color: #004B87;
            /* Nilai total utama pakai biru navy */
            letter-spacing: -0.5px;
            margin-bottom: 10px;
        }

        /* LIST SALDO KASBANK */
        .list-account {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .list-account:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .acc-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .acc-icon {
            width: 40px;
            height: 40px;
            background-color: #eef2fa;
            /* Icon background biru muda pucat */
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .acc-icon img {
            max-width: 60%;
            max-height: 60%;
            object-fit: contain;
        }

        .acc-info .acc-name {
            font-size: 13px;
            font-weight: 600;
            color: #333;
            margin-bottom: 2px;
        }

        .acc-info .acc-code {
            font-size: 11px;
            color: #999;
        }

        .acc-right .acc-value {
            font-size: 14px;
            font-weight: 700;
            color: #004B87;
            /* Nilai dalam list biru navy */
        }

        /* CUSTOM PROGRESS BAR */
        .stacked-bar-container {
            display: flex;
            height: 12px;
            border-radius: 6px;
            overflow: hidden;
            margin-bottom: 20px;
            gap: 2px;
        }

        .stacked-segment {
            height: 100%;
            transition: width 0.5s ease;
        }

        .legend-list {
            margin-top: 15px;
        }

        .legend-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 12px;
        }

        .legend-left {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #555;
        }

        .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        .legend-right {
            display: flex;
            gap: 15px;
        }

        .legend-val {
            font-weight: 600;
            color: #333;
            width: 60px;
            text-align: right;
        }

        .legend-pct {
            font-weight: 600;
            color: #888;
            width: 35px;
            text-align: right;
        }

        /* Offcanvas Body Tweaks */
        .offcanvas-body .form-label {
            color: #004B87 !important;
        }
    </style>
@endpush

@section('content')
    <div class="app-container">

        <div class="header-gold-bg">
            <div class="header-top">
                <h1 class="header-title">Analitik</h1>
                <button class="btn-filter" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasFilter">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" />
                    </svg>
                    Filter
                </button>
            </div>
            <div class="header-subtitle" id="teks-filter-aktif">Filter Aktif: Memuat...</div>
        </div>

        <div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasFilter" aria-labelledby="offcanvasFilterLabel"
            style="border-radius: 20px 20px 0 0; height: auto;">
            <div class="offcanvas-header pb-0">
                <h5 class="offcanvas-title" id="offcanvasFilterLabel" style="font-weight: 700; font-size: 16px;">Filter
                    Periode</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body pb-4">
                <div class="mb-3">
                    <label class="form-label" style="font-size: 12px; font-weight: 600; color: #888;">Tahun</label>
                    <select id="filter-tahun" class="form-select"
                        style="border-radius: 10px; font-weight: 600; border: 1px solid #d0def7; box-shadow:none;">
                        <option value="" disabled selected>Pilih Tahun</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="form-label" style="font-size: 12px; font-weight: 600; color: #888;">Bulan</label>
                    <select id="filter-bulan" class="form-select"
                        style="border-radius: 10px; font-weight: 600; border: 1px solid #d0def7; box-shadow:none;">
                        <option value="" disabled selected>Pilih Bulan</option>
                    </select>
                </div>
                <button type="button" class="btn w-100" id="btn-terapkan-filter" data-bs-dismiss="offcanvas"
                    style="background-color: #004B87; color: white; border-radius: 10px; font-weight: 600; padding: 12px;">Terapkan
                    Filter</button>
            </div>
        </div>

        <div class="content-body">

            <div id="loading-overlay" style="display:none; text-align:center; padding: 20px; color:#999; font-size:13px;">
                Memperbarui grafik...
            </div>

            <div class="analytic-card">
                <div class="card-title-sm">Saldo KasBank</div>
                <div class="card-amount-lg" id="val-saldo-line">Rp 0</div>
                <div id="chart-saldo-line" style="min-height: 200px;"></div>
            </div>

            <div class="analytic-card">
                <div class="card-title-sm" style="margin-bottom: 15px;">Daftar Saldo Akhir KasBank</div>
                <div id="list-saldo-akun">
                    <div style="color:#999; font-size:12px; text-align:center;">Memuat data...</div>
                </div>
            </div>

            <div class="analytic-card">
                <div class="card-title-sm">Laba bersih</div>
                <div class="card-amount-lg" id="val-laba-bar">Rp 0</div>
                <div id="chart-laba-bar" style="min-height: 180px;"></div>
            </div>

            <div class="analytic-card">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="card-title-sm mb-0">Komposisi Beban</div>
                </div>
                <div id="chart-pengeluaran-donut" class="d-flex justify-content-center"></div>
            </div>

            <div class="analytic-card">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <div class="card-title-sm mb-0">Komposisi Pendapatan</div>
                </div>
                <div class="card-amount-lg" style="font-size: 18px;" id="val-penerimaan-stack">Rp 0</div>

                <div class="stacked-bar-container mt-3" id="penerimaan-bar-container"></div>
                <div class="legend-list" id="penerimaan-legend-container"></div>
            </div>

        </div>
    </div>
@endsection

@push('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.41.0/apexcharts.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            // --- 1. SETUP & UTILS ---
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                xhrFields: {
                    withCredentials: true // <--- HANYA TAMBAH BARIS INI
                }
            });

            function formatRupiah(angka) {
                let value = parseFloat(angka || 0);
                return new Intl.NumberFormat('id-ID', {
                    minimumFractionDigits: 0
                }).format(value);
            }

            function formatShort(angka) {
                if (angka >= 1000000000) return (angka / 1000000000).toFixed(2) + ' M';
                if (angka >= 1000000) return (angka / 1000000).toFixed(2) + ' Jt';
                return formatRupiah(angka);
            }

            // --- 2. INISIALISASI CHART KOSONG ---
            var chartSaldo, chartLaba, chartDonut;

            function initCharts() {
                // A. Line Chart
                chartSaldo = new ApexCharts(document.querySelector("#chart-saldo-line"), {
                    series: [{
                        name: 'Saldo',
                        data: []
                    }],
                    chart: {
                        type: 'area',
                        height: 220,
                        toolbar: {
                            show: false
                        }
                    },
                    colors: ['#1976d2'],
                    /* Warna garis biru cerah */
                    dataLabels: {
                        enabled: false
                    },
                    stroke: {
                        curve: 'smooth',
                        width: 3
                    },
                    /* Line sedikit lebih tebal */
                    fill: {
                        type: 'gradient',
                        gradient: {
                            shadeIntensity: 1,
                            opacityFrom: 0.5,
                            /* Opacity gradient sedikit dinaikkan */
                            opacityTo: 0.0,
                            stops: [0, 90, 100]
                        }
                    },
                    xaxis: {
                        categories: [],
                        labels: {
                            style: {
                                colors: '#999',
                                fontSize: '10px'
                            }
                        },
                        axisBorder: {
                            show: false
                        },
                        axisTicks: {
                            show: false
                        }
                    },
                    yaxis: {
                        show: false
                    },
                    grid: {
                        borderColor: '#f0f0f0',
                        strokeDashArray: 4,
                        xaxis: {
                            lines: {
                                show: true
                            }
                        },
                        yaxis: {
                            lines: {
                                show: false
                            }
                        }
                    }
                });
                chartSaldo.render();

                // B. Bar Chart
                chartLaba = new ApexCharts(document.querySelector("#chart-laba-bar"), {
                    series: [],
                    chart: {
                        type: 'bar',
                        height: 200,
                        toolbar: {
                            show: false
                        }
                    },
                    // Warna Bar Chart: Pendapatan (Biru BCA), Beban (Merah Pucat/Orange)
                    colors: ['#1976d2', '#FF8A65'],
                    plotOptions: {
                        bar: {
                            horizontal: false,
                            columnWidth: '40%',
                            borderRadius: 4,
                            borderRadiusApplication: 'end'
                        }
                    },
                    dataLabels: {
                        enabled: false
                    },
                    stroke: {
                        show: true,
                        width: 2,
                        colors: ['transparent']
                    },
                    xaxis: {
                        categories: [],
                        labels: {
                            style: {
                                colors: '#999',
                                fontSize: '10px'
                            }
                        },
                        axisBorder: {
                            show: false
                        },
                        axisTicks: {
                            show: false
                        }
                    },
                    yaxis: {
                        show: false
                    },
                    grid: {
                        show: false
                    },
                    legend: {
                        position: 'bottom',
                        markers: {
                            radius: 12
                        },
                        itemMargin: {
                            horizontal: 10,
                            vertical: 0
                        }
                    }
                });
                chartLaba.render();

                // C. Donut Chart (Komposisi Beban)
                chartDonut = new ApexCharts(document.querySelector("#chart-pengeluaran-donut"), {
                    series: [],
                    chart: {
                        type: 'donut',
                        height: 230
                    },
                    labels: [],
                    // Gradasi Biru yang cantik untuk Chart Pie/Donut
                    colors: ['#003D79', '#1976d2', '#42a5f5', '#90caf9', '#e3f2fd'],
                    plotOptions: {
                        pie: {
                            donut: {
                                size: '70%',
                                labels: {
                                    show: true,
                                    name: {
                                        show: false
                                    },
                                    value: {
                                        show: true,
                                        fontSize: '16px',
                                        fontWeight: 700,
                                        color: '#004B87'
                                    },
                                    total: {
                                        show: true,
                                        showAlways: true,
                                        label: 'Total',
                                        fontSize: '10px',
                                        color: '#999'
                                    }
                                }
                            }
                        }
                    },
                    dataLabels: {
                        enabled: false
                    },
                    legend: {
                        show: true,
                        position: 'right',
                        offsetY: 0,
                        itemMargin: {
                            vertical: 6
                        },
                        fontSize: '10px',
                        formatter: function(seriesName, opts) {
                            if (seriesName.length > 16) {
                                return seriesName.substring(0, 16) + '...';
                            }
                            return seriesName;
                        }
                    },
                    stroke: {
                        width: 0
                    }
                });
                chartDonut.render();
            }
            initCharts();


            // --- 3. FILTER LOGIC (Tahun & Bulan) ---
            const $filterTahun = $('#filter-tahun');
            const $filterBulan = $('#filter-bulan');

            // FUNGSI UNTUK MENGUBAH TEKS SUBTITLE DAN MELOAD DATA
            function checkAndLoadData() {
                let tahun = $filterTahun.val();
                let bulan = $filterBulan.val();

                if (tahun && bulan) {
                    // Update teks subtitle di bawah tulisan Analitik
                    let namaBulan = $('#filter-bulan option:selected').text();
                    let namaTahun = $('#filter-tahun option:selected').text();
                    $('#teks-filter-aktif').text('Filter Aktif: Periode ' + namaBulan + ' ' + namaTahun);

                    // Panggil API
                    loadAnalitikData(tahun, bulan);
                }
            }

            // EVENT KLIK TOMBOL TERAPKAN FILTER DI BOTTOM SHEET
            $('#btn-terapkan-filter').click(function() {
                checkAndLoadData();

                // Tutup Bottom Sheet setelah diklik
                var offcanvasElement = document.getElementById('offcanvasFilter');
                var offcanvas = bootstrap.Offcanvas.getInstance(offcanvasElement);
                if (offcanvas) {
                    offcanvas.hide();
                }
            });

            // Load Tahun (Ganti route saku-mobile sesuai API Anda)
            $.ajax({
                url: "{{ route('saku-mobile.data.filter-tahun') }}",
                type: 'GET',
                success: function(res) {
                    if (res.status && res.data.length > 0) {
                        $filterTahun.empty();
                        let currentYear = new Date().getFullYear().toString();
                        let selectedYear = "";
                        res.data.forEach(item => {
                            $filterTahun.append(
                                `<option value="${item.tahun}">${item.tahun}</option>`);
                            if (item.tahun == currentYear) selectedYear = item.tahun;
                        });
                        if (selectedYear === "") selectedYear = res.data[0].tahun;
                        $filterTahun.val(selectedYear);
                        checkAndLoadData();
                    }
                }
            });

            // Load Bulan
            $.ajax({
                url: "{{ route('saku-mobile.data.filter-bulan') }}",
                type: 'GET',
                success: function(res) {
                    if (res.status && res.data.length > 0) {
                        $filterBulan.empty();
                        let currentMonthInt = new Date().getMonth() + 1;
                        let selectedValue = "";
                        res.data.forEach(item => {
                            $filterBulan.append(
                                `<option value="${item.bulan}">${item.nama_bulan}</option>`);
                            if (parseInt(item.bulan) == currentMonthInt) selectedValue = item
                                .bulan;
                        });
                        if (selectedValue === "") selectedValue = res.data[0].bulan;
                        $filterBulan.val(selectedValue);
                        checkAndLoadData();
                    }
                }
            });

            $filterTahun.change(function() {
                checkAndLoadData();
            });
            $filterBulan.change(function() {
                checkAndLoadData();
            });


            // --- 4. FETCH DATA & UPDATE CHARTS ---
            function loadAnalitikData(tahun, bulan) {
                $('#loading-overlay').show();
                let periode = tahun + bulan;

                $.ajax({
                    // PASTIKAN ROUTE INI MENGARAH KE CONTROLLER BARU ANDA
                    url: "{{ route('saku-mobile.data.analitik') }}",
                    type: 'POST',
                    data: {
                        periode: periode
                    },
                    success: function(res) {
                        $('#loading-overlay').hide();
                        if (res.status && res.data) {
                            let d = res.data;

                            // 1. Update Saldo Line
                            if (d.saldo_line) {
                                $('#val-saldo-line').text(formatRupiah(d.saldo_line.total));
                                chartSaldo.updateOptions({
                                    xaxis: {
                                        categories: d.saldo_line.kategori
                                    }
                                });
                                chartSaldo.updateSeries([{
                                    data: d.saldo_line.data
                                }]);
                            }

                            // 2. Update Daftar Akun
                            if (d.daftar_akun) {
                                let htmlAkun = '';
                                d.daftar_akun.forEach(akun => {
                                    htmlAkun += `
                                    <div class="list-account">
                                        <div class="acc-left">
                                            <div class="acc-icon" style="background-color: #eef2fa;">
                                                <img src="{{ asset('asset-webview/saku/icons/dompet.png') }}">
                                            </div>
                                            <div class="acc-info">
                                                <div class="acc-name">${akun.nama}</div>
                                                <div class="acc-code">${akun.kode}</div>
                                            </div>
                                        </div>
                                        <div class="acc-right"><div class="acc-value">${formatShort(akun.nilai)}</div></div>
                                    </div>`;
                                });
                                $('#list-saldo-akun').html(htmlAkun);
                            }

                            // 3. Update Laba Bar
                            if (d.laba_bar) {
                                $('#val-laba-bar').text(formatRupiah(d.laba_bar.total_laba));
                                chartLaba.updateOptions({
                                    xaxis: {
                                        categories: d.laba_bar.kategori
                                    }
                                });
                                chartLaba.updateSeries([{
                                        name: 'Pendapatan',
                                        data: d.laba_bar.pendapatan
                                    },
                                    {
                                        name: 'Beban',
                                        data: d.laba_bar.beban
                                    }
                                ]);
                            }

                            // 4. Update Donut Pengeluaran
                            if (d.pengeluaran_donut) {
                                chartDonut.updateOptions({
                                    labels: d.pengeluaran_donut.label,
                                    plotOptions: {
                                        pie: {
                                            donut: {
                                                labels: {
                                                    total: {
                                                        formatter: function(w) {
                                                            return d.pengeluaran_donut
                                                                .total_teks;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                });
                                chartDonut.updateSeries(d.pengeluaran_donut.data);
                            }

                            // 5. Update Stacked Bar Penerimaan
                            if (d.penerimaan_stack) {
                                $('#val-penerimaan-stack').text('Rp ' + formatRupiah(d.penerimaan_stack
                                    .total));
                                let htmlBar = '',
                                    htmlLegend = '';

                                d.penerimaan_stack.detail.forEach(st => {
                                    // Bikin bar warna
                                    htmlBar +=
                                        `<div class="stacked-segment" style="width: ${st.persen}%; background-color: ${st.warna};"></div>`;

                                    // Bikin text legend bawahnya
                                    htmlLegend += `
                                    <div class="legend-item">
                                        <div class="legend-left"><div class="dot" style="background:${st.warna};"></div> ${st.nama}</div>
                                        <div class="legend-right"><span class="legend-val">${formatShort(st.nilai)}</span><span class="legend-pct">${st.persen}%</span></div>
                                    </div>`;
                                });

                                $('#penerimaan-bar-container').html(htmlBar);
                                $('#penerimaan-legend-container').html(htmlLegend);
                            }
                        }
                    },
                    error: function() {
                        $('#loading-overlay').text('Gagal memuat data').show();
                    }
                });
            }

        });
    </script>
@endpush