@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-color: #1976d2;
            background-image:
                url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgba(255, 255, 255, 0.12)' d='M0,160L80,144C160,128,320,96,480,112C640,128,800,192,960,192C1120,192,1280,128,1360,96L1440,64L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z'/%3E%3Cpath fill='rgba(255, 255, 255, 0.05)' d='M0,256L80,240C160,224,320,192,480,186.7C640,181,800,203,960,208C1120,213,1280,203,1360,197.3L1440,192L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z'/%3E%3C/svg%3E"),
                linear-gradient(140deg, #42a5f5 0%, #1976d2 100%);
            background-size: cover, cover;
            background-position: center top, center;
            background-repeat: no-repeat, no-repeat;
            padding: 40px 20px 80px 20px;
            position: relative;
            z-index: 1;
        }

        .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;
            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;
            box-shadow: 0 4px 20px rgba(0, 75, 135, 0.05);
        }

        .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;
            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;
            flex: 1;
            /* Mencegah overflow */
            overflow: hidden;
        }

        .acc-icon {
            width: 40px;
            height: 40px;
            background-color: #eef2fa;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

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

        .acc-info {
            overflow: hidden;
        }

        .acc-info .acc-name {
            font-size: 13px;
            font-weight: 600;
            color: #333;
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

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

        .acc-right {
            flex-shrink: 0;
            margin-left: 10px;
        }

        .acc-right .acc-value {
            font-size: 14px;
            font-weight: 700;
            color: #004B87;
        }

        .acc-right .acc-value.text-danger {
            color: #EF4444 !important;
            /* Warna merah jika minus */
        }

        /* CUSTOM PROGRESS BAR (STACKED 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;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 60%;
        }

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

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

        .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-2">
                    <div class="card-title-sm mb-0">Komposisi Beban</div>
                </div>
                <div class="card-amount-lg" style="font-size: 18px; color: #EF4444;" id="val-pengeluaran-stack">Rp 0</div>

                <div class="stacked-bar-container mt-3" id="pengeluaran-bar-container"></div>
                <div class="legend-list" id="pengeluaran-legend-container"></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(Math.abs(value)); // Absolut digunakan agar minusnya bisa di-handle custom
            }

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

            // Warna Custom untuk Stacked Bar Beban
            const redColors = ['#dc2626', '#ef4444', '#f87171', '#fca5a5', '#fecaca', '#fee2e2'];

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

            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'],
                    dataLabels: {
                        enabled: false
                    },
                    stroke: {
                        curve: 'smooth',
                        width: 3
                    },
                    fill: {
                        type: 'gradient',
                        gradient: {
                            shadeIntensity: 1,
                            opacityFrom: 0.5,
                            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
                            }
                        }
                    },

                    // Format angka pop-up (tooltip) menjadi Rupiah bulat
                    tooltip: {
                        y: {
                            formatter: function(val) {
                                return "Rp " + formatRupiah(val);
                            }
                        }
                    }
                });
                chartSaldo.render();

                // B. Bar Chart
                chartLaba = new ApexCharts(document.querySelector("#chart-laba-bar"), {
                    series: [],
                    chart: {
                        type: 'bar',
                        height: 200,
                        toolbar: {
                            show: false
                        }
                    },
                    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
                        }
                    },

                    // Format angka pop-up Laba Rugi
                    tooltip: {
                        y: {
                            formatter: function(val) {
                                return "Rp " + formatRupiah(val);
                            }
                        }
                    }
                });
                chartLaba.render();
            }
            initCharts();

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

            function checkAndLoadData() {
                let tahun = $filterTahun.val();
                let bulan = $filterBulan.val();

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

                    loadAnalitikData(tahun, bulan);
                }
            }

            $('#btn-terapkan-filter').click(function() {
                checkAndLoadData();
                var offcanvasElement = document.getElementById('offcanvasFilter');
                var offcanvas = bootstrap.Offcanvas.getInstance(offcanvasElement);
                if (offcanvas) offcanvas.hide();
            });

            // Load Tahun 
            $.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({
                    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('Rp ' + 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 => {

                                    // Pengecekan Minus untuk Daftar Saldo KasBank
                                    let isMinus = parseFloat(akun.nilai) < 0;
                                    let tandaMinus = isMinus ? '-' : '';
                                    let colorClass = isMinus ? 'text-danger' : '';

                                    htmlAkun += `
                                    <div class="list-account">
                                        <div class="acc-left">
                                            <div class="acc-icon"><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 ${colorClass}">${tandaMinus}Rp ${formatRupiah(akun.nilai)}</div>
                                        </div>
                                    </div>`;
                                });
                                $('#list-saldo-akun').html(htmlAkun);
                            }

                            // 3. Update Laba Bar
                            if (d.laba_bar) {
                                $('#val-laba-bar').text('Rp ' + 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 Beban (Stacked Bar Baru)
                            let dataBeban = d.pengeluaran_stack || d.pengeluaran_donut;
                            if (dataBeban) {
                                let totalBebanText = dataBeban.total || dataBeban.total_teks || '0';

                                // Jika formatnya string lama dari API donut "Rp 100 Jt", kita bersihkan dulu (opsional).
                                // Tapi jika API sudah disesuaikan, dia adalah integer total.
                                if (!isNaN(totalBebanText)) {
                                    totalBebanText = 'Rp ' + formatRupiah(totalBebanText);
                                }

                                $('#val-pengeluaran-stack').text(totalBebanText);

                                let htmlBarBeban = '',
                                    htmlLegendBeban = '';

                                let bebanList = dataBeban.detail || [];

                                // Fallback converter jika API masih pakai Donut format
                                if (bebanList.length === 0 && dataBeban.data && dataBeban.label) {
                                    let totalNilai = dataBeban.data.reduce((a, b) => a + b, 0);
                                    for (let i = 0; i < dataBeban.data.length; i++) {
                                        let val = dataBeban.data[i];
                                        let persentase = totalNilai > 0 ? ((val / totalNilai) * 100)
                                            .toFixed(1) : 0;
                                        bebanList.push({
                                            nama: dataBeban.label[i],
                                            nilai: val,
                                            persen: persentase,
                                            warna: redColors[i % redColors.length]
                                        });
                                    }
                                }

                                bebanList.forEach((st, idx) => {
                                    let warnaBeban = st.warna || redColors[idx % redColors
                                        .length];
                                    htmlBarBeban +=
                                        `<div class="stacked-segment" style="width: ${st.persen}%; background-color: ${warnaBeban};" title="${st.nama}: ${st.persen}%"></div>`;

                                    htmlLegendBeban += `
                                    <div class="legend-item">
                                        <div class="legend-left" title="${st.nama}"><div class="dot" style="background:${warnaBeban};"></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>`;
                                });

                                $('#pengeluaran-bar-container').html(htmlBarBeban);
                                $('#pengeluaran-legend-container').html(htmlLegendBeban);
                            }

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

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

                                    htmlLegend += `
                                    <div class="legend-item">
                                        <div class="legend-left" title="${st.nama}"><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