<!DOCTYPE html>
<html lang="en">
@php
  /** @var \App\Models\GeneralSetting $settings */
  $gs = $settings ?? new \App\Models\GeneralSetting();

  // Branding
  $fallbackAdminTitle = 'EARNING MARKETPLACE - ADMIN PANEL';
  $siteName = $gs->site_name ?? $fallbackAdminTitle;
  $siteDesc = $gs->site_description ?? 'Best Earning Digital Business Platform';

  // Theme colors (from settings or defaults)
  $bgColor    = $gs->background_color ?? '#f9fafb'; // default: gray-50
  $iconColor  = $gs->icon_color       ?? '#1f2937'; // default: slate-800
  $hoverColor = $gs->hover_color      ?? '#2563eb'; // default: blue-600
  $textColor  = $gs->text_color       ?? '#111827'; // default: slate-900

  // Page title
  $pageTitle = trim($__env->yieldContent('title'));
  $fullTitle = $pageTitle ? ($pageTitle . ' - ' . $siteName) : $siteName;

  // Favicon path (asset-safe)
  $faviconPath = $gs?->favicon
      ? (preg_match('/^https?:\/\//i', $gs->favicon) ? $gs->favicon : asset(ltrim($gs->favicon,'/')))
      : asset('favicon.png');
@endphp
<head>
    <meta charset="UTF-8">
    <title>{{ $fullTitle }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {{-- Description from General Settings --}}
    <meta name="description" content="{{ $siteDesc }}"/>

    {{-- Vite/Laravel mix or app assets (optional) --}}
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <script src="{{ asset('js/app.js') }}" defer></script>

    {{-- Tailwind / Bootstrap (both allowed if you need) --}}
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="{{ $faviconPath }}">

    <!-- Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

    <style>
        :root{
          --admin-bg:    {{ $bgColor }};
          --admin-text:  {{ $textColor }};
          --admin-icon:  {{ $iconColor }};
          --admin-hover: {{ $hoverColor }};
          --header-h:    60px;
        }

        html, body {
          margin: 0; padding: 0;
          background: var(--admin-bg);
          color: var(--admin-text);
          font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        }

        /* =======================
           Global UI Fixes (Underline/Tap/Focus)
           ======================= */
        /* Remove underlines from links in all states */
        a, a:hover, a:focus, a:active, a:visited {
          color: var(--admin-icon);
          text-decoration: none !important;
          -webkit-text-decoration-skip: objects;
        }
        /* Change only color on hover/focus */
        a:hover, a:focus { color: var(--admin-hover); }

        /* Keep button-like anchors underline-free */
        .btn, a.btn, button, [role="button"] { text-decoration: none !important; }

        /* Mobile tap highlight off */
        *, *::before, *::after { -webkit-tap-highlight-color: transparent; }

        /* Remove default outline but keep a subtle focus-visible style */
        a:focus, button:focus, .btn:focus { outline: none !important; box-shadow: none !important; }
        a:focus-visible, button:focus-visible, .btn:focus-visible {
          outline: 2px solid rgba(0,0,0,.15) !important;
          outline-offset: 2px;
          border-radius: 10px;
        }

        /* Layout helpers */
        .sticky-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
        .sticky-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; }

        /* Sidebar styles compatible with Tailwind utilities */
        .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 250px; background: #1f2937; color: white; z-index: 40; transition: transform 0.3s ease-in-out; }
        /* Tailwind-compatible hidden state */
        .-translate-x-full { transform: translateX(-100%); }
        .translate-x-0 { transform: translateX(0); }

        /* Main padding to avoid header overlap */
        main { padding-top: .5rem; }
    </style>

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

<body class="bg-gray-100">
    {{-- Header --}}
    @include('layout.partial.header')

    {{-- Sidebar --}}
    @include('layout.partial.sidebar')

    @include('layout.partial.flash-messages', ['topOffset' => '74px'])

    {{-- Main --}}
    <main class="pb-20 px-3">
        @yield('content')
    </main>

    {{-- Footer --}}
    @include('layout.partial.footer')

    {{-- Bootstrap Bundle (optional if you use Bootstrap components) --}}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
          const toggleSidebarBtn = document.getElementById("toggleSidebar");
          const closeSidebarBtn  = document.getElementById("closeSidebar");
          const adminSidebar     = document.getElementById("adminSidebar");
          const profileToggle    = document.getElementById("profileToggle");
          const profileMenu      = document.getElementById("profileMenu");

          // Defensive guard: do nothing if expected elements are missing
          const openSidebar = () => {
            if (!adminSidebar) return;
            adminSidebar.classList.remove("-translate-x-full");
            adminSidebar.classList.add("translate-x-0");
            document.body.style.overflow = 'hidden';
          };
          const hideSidebar = () => {
            if (!adminSidebar) return;
            adminSidebar.classList.add("-translate-x-full");
            adminSidebar.classList.remove("translate-x-0");
            document.body.style.overflow = '';
          };

          // Sidebar open/close
          toggleSidebarBtn?.addEventListener("click", (e) => {
            e.stopPropagation();
            openSidebar();
          });
          closeSidebarBtn?.addEventListener("click", (e) => {
            e.stopPropagation();
            hideSidebar();
          });

          // Close sidebar if clicked outside
          document.addEventListener("click", function (e) {
            if (!adminSidebar) return;
            const clickedInside = adminSidebar.contains(e.target) || toggleSidebarBtn?.contains(e.target);
            if (!clickedInside) hideSidebar();
          });

          // ESC to close
          window.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') hideSidebar();
          });

          // Profile dropdown toggle
          profileToggle?.addEventListener("click", (e) => {
            e.stopPropagation();
            profileMenu?.classList.toggle("hidden");
          });
          // Close profile menu if clicked outside
          document.addEventListener("click", function (e) {
            if (profileToggle && profileMenu && !profileToggle.contains(e.target) && !profileMenu.contains(e.target)) {
              profileMenu.classList.add("hidden");
            }
          });

          // Submenu toggle + rotate icon
          document.querySelectorAll(".submenu-toggle").forEach(btn => {
            btn.addEventListener("click", function () {
              const submenu = btn.nextElementSibling;
              submenu?.classList.toggle("hidden");

              const arrow = btn.querySelector(".submenu-arrow");
              arrow?.classList.toggle("rotate-90");
            });
          });
      });
    </script>

    @yield('scripts')
    @stack('scripts')
</body>
</html>
