<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pustaka Nawasena - @yield('title', 'Koleksi')</title>

  <link rel="icon" href="{{ asset('images/pustaka.jpeg') }}" type="image/png">
  @vite('resources/css/app.css')
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">

  <style>
    :root {
      --primary-orange: #f97316;
      --light-orange: #ffedd5;
    }

    body {
      background-color: #f4f7f9;
      font-family: 'Poppins', sans-serif;
      color: #374151;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* ==== NAVBAR ==== */
    nav {
      background-color: white;
      border-bottom: 3px solid var(--primary-orange);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      height: 64px;
      padding: 0.5rem 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    main {
      flex: 1;
      margin-top: 64px;
      margin-bottom: 50px;
      padding: 1rem;
      position: relative;
      z-index: 1;
    }

    footer {
      background-color: #ffffff;
      color: #6b7280;
      border-top: 1px solid #e5e7eb;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50px;
      text-align: center;
      font-size: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 90;
    }

    /* ==== MENU MOBILE ==== */
    #menu {
      display: none;
    }

    #menu.mobile-open {
      display: block;
      position: fixed;
      top: 64px;
      left: 0;
      width: 100%;
      background: white;
      border-bottom: 2px solid var(--primary-orange);
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
      z-index: 200; /* ✅ pastikan di atas overlay */
      animation: slideDown 0.25s ease-in-out;
    }

    @keyframes slideDown {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    #menu-overlay.active {
      display: block;
    }

    .menu-link-pro {
      display: flex;
      align-items: center;
      padding: 0.75rem 1rem;
      font-weight: 500;
      color: #374151;
      transition: all 0.2s ease-in-out;
    }

    .menu-link-pro:hover {
      color: var(--primary-orange);
      background-color: var(--light-orange);
    }

    @media (min-width: 768px) {
      #menu {
        display: flex !important;
        position: static;
        flex-direction: row;
        background: none;
        box-shadow: none;
        border: none;
        z-index: auto;
      }
      #menu-overlay { display: none !important; }
    }
  </style>
</head>

<body>

  {{-- 🔸 NAVBAR --}}
  <nav>
    <div class="flex items-center space-x-3">
      <img src="{{ asset('images/kartu.png') }}" alt="Logo" class="w-10 h-10">
      <div class="text-xl font-bold tracking-tight text-gray-800 whitespace-nowrap">
        Detail Buku <span class="hidden sm:inline">Pustaka Nawasena</span>
      </div>
    </div>

    {{-- Tombol menu di HP --}}
    <div class="md:hidden">
      <button id="menu-button" class="text-gray-700 text-3xl focus:outline-none hover:text-[var(--primary-orange)] transition duration-200">
        &#9776;
      </button>
    </div>

    {{-- Menu Navigasi --}}
    <div id="menu" class="md:flex md:space-x-2 md:items-center">
      @auth
        @if(Auth::user()->role === 'user')
          <a href="{{ route('user.koleksi') }}" class="menu-link-pro">
            <i class="bi bi-house-door me-2"></i> Koleksi
          </a>
        @endif
      @endauth
    </div>
  </nav>

  {{-- 🔸 Overlay belakang menu --}}
  <div id="menu-overlay"></div>

  {{-- 🔸 Konten Utama --}}
  <main>
    @yield('content')
  </main>

  {{-- 🔸 Footer --}}
  <footer>
    &copy; {{ date('Y') }} Pustaka Nawasena Bakorwil III Malang. Hak Cipta Dilindungi.
  </footer>

  {{-- 🔸 Script Menu Mobile --}}
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const menuBtn = document.getElementById('menu-button');
      const menu = document.getElementById('menu');
      const overlay = document.getElementById('menu-overlay');

      if (menuBtn && menu && overlay) {
        menuBtn.addEventListener('click', (e) => {
          e.stopPropagation();
          const isOpen = menu.classList.toggle('mobile-open');
          overlay.classList.toggle('active', isOpen);
        });

        // Klik overlay untuk tutup
        overlay.addEventListener('click', () => {
          menu.classList.remove('mobile-open');
          overlay.classList.remove('active');
        });

        // Tutup menu jika klik di luar menu & tombol
        document.addEventListener('click', (e) => {
          if (!menu.contains(e.target) && !menuBtn.contains(e.target)) {
            menu.classList.remove('mobile-open');
            overlay.classList.remove('active');
          }
        });
      }
    });
  </script>

</body>
</html>

