@extends('webview.saku.main')

@push('style')
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />

    <style>
        /* =========================================
                                                                                                                                       1. RESET & DASAR LAYOUT
                                                                                                                                       ========================================= */
        body {
            background-color: #f4f6f9;
            margin: 0;
            padding: 0;
            font-family: 'Inter', sans-serif;
        }

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

        /* =========================================
                                                                                                                                       2. HEADER TEMA BIRU & OMBAK
                                                                                                                                       ========================================= */
        .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;
        }

        .title-saldo {
            color: #ffffff;
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 16px;
            display: block;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            text-align: left;
        }

        /* =========================================
                                                                                                                                       3. WRAPPER KARTU SLIDER
                                                                                                                                       ========================================= */
        .balance-wrapper {
            display: flex;
            gap: 16px;
            align-items: center;
            margin-bottom: 0px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding-bottom: 20px;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .balance-wrapper::-webkit-scrollbar {
            display: none;
        }

        .account-card {
            flex: 0 0 88%;
            scroll-snap-align: start;
            background: #ffffff;
            border-radius: 16px;
            display: flex;
            align-items: center;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
            height: 100px;
            text-decoration: none;
            color: inherit;
            overflow: hidden;
            border: 1px solid #f0f0f0;
        }

        .ac-icon {
            width: 80px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0 50px 50px 0;
            flex-shrink: 0;
        }

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

        .ac-info {
            flex: 1;
            text-align: right;
            padding-right: 15px;
            padding-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
        }

        .ac-title {
            font-size: 13px;
            color: #333;
            font-weight: 500;
            margin-bottom: 2px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .ac-code {
            font-size: 11px;
            color: #888;
            margin-bottom: 4px;
        }

        .ac-balance {
            font-size: 18px;
            font-weight: 700;
            color: #000;
            letter-spacing: -0.3px;
            white-space: nowrap;
        }

        /* =========================================
                                                                                                                                       4. BODY KONTEN (PUTIH)
                                                                                                                                       ========================================= */
        .content-body {
            background-color: #ffffff;
            border-radius: 24px 24px 0 0;
            margin-top: -35px;
            padding: 30px 20px 120px 20px;
            min-height: 100vh;
            position: relative;
            z-index: 10;
        }

        .section-title {
            font-size: 16px;
            font-weight: 700;
            color: #000;
            margin-bottom: 20px;
        }

        /* =========================================
                                                                                                                                       5. MENU GRID KAKU (PASTI 4 KOLOM)
                                                                                                                                       ========================================= */
        .menu-grid {
            display: grid !important;
            /* PAKSA BAGI 4 KOLOM SAMA RATA TANPA KOMPROMI */
            grid-template-columns: repeat(4, 1fr) !important;
            row-gap: 20px !important;
            /* Jarak atas-bawah */
            column-gap: 0 !important;
            /* Biarkan grid mengatur spasi horizontal */
            width: 100% !important;
            margin-bottom: 30px !important;
        }

        .menu-item {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            text-decoration: none !important;
            cursor: pointer !important;
            width: 100% !important;
            -webkit-tap-highlight-color: transparent !important;
        }

        .menu-icon-circle {
            width: 48px !important;
            height: 48px !important;
            background-color: #eef2fa !important;
            border-radius: 50% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin-bottom: 8px !important;
        }

        .menu-item:active .menu-icon-circle {
            transform: scale(0.95) !important;
            background-color: #d0def7 !important;
        }

        .menu-icon-circle img {
            width: 24px !important;
            height: 24px !important;
            object-fit: contain !important;
        }

        .menu-text {
            font-size: 11px !important;
            color: #333 !important;
            font-weight: 600 !important;
            line-height: 1.25 !important;
            text-align: center !important;
            width: 100% !important;
            padding: 0 4px !important;
            box-sizing: border-box !important;
            /* Batasi 2 Baris */
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
        }
    </style>
@endpush

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

        <div class="header-gold-bg">
            <span class="title-saldo">Saldo Akhir Akun</span>

            <div class="balance-wrapper" id="home-saldo-slider">
                <div style="color: rgba(255,255,255,0.8); padding: 15px; font-size: 12px;">
                    Memuat data akun...
                </div>
            </div>
        </div>

        <div class="content-body">
            <h3 class="section-title">Layanan</h3>
            <div id="menu_home" class="menu-grid">
            </div>

            <h3 class="section-title" style="margin-top: 30px;">Laporan</h3>
            <div id="menu_laporan" class="menu-grid">
            </div>
        </div>

    </div>
@endsection

@push('script')
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            // --- 1. SETUP GLOBAL ---
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            var BASE_URL = window.location.origin;

            var $apiUrl = "{{ config('api.url') }}";
            // var $apiUrl = "http://localhost:8001/api/"; 
            var PUBLIC_URL = "{{ url('/') }}";

            var DEFAULT_IMG = "{{ asset('asset-webview/saku/images/accountant.png') }}";
            var ASSET_ICON_URL = "{{ asset('asset-webview/saku/icons') }}/"; // Folder icon lokal

            // Helper Strip HTML
            window.stripHtml = function(html) {
                if (!html) return "";
                let tmp = document.createElement("DIV");
                tmp.innerHTML = html;
                return tmp.textContent || tmp.innerText || "";
            }


            // --- 2. LOGIKA SLIDER ---
            var mySwiper = null;

            function loadSlider() {
                $.ajax({
                    url: "{{ route('saku-mobile.data.home-slider') }}",
                    type: "GET",
                    dataType: "json",
                    success: function(res) {
                        var html = '';
                        var wrapper = $('#slider-wrapper');

                        if (res && Array.isArray(res) && res.length > 0) {
                            res.forEach(function(slide) {

                                // A. Gambar
                                let imgSrc = DEFAULT_IMG;
                                if (slide.image_url && !slide.image_url.includes(
                                        'USE_DEFAULT') && !slide.image_url.includes('null') &&
                                    slide
                                    .image_url !== '-') {
                                    imgSrc = $apiUrl + "saku-auth/storage-file?filename=" +
                                        slide.image_url;
                                } else if (slide.article && slide.article.image_url) {
                                    imgSrc = $apiUrl + "saku-auth/storage-file?filename=" +
                                        slide.article.image_url;
                                }

                                // B. Konten Slide
                                let contentHtml = '';

                                if (slide.type === 'article') {
                                    const art = slide.article || {};
                                    let summary = stripHtml(art.content || "").substring(0,
                                        80) + "...";

                                    let articleLink = BASE_URL + "/article/" + (art.slug ||
                                        '#');

                                    contentHtml = `
                                    <div class="swiper-slide">
                                        <div class="info-card">
                                            <img src="${imgSrc}" class="card-img-full" onerror="this.src='${DEFAULT_IMG}'">
                                            <div class="card-overlay">
                                                <h5 class="card-title">${art.title || slide.title || 'Informasi Keuangan'}</h5>
                                                <p class="card-text">${summary}</p>
                                                
                                                <a href="${articleLink}" 
                                                   class="btn-baca swiper-no-swiping" 
                                                   style="position: relative; z-index: 9999; cursor: pointer;"
                                                   onclick="window.location.href='${articleLink}'; return false;">
                                                    Baca Selengkapnya
                                                </a>

                                            </div>
                                        </div>
                                    </div>`;
                                } else {
                                    // Slide Biasa
                                    let title = slide.title || "";
                                    let quote = "";
                                    if (slide.extra_data) {
                                        try {
                                            let j = typeof slide.extra_data === 'string' ? JSON
                                                .parse(slide.extra_data) : slide.extra_data;
                                            if (j.quote) quote = `"${j.quote}"`;
                                        } catch (e) {}
                                    }

                                    contentHtml = `
                                    <div class="swiper-slide">
                                        <div class="info-card">
                                            <img src="${imgSrc}" class="card-img-full" onerror="this.src='${DEFAULT_IMG}'">
                                            ${ (title || quote) ? `
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <div class="card-overlay" style="justify-content: center; align-items: center; text-align: center;">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <h5 class="card-title">${title}</h5>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            ${quote ? `<p class="card-text" style="font-style:italic; color:#ffd700;">"${quote}"</p>` : ''}
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </div>` : '' }
                                        </div>
                                    </div>`;
                                }
                                html += contentHtml;
                            });
                        } else {
                            // Data Kosong
                            html = `
                            <div class="swiper-slide">
                                <div class="info-card">
                                    <img src="${DEFAULT_IMG}" class="card-img-full">
                                    <div class="card-overlay">
                                        <h5 class="card-title">Masjid Raya Al-Azhar</h5>
                                        <p class="card-text">Podomoro Park Bandung</p>
                                    </div>
                                </div>
                            </div>`;
                        }

                        wrapper.html(html);
                        initSwiper();
                    },
                    error: function(xhr) {
                        $('#slider-wrapper').html(`
                        <div class="swiper-slide">
                            <div class="info-card">
                                <img src="${DEFAULT_IMG}" class="card-img-full">
                            </div>
                        </div>
                    `);
                    }
                });
            }

            function initSwiper() {
                if ($('.swiper-container').length === 0) return;
                if (mySwiper !== null) {
                    mySwiper.destroy(true, true);
                    mySwiper = null;
                }

                mySwiper = new Swiper('.swiper-container', {
                    slidesPerView: 1,
                    spaceBetween: 0,
                    autoHeight: false,
                    loop: true,
                    autoplay: {
                        delay: 4000,
                        disableOnInteraction: false
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
                    effect: 'slide',
                    speed: 600,
                    observer: true,
                    observeParents: true,
                    // Pastikan touch events tidak memblokir link
                    touchStartPreventDefault: false,
                });
            }
            loadSlider();

            // --- 4. DASHBOARD DATA ---
            function getDashboardData() {
                $('#saldo-kas-saku').text('Loading...');
                $.ajax({
                    url: "{{ route('saku-mobile.data.home') }}",
                    type: 'GET',
                    success: function(res) {
                        const fmt = (n) => 'Rp. ' + new Intl.NumberFormat('id-ID').format(n || 0);
                        if (res.status) $('#saldo-kas-saku').text(fmt(res.data.saldo_kas));
                        else $('#saldo-kas-saku').text('Rp. -');
                    },
                    error: function() {
                        $('#saldo-kas-saku').text('Rp. Error');
                    }
                });
            }
            getDashboardData();


            // --- 5. LOGIC MENU DINAMIS  ---

            // A. Mapping Konfigurasi
            // Key (Kiri) = 'form' dari API Response
            // Value (Kanan) = Konfigurasi lokal (Icon Gold, Route, Nama Pendek)
            // Batas Menu sebelum muncul tombol "Lainnya" (3 Menu + 1 Tombol = 4 Kolom)
            const LIMIT_MENU = 3;

            // Path Icon Lokal
            var ASSET_ICON_URL = "{{ asset('asset-webview/saku/icons') }}/";

            // STATUS MENU (Expanded / Collapsed)
            var isMenuExpanded = false;
            var globalMenuList = [];

            // --- 2. SETUP ICON BUTTON ---
            // A. Icon "Lainnya" (Pakai file PNG Anda)
            const ICON_MORE_PNG = ASSET_ICON_URL + "icon-more-gold.png";

            // B. Icon "Tutup" (Pakai SVG Panah Atas Gold agar seragam)
            const ICON_LESS_SVG =
                "data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 15L12 9L6 15' stroke='%23e2b947' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E";

            // --- 3. MAPPING ROUTE ---
            const MENU_ROUTES = {
                //SAKU
                'app_admin_mobile_kb_fLapBukuBesar': {
                    route: "{{ route('saku-mobile.page.saldo-kas') }}",
                    icon: 'icon-saldo-blue.svg',
                    label: 'Saldo Kas'
                },
                'app_admin_mobile_kb_fLapSHO': {
                    route: "{{ route('saku-mobile.page.sho') }}",
                    icon: 'icon-sho-blue.svg',
                    label: 'Laba/Rugi'
                },
                'app_admin_mobile_kb_fLapPosisiKeuangan': {
                    route: "{{ route('saku-mobile.page.posisi-keuangan') }}",
                    icon: 'icon-keuangan-blue.svg',
                    label: 'Neraca'
                },
                'app_admin_mobile_kb_fKbIn': {
                    route: "{{ route('saku-mobile.page.penerimaan-kas') }}",
                    icon: 'icon-penerimaankas-blue.svg',
                    label: 'Penerimaan Kas'
                },
                'app_admin_mobile_kb_fKbOut': {
                    route: "{{ route('saku-mobile.page.pengeluaran-kas') }}",
                    icon: 'icon-pengeluarankas-blue.svg',
                    label: 'Pengeluaran Kas'
                },

                //SEKOLAH
                'app_admin_yagk_mobile_kb_fLapBukuBesar': {
                    route: "{{ route('saku-mobile.page.sekolah.saldo-kas') }}",
                    icon: 'icon-saldo-blue.svg',
                    label: 'Saldo Kas'
                },
                'app_admin_yagk_mobile_kb_fLapSHO': {
                    route: "{{ route('saku-mobile.page.sekolah.sho') }}",
                    icon: 'icon-sho-blue.svg',
                    label: 'Laba/Rugi'
                },
                'app_admin_yagk_mobile_kb_fLapPosisiKeuangan': {
                    route: "{{ route('saku-mobile.page.sekolah.posisi-keuangan') }}",
                    icon: 'icon-keuangan-blue.svg',
                    label: 'Neraca'
                },
                'app_admin_yagk_mobile_kb_fKbIn': {
                    route: "{{ route('saku-mobile.page.sekolah.penerimaan-kas') }}",
                    icon: 'icon-penerimaankas-blue.svg',
                    label: 'Penerimaan Kas'
                },
                'app_admin_yagk_mobile_kb_fKbOut': {
                    route: "{{ route('saku-mobile.page.sekolah.pengeluaran-kas') }}",
                    icon: 'icon-pengeluarankas-blue.svg',
                    label: 'Pengeluaran Kas'
                },
                'app_admin_yagk_mobile_kb_fKbInBank': {
                    route: "{{ route('saku-mobile.page.sekolah.penerimaan-bank') }}",
                    icon: 'icon-penerimaanbank-blue.svg',
                    label: 'Penerimaan Bank'
                },
                'app_admin_yagk_mobile_kb_fKbOutBank': {
                    route: "{{ route('saku-mobile.page.sekolah.pengeluaran-bank') }}",
                    icon: 'icon-pengeluaranbank-blue.svg',
                    label: 'Pengeluaran Bank'
                },
                'app_admin_yagk_mobile_kb_fRekapTerima': {
                    route: "{{ route('saku-mobile.page.sekolah.rekap-terima') }}",
                    icon: 'icon-rekapterima-blue.svg',
                    label: 'Rekap Terima'
                },
                'app_admin_yagk_mobile_kb_fRekapKeluar': {
                    route: "{{ route('saku-mobile.page.sekolah.rekap-keluar') }}",
                    icon: 'icon-rekapkeluar-blue.svg',
                    label: 'Rekap Keluar'
                },
                'app_admin_yagk_mobile_kb_fPinbuk': {
                    route: "{{ route('saku-mobile.page.sekolah.pinbuk') }}",
                    icon: 'icon-pinbuk-blue.svg',
                    label: 'PINBUK'
                },
                'app_admin_yagk_mobile_kb_fLapKbSaldoRek': {
                    route: "{{ route('saku-mobile.page.sekolah.saldo-bantuan') }}",
                    icon: 'icon-saldo-bantuan-blue.svg',
                    label: 'Saldo Bantuan'
                },
                'app_admin_yagk_mobile_kb_fKbInBantuan': {
                    route: "{{ route('saku-mobile.page.sekolah.penerimaan-bantuan') }}",
                    icon: 'icon-penerimaanbantuan-blue.svg',
                    label: 'Penerimaan Bantuan'
                },
                'app_admin_yagk_mobile_kb_fKbOutBantuan': {
                    route: "{{ route('saku-mobile.page.sekolah.pengeluaran-bantuan') }}",
                    icon: 'icon-pengeluaranbantuan-blue.svg',
                    label: 'Pengeluaran Bantuan'
                },
            };

            // --- 4. LOAD DATA (AJAX) ---
            function loadMenu(kode_menu) {
                if ($('#menu_home').length === 0) return;

                $.ajax({
                    type: 'GET',
                    url: "{{ route('saku-mobile.data.home-menu') }}",
                    dataType: 'json',
                    data: {
                        kode_klp: kode_menu
                    },
                    success: function(result) {
                        var rawList = result.data || [];

                        // Filter hanya menu yang terdaftar di Mapping
                        globalMenuList = [];
                        rawList.forEach(function(item) {
                            if (MENU_ROUTES[item.form]) {
                                globalMenuList.push(item);
                            }
                        });

                        // Render Tampilan
                        renderHTML();
                    },
                    error: function() {
                        $('#menu_home').html('<small style="color:#999">Gagal memuat menu</small>');
                    }
                });
            }

            // --- 5. RENDER HTML (PERUBAHAN DISINI: MEMISAHKAN LAYANAN & LAPORAN) ---
            function renderHTML() {
                var htmlLayanan = '';
                var htmlLaporan = '';

                // Loop semua menu yang didapat dari API
                globalMenuList.forEach(function(row) {
                    var config = MENU_ROUTES[row.form];

                    var itemHtml = `
                    <a href="${config.route}" class="menu-item">
                        <div class="menu-icon-circle">
                            <img alt="${config.label}" 
                                 src="${ASSET_ICON_URL}${config.icon}" 
                                 onerror="this.src='${ASSET_ICON_URL}icon-default.png'">
                        </div>
                        <span class="menu-text">${config.label}</span>
                    </a>
                    `;

                    // Jika ID form API mengandung kata 'fLap' atau 'fRekap', masukkan ke Laporan
                    if (row.form.includes('fLap') || row.form.includes('fRekap')) {
                        htmlLaporan += itemHtml;
                    } else {
                        // Jika bukan Laporan, masukkan ke Layanan
                        htmlLayanan += itemHtml;
                    }
                });

                // Masukkan HTML ke masing-masing grid
                $('#menu_home').html(htmlLayanan);
                $('#menu_laporan').html(htmlLaporan);
            }

            // Panggil Fungsi Load Menu
            var sessionKodeMenu = "{{ Session::get('kodeMenuMobile') }}";
            loadMenu(sessionKodeMenu);

            // --- 7. LOAD HEADER MASJID ---
            function loadHeaderInfo() {
                $.ajax({
                    url: "{{ route('saku-mobile.data.home-setting') }}",
                    type: "GET",
                    dataType: "json",
                    success: function(res) {
                        var data = res.data ? res.data : res;

                        // 1. Nama Masjid
                        if (data.nama_masjid) {
                            $('#header-nama-saku').text(data.nama_masjid);
                        } else {
                            $('#header-nama-saku').text("SAKU");
                        }

                        // 2. Alamat (LOGIKA BARU)
                        // Cek apakah alamat ada isinya DAN tidak cuma tanda strip
                        if (data.alamat && data.alamat.trim() !== "" && data.alamat !== "-") {
                            $('#header-alamat').text(data.alamat).show(); // Tampilkan & isi teks
                        } else {
                            $('#header-alamat').hide(); // Sembunyikan elemen <h6> total
                        }

                        // 3. Running Text
                        if (data.running_text) {
                            localStorage.setItem('saku_running_text', data.running_text);
                        }
                    },
                    error: function(xhr) {
                        console.log("Gagal load info masjid");
                        $('#header-nama-saku').text("SAKU");
                        // Jika error, sembunyikan alamat atau tampilkan default (pilih salah satu)
                        $('#header-alamat').hide();
                    }
                });
            }

            // Panggil fungsi ini saat halaman dimuat
            loadHeaderInfo();

        });

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

        function loadSliceCards() {
            $('#home-saldo-slider').html(
                '<div style="color:rgba(255,255,255,0.8); padding: 15px; font-size: 13px;">Memuat data...</div>');

            $.ajax({
                url: "{{ route('saku-mobile.data.home-slice') }}",
                type: 'GET',
                success: function(res) {
                    let html = '';

                    // Variabel global ASSET_ICON_URL yang sudah didefinisikan sebelumnya
                    var ASSET_ICON_URL = "{{ asset('asset-webview/saku/icons') }}/";

                    if (res.status && res.data && res.data.length > 0) {
                        res.data.forEach(item => {

                            let bgColor = '#003D79'; // Default Biru

                            // Pewarnaan dinamis
                            if (item.id_slice === 'KB') {
                                bgColor = '#003D79';
                            } else if (item.id_slice === 'PD') {
                                bgColor = '#00A39D';
                            } else if (item.id_slice === 'BN') {
                                bgColor = '#E74C3C';
                            }

                            // LOGIKA IKON ATAU TEKS
                            let iconContent = '';

                            // Cek jika icon ada di DB dan bukan '-'
                            if (item.icon && item.icon.trim() !== '' && item.icon !== '-') {
                                let iconPath = ASSET_ICON_URL + item.icon;
                                // Tampilkan sebagai gambar. Jika gambar tidak ditemukan (error), fallback ke gambar default
                                iconContent =
                                    `<img src="${iconPath}" onerror="this.src='${ASSET_ICON_URL}icon-default.png'" alt="${item.id_slice}" style="max-width: 65%; max-height: 50%; object-fit: contain;">`;
                            } else {
                                // Fallback jika icon kosong: Tampilkan teks id_slice (KB/PD/BN)
                                iconContent = `${item.id_slice}`;
                            }

                            let detailUrl = "#";

                            html += `
                            <a href="${detailUrl}" class="account-card">
                                <div class="ac-icon" style="background-color: ${bgColor}; color: #ffffff; font-size: 26px; font-weight: 800; font-style: italic;">
                                    ${iconContent}
                                </div>
                                <div class="ac-info">
                                    <div class="ac-title">${item.nama}</div>
                                    <div class="ac-code">Kode: ${item.id_slice}</div>
                                    <div class="ac-balance">Rp. ${formatRupiah(item.nilai)}</div>
                                </div>
                            </a>
                            `;
                        });

                        $('#home-saldo-slider').html(html);

                    } else {
                        $('#home-saldo-slider').html(
                            `<div style="color:rgba(255,255,255,0.9); padding: 15px; font-size: 13px;">Belum ada data rekapan.</div>`
                        );
                    }
                },
                error: function() {
                    $('#home-saldo-slider').html(
                        '<div style="color:#ffcccc; padding: 15px; font-size: 12px;">Gagal memuat data.</div>'
                    );
                }
            });
        }

        // Langsung jalankan fungsi saat halaman siap
        $(document).ready(function() {
            loadSliceCards();
        });
    </script>
@endpush