<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>{{ config('app.name') }}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- Tailwind CDN (JIT) -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            brand: {
              50:  '#eef7ff',
              100: '#d9ebff',
              200: '#b6d8ff',
              300: '#86beff',
              400: '#56a4ff',
              500: '#2f8bff',   // primary
              600: '#1f6fde',
              700: '#1959b3',
              800: '#164a8f',
              900: '#133f76',
            },
            accent: {
              50:  '#ecfdf5',
              500: '#22c55e',   // success accent
              600: '#16a34a',
              700: '#15803d',
            },
            ink: {
              50:  '#f8fafc',
              100: '#f1f5f9',
              200: '#e2e8f0',
              300: '#cbd5e1',
              400: '#94a3b8',
              500: '#64748b',
              600: '#475569',
              700: '#334155',
              800: '#1e293b',
              900: '#0f172a',
            }
          },
          boxShadow: {
            soft: '0 2px 12px rgba(15, 23, 42, 0.06)',
            card: '0 8px 28px rgba(2, 6, 23, 0.06)',
          },
          borderRadius: {
            xl2: '1rem',
          }
        }
      }
    }
  </script>
  <style>
    .glass { background: rgba(255,255,255,0.65); backdrop-filter: blur(10px); }
    .ring-soft { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
    .grad { background: linear-gradient(135deg, #2f8bff 0%, #22c55e 60%, #0ea5e9 100%); }
  </style>
  @stack('head')
</head>
<body class="bg-ink-50 text-ink-900">
  @php
    /** @var \App\Models\User|null $u */
    $u = auth()->user();
    $role = $u->role ?? 'guest';

    // Small helper for active states in links
    function activeClass($pattern, $on = 'bg-ink-100 text-brand-800', $off = 'text-ink-600 hover:bg-ink-50 hover:text-ink-900') {
      return request()->routeIs($pattern) ? $on : $off;
    }
  @endphp

  {{-- Mobile sidebar drawer --}}
  <div id="drawerBackdrop" class="fixed inset-0 bg-black/30 z-40 hidden"></div>
  <aside id="drawer"
         class="fixed z-50 inset-y-0 left-0 w-72 bg-white border-r shadow-card -translate-x-full transition-transform duration-200 md:hidden">
    <div class="h-16 flex items-center px-4 border-b">
      <div class="w-9 h-9 rounded-xl bg-brand-500 text-white grid place-items-center font-semibold">GK</div>
      <div class="ml-3">
        <div class="text-xs text-ink-500">Welcome</div>
        <div class="font-medium">
          {{ $u?->name ?? 'Guest' }}
          @if($u)<span class="ml-2 text-[10px] px-2 py-0.5 rounded bg-ink-100 border">{{ strtoupper($role) }}</span>@endif
        </div>
      </div>
      <button type="button" onclick="toggleDrawer(false)" class="ml-auto p-2 rounded hover:bg-ink-50" aria-label="Close menu">
        ✕
      </button>
    </div>
    <div class="overflow-y-auto h-[calc(100vh-4rem)]">
      {{-- Same role-based sidebars as desktop --}}
      @includeWhen($role === 'admin', 'partials.sidebar-admin')
      @includeWhen($role === 'telecalling', 'partials.sidebar-telecalling')
      @includeWhen($role === 'asset', 'partials.sidebar-asset')
      @includeWhen($role === 'todo', 'partials.sidebar-todo')
      @includeWhen(! in_array($role, ['admin','telecalling','asset','todo']), 'partials.sidebar-guest')
    </div>
  </aside>

  <div class="min-h-screen flex">

    {{-- Sidebar (desktop) --}}
    <aside class="hidden md:block w-72 bg-white border-r">
      @if (View::hasSection('sidebar'))
        @yield('sidebar')
      @else
        @includeWhen($role === 'admin', 'partials.sidebar-admin')
        @includeWhen($role === 'telecalling', 'partials.sidebar-telecalling')
        @includeWhen($role === 'asset', 'partials.sidebar-asset')
        @includeWhen($role === 'todo', 'partials.sidebar-todo')
        @includeWhen(! in_array($role, ['admin','telecalling','asset','todo']), 'partials.sidebar-guest')
      @endif
    </aside>

    {{-- Main --}}
    <div class="flex-1 flex flex-col">

      {{-- Header --}}
      <header class="bg-white/80 backdrop-blur border-b">
        @if (View::hasSection('header'))
          @yield('header')
        @else
          <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
            <div class="flex items-center gap-3">
              <button type="button" class="md:hidden p-2 rounded hover:bg-ink-100"
                      onclick="toggleDrawer(true)" aria-label="Open menu">☰</button>
              <div class="w-9 h-9 rounded-xl bg-brand-500 text-white grid place-items-center font-semibold">GK</div>
              <div class="hidden sm:block">
                <div class="text-sm text-ink-500">Welcome</div>
                <div class="font-medium">
                  {{ $u?->name ?? 'Guest' }}
                  @if($u)<span class="ml-2 text-xs px-2 py-0.5 rounded bg-ink-100 border">{{ strtoupper($role) }}</span>@endif
                </div>
              </div>
            </div>

            <div class="flex items-center gap-2">
              @auth
                <form method="POST" action="{{ route('logout') }}">
                  @csrf
                  <button class="px-3 py-2 rounded-lg bg-ink-900 text-white text-sm hover:bg-ink-800">Logout</button>
                </form>
              @else
                <a href="{{ route('login') }}" class="px-3 py-2 rounded-lg bg-brand-500 text-white text-sm hover:bg-brand-600">Login</a>
              @endauth
            </div>
          </div>
        @endif
      </header>

      {{-- Content --}}
      <main class="p-4 sm:p-6 lg:p-8">
        @yield('content')
      </main>
    </div>
  </div>

  <script>
    const drawer = document.getElementById('drawer');
    const backdrop = document.getElementById('drawerBackdrop');
    function toggleDrawer(open) {
      if (open) {
        drawer.classList.remove('-translate-x-full');
        backdrop.classList.remove('hidden');
      } else {
        drawer.classList.add('-translate-x-full');
        backdrop.classList.add('hidden');
      }
    }
    backdrop?.addEventListener('click', () => toggleDrawer(false));
  </script>

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