{{-- resources/views/partials/footer.blade.php --}}
@php
    // Logika penangkapan ID Anak agar rute tidak error
    $idAnak = $activeAnakId ?? (isset($anakAnak) && $anakAnak->count() > 0 ? $anakAnak->first()->id : 0);
@endphp

<style>
    /* =========================================================================
       1. SMART MENU OVERLAY (TAMPIL SAAT TOMBOL TENGAH DIKLIK)
       ========================================================================= */
    .smart-menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(8px);
        z-index: 1030;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: flex-end;
    }
    .smart-menu-overlay.show {
        opacity: 1;
        visibility: visible;
    }
    .smart-menu-content {
        width: 100%;
        background: #ffffff;
        border-top-left-radius: 35px;
        border-top-right-radius: 35px;
        padding: 30px 20px 120px; /* Padding bawah extra agar tidak tertutup nav */
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 0 -15px 30px rgba(0,0,0,0.1);
    }
    .smart-menu-overlay.show .smart-menu-content {
        transform: translateY(0);
    }
    .smart-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 10px;
    }
    .smart-action {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none !important;
        color: #1e293b;
        transition: 0.3s;
    }
    .smart-action:active { transform: scale(0.9); }
    .smart-icon {
        width: 56px;
        height: 56px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-bottom: 8px;
        color: #ffffff;
        box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    }
    .smart-action span {
        font-size: 0.75rem;
        font-weight: 800;
        text-align: center;
        line-height: 1.2;
    }

    /* =========================================================================
       2. BOTTOM NAVIGATION BAR (UTAMA)
       ========================================================================= */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 75px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 1040;
        border-top: 1px solid rgba(0,0,0,0.05);
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        box-shadow: 0 -10px 30px rgba(0,0,0,0.05);
        padding: 0 10px;
        transition: transform 0.4s ease;
    }
    .mobile-bottom-nav.hide-nav {
        transform: translateY(120%);
    }

    .nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #94a3b8;
        text-decoration: none !important;
        font-size: 0.7rem;
        font-weight: 700;
        transition: 0.3s;
        height: 100%;
    }
    .nav-item.active {
        color: #4f46e5; /* Primary Color */
    }
    .nav-icon {
        font-size: 1.4rem;
        margin-bottom: 4px;
    }

    /* Tombol Tengah (Floating Effect) */
    .nav-item-center {
        position: relative;
        flex: 1;
        display: flex;
        justify-content: center;
        z-index: 1050;
    }
    .nav-center-wrapper {
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 1.6rem;
        box-shadow: 0 10px 25px rgba(79, 70, 229, 0.4);
        border: 4px solid #f8fafc; /* Menyesuaikan Background Body */
        transform: translateY(-28px) rotate(45deg);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .nav-center-wrapper i {
        transform: rotate(-45deg);
        transition: 0.4s;
    }
    .nav-item-center span {
        position: absolute;
        bottom: 5px;
        color: #4f46e5;
        font-size: 0.7rem;
        font-weight: 800;
    }

    /* Animasi saat menu terbuka */
    .menu-open .nav-center-wrapper {
        transform: translateY(-28px) rotate(135deg);
        background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
        box-shadow: 0 10px 25px rgba(225, 29, 72, 0.4);
    }
    .menu-open .nav-center-wrapper i {
        transform: rotate(-135deg);
    }

    /* Helper Spin untuk Sync */
    .sync-spin { animation: spin 1s linear infinite; }
    @keyframes spin { 100% { transform: rotate(360deg); } }
</style>

{{-- 1. OVERLAY MENU --}}
<div class="smart-menu-overlay" id="smartOverlay" onclick="toggleSmartMenu()">
    <div class="smart-menu-content" onclick="event.stopPropagation()">
        <h4 style="font-size: 1.1rem; font-weight: 900; text-align: center; margin-bottom: 25px; color: #0f172a;">Akses Cepat</h4>
        <div class="smart-grid">
            <a href="{{ route('orangtua.anak.tagihan', $idAnak) }}" class="smart-action">
                <div class="smart-icon" style="background: linear-gradient(135deg, #f43f5e, #be123c);"><i class="fas fa-file-invoice-dollar"></i></div>
                <span>Tagihan</span>
            </a>
            <a href="{{ route('orangtua.anak.tabungan', $idAnak) }}" class="smart-action">
                <div class="smart-icon" style="background: linear-gradient(135deg, #10b981, #047857);"><i class="fas fa-hamburger"></i></div>
                <span>Kantin</span>
            </a>
            <a href="{{ route('orangtua.anak.lms', $idAnak) }}" class="smart-action">
                <div class="smart-icon" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);"><i class="fas fa-book-reader"></i></div>
                <span>Belajar</span>
            </a>
            <a href="{{ route('orangtua.anak.jadwal', $idAnak) }}" class="smart-action">
                <div class="smart-icon" style="background: linear-gradient(135deg, #f59e0b, #b45309);"><i class="far fa-calendar-alt"></i></div>
                <span>Jadwal</span>
            </a>
            <a href="{{ route('orangtua.anak.absensi', $idAnak) }}" class="smart-action">
                <div class="smart-icon" style="background: linear-gradient(135deg, #8b5cf6, #6d28d9);"><i class="fas fa-fingerprint"></i></div>
                <span>Absensi</span>
            </a>
            <a href="{{ route('orangtua.anak.nilai', $idAnak) }}" class="smart-action">
                <div class="smart-icon" style="background: linear-gradient(135deg, #64748b, #334155);"><i class="fas fa-award"></i></div>
                <span>Nilai</span>
            </a>
        </div>
    </div>
</div>

{{-- 2. BOTTOM NAV --}}
<div class="mobile-bottom-nav desktop-ui-hide" id="bottomNav">
    <a href="{{ route('orangtua.dashboard') }}" class="nav-item {{ request()->routeIs('orangtua.dashboard') || request()->routeIs('orangtua.anak.dashboard') ? 'active' : '' }}">
        <i class="fas fa-home nav-icon"></i>
        <span>Beranda</span>
    </a>

    <div class="nav-item-center" onclick="toggleSmartMenu()" id="btnSmartMenu">
        <div class="nav-center-wrapper">
            <i class="fas fa-th-large" id="centerIcon"></i>
        </div>
        <span>Menu</span>
    </div>

    <a href="{{ route('profile') }}" class="nav-item {{ request()->routeIs('profile') ? 'active' : '' }}">
        <i class="fas fa-user-circle nav-icon"></i>
        <span>Profil</span>
    </a>
</div>

{{-- 3. SCRIPTS --}}
<script>
    function toggleSmartMenu() {
        const overlay = document.getElementById('smartOverlay');
        const btnMenu = document.getElementById('btnSmartMenu');
        const centerIcon = document.getElementById('centerIcon');

        overlay.classList.toggle('show');
        btnMenu.classList.toggle('menu-open');
        
        if(overlay.classList.contains('show')) {
            centerIcon.className = "fas fa-times";
            document.body.style.overflow = 'hidden'; // Lock scroll
        } else {
            centerIcon.className = "fas fa-th-large";
            document.body.style.overflow = 'auto'; // Unlock scroll
        }
    }

    // Auto-Hide on Scroll Logic
    let lastScrollTop = 0;
    let isScrolling = false;
    const bNav = document.getElementById('bottomNav');

    window.addEventListener('scroll', function() {
        if (!isScrolling) {
            window.requestAnimationFrame(function() {
                let st = window.pageYOffset || document.documentElement.scrollTop;
                if (st > lastScrollTop && st > 100) {
                    // Scroll Down
                    if(!document.getElementById('smartOverlay').classList.contains('show')) {
                        bNav.classList.add('hide-nav');
                    }
                } else {
                    // Scroll Up
                    bNav.classList.remove('hide-nav');
                }
                lastScrollTop = st <= 0 ? 0 : st;
                isScrolling = false;
            });
            isScrolling = true;
        }
    }, { passive: true });

    // Global Sync Logic
    function syncData() {
        let icon = document.getElementById('icon-sync');
        if(icon) icon.classList.add('sync-spin'); 
        
        // Cek jika tidak sedang dalam modal pengerjaan penting
        if(!document.body.classList.contains('modal-open')) {
            setTimeout(() => { window.location.reload(); }, 800);
        } else {
            if(icon) icon.classList.remove('sync-spin');
        }
    }
</script>