<!DOCTYPE html>
<html lang="en" id="html-root" class="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>@yield('title','Dashboard') - {{ $appName }}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
@vite(['resources/css/app.css','resources/js/app.js'])
</head>
<body>

{{-- ── Sidebar ── --}}
<aside class="sidebar">
  <div class="sidebar-header">{{ $appName }}</div>

  <nav class="sidebar-nav">
    @php
    $navItems = [
      ['route' => 'customer.dashboard',
       'label' => 'Dashboard',
       'icon'  => 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'],
      ['route' => 'customer.bulletin',
       'label' => 'Bulletin',
       'icon'  => 'M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z'],
      ['route' => 'customer.licenses.index',
       'label' => 'Licenses',
       'icon'  => 'M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z'],
      ['route' => 'customer.market',
       'label' => 'Market',
       'icon'  => 'M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z'],
      ['route' => 'customer.downloads',
       'label' => 'Downloads',
       'icon'  => 'M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'],
      ['route' => 'customer.support.index',
       'label' => 'My Tickets',
       'icon'  => 'M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z'],
      ['route' => 'customer.services',
       'label' => 'Help & Support',
       'icon'  => 'M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z'],
    ];
    @endphp

    @foreach($navItems as $n)
    <a href="{{ route($n['route']) }}"
       class="nav-item {{ request()->routeIs(rtrim($n['route'],'*').'*') ? 'active' : '' }}">
      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="{{ $n['icon'] }}"/>
      </svg>
      {{ $n['label'] }}
    </a>
    @endforeach
  </nav>

  <div class="sidebar-footer">
    <div class="sidebar-user">
      <div class="user-avatar">{{ strtoupper(substr(auth()->user()->name,0,1)) }}</div>
      <div style="flex:1;min-width:0">
        <div style="font-size:.8125rem;font-weight:500;color:var(--sidebar-foreground);
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ auth()->user()->name }}</div>
        <div style="font-size:.6875rem;color:var(--muted-foreground);text-transform:uppercase;
          letter-spacing:.06em">Customer</div>
      </div>
      <form method="POST" action="{{ route('logout') }}">
        @csrf
        <button type="submit" class="topbar-icon" style="width:1.5rem;height:1.5rem">
          <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
          </svg>
        </button>
      </form>
    </div>
  </div>
</aside>

{{-- ── Main ── --}}
<div class="main">

  {{-- Topbar --}}
  <header class="topbar">
    {{-- Left links --}}
    <a href="{{ route('customer.support.index') }}"
       class="topbar-link {{ request()->routeIs('customer.support*') ? 'active' : '' }}">
      <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
          d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/>
      </svg>
      My Tickets
    </a>
    <a href="{{ route('customer.bulletin') }}"
       class="topbar-link {{ request()->routeIs('customer.bulletin*') ? 'active' : '' }}">
      <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
          d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
      </svg>
      Changelogs
    </a>

    <div style="flex:1"></div>

    {{-- Currency switcher --}}
    @php
      $uc = user_currency();
      $ucCode = $uc?->code ?? setting('default_currency','USD');
      $ucSymbol = $uc?->symbol ?? setting('currency_symbol','$');
    @endphp
    <div style="position:relative" id="cur-wrap">
      <button id="cur-btn" class="topbar-icon"
        style="width:auto;padding:0 .625rem;gap:.3rem;font-size:.8rem;font-weight:600;
          border:1px solid var(--border);border-radius:var(--radius);height:2rem"
        onclick="curToggle()"
        aria-label="Switch currency">
        <span style="font-size:.9rem">{{ $ucSymbol }}</span>
        <span>{{ $ucCode }}</span>
        <svg id="cur-chev" width="10" height="10" fill="none" stroke="currentColor" viewBox="0 0 24 24"
          style="flex-shrink:0;transition:transform .15s">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/>
        </svg>
      </button>

      <div id="cur-drop" style="display:none;position:absolute;top:calc(100% + .375rem);right:0;
        min-width:200px;background:var(--background);border:1px solid var(--border);
        border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.1),0 2px 6px rgba(0,0,0,.06);
        z-index:200;overflow:hidden">

        <div style="padding:.5rem .875rem .375rem;font-size:.7rem;font-weight:600;
          color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.07em">
          Select Currency
        </div>

        @foreach($activeCurrencies as $cur)
        <form method="POST" action="{{ route('customer.currency.set', $cur->code) }}" style="margin:0">
          @csrf
          <button type="submit"
            style="width:100%;display:flex;align-items:center;justify-content:space-between;
              padding:.5rem .875rem;background:{{ $cur->code === $ucCode ? 'var(--muted)' : 'transparent' }};
              border:none;cursor:pointer;font-family:inherit;font-size:.875rem;
              color:var(--foreground);text-align:left;transition:background .1s"
            onmouseover="this.style.background='var(--muted)'"
            onmouseout="this.style.background='{{ $cur->code === $ucCode ? 'var(--muted)' : 'transparent' }}'">
            <span style="display:flex;align-items:center;gap:.625rem">
              <span style="font-size:.9rem;font-weight:600;min-width:1.25rem">{{ $cur->symbol }}</span>
              <span>
                <span style="font-weight:500">{{ $cur->code }}</span>
                <span style="font-size:.78rem;color:var(--muted-foreground);margin-left:.375rem">{{ $cur->name }}</span>
              </span>
            </span>
            @if($cur->code === $ucCode)
            <svg width="13" height="13" fill="none" stroke="#16a34a" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
            </svg>
            @endif
          </button>
        </form>
        @endforeach

        <div style="padding:.5rem .875rem;border-top:1px solid var(--border);
          font-size:.7rem;color:var(--muted-foreground)">
          Rates updated daily
        </div>
      </div>
    </div>

    {{-- Bell --}}
    <button class="topbar-icon">
      <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6"
          d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
      </svg>
    </button>
    {{-- Volume / Sound --}}
    <button class="topbar-icon">
      <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6"
          d="M15.536 8.464a5 5 0 010 7.072M12 18.364l-4.243-4.243H5a1 1 0 01-1-1v-2.242a1 1 0 011-1h2.757L12 5.636v12.728z"/>
      </svg>
    </button>
    {{-- Sun / Theme --}}
    <button class="topbar-icon" id="theme-toggle">
      <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6"
          d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707M17.657 17.657l-.707-.707M6.343 6.343l-.707-.707M12 8a4 4 0 100 8 4 4 0 000-8z"/>
      </svg>
    </button>

    <div class="topbar-sep"></div>

    {{-- User chip + dropdown --}}
    <div style="position:relative" id="c-user-wrap">
      <button id="c-user-btn"
        style="display:flex;align-items:center;gap:.5rem;padding:.25rem .625rem .25rem .375rem;
          border-radius:var(--radius);border:1px solid var(--border);background:var(--sidebar);
          cursor:pointer;transition:background .1s;font-family:inherit;line-height:1"
        onclick="cToggle()"
        onmouseover="this.style.background='var(--muted)'"
        onmouseout="this.style.background='var(--sidebar)'">
        <div class="user-avatar">{{ strtoupper(substr(auth()->user()->name,0,1)) }}</div>
        <div style="text-align:left">
          <div style="font-size:.8125rem;font-weight:600;color:var(--foreground);line-height:1.25;white-space:nowrap">
            {{ auth()->user()->name }}
          </div>
          <div style="font-size:.625rem;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.07em;font-weight:500">Customer</div>
        </div>
        <svg id="c-chevron" width="12" height="12" fill="none" stroke="var(--muted-foreground)" viewBox="0 0 24 24"
          style="flex-shrink:0;transition:transform .15s">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
      </button>

      {{-- Dropdown menu --}}
      <div id="c-user-drop"
        style="display:none;position:absolute;top:calc(100% + .375rem);right:0;
          min-width:210px;background:var(--background);
          border:1px solid var(--border);border-radius:var(--radius);
          box-shadow:0 8px 24px rgba(0,0,0,.1),0 2px 6px rgba(0,0,0,.06);
          z-index:200;overflow:hidden">

        {{-- User info --}}
        <div style="padding:.875rem 1rem;border-bottom:1px solid var(--border)">
          <div style="display:flex;align-items:center;gap:.625rem;margin-bottom:.25rem">
            <div class="user-avatar" style="width:2rem;height:2rem;font-size:.75rem;flex-shrink:0">
              {{ strtoupper(substr(auth()->user()->name,0,1)) }}
            </div>
            <div style="min-width:0">
              <div style="font-size:.875rem;font-weight:600;color:var(--foreground);
                line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                {{ auth()->user()->name }}
              </div>
              <div style="font-size:.75rem;color:var(--muted-foreground);
                white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                {{ auth()->user()->email }}
              </div>
            </div>
          </div>
        </div>

        {{-- Profile --}}
        <div style="padding:.3125rem">
          <a href="{{ route('customer.profile') }}"
            style="display:flex;align-items:center;gap:.625rem;padding:.5rem .75rem;
              border-radius:calc(var(--radius) - .15rem);font-size:.875rem;
              color:var(--foreground);text-decoration:none;transition:background .1s"
            onmouseover="this.style.background='var(--muted)'"
            onmouseout="this.style.background='transparent'">
            <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
            </svg>
            Profile
          </a>
        </div>

        {{-- Divider + Sign out --}}
        <div style="border-top:1px solid var(--border);padding:.3125rem">
          <form method="POST" action="{{ route('logout') }}" style="margin:0">
            @csrf
            <button type="submit"
              style="width:100%;display:flex;align-items:center;gap:.625rem;padding:.5rem .75rem;
                border-radius:calc(var(--radius) - .15rem);font-size:.875rem;font-weight:400;
                color:#dc2626;background:transparent;border:none;cursor:pointer;
                font-family:inherit;text-align:left;transition:background .1s"
              onmouseover="this.style.background='#fef2f2'"
              onmouseout="this.style.background='transparent'">
              <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
                  d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
              </svg>
              Sign out
            </button>
          </form>
        </div>
      </div>
    </div>
  </header>

  {{-- Currency changed toast --}}
  @if(session('currency_changed'))
  <div id="cur-toast" style="position:fixed;bottom:1.5rem;right:1.5rem;z-index:999;
    display:flex;align-items:center;gap:.625rem;padding:.625rem 1rem;
    border-radius:var(--radius);background:var(--foreground);color:var(--background);
    font-size:.875rem;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.2);
    animation:slideUp .25s ease">
    <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
    </svg>
    {{ session('currency_changed') }}
  </div>
  <style>
    @keyframes slideUp { from { opacity:0;transform:translateY(12px) } to { opacity:1;transform:translateY(0) } }
  </style>
  <script>setTimeout(function(){ var t=document.getElementById('cur-toast'); if(t) t.style.display='none'; }, 3000);</script>
  @endif

  {{-- Flash — single source of truth, handles all flash types ── --}}
  @if(session('success') || session('password_success'))
  <div style="padding:.75rem 2rem 0">
    <div style="display:flex;align-items:center;gap:.5rem;padding:.5rem .875rem;border-radius:var(--radius);
      background:#f0fdf4;border:1px solid #bbf7d0;font-size:.8125rem;color:#166534">
      <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
      {{ session('success') ?? session('password_success') }}
    </div>
  </div>
  @endif
  @if(session('error') || $errors->any())
  <div style="padding:.75rem 2rem 0">
    <div style="display:flex;align-items:center;gap:.5rem;padding:.5rem .875rem;border-radius:var(--radius);
      background:#fef2f2;border:1px solid #fecaca;font-size:.8125rem;color:#991b1b">
      <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
      </svg>
      {{ session('error') ?? $errors->first() }}
    </div>
  </div>
  @endif

  <main class="page">
    @yield('content')
  </main>
</div>

<script>
// Currency dropdown
function curToggle() {
  var drop = document.getElementById('cur-drop');
  var chev = document.getElementById('cur-chev');
  var open = drop.style.display === 'block';
  drop.style.display = open ? 'none' : 'block';
  chev.style.transform = open ? 'rotate(0deg)' : 'rotate(180deg)';
}
document.addEventListener('click', function(e) {
  var wrap = document.getElementById('cur-wrap');
  if (wrap && !wrap.contains(e.target)) {
    var drop = document.getElementById('cur-drop');
    var chev = document.getElementById('cur-chev');
    if (drop) drop.style.display = 'none';
    if (chev) chev.style.transform = 'rotate(0deg)';
  }
});

// User menu dropdown
function cToggle() {
  var drop = document.getElementById('c-user-drop');
  var chev = document.getElementById('c-chevron');
  var open = drop.style.display === 'block';
  drop.style.display = open ? 'none' : 'block';
  chev.style.transform = open ? 'rotate(0deg)' : 'rotate(180deg)';
}
document.addEventListener('click', function(e) {
  var wrap = document.getElementById('c-user-wrap');
  if (wrap && !wrap.contains(e.target)) {
    var drop = document.getElementById('c-user-drop');
    var chev = document.getElementById('c-chevron');
    if (drop) drop.style.display = 'none';
    if (chev) chev.style.transform = 'rotate(0deg)';
  }
});

(function(){
  var r = document.getElementById('html-root');
  var btn = document.getElementById('theme-toggle');
  function apply(t) {
    if (t === 'dark') { r.classList.remove('light'); r.classList.add('dark'); }
    else              { r.classList.remove('dark'); r.classList.add('light'); }
    localStorage.setItem('lp_theme', t);
  }
  apply(localStorage.getItem('lp_theme') || 'light');
  btn.addEventListener('click', function() {
    apply(r.classList.contains('dark') ? 'light' : 'dark');
  });
})();
</script>
</body>
</html>
