<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= $title ?? 'Admin Panel | On Call' ?></title>
  <!-- Tailwind CSS Play CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            saffron: {
              DEFAULT: '#e31e24',
              dark: '#b51217',
              light: '#ffebee',
            },
            gold: {
              DEFAULT: '#c99c33',
              dark: '#a87e24',
              light: '#fbf8f0',
            },
            cream: '#faf7f2',
            ivory: '#fdfdfb',
            charcoal: {
              DEFAULT: '#1a1a1a',
              light: '#4a4a4a',
              muted: '#7a7a7a',
            }
          },
          fontFamily: {
            body: ['Outfit', 'sans-serif'],
          }
        }
      }
    }
  </script>
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <!-- Lucide Icons -->
  <script src="https://unpkg.com/lucide@latest"></script>
  <style>
    /* Custom Scrollbar */
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: #faf7f2; }
    ::-webkit-scrollbar-thumb { background: #c99c33; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #e31e24; }

    /* Sidebar transition */
    #admin-sidebar {
      transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    }
    #sidebar-overlay {
      transition: opacity 0.3s ease;
    }
  </style>
</head>
<body class="font-body bg-[#f7f6f3] text-charcoal min-h-screen antialiased">

  <!-- Mobile Sidebar Overlay -->
  <div id="sidebar-overlay" class="fixed inset-0 bg-black/50 z-30 hidden opacity-0 lg:hidden" onclick="closeSidebar()"></div>

  <!-- Sidebar -->
  <aside id="admin-sidebar" class="fixed top-0 left-0 h-full w-64 bg-charcoal text-[#a0a0a0] flex flex-col border-r border-gold/15 z-40 -translate-x-full lg:translate-x-0">
    <!-- Brand / Logo -->
    <div class="p-5 border-b border-[#2a2a2a] flex items-center justify-between flex-shrink-0">
      <a href="<?= base_url('admin/dashboard') ?>" class="flex items-center gap-2">
        <span class="font-bold text-white tracking-wider text-base">ON CALL <span class="text-gold">ADMIN</span></span>
      </a>
      <!-- Close button mobile -->
      <button onclick="closeSidebar()" class="lg:hidden p-1 rounded text-[#707070] hover:text-white transition-colors">
        <i data-lucide="x" class="w-5 h-5"></i>
      </button>
    </div>

    <!-- Navigation Links -->
    <nav class="flex-grow p-3 space-y-1 overflow-y-auto">
      <?php
        $tActive   = 'flex items-center gap-3 px-3 py-2.5 rounded-lg bg-saffron text-white font-medium transition-all duration-200 text-sm';
        $tInactive = 'flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-[#252525] hover:text-white transition-all duration-200 text-sm';
      ?>
      <a href="<?= base_url('admin/dashboard') ?>" onclick="closeSidebar()" class="<?= ($activeTab ?? '') === 'dashboard' ? $tActive : $tInactive ?>">
        <i data-lucide="layout-dashboard" class="w-4 h-4 flex-shrink-0"></i>
        <span>Dashboard</span>
      </a>
      <a href="<?= base_url('admin/gallery') ?>" onclick="closeSidebar()" class="<?= ($activeTab ?? '') === 'gallery' ? $tActive : $tInactive ?>">
        <i data-lucide="image" class="w-4 h-4 flex-shrink-0"></i>
        <span>Manage Gallery</span>
      </a>
      <a href="<?= base_url('admin/services') ?>" onclick="closeSidebar()" class="<?= ($activeTab ?? '') === 'services' ? $tActive : $tInactive ?>">
        <i data-lucide="briefcase" class="w-4 h-4 flex-shrink-0"></i>
        <span>Manage Services</span>
      </a>
      <a href="<?= base_url('admin/menu') ?>" onclick="closeSidebar()" class="<?= ($activeTab ?? '') === 'menu' ? $tActive : $tInactive ?>">
        <i data-lucide="clipboard-list" class="w-4 h-4 flex-shrink-0"></i>
        <span>Manage Menus</span>
      </a>
      <a href="<?= base_url('admin/inquiries') ?>" onclick="closeSidebar()" class="<?= ($activeTab ?? '') === 'inquiries' ? $tActive : $tInactive ?>">
        <i data-lucide="mail" class="w-4 h-4 flex-shrink-0"></i>
        <span>Inquiries</span>
      </a>
    </nav>

    <!-- Logout / Profile Area -->
    <div class="p-3 border-t border-[#2a2a2a] flex-shrink-0">
      <div class="flex items-center gap-2.5 px-2 py-1.5 mb-2">
        <div class="w-8 h-8 rounded-full bg-gold flex items-center justify-center text-white font-bold text-xs flex-shrink-0">A</div>
        <div class="overflow-hidden">
          <p class="text-xs text-white font-semibold truncate"><?= session()->get('username') ?? 'Admin' ?></p>
          <p class="text-[10px] text-[#707070] uppercase">Administrator</p>
        </div>
      </div>
      <a href="<?= base_url('admin/logout') ?>" class="flex items-center gap-2 px-3 py-2 rounded-lg text-[#ef5350] hover:bg-red-500/10 transition-all duration-200 text-sm font-medium">
        <i data-lucide="log-out" class="w-4 h-4"></i>
        <span>Logout</span>
      </a>
    </div>
  </aside>

  <!-- Main Content Wrapper -->
  <div class="flex flex-col min-h-screen lg:ml-64">
    <!-- Topbar Header -->
    <header class="h-14 border-b border-gray-200 bg-white flex items-center justify-between px-4 md:px-6 sticky top-0 z-20 shadow-sm">
      <div class="flex items-center gap-3">
        <!-- Mobile hamburger -->
        <button onclick="openSidebar()" class="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors text-charcoal" aria-label="Open menu">
          <i data-lucide="menu" class="w-5 h-5"></i>
        </button>
        <h1 class="text-sm md:text-base font-semibold text-charcoal truncate max-w-[200px] md:max-w-none"><?= $title ?? 'Admin Dashboard' ?></h1>
      </div>
      <div class="flex items-center gap-3">
        <a href="<?= base_url('/') ?>" target="_blank" class="flex items-center gap-1.5 text-xs text-gold-dark hover:text-saffron font-medium transition-colors">
          <i data-lucide="external-link" class="w-3.5 h-3.5"></i>
          <span class="hidden sm:inline">View Site</span>
        </a>
      </div>
    </header>

    <!-- Content Area -->
    <main class="flex-grow p-4 md:p-6 lg:p-8">
      <!-- Flash Messages -->
      <?php if (session()->getFlashdata('success')): ?>
        <div class="mb-5 p-3.5 rounded-xl bg-green-50 border border-green-200 text-green-700 flex items-center gap-3 shadow-sm">
          <i data-lucide="check-circle" class="w-5 h-5 flex-shrink-0"></i>
          <span class="text-sm font-medium"><?= session()->getFlashdata('success') ?></span>
        </div>
      <?php endif; ?>

      <?php if (session()->getFlashdata('error')): ?>
        <div class="mb-5 p-3.5 rounded-xl bg-red-50 border border-red-200 text-red-700 flex items-center gap-3 shadow-sm">
          <i data-lucide="alert-circle" class="w-5 h-5 flex-shrink-0"></i>
          <span class="text-sm font-medium"><?= session()->getFlashdata('error') ?></span>
        </div>
      <?php endif; ?>

      <?= $this->renderSection('admin_content') ?>
    </main>
  </div>

  <script>
    // Initialize Lucide Icons
    lucide.createIcons();

    function openSidebar() {
      var sidebar = document.getElementById('admin-sidebar');
      var overlay = document.getElementById('sidebar-overlay');
      sidebar.classList.remove('-translate-x-full');
      overlay.classList.remove('hidden');
      setTimeout(function() { overlay.classList.remove('opacity-0'); }, 10);
      document.body.style.overflow = 'hidden';
    }

    function closeSidebar() {
      var sidebar = document.getElementById('admin-sidebar');
      var overlay = document.getElementById('sidebar-overlay');
      sidebar.classList.add('-translate-x-full');
      overlay.classList.add('opacity-0');
      setTimeout(function() { overlay.classList.add('hidden'); }, 300);
      document.body.style.overflow = '';
    }
  </script>
  <?= $this->renderSection('admin_scripts') ?>
</body>
</html>
