<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title') | Pustaka Nawasena</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        /* RESET TOTAL */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            background: #0f172a;
            height: 100vh;
            width: 100vw;
            overflow: hidden; /* Kunci layar agar tidak goyang */
        }

        /* HEADER: Paksa Tinggi 55px */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 55px !important; 
            background: white;
            border-bottom: 2px solid #b45309;
            display: flex;
            align-items: center;
            padding: 0 1.5rem;
            z-index: 1000;
        }

        /* FOOTER: Paksa Tinggi 30px */
        footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 30px !important;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        /* AREA KONTEN: Otomatis mengisi sisa layar */
        main {
            position: absolute;
            top: 55px;   /* Mulai tepat setelah header */
            bottom: 30px; /* Berakhir tepat sebelum footer */
            left: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: linear-gradient(rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.95)), url("{{ asset('images/utama.jpg') }}");
            background-size: cover;
            padding: 10px;
        }

        /* Label Kecil */
        .brand-text { font-weight: 900; font-size: 1rem; color: #0f172a; line-height: 1; }
        .brand-sub { font-size: 7px; font-weight: 800; color: #b45309; text-transform: uppercase; }
        #clock { font-weight: 800; font-size: 1.2rem; color: #0f172a; }
        #date { font-size: 8px; color: #64748b; text-transform: uppercase; }

        @stack('styles')
    </style>
</head>
<body>

    <header>
        <div class="flex items-center gap-3">
            <img src="{{ asset('images/kartu.png') }}" style="height: 30px; width: auto;">
            <div class="w-[1px] h-6 bg-slate-200"></div>
            <img src="{{ asset('images/bakorwil.png') }}" style="height: 30px; width: auto;">
            <div>
                <div class="brand-text">NAWASENA</div>
                <div class="brand-sub">Smart Library Terminal</div>
            </div>
        </div>
        
        <div class="ml-auto text-right">
            <div id="clock">00:00</div>
            <div id="date">MEMUAT...</div>
        </div>
    </header>

    <main>
        @yield('content')
    </main>

    <footer>
        <p style="color: rgba(255,255,255,0.4); font-size: 9px; font-weight: 700; letter-spacing: 1px;">
            © 2026 BAKORWIL III MALANG &bull; V4.2
        </p>
    </footer>

    <script>
        function updateDateTime() {
            const now = new Date();
            const clock = document.getElementById('clock');
            const date = document.getElementById('date');
            if(clock) clock.textContent = now.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
            if(date) date.textContent = now.toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
        }
        setInterval(updateDateTime, 1000);
        updateDateTime();
    </script>
    @stack('scripts')
</body>
</html>

