@extends('layouts.app')

@section('scripts')
<script>
// =========================================================================
// 📑 SPPG TERPADU — LARAVEL EDITION
// =========================================================================
// Unified system: Dapur Wiki + Data Sekolah/Posyandu
// =========================================================================

window.LOGO_UTAMA = "https://i.ibb.co.com/b5zxffxC/KOPERASI-6-removebg-preview.png";

// =========================================================================
// 📁 01. VARIABEL GLOBAL & STATE
// =========================================================================
let currentUser = {!! json_encode([
    'id' => auth()->user()->id,
    'username' => auth()->user()->username,
    'nama' => auth()->user()->nama,
    'role' => auth()->user()->role,
    'dapur_id' => auth()->user()->dapur_id,
    'yayasan' => auth()->user()->yayasan ?? '',
    'logo_yayasan' => auth()->user()->logo_yayasan ? '/storage/' . auth()->user()->logo_yayasan : null,
]) !!};

let activeDapurContext = currentUser.dapur_id || "ALL";
let globalDapurList = {!! json_encode($dapurList->map(fn($d) => [
    'ID_Dapur' => $d->id_dapur,
    'Nama_Dapur' => $d->nama_dapur,
    'Lokasi' => $d->lokasi,
    'Status' => $d->status,
])) !!};

let dataUserLocal = [];
let dataMasterLocal = [];
let dataHargaPasarLocal = [];
let customKategoriLocal = [];
let dataBankMenuLocal = [];
let dataSuplierLocal = [];
let dataHargaRealLocal = [];
let dataPOLocal = [];
let dataOperasionalLocal = [];

let perhitunganState = {
    judul: "",
    tanggal: new Date().toISOString().split('T')[0],
    rekapanBuffers: {},
    sasaran: [],
    komponen: [
        {
            id: 'komp_' + Date.now(),
            nama: "",
            bahan: [
                { id: 'bhn_' + Date.now(), id_harga_pasar: "" }
            ]
        }
    ]
};

const appMenus = [
    { id: "dashboard", group: "Utama", icon: "fa-chart-pie", color: "bg-blue-100 text-blue-600", title: "Dashboard", roles: ["Super Admin", "Kepala SPPG", "PLO Gizi", "PLO Keuangan", "Admin Data", "Operator Sasaran"] },
    { id: "datasekolah", group: "Data Sasaran", icon: "fa-school", color: "bg-sky-100 text-sky-600", title: "Data Sekolah", roles: ["Super Admin", "Kepala SPPG", "PLO Gizi", "PLO Keuangan", "Admin Data", "Operator Sasaran"] },
    { id: "dataposyandu", group: "Data Sasaran", icon: "fa-notes-medical", color: "bg-rose-100 text-rose-600", title: "Data Posyandu", roles: ["Super Admin", "Kepala SPPG", "PLO Gizi", "PLO Keuangan", "Admin Data", "Operator Sasaran"] },
    { id: "datamaster", group: "Divisi Gizi", icon: "fa-database", color: "bg-emerald-100 text-emerald-600", title: "Data Master", roles: ["Super Admin", "Kepala SPPG", "PLO Gizi", "PLO Keuangan"] },
    { id: "hargapasar", group: "Divisi Gizi", icon: "fa-tags", color: "bg-amber-100 text-amber-600", title: "Harga RAB", roles: ["Super Admin", "Kepala SPPG", "PLO Gizi", "PLO Keuangan"] },
    { id: "perhitungan", group: "Divisi Gizi", icon: "fa-calculator", color: "bg-purple-100 text-purple-600", title: "Perhitungan", roles: ["Super Admin", "Kepala SPPG", "PLO Gizi", "PLO Keuangan"] },
    { id: "bankmenu", group: "Divisi Gizi", icon: "fa-book-open", color: "bg-rose-100 text-rose-600", title: "Bank Menu", roles: ["Super Admin", "Kepala SPPG", "PLO Gizi", "PLO Keuangan"] },
    { id: "analisisgizi", group: "Divisi Gizi", icon: "fa-leaf", color: "bg-teal-100 text-teal-600", title: "Analisis Kandungan Gizi", roles: ["Super Admin", "Kepala SPPG", "PLO Gizi", "PLO Keuangan"] },
    { id: "analisisbarang", group: "Divisi Gizi", icon: "fa-chart-line", color: "bg-fuchsia-100 text-fuchsia-600", title: "Analisis Penggunaan", roles: ["Super Admin", "Kepala SPPG", "PLO Gizi", "PLO Keuangan"] },
    { id: "suplier", group: "Divisi Keuangan", icon: "fa-truck", color: "bg-orange-100 text-orange-600", title: "Suplier / Mitra", roles: ["Super Admin", "Kepala SPPG", "PLO Gizi", "PLO Keuangan"] },
    { id: "hargarealnota", group: "Divisi Keuangan", icon: "fa-receipt", color: "bg-cyan-100 text-cyan-600", title: "Harga Real Nota", roles: ["Super Admin", "Kepala SPPG", "PLO Gizi", "PLO Keuangan"] },
    { id: "purchaseorder", group: "Divisi Keuangan", icon: "fa-shopping-cart", color: "bg-indigo-100 text-indigo-600", title: "Purchase Order (PO)", roles: ["Super Admin", "Kepala SPPG", "PLO Gizi", "PLO Keuangan"] },
    { id: "operasional", group: "Divisi Keuangan", icon: "fa-box", color: "bg-lime-100 text-lime-600", title: "Barang Operasional", roles: ["Super Admin", "Kepala SPPG", "PLO Gizi", "PLO Keuangan"] },
    { id: "usermanagement", group: "Sistem Admin", icon: "fa-users-cog", color: "bg-pink-100 text-pink-600", title: "Manajemen User", roles: ["Super Admin"] }
];


window.generateGlobalPrintHeader = function(dapurIdUntukCetak, dapurNameValue, customYayasan = null) {
    let yayasanName = customYayasan || (currentUser.yayasan ? currentUser.yayasan.toUpperCase() : "YAYASAN BELUM DISET");
    let logoYayasan = currentUser.logo_yayasan || null;

    if (currentUser.role === 'Super Admin' && typeof dataUserLocal !== 'undefined') {
        let userKepala = dataUserLocal.find(u => u.Role === 'Kepala SPPG' && u.Dapur_ID === dapurIdUntukCetak);
        if (userKepala) {
            if (userKepala.Yayasan) yayasanName = userKepala.Yayasan.toUpperCase();
            if (userKepala.Logo_Yayasan) logoYayasan = userKepala.Logo_Yayasan;
        }
    }

    let cleanDapurName = dapurNameValue.replace(/sppg/gi, '').trim().toUpperCase();

    let yayasanHtml = logoYayasan ? `<img src="${logoYayasan}" style="height: 60px; max-width: 80px; object-fit: contain;">` : `<div style="width: 80px;"></div>`;
    let bgnHtml = window.LOGO_UTAMA ? `<img src="${window.LOGO_UTAMA}" style="height: 60px; max-width: 80px; object-fit: contain;">` : `<div style="width: 80px;"></div>`;

    return `
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; border-bottom: 2px solid #000; padding-bottom: 8px;">
            <div style="width: 80px; display: flex; justify-content: flex-start;">
                ${bgnHtml}
            </div>
            <div style="flex: 1; text-align: center;">
                <h1 style="margin: 0; font-size: 16px; font-weight: bold; text-transform: uppercase;">SATUAN PELAYANAN PEMENUHAN GIZI</h1>
                <h2 style="margin: 2px 0 0 0; font-size: 22px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px;">${cleanDapurName}</h2>
                <h3 style="margin: 4px 0 0 0; font-size: 14px; font-weight: normal; color: #334155;">${yayasanName}</h3>
            </div>
            <div style="width: 80px; display: flex; justify-content: flex-end;">
                ${yayasanHtml}
            </div>
        </div>
    `;
};

// Helper: Warna unik per dapur (konsisten berdasarkan hash)
const _dapurColors = ['#0ea5e9','#8b5cf6','#f59e0b','#10b981','#ef4444','#ec4899','#06b6d4','#84cc16','#f97316','#6366f1'];
window.getDapurBadge = function(dapurId) {
    if (!dapurId) return '';
    // Operator Sasaran selalu lihat badge SPPG, role lain hanya saat mode ALL
    if (currentUser.role === 'Operator Sasaran') {
        let d = globalDapurList.find(x => x.ID_Dapur === dapurId);
        let name = d ? d.Nama_Dapur : dapurId;
        let hash = 0; for (let i = 0; i < dapurId.length; i++) hash = dapurId.charCodeAt(i) + ((hash << 5) - hash);
        let color = _dapurColors[Math.abs(hash) % _dapurColors.length];
        return `<div class="flex items-center gap-1 mt-0.5"><span style="background:${color}15;color:${color};border:1px solid ${color}40;" class="text-[9px] font-bold px-1.5 py-0.5 rounded inline-flex items-center"><i class="fas fa-store-alt mr-1" style="font-size:7px;"></i>${name}</span></div>`;
    }
    if (activeDapurContext !== 'ALL' || !['Super Admin','Admin Data'].includes(currentUser.role)) return '';
    let d = globalDapurList.find(x => x.ID_Dapur === dapurId);
    let name = d ? d.Nama_Dapur : dapurId;
    let hash = 0; for (let i = 0; i < dapurId.length; i++) hash = dapurId.charCodeAt(i) + ((hash << 5) - hash);
    let color = _dapurColors[Math.abs(hash) % _dapurColors.length];
    return `<div class="flex items-center gap-1 mt-0.5"><span style="background:${color}15;color:${color};border:1px solid ${color}40;" class="text-[9px] font-bold px-1.5 py-0.5 rounded inline-flex items-center"><i class="fas fa-store-alt mr-1" style="font-size:7px;"></i>${name}</span></div>`;
};

// =========================================================================
// 📁 02. FUNGSI UTILITAS & BANTUAN
// =========================================================================
function toTitleCase(str) {
    if(!str) return '';
    return str.toLowerCase().split(' ').map(word => word.charAt(0).toUpperCase() + word.substring(1)).join(' ');
}

window.checkSuperAdminDapur = function(actionDesc) {
    if (['Super Admin','Admin Data'].includes(currentUser.role) && activeDapurContext === 'ALL') {
        ModernSwal.fire({
            html: `
                <div class="flex flex-col items-center py-2">
                    <div class="w-20 h-20 rounded-full bg-gradient-to-br from-amber-100 to-orange-100 flex items-center justify-center mb-5 shadow-inner border-2 border-amber-200/60">
                        <i class="fa-solid fa-eye text-amber-500 text-3xl animate-pulse"></i>
                    </div>
                    <h2 class="text-xl font-extrabold text-slate-800 mb-2">Mode Mata Tuhan Aktif</h2>
                    <p class="text-sm text-slate-500 leading-relaxed mb-4">Anda sedang melihat <b class="text-amber-600">semua dapur sekaligus</b>. Untuk <b class="text-slate-700">${actionDesc}</b>, silakan pilih satu dapur spesifik terlebih dahulu.</p>
                    <div class="w-full bg-amber-50 border border-amber-200/60 rounded-xl px-4 py-3 flex items-start gap-3">
                        <i class="fa-solid fa-lightbulb text-amber-500 mt-0.5"></i>
                        <p class="text-xs text-amber-700 text-left leading-relaxed"><b>Tip:</b> Klik tombol <b>"Mode View"</b> di sidebar kiri, lalu pilih dapur yang ingin Anda kelola.</p>
                    </div>
                </div>
            `,
            showCancelButton: true,
            confirmButtonText: '<i class="fa-solid fa-layer-group mr-2"></i> Pilih Dapur Sekarang',
            cancelButtonText: 'Nanti Saja',
            showCloseButton: true,
        }).then((result) => {
            if (result.isConfirmed) {
                window.openModalPilihDapur();
            }
        });
        return false;
    }
    return true;
};

window.startLoading = function(text) {
    document.getElementById('loadingText').innerText = text;
    document.getElementById('loadingOverlay').classList.remove('hidden');
};
window.endLoading = function() {
    document.getElementById('loadingOverlay').classList.add('hidden');
};

const ModernSwal = Swal.mixin({
    customClass: {
        popup: 'rounded-[2rem] shadow-2xl border border-slate-100 bg-white/95 backdrop-blur-md',
        title: 'text-2xl font-extrabold text-slate-800',
        htmlContainer: 'text-slate-500 font-medium',
        confirmButton: 'bg-gradient-to-r from-sky-500 to-blue-500 hover:from-sky-600 hover:to-blue-600 text-white rounded-xl px-8 py-3 font-bold mx-2 transition-all shadow-lg shadow-sky-500/30 transform hover:-translate-y-0.5',
        cancelButton: 'bg-white hover:bg-slate-50 border border-slate-200 text-slate-600 rounded-xl px-8 py-3 font-bold mx-2 transition-all'
    },
    buttonsStyling: false
});

const ToastBg = Swal.mixin({
    toast: true, position: 'top-end', showConfirmButton: false, timer: 2000,
    customClass: { popup: 'rounded-[1rem] shadow-xl border border-slate-100 bg-white/90 backdrop-blur-sm font-bold text-slate-700' }
});


// =========================================================================
// 📁 03. MODUL AUTENTIKASI (Laravel Version)
// =========================================================================
// Login sudah ditangani oleh Laravel POST form di /login
// Logout menggunakan form POST ke /logout

window.handleLogout = function() {
    window.closeModalProfile();
    ModernSwal.fire({
        title: 'Keluar Sistem?', text: "Sesi Anda akan diakhiri.",
        icon: 'warning', showCancelButton: true,
        confirmButtonText: 'Ya, Keluar', cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            document.body.classList.add('opacity-0');
            setTimeout(() => {
                document.getElementById('logoutForm').submit();
            }, 300);
        }
    });
};

window.openModalProfile = function() {
    document.getElementById('profTitleName').innerText = currentUser.nama;
    document.getElementById('profRole').innerText = currentUser.role;
    document.getElementById('profInitials').innerText = currentUser.nama.substring(0,2).toUpperCase();

    let dapurName = currentUser.dapur_id === 'ALL' ? 'Mata Tuhan (Semua Akses)' : (globalDapurList.find(d=>d.ID_Dapur===currentUser.dapur_id)?.Nama_Dapur || currentUser.dapur_id);
    document.getElementById('profDapur').innerText = dapurName;
    document.getElementById('profYayasan').innerText = currentUser.yayasan || "Yayasan Belum Diset";

    document.getElementById('profEditUsername').value = currentUser.username;
    document.getElementById('profEditNama').value = currentUser.nama;
    document.getElementById('profEditEmail').value = currentUser.email || '';
    document.getElementById('profEditNoHp').value = currentUser.no_hp || '';
    document.getElementById('profEditPassword').value = '';

    const yayasanSec = document.getElementById('profYayasanSection');
    const profEditYysn = document.getElementById('profEditYayasan');
    const profEditCabang = document.getElementById('profEditNamaCabang');
    const profEditLogo = document.getElementById('profEditLogo');
    if (currentUser.role === 'Kepala SPPG') {
        if(yayasanSec) yayasanSec.classList.remove('hidden');
        if(profEditYysn) profEditYysn.value = currentUser.yayasan || '';
        if(profEditCabang) {
            let dapurName = currentUser.dapur_id === 'ALL' ? 'Mata Tuhan (Semua Akses)' : (globalDapurList.find(d=>d.ID_Dapur===currentUser.dapur_id)?.Nama_Dapur || currentUser.dapur_id);
            profEditCabang.value = dapurName;
        }
        if(profEditLogo) profEditLogo.value = ''; // Reset file input
    } else {
        if(yayasanSec) yayasanSec.classList.add('hidden');
    }

    const modal = document.getElementById('modalProfile');
    modal.classList.remove('hidden');
    setTimeout(() => { modal.classList.remove('opacity-0'); document.getElementById('modalProfileContent').classList.remove('scale-95'); }, 10);
};

window.closeModalProfile = function() {
    const modal = document.getElementById('modalProfile');
    modal.classList.add('opacity-0');
    document.getElementById('modalProfileContent').classList.add('scale-95');
    setTimeout(() => { modal.classList.add('hidden'); }, 300);
};

window.saveProfileUpdate = function() {
    const newUsername = document.getElementById('profEditUsername').value;
    const newNama = document.getElementById('profEditNama').value;
    const newPwd = document.getElementById('profEditPassword').value;
    const newEmail = document.getElementById('profEditEmail').value;
    const newNoHp = document.getElementById('profEditNoHp').value;
    const newYayasan = document.getElementById('profEditYayasan') ? document.getElementById('profEditYayasan').value : currentUser.yayasan;
    const newNamaCabang = document.getElementById('profEditNamaCabang') ? document.getElementById('profEditNamaCabang').value : null;
    const logoFile = document.getElementById('profEditLogo') ? document.getElementById('profEditLogo').files[0] : null;

    if(!newUsername || !newNama) { ModernSwal.fire({icon: 'warning', title: 'Perhatian', text: 'Username dan Nama wajib diisi.'}); return; }

    const formData = new FormData();
    formData.append('username', newUsername);
    formData.append('nama', newNama);
    formData.append('email', newEmail);
    formData.append('no_hp', newNoHp);
    if (newPwd) formData.append('password', newPwd);
    if (newYayasan) formData.append('yayasan', newYayasan);
    if (newNamaCabang) formData.append('nama_cabang', newNamaCabang);
    if (logoFile) formData.append('logo_yayasan', logoFile);

    window.closeModalProfile();
    currentUser.username = newUsername;
    currentUser.nama = newNama;
    currentUser.email = newEmail;
    currentUser.no_hp = newNoHp;
    if (newYayasan) currentUser.yayasan = newYayasan;
    
    // Update globalDapurList if nama_cabang was changed
    if (newNamaCabang && currentUser.dapur_id && currentUser.dapur_id !== 'ALL') {
        let dapurIndex = globalDapurList.findIndex(d => d.ID_Dapur === currentUser.dapur_id);
        if (dapurIndex !== -1) {
            globalDapurList[dapurIndex].Nama_Dapur = newNamaCabang;
            document.getElementById('profDapur').innerText = newNamaCabang;
        }
    }

    document.getElementById('headerRoleLabel').innerText = currentUser.nama;
    document.getElementById('userInitialsHeader').innerText = currentUser.nama.substring(0,2).toUpperCase();
    ToastBg.fire({icon: 'info', title: 'Menyimpan profil...'});

    axios.post('/api/profile', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
    })
        .then(res => {
            if(res.data.success) { 
                ToastBg.fire({icon: 'success', title: 'Profil Disimpan'}); 
                if (res.data.logo_yayasan) {
                    currentUser.logo_yayasan = res.data.logo_yayasan;
                }
            }
        })
        .catch(err => {
            ToastBg.fire({icon: 'error', title: 'Gagal', text: err.response?.data?.message || 'Gagal menyimpan profil'});
        });
};


// =========================================================================
// 📁 04. MODUL NAVIGASI & SETUP AWAL
// =========================================================================
window.toggleSidebar = function() {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebarOverlay');
    sidebar.classList.toggle('-translate-x-full');
    overlay.classList.toggle('hidden');
};

// ===== LOAD INITIAL DATA — SINGLE BATCH REQUEST =====
window.loadInitialDataBg = function() {
    const tryRefreshDash = () => {
        const activeMenu = document.querySelector('.menu-active');
        if(activeMenu && activeMenu.id === 'menu-dashboard') {
            const ca = document.getElementById('contentArea');
            if(ca) window.renderDashboard(ca);
        }
    };

    // Single batched request instead of 8+ parallel calls
    axios.get('/api/initial-data', { params: { dapur_id: activeDapurContext, role: currentUser.role } })
        .then(res => {
            if (res.data.success) {
                const d = res.data;
                if (d.master_data) dataMasterLocal = d.master_data;
                if (d.harga_pasar) dataHargaPasarLocal = d.harga_pasar;
                if (d.suplier) dataSuplierLocal = d.suplier;
                if (d.harga_real) dataHargaRealLocal = d.harga_real;
                if (d.bank_menu) {
                    dataBankMenuLocal = d.bank_menu.map(m => {
                        try { return typeof m.Data_JSON === 'string' ? JSON.parse(m.Data_JSON) : (m.Data_JSON || m); }
                        catch(e) { return m; }
                    });
                }
                if (d.po) dataPOLocal = d.po;
                if (d.operasional) dataOperasionalLocal = d.operasional;
                if (d.users) dataUserLocal = d.users;
                tryRefreshDash();
            }
        })
        .catch(() => {
            // Fallback: load individually if batch fails
            axios.get('/api/master-data').then(res => { if(res.data.success) dataMasterLocal = res.data.data; }).catch(() => {});
            axios.get('/api/harga-pasar', { params: { dapur_id: activeDapurContext } }).then(res => { if(res.data.success) dataHargaPasarLocal = res.data.data; }).catch(() => {});
            axios.get('/api/suplier', { params: { dapur_id: activeDapurContext } }).then(res => { if(res.data.success) { dataSuplierLocal = res.data.data; tryRefreshDash(); } }).catch(() => {});
            axios.get('/api/harga-real', { params: { dapur_id: activeDapurContext } }).then(res => { if(res.data.success) dataHargaRealLocal = res.data.data; }).catch(() => {});
            axios.get('/api/bank-menu', { params: { dapur_id: activeDapurContext } }).then(res => {
                if(res.data.success) {
                    dataBankMenuLocal = res.data.data.map(m => {
                        try { return typeof m.Data_JSON === 'string' ? JSON.parse(m.Data_JSON) : (m.Data_JSON || m); }
                        catch(e) { return m; }
                    });
                    tryRefreshDash();
                }
            }).catch(() => {});
            axios.get('/api/po', { params: { dapur_id: activeDapurContext } }).then(res => { if(res.data.success) { dataPOLocal = res.data.data; tryRefreshDash(); } }).catch(() => {});
            axios.get('/api/operasional', { params: { dapur_id: activeDapurContext } }).then(res => { if(res.data.success) dataOperasionalLocal = res.data.data; }).catch(() => {});
            if (currentUser.role === 'Super Admin') {
                axios.get('/api/users').then(res => { if(res.data.success) dataUserLocal = res.data.data; }).catch(() => {});
            }
        });
};

// =========================================================================
// SIDEBAR ACCORDION & MENU BUILDER
// =========================================================================
window.toggleSidebarGroup = function(groupId) {
    const content = document.getElementById('group-' + groupId);
    const icon = document.getElementById('icon-group-' + groupId);
    if (content && icon) {
        if (content.classList.contains('hidden')) {
            content.classList.remove('hidden');
            icon.classList.add('rotate-180');
        } else {
            content.classList.add('hidden');
            icon.classList.remove('rotate-180');
        }
    }
};

window.setupEnvironmentAndMenu = function() {
    const switcherContainer = document.getElementById('dapurSwitcherContainer');
    const badgeContainer = document.getElementById('activeDapurBadge');

    if(['Super Admin','Admin Data'].includes(currentUser.role)) {
        switcherContainer.classList.remove('hidden'); switcherContainer.classList.add('flex'); badgeContainer.classList.add('hidden');
        let activeName = activeDapurContext === 'ALL' ? 'Mata Tuhan (All)' : globalDapurList.find(d=>d.ID_Dapur===activeDapurContext)?.Nama_Dapur;
        const switcherText = document.getElementById('dapurSwitcherText'); if(switcherText) switcherText.innerText = activeName || activeDapurContext;
    } else {
        switcherContainer.classList.add('hidden'); switcherContainer.classList.remove('flex'); badgeContainer.classList.remove('hidden'); badgeContainer.classList.add('flex');
        const myDapur = globalDapurList.find(d => d.ID_Dapur === currentUser.dapur_id);
        const activeDapurText = document.getElementById('activeDapurText'); if(activeDapurText) activeDapurText.innerText = myDapur ? myDapur.Nama_Dapur : (currentUser.dapur_id || 'Unknown');
    }

    const sb = document.getElementById('sidebarMenu');
    if(sb && sb.querySelectorAll('a').length === 0) {
        let groupedMenus = {};
        appMenus.forEach(m => {
            if (m.roles.includes(currentUser.role)) {
                if (!groupedMenus[m.group]) groupedMenus[m.group] = [];
                groupedMenus[m.group].push(m);
            }
        });

        let sbHtml = '';
        Object.keys(groupedMenus).forEach((groupName, index) => {
            let safeGroupId = groupName.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase();
            let items = groupedMenus[groupName];

            sbHtml += `<div class="mb-3">`;
            if (items.length > 1 || groupName !== 'Utama') {
                sbHtml += `
                    <div class="flex items-center justify-between cursor-pointer select-none mb-1 px-3 py-2 hover:bg-slate-50 rounded-xl transition group" onclick="window.toggleSidebarGroup('${safeGroupId}')">
                        <span class="text-[10px] font-extrabold text-slate-400 uppercase tracking-widest group-hover:text-sky-600 transition">${groupName}</span>
                        <i id="icon-group-${safeGroupId}" class="fas fa-chevron-down text-[9px] text-slate-300 transition-transform duration-200 group-hover:text-sky-500"></i>
                    </div>`;
            }

            sbHtml += `<div id="group-${safeGroupId}" class="space-y-1">`;
            items.forEach(m => {
                sbHtml += `<a href="javascript:void(0)" id="menu-${m.id}" onclick="window.switchMenu('${m.id}')" class="menu-item flex items-center py-3 px-4 text-slate-600 rounded-xl font-semibold text-sm cursor-pointer">
                    <div class="w-8 h-8 rounded-lg ${m.color} flex items-center justify-center mr-3 shadow-sm"><i class="fas ${m.icon} text-xs"></i></div>
                    <span>${m.title}</span>
                </a>`;
            });
            sbHtml += `</div></div>`;
        });

        sb.innerHTML = sbHtml;
        window.switchMenu('dashboard');
    }
};

// =========================================================================
// DAPUR SWITCHER (Super Admin)
// =========================================================================
window.openModalPilihDapur = function() {
    const list = document.getElementById('listDapurModal');
    let html = `<button onclick="window.switchDapur('ALL', 'Mata Tuhan (All)')" class="w-full text-left p-4 rounded-xl font-bold text-sm transition flex items-center mb-2 ${activeDapurContext === 'ALL' ? 'bg-sky-50 text-sky-700 border border-sky-200' : 'hover:bg-slate-100 border border-transparent'}">
        <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-sky-100 to-blue-50 flex items-center justify-center mr-3 shadow-sm"><i class="fas fa-eye text-sky-600 text-xs"></i></div>
        Mata Tuhan (Semua)</button>`;
    globalDapurList.forEach(d => {
        let isActive = activeDapurContext === d.ID_Dapur;
        html += `<button onclick="window.switchDapur('${d.ID_Dapur}', '${d.Nama_Dapur}')" class="w-full text-left p-4 rounded-xl font-bold text-sm transition flex items-center mb-2 ${isActive ? 'bg-sky-50 text-sky-700 border border-sky-200' : 'hover:bg-slate-100 border border-transparent'}">
            <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-slate-100 to-white flex items-center justify-center mr-3 shadow-sm"><i class="fas fa-store text-slate-500 text-xs"></i></div>
            ${d.Nama_Dapur}</button>`;
    });
    list.innerHTML = html;

    const modal = document.getElementById('modalPilihDapur');
    modal.classList.remove('hidden');
    setTimeout(() => { modal.classList.remove('opacity-0'); document.getElementById('modalPilihDapurContent').classList.remove('scale-95'); }, 10);
};

window.closeModalPilihDapur = function() {
    const modal = document.getElementById('modalPilihDapur');
    modal.classList.add('opacity-0');
    document.getElementById('modalPilihDapurContent').classList.add('scale-95');
    setTimeout(() => { modal.classList.add('hidden'); }, 300);
};

window.switchDapur = function(dapurId, dapurName) {
    activeDapurContext = dapurId;
    document.getElementById('dapurSwitcherText').innerText = dapurName;
    window.closeModalPilihDapur();
    window.loadInitialDataBg();
    // Re-render menu aktif
    const activeMenu = document.querySelector('.menu-active');
    if(activeMenu) { window.switchMenu(activeMenu.id.replace('menu-', '')); }
    window.updateHeaderBadges();
};


// =========================================================================
// 📁 05. SWITCHMENU — Routing SPA (Render setiap modul)
// =========================================================================
window.switchMenu = function(menuId) {
    document.querySelectorAll('.menu-item').forEach(el => el.classList.remove('menu-active'));
    const activeEl = document.getElementById('menu-' + menuId);
    if(activeEl) activeEl.classList.add('menu-active');

    const menuInfo = appMenus.find(m => m.id === menuId);
    const titleEl = document.getElementById('pageTitle');
    if(titleEl && menuInfo) titleEl.innerText = menuInfo.title;

    const ca = document.getElementById('contentArea');
    if(!ca) return;

    switch(menuId) {
        case 'dashboard': window.renderDashboard(ca); break;
        case 'datamaster': window.renderDataMaster(ca); break;
        case 'hargapasar': window.renderHargaPasar(ca); break;
        case 'perhitungan': window.renderPerhitungan(ca); break;
        case 'bankmenu': window.renderBankMenu(ca); break;
        case 'analisisgizi': window.renderAnalisisGizi(ca); break;
        case 'analisisbarang': window.renderAnalisisPenggunaan(ca); break;
        case 'suplier': window.renderSuplier(ca); break;
        case 'hargarealnota': window.renderHargaReal(ca); break;
        case 'purchaseorder': window.renderPurchaseOrder(ca); break;
        case 'operasional': window.renderOperasional(ca); break;
        case 'datasekolah': window.renderDataSekolah(ca); break;
        case 'dataposyandu': window.renderDataPosyandu(ca); break;
        case 'usermanagement': window.renderUserManagement(ca); break;
        default: ca.innerHTML = `<div class="flex items-center justify-center h-full text-slate-400 font-bold">Modul "${menuId}" belum tersedia.</div>`;
    }
};


// =========================================================================
// 📁 JAM DIGITAL (Real-time Clock)
// =========================================================================
window.jalankanJamDigital = function() {
    const dateEl = document.getElementById('headerDate');
    const timeEl = document.getElementById('headerTime');
    if(!dateEl || !timeEl) return;

    const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
    const months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];

    const updateWaktu = () => {
        const now = new Date();
        dateEl.innerHTML = `<i class="far fa-calendar-alt mr-1 text-slate-300"></i> ${days[now.getDay()]}, ${String(now.getDate()).padStart(2, '0')} ${months[now.getMonth()]} ${now.getFullYear()}`;
        timeEl.innerHTML = `<i class="far fa-clock mr-1 text-sky-400"></i> ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')} WIB`;
    };
    updateWaktu();
    setInterval(updateWaktu, 1000);
};


// Proxy google.script.run removed -- migrating to native Axios

window.updateHeaderBadges = function() {
    let rawDapurId = currentUser.role === 'Super Admin' ? activeDapurContext : currentUser.dapur_id;
    let tid = String(rawDapurId || '').trim().toUpperCase();
    let isAll = tid === 'ALL';

    let namaDapurStr = "Mata Tuhan (Semua Cabang)";
    if (!isAll) {
        let fd = globalDapurList.find(d => String(d.ID_Dapur||'').trim().toUpperCase() === tid);
        namaDapurStr = fd ? fd.Nama_Dapur : (globalDapurList.length === 0 ? "Menyinkronkan..." : `ID: ${tid}`);
    }
    let yayasanStr = (currentUser.yayasan && currentUser.yayasan.trim() !== '') ? currentUser.yayasan : "Yayasan Belum Diset";
    if (currentUser.role === 'Super Admin' && isAll) yayasanStr = "Pusat Yayasan Global";

    const hd = document.getElementById('headerDapurText');
    const hy = document.getElementById('headerYayasanText');
    if(hd) hd.innerText = namaDapurStr;
    if(hy) hy.innerText = yayasanStr;
};

// =========================================================================
// INIT — DOMContentLoaded
// =========================================================================
document.addEventListener("DOMContentLoaded", () => {
    window.jalankanJamDigital();
    window.setupEnvironmentAndMenu();
    window.updateHeaderBadges();
    window.loadInitialDataBg();
});
</script>

@include('components.modals_sasaran')

{{-- ====================================================================
     SEMUA MODUL RENDER (Dashboard, DataMaster, HargaPasar, dll.)
     Versi cache: filemtime — hanya berubah saat file diperbarui.
     ==================================================================== --}}
@php $v = filemtime(public_path('js/modules/dashboard.js')); @endphp
<script defer src="{{ asset('js/modules/dashboard.js') }}?v={{ $v }}"></script>
<script defer src="{{ asset('js/modules/dashboardsasaran.js') }}?v={{ $v }}"></script>
<script defer src="{{ asset('js/modules/datamaster.js') }}?v={{ $v }}"></script>
<script defer src="{{ asset('js/modules/hargapasar.js') }}?v={{ $v }}"></script>
<script defer src="{{ asset('js/modules/perhitungan.js') }}?v={{ $v }}"></script>
<script defer src="{{ asset('js/modules/bankmenu.js') }}?v={{ $v }}"></script>
<script defer src="{{ asset('js/modules/analisisgizi.js') }}?v={{ $v }}"></script>
<script defer src="{{ asset('js/modules/analisisbarang.js') }}?v={{ $v }}"></script>
<script defer src="{{ asset('js/modules/suplier.js') }}?v={{ $v }}"></script>
<script defer src="{{ asset('js/modules/hargarealnota.js') }}?v={{ $v }}"></script>
<script defer src="{{ asset('js/modules/purchaseorder.js') }}?v={{ $v }}"></script>
<script defer src="{{ asset('js/modules/usermanagement.js') }}?v={{ $v }}"></script>
<script defer src="{{ asset('js/modules/operasional.js') }}?v={{ $v }}"></script>
<script defer src="{{ asset('js/modules/datasekolah.js') }}?v={{ $v }}"></script>
<script defer src="{{ asset('js/modules/dataposyandu.js') }}?v={{ $v }}"></script>

@endsection