<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>@yield('title','Admin') — God's Treat</title>
  <style>html,body{background:#080810 !important}</style>
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
  <style>
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    :root{
      --bg:#080810;--bg2:#0f0f1a;--card:rgba(255,255,255,.04);--card2:rgba(255,255,255,.07);
      --border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.14);
      --orange:#ff6b1a;--gold:#ffc547;--green:#06d6a0;--pink:#f72585;--blue:#3b82f6;
      --white:#f5f5f5;--muted:#a0a0b8;--radius:14px;
    }
    html{scroll-behavior:smooth}
    body{background:var(--bg);color:var(--white);font-family:'Inter',sans-serif;display:flex;min-height:100vh;overflow-x:hidden}
    ::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--orange);border-radius:4px}

    /* Sidebar */
    .sidebar{width:240px;min-height:100vh;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:100}
    .sidebar-logo{padding:24px 20px;border-bottom:1px solid var(--border)}
    .sidebar-logo-text{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;background:linear-gradient(135deg,var(--orange),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
    .sidebar-logo-sub{font-size:.68rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
    .sidebar-nav{flex:1;padding:16px 0;overflow-y:auto}
    .nav-section{padding:0 12px;margin-bottom:8px}
    .nav-section-label{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:8px 10px;display:block}
    .nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:.85rem;font-weight:500;transition:all .2s;margin-bottom:2px}
    .nav-item:hover{background:var(--card2);color:var(--white)}
    .nav-item.active{background:rgba(255,107,26,.12);color:var(--orange);font-weight:600}
    .nav-item .icon{font-size:1.05rem;width:22px;text-align:center}
    .sidebar-footer{padding:16px;border-top:1px solid var(--border)}
    .admin-avatar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
    .avatar-circle{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--gold));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;color:#0a0a14;flex-shrink:0}
    .avatar-name{font-size:.85rem;font-weight:600;line-height:1.2}
    .avatar-role{font-size:.7rem;color:var(--muted)}

    /* Main */
    .main{margin-left:240px;flex:1;min-height:100vh;display:flex;flex-direction:column}
    .topbar{position:sticky;top:0;z-index:50;background:rgba(8,8,16,.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:16px 28px;display:flex;align-items:center;justify-content:space-between}
    .page-title{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;color:var(--white)}
    .topbar-right{display:flex;align-items:center;gap:14px}
    .topbar-btn{background:var(--card2);border:1px solid var(--border2);color:var(--muted);padding:7px 14px;border-radius:8px;font-size:.8rem;cursor:pointer;text-decoration:none;transition:all .2s}
    .topbar-btn:hover{color:var(--white);border-color:var(--orange)}
    .content{padding:28px;flex:1}

    /* Cards */
    .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
    .card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
    .card-title{font-family:'Bebas Neue',sans-serif;font-size:1.2rem}

    /* Stats grid */
    .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
    .stat-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;position:relative;overflow:hidden;transition:border-color .3s}
    .stat-box:hover{border-color:rgba(255,107,26,.3)}
    .stat-box::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,107,26,.04),transparent);pointer-events:none}
    .stat-label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
    .stat-value{font-family:'Bebas Neue',sans-serif;font-size:2rem;line-height:1;color:var(--white)}
    .stat-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:2rem;opacity:.18}
    .stat-change{font-size:.75rem;margin-top:6px;color:var(--green)}

    /* Table */
    .table-wrap{overflow-x:auto}
    table{width:100%;border-collapse:collapse}
    th{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
    td{padding:13px 14px;border-bottom:1px solid var(--border);font-size:.875rem;vertical-align:middle}
    tr:last-child td{border-bottom:none}
    tr:hover td{background:rgba(255,255,255,.02)}

    /* Badges */
    .badge{display:inline-block;padding:3px 10px;border-radius:50px;font-size:.7rem;font-weight:700}
    .badge-placed{background:rgba(255,107,26,.15);color:var(--orange)}
    .badge-processing{background:rgba(59,130,246,.15);color:var(--blue)}
    .badge-shipped{background:rgba(124,58,237,.15);color:#a78bfa}
    .badge-delivered{background:rgba(6,214,160,.15);color:var(--green)}
    .badge-cancelled{background:rgba(247,37,133,.15);color:var(--pink)}
    .badge-admin{background:rgba(255,107,26,.15);color:var(--orange)}
    .badge-user{background:var(--card2);color:var(--muted)}
    .badge-active{background:rgba(6,214,160,.15);color:var(--green)}
    .badge-oos{background:rgba(247,37,133,.12);color:var(--pink)}

    /* Buttons */
    .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:.82rem;font-weight:600;border:none;cursor:pointer;text-decoration:none;transition:all .2s}
    .btn-primary{background:linear-gradient(135deg,var(--orange),var(--gold));color:#0a0a14}
    .btn-primary:hover{opacity:.9;transform:translateY(-1px)}
    .btn-sm{padding:5px 12px;font-size:.75rem}
    .btn-ghost{background:var(--card2);border:1px solid var(--border2);color:var(--muted)}
    .btn-ghost:hover{color:var(--white);border-color:var(--orange)}
    .btn-danger{background:rgba(247,37,133,.12);border:1px solid rgba(247,37,133,.3);color:var(--pink)}
    .btn-danger:hover{background:rgba(247,37,133,.2)}

    /* Form */
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .form-group{margin-bottom:16px}
    .form-label{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:block}
    .form-input{width:100%;background:var(--card2);border:1px solid var(--border2);color:var(--white);padding:10px 14px;border-radius:9px;font-size:.9rem;transition:border-color .2s;font-family:'Inter',sans-serif}
    .form-input:focus{outline:none;border-color:var(--orange)}
    select.form-input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a0a0b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
    select.form-input option{background:#0f0f1a;color:#f5f5f5}
    textarea.form-input{resize:vertical;min-height:90px}
    .form-hint{font-size:.72rem;color:var(--muted);margin-top:4px}
    .form-check{display:flex;align-items:center;gap:8px;cursor:pointer}
    .form-check input{accent-color:var(--orange);width:16px;height:16px}

    /* Alerts */
    .alert{padding:12px 16px;border-radius:10px;margin-bottom:18px;font-size:.875rem}
    .alert-success{background:rgba(6,214,160,.1);border:1px solid rgba(6,214,160,.3);color:var(--green)}
    .alert-error{background:rgba(247,37,133,.1);border:1px solid rgba(247,37,133,.3);color:var(--pink)}

    /* Search bar */
    .search-form{display:flex;gap:8px}
    .search-input{background:var(--card2);border:1px solid var(--border2);color:var(--white);padding:8px 14px;border-radius:8px;font-size:.85rem;min-width:240px}
    .search-input:focus{outline:none;border-color:var(--orange)}

    /* Pagination */
    .pagination{display:flex;align-items:center;gap:6px;margin-top:20px;flex-wrap:wrap}
    .pagination a,.pagination span{padding:6px 12px;border-radius:7px;font-size:.82rem;text-decoration:none;border:1px solid var(--border);color:var(--muted);transition:all .2s}
    .pagination a:hover{border-color:var(--orange);color:var(--orange)}
    .pagination .active span{background:var(--orange);border-color:var(--orange);color:#fff}

    /* Responsive */
    @media(max-width:900px){.sidebar{transform:translateX(-100%)}.main{margin-left:0}.stats-grid{grid-template-columns:1fr 1fr}}
  </style>
  @stack('styles')
</head>
<body>

<!-- Sidebar -->
<aside class="sidebar">
  <div class="sidebar-logo">
    <div class="sidebar-logo-text">GOD'S TREAT</div>
    <div class="sidebar-logo-sub">Admin Panel</div>
  </div>

  <nav class="sidebar-nav">
    <div class="nav-section">
      <span class="nav-section-label">Main</span>
      <a href="{{ route('admin.dashboard') }}" class="nav-item {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
        <span class="icon">📊</span> Dashboard
      </a>
    </div>
    <div class="nav-section">
      <span class="nav-section-label">Store</span>
      <a href="{{ route('admin.orders') }}" class="nav-item {{ request()->routeIs('admin.orders*') ? 'active' : '' }}">
        <span class="icon">📦</span> Orders
        <span style="margin-left:auto;background:rgba(255,107,26,.2);color:var(--orange);font-size:.65rem;padding:2px 7px;border-radius:50px;font-weight:700">
          {{ \App\Models\Order::where('status','placed')->count() }}
        </span>
      </a>
      <a href="{{ route('admin.products') }}" class="nav-item {{ request()->routeIs('admin.products*') ? 'active' : '' }}">
        <span class="icon">🌾</span> Products
      </a>
      <a href="{{ route('admin.users') }}" class="nav-item {{ request()->routeIs('admin.users*') ? 'active' : '' }}">
        <span class="icon">👥</span> Users
      </a>
      <a href="{{ route('admin.coupons') }}" class="nav-item {{ request()->routeIs('admin.coupons*') ? 'active' : '' }}">
        <span class="icon">🎟️</span> Coupons
        <span style="margin-left:auto;background:rgba(6,214,160,.15);color:var(--green);font-size:.62rem;padding:2px 6px;border-radius:50px;font-weight:700">
          {{ \App\Models\Coupon::where('active',true)->count() }}
        </span>
      </a>
      <a href="{{ route('admin.shipping') }}" class="nav-item {{ request()->routeIs('admin.shipping*') ? 'active' : '' }}">
        <span class="icon">🚚</span> Shipping
      </a>
    </div>
    <div class="nav-section">
      <span class="nav-section-label">Site</span>
      <a href="{{ route('home') }}" target="_blank" class="nav-item">
        <span class="icon">🌐</span> View Site
      </a>
    </div>
  </nav>

  <div class="sidebar-footer">
    <div class="admin-avatar">
      <div class="avatar-circle">{{ strtoupper(substr(auth()->user()->name, 0, 1)) }}</div>
      <div>
        <div class="avatar-name">{{ auth()->user()->name }}</div>
        <div class="avatar-role">Administrator</div>
      </div>
    </div>
    <form method="POST" action="{{ route('logout') }}">
      @csrf
      <button type="submit" class="btn btn-ghost" style="width:100%;justify-content:center;font-size:.78rem">
        🚪 Logout
      </button>
    </form>
  </div>
</aside>

<!-- Main -->
<div class="main">
  <div class="topbar">
    <div class="page-title">@yield('page-title','Dashboard')</div>
    <div class="topbar-right">
      <a href="{{ route('admin.products.create') }}" class="btn btn-primary btn-sm">+ Add Product</a>
      <a href="{{ route('admin.orders') }}" class="topbar-btn">📦 Orders</a>
    </div>
  </div>

  <div class="content">
    @if(session('success'))
      <div class="alert alert-success">✅ {{ session('success') }}</div>
    @endif
    @if(session('error'))
      <div class="alert alert-error">❌ {{ session('error') }}</div>
    @endif
    @if($errors->any())
      <div class="alert alert-error">
        @foreach($errors->all() as $e)<div>• {{ $e }}</div>@endforeach
      </div>
    @endif

    @yield('content')
  </div>
</div>

<script>
  window.csrfToken = '{{ csrf_token() }}';
  function confirmDelete(form) {
    if (confirm('Are you sure? This cannot be undone.')) form.submit();
    return false;
  }
</script>
@stack('scripts')
</body>
</html>
