@extends('webview.masjid.main')

@push('style')
<link rel="stylesheet" href="{{ route('masjid-mobile.home.css') }}?v={{ time() }}" />
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
@endpush

@section('content')
<div class="body">
    <div class="header">
        {{-- Tambahkan ID disini --}}
        <h5 id="header-nama-masjid">Memuat Nama Masjid...</h5>
        <h6 id="header-alamat">Memuat Alamat...</h6>
    </div>
    <div id="box-schedule" class="box-schedule bg-darkblue">
        <div id="box-stacked" class="box-stacked bg-night">
            <div class="top-content">
                <div class="left-content">
                    <div class="clock-text" id="clock-text">00:00</div>
                    <div class="sub-text" id="clock-label"></div>
                </div>
                <div class="right-content">
                    <div class="sub-text" id="date-ad">-- - -</div>
                    <div class="sub-text" id="date-hijri">- - - -</div>
                </div>
            </div>
            <div id="prayer-container" class="prayer-container">
                <div class="prayer-item" data-prayer="subuh">
                    <img alt="prayer-icon" src="{{ asset('asset-webview/masjid/icons/icon-subuh.png') }}" height="20" width="20">
                    <div class="prayer-time">00:00</div>
                    <div class="prayer-name">Subuh</div>
                </div>
                <div class="prayer-item" data-prayer="dzuhur">
                    <img alt="prayer-icon" src="{{ asset('asset-webview/masjid/icons/icon-dzuhur.png') }}" height="20" width="20">
                    <div class="prayer-time">00:00</div>
                    <div class="prayer-name">Dzuhur</div>
                </div>
                <div class="prayer-item" data-prayer="ashar">
                    <img alt="prayer-icon" src="{{ asset('asset-webview/masjid/icons/icon-ashar.png') }}" height="20" width="20">
                    <div class="prayer-time">00:00</div>
                    <div class="prayer-name">Ashar</div>
                </div>
                <div class="prayer-item" data-prayer="maghrib">
                    <img alt="prayer-icon" src="{{ asset('asset-webview/masjid/icons/icon-maghrib.png') }}" height="20" width="20">
                    <div class="prayer-time">00:00</div>
                    <div class="prayer-name">Maghrib</div>
                </div>
                <div class="prayer-item" data-prayer="isya">
                    <img alt="prayer-icon" src="{{ asset('asset-webview/masjid/icons/icon-isya.png') }}" height="20" width="20">
                    <div class="prayer-time">00:00</div>
                    <div class="prayer-name">Isya</div>
                </div>
                <div class="prayer-item" data-prayer="terbit">
                    <img alt="prayer-icon" src="{{ asset('asset-webview/masjid/icons/icon-dhuha.png') }}" height="20" width="20">
                    <div class="prayer-time">00:00</div>
                    <div class="prayer-name">Terbit</div>
                </div>
            </div>
        </div>
        <div class="information-container">
            Saldo
            <a href="#" class="btn-link">
                <span id="saldo-kas-masjid">Rp. 0</span>
                <div class="circle-icon">
                    <img alt="angle-right" src="{{ asset('asset-webview/masjid/icons/angle-right.png') }}">
                </div>
            </a>
        </div>
    </div>
    
    <div class="menu-section">
        <div class="menu-header">
            <span class="label-section">Menu Utama</span>
            </div>
        
        <div id="menu_home" class="menu-grid">
            </div>
    </div>

    <div class="photo-gallery">
        <div class="swiper-container">
            <div class="swiper-wrapper" id="slider-wrapper">
                <div class="swiper-slide">
                    <div class="info-card">
                        <img src="https://placehold.co/800x400/e2b947/ffffff?text=Loading..." class="card-img-full">
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </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/masjid/images/mosque.png') }}";
        var ASSET_ICON_URL = "{{ asset('asset-webview/masjid/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('masjid-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 + "masjid-auth/storage-file?filename=" + slide.image_url;
                            } else if (slide.article && slide.article.image_url) {
                                imgSrc = $apiUrl + "masjid-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 Masjid'}</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();


        // --- 3. JAM & JADWAL SHOLAT (Existing) ---
        const $ClockText = $('#clock-text');
        const $ClockLabel = $('#clock-label');
        const $BoxSchedule = $('#box-schedule');
        const $BoxStacked = $('#box-stacked');
        const $PrayerContainer = $('#prayer-container');
        const $DateAd = $('#date-ad');
        const $DateHijri = $('#date-hijri');

        // Fungsi Format Tanggal Masehi
        function formatTanggalIndonesia() {
            const date = new Date();
            const namaBulan = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
            const tanggal = date.getDate().toString().padStart(2, '0');
            const bulan = namaBulan[date.getMonth()];
            const tahun = date.getFullYear();
            return `${tanggal} ${bulan} ${tahun}`;
        }
        $DateAd.text(formatTanggalIndonesia());

        // Fungsi Tanggal Hijriyah
        async function getTanggalHijriah() {
            const date = new Date();
            const tanggal = date.getDate().toString().padStart(2, '0');
            const bulan = (date.getMonth() + 1).toString().padStart(2, '0');
            const tahun = date.getFullYear();
            try {
                const response = await fetch(`https://service.unisayogya.ac.id/kalender/api/masehi2hijriah/muhammadiyah/${tahun}/${bulan}/${tanggal}`);
                const data = await response.json();
                const tanggal_hijri = data.terbilang;
                $DateHijri.text(tanggal_hijri.substring(0, tanggal_hijri.indexOf('|')).trim());
            } catch (error) { console.error('Error Hijri:', error); }
        }
        getTanggalHijriah();

        // Fungsi Helper Storage
        function saveDataHarian(key, data) { 
            localStorage.setItem(key, JSON.stringify({ 
                tanggal: new Date().toDateString(), 
                data: data 
            })); 
        }

        function getDataHarian(key) {
            const stored = localStorage.getItem(key);
            if (!stored) return null;
            const dataWrapper = JSON.parse(stored);
            return (dataWrapper.tanggal === new Date().toDateString()) ? dataWrapper.data : null;
        }

        // Fungsi Update Clock & Jadwal
        async function updateClock() {
            try {
                const date = new Date();
                $ClockText.text(`${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`);

                let jadwal = getDataHarian('jadwal-sholat');
                if(!jadwal) {
                    const dateStr = `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2,'0')}-${date.getDate().toString().padStart(2,'0')}`;
                    const res = await fetch(`https://api.myquran.com/v2/sholat/jadwal/1219/${dateStr}`);
                    const json = await res.json();
                    jadwal = json.data.jadwal;
                    saveDataHarian('jadwal-sholat', jadwal);
                }

                if(jadwal) {
                    // Update Waktu Sholat UI
                    $PrayerContainer.find('.prayer-item').each((index, element) => {
                        const key = $(element).data('prayer');
                        $(element).find('.prayer-time').text(jadwal[key]);
                    });

                    // Highlight Active Prayer
                    const toMin = (t) => { const [h,m] = t.split(':').map(Number); return h*60+m; };
                    const nowMin = new Date().getHours() * 60 + new Date().getMinutes();
                    
                    const times = [
                        { k: 'subuh', v: toMin(jadwal.subuh), l: 'Subuh' },
                        { k: 'terbit', v: toMin(jadwal.terbit), l: 'Terbit' },
                        { k: 'dzuhur', v: toMin(jadwal.dzuhur), l: 'Dzuhur' },
                        { k: 'ashar', v: toMin(jadwal.ashar), l: 'Ashar' },
                        { k: 'maghrib', v: toMin(jadwal.maghrib), l: 'Maghrib' },
                        { k: 'isya', v: toMin(jadwal.isya), l: 'Isya' }
                    ];

                    let active = null, next = null;
                    for(let i=0; i<times.length; i++) {
                        const curr = times[i];
                        const nxt = times[i+1] || times[0];
                        if(nowMin >= curr.v) { active = curr; next = nxt; }
                        else { if(!next) next = curr; break; }
                    }
                    if(!active) { active = times[times.length-1]; next = times[0]; }

                    $PrayerContainer.find('.prayer-item').removeClass('active');
                    $PrayerContainer.find(`.prayer-item[data-prayer="${active.k}"]`).addClass('active');

                    let diff = next.v - nowMin;
                    if(diff < 0) diff += 1440;
                    
                    if(diff <= 15) $ClockLabel.text(`${diff} menit menuju ${next.l}`);
                    else $ClockLabel.text(`Masuk waktu ${active.l}`);

                    // Background Logic
                    $BoxSchedule.removeClass((i,c)=>(c.match(/\bbg-\S+/g)||[]).join(' '));
                    $BoxStacked.removeClass((i,c)=>(c.match(/\bbg-\S+/g)||[]).join(' '));
                    
                    if(nowMin >= toMin(jadwal.terbit) && nowMin < toMin(jadwal.ashar)) {
                        $BoxSchedule.addClass('bg-lightblue'); $BoxStacked.addClass('bg-afternoon');
                    } else if(nowMin >= toMin(jadwal.ashar) && nowMin < toMin(jadwal.maghrib)) {
                        $BoxSchedule.addClass('bg-indianred'); $BoxStacked.addClass('bg-evening');
                    } else {
                        $BoxSchedule.addClass('bg-darkblue'); $BoxStacked.addClass('bg-night');
                    }
                }
            } catch (error) { console.error('Error Clock:', error); }
        }

        function scheduleNextUpdate() {
            setTimeout(function () { updateClock(); scheduleNextUpdate(); }, 1000);
        }
        updateClock();
        scheduleNextUpdate();


        // --- 4. DASHBOARD DATA ---
        function getDashboardData() {
            $('#saldo-kas-masjid').text('Loading...');
            $.ajax({
                url: "{{ route('masjid-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-masjid').text(fmt(res.data.saldo_kas));
                    else $('#saldo-kas-masjid').text('Rp. -');
                },
                error: function() { $('#saldo-kas-masjid').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/masjid/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 = {
            'app_admin_mobile_mjd_fLapKasOpr':      { route: "{{ route('masjid-mobile.page.kas-dkm') }}",       icon: 'icon-kas-gold.png',      label: 'Rekap Dana' },
            'app_admin_mobile_mjd_fLapKasZakat':    { route: "{{ route('masjid-mobile.page.kas-zakat') }}",     icon: 'icon-zakat-gold.png',    label: 'Zakat' },
            'app_admin_mobile_mjd_fLapBukuBesar':   { route: "{{ route('masjid-mobile.page.saldo-kas') }}",     icon: 'icon-saldo-gold.png',    label: 'Buku Kas' },
            'app_admin_mobile_mjd_fLapSHO':         { route: "{{ route('masjid-mobile.page.sho') }}",           icon: 'icon-sho-gold.png',      label: 'Lap Aktivitas' },
            'app_admin_mobile_mjd_fLapPosisiKeuangan': { route: "{{ route('masjid-mobile.page.posisi-keuangan') }}", icon: 'icon-keuangan-gold.png', label: 'Posisi Keuangan' },
            'app_admin_mobile_mjd_fKbIn': { route: "{{ route('masjid-mobile.page.penerimaan-kas') }}", icon: 'icon-penerimaankas-gold.png', label: 'Penerimaan Kas' },
            'app_admin_mobile_mjd_fKbInZakat': { route: "{{ route('masjid-mobile.page.penerimaan-zakat') }}", icon: 'icon-penerimaanzakat-gold.png', label: 'Penerimaan Zakat' },
            'app_admin_mobile_mjd_fKbOut': { route: "{{ route('masjid-mobile.page.pengeluaran-kas') }}", icon: 'icon-pengeluarankas-gold.png', label: 'Pengeluaran Kas' },
            'app_admin_mobile_mjd_fKbOutZakat': { route: "{{ route('masjid-mobile.page.pengeluaran-zakat') }}", icon: 'icon-pengeluaranzakat-gold.png', label: 'Pengeluaran Zakat' },
            'app_admin_mobile_mjd_fUploadDok': { route: "#", icon: 'icon-uploaddokumen-gold.png', label: 'Upload Dokumen' },
            'app_admin_mobile_mjd_fViewDok': { route: "#", icon: 'icon-viewdokumen-gold.png', label: 'View Dokumen' },
            '-': { route: "#", icon: 'icon-infaq-gold.png', label: 'Infaq/Shodaqoh' },
            'app_admin_mobile_mjd_fKegiatanIn': { route: "{{ route('masjid-mobile.page.penerimaan-kegiatan') }}", icon: 'icon-inputinfo-gold.png', label: 'Penerimaan Donatur' },
            'app_admin_mobile_mjd_fKegiatanOut': { route: "{{ route('masjid-mobile.page.pengeluaran-kegiatan') }}", icon: 'icon-info-gold.png', label: 'Pengeluaran Kegiatan' },
            'app_admin_mobile_mjd_fLapKeg': { route: "{{ route('masjid-mobile.page.kegiatan-donatur') }}", icon: 'icon-bayarkegiatan-gold.png', label: 'Lap Kegiatan' },
            'app_admin_mobile_mjd_fLapKegDonatur': { route: "{{ route('masjid-mobile.page.kegiatan-donatur.pribadi') }}", icon: 'icon-bayarkegiatan-gold.png', label: 'Kartu Donatur' }
        };

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

            $.ajax({
                type: 'GET',
                url: "{{ route('masjid-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 (LOGIC TOGGLE) ---
        function renderHTML() {
            var html = '';
            var totalItems = globalMenuList.length;
            var needToggle = totalItems > (LIMIT_MENU + 1);
            var itemsToShow = [];
            
            if (needToggle && !isMenuExpanded) {
                itemsToShow = globalMenuList.slice(0, LIMIT_MENU);
            } else {
                itemsToShow = globalMenuList;
            }

            // A. Loop Menu Utama
            itemsToShow.forEach(function(row) {
                var config = MENU_ROUTES[row.form];
                
                // REFACTOR HTML ITEM DISINI
                html += `
                    <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>
                `;
            });

            // B. Tombol Toggle (Lainnya / Tutup)
            if (needToggle) {
                var labelBtn = isMenuExpanded ? "Tutup" : "Lainnya";
                var iconBtn  = isMenuExpanded ? ICON_LESS_SVG : ICON_MORE_PNG;
                
                // REFACTOR TOMBOL TOGGLE DISINI
                html += `
                    <div class="menu-item btn-toggle-menu">
                        <div class="menu-icon-circle" style="background-color: #FFF9E6;"> <img src="${iconBtn}" style="width: 24px; height: 24px;">
                        </div>
                        <span class="menu-text">${labelBtn}</span>
                    </div>
                `;
            }

            $('#menu_home').html(html);
        }

        // --- 6. EVENT LISTENER ---
        $(document).on('click', '.btn-toggle-menu', function(e) {
            e.preventDefault();
            isMenuExpanded = !isMenuExpanded; // Balik Status
            renderHTML(); // Gambar Ulang
        });
        // Panggil Fungsi Load Menu
        var sessionKodeMenu = "{{ Session::get('kodeMenuMobile') }}";
        loadMenu(sessionKodeMenu);

        // --- 7. LOAD HEADER MASJID ---
        function loadHeaderInfo() {
            $.ajax({
                url: "{{ route('masjid-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-masjid').text(data.nama_masjid);
                    } else {
                        $('#header-nama-masjid').text("Masjid Raya Al-Azhar");
                    }

                    // 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('masjid_running_text', data.running_text);
                    }
                },
                error: function(xhr) {
                    console.log("Gagal load info masjid");
                    $('#header-nama-masjid').text("Masjid Raya Al-Azhar");
                    // Jika error, sembunyikan alamat atau tampilkan default (pilih salah satu)
                    $('#header-alamat').hide(); 
                }
            });
        }

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

    });
</script>
@endpush