@extends('layouts.app')

@section('content')
@push('styles')
<style>
.admin-sidebar {
  width:240px; flex-shrink:0; background:var(--white);
  border-right:1px solid var(--border); padding:24px 12px; overflow-y:auto;
}
.admin-body { display:flex; flex:1; overflow:hidden; }
.admin-main { flex:1; padding:28px 32px; overflow-y:auto; }
.admin-topbar-mobile {
  display:none; background:var(--white); border-bottom:1px solid var(--border);
  padding:8px 12px; gap:6px; overflow-x:auto; flex-shrink:0;
}
.admin-topbar-mobile a, .admin-topbar-mobile button {
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  padding:6px 12px; border-radius:8px; font-size:12px; font-weight:700;
  text-decoration:none; border:1px solid var(--border);
  background:var(--white); color:var(--text-muted); cursor:pointer; font-family:inherit;
}
.admin-topbar-mobile a.active { background:var(--green-50); color:var(--green-800); border-color:var(--green-200); }

@media(max-width:768px){
  .admin-outer { height:auto !important; overflow:visible !important; }
  .admin-body  { overflow:visible !important; }
  .admin-sidebar { display:none !important; }
  .admin-topbar-mobile { display:flex !important; }
  .admin-main { padding:16px 14px !important; overflow:visible !important; }

  /* Navbar mobile: sembunyikan jam dan nama admin */
  .navbar { padding:0 14px !important; height:56px !important; }
  .brand-logo-img { height:28px !important; }
  .brand-company { font-size:11px !important; }
  .brand-system { font-size:10px !important; }
  .admin-navbar-right { display:none !important; }
  .btn-logout-wrap { display:flex !important; }
}
</style>
@endpush

<div class="admin-outer" style="min-height:100vh;display:flex;flex-direction:column;">

  {{-- Navbar --}}
  <nav class="navbar" style="flex-shrink:0;">
    <a href="{{ route('dashboard') }}" class="navbar-brand">
      <img src="{{ asset('images/logo.png') }}" alt="FKS Food" class="brand-logo-img">
      <div class="brand-divider"></div>
      <div>
        <div class="brand-company">PT Putra Taro Paloma</div>
        <div class="brand-system">Sistem Ruangan — Admin Panel</div>
      </div>
    </a>
    <div class="navbar-right" style="display:flex;align-items:center;gap:12px;">
      {{-- Desktop only: nama + jam --}}
      <div class="admin-navbar-right" style="display:flex;align-items:center;gap:12px;">
        <div class="admin-indicator"><span class="admin-dot"></span> {{ Auth::guard('admin')->user()->name }}</div>
        <div class="divider"></div>
        <div>
          <div class="clock-time js-clock">00:00:00</div>
          <div class="clock-date js-date" style="text-align:right">—</div>
        </div>
        <div class="divider"></div>
      </div>
      {{-- Logout selalu tampil --}}
      <form method="POST" action="{{ route('admin.logout') }}">
        @csrf
        <button type="submit" class="btn-logout">⬡ Keluar</button>
      </form>
    </div>
  </nav>

  {{-- Mobile top nav --}}
  <div class="admin-topbar-mobile">
    @php $pending = \App\Models\RoomRequest::where('status','pending')->count(); @endphp
    <a href="{{ route('admin.requests') }}" class="{{ request()->routeIs('admin.requests','admin.dashboard') ? 'active' : '' }}">
      📋 Permintaan @if($pending > 0)<span style="background:var(--green-600);color:#fff;border-radius:999px;padding:0 6px;font-size:10px;">{{ $pending }}</span>@endif
    </a>
    <a href="{{ route('admin.schedule') }}" class="{{ request()->routeIs('admin.schedule') ? 'active' : '' }}">📅 Jadwal</a>
    <a href="{{ route('admin.rooms') }}" class="{{ request()->routeIs('admin.rooms') ? 'active' : '' }}">🚪 Ruangan</a>
    <a href="{{ route('admin.settings') }}" class="{{ request()->routeIs('admin.settings') ? 'active' : '' }}">⚙️ Pengaturan</a>
    <a href="{{ route('dashboard') }}">🏠 Dashboard</a>
  </div>

  {{-- Body --}}
  <div class="admin-body" style="flex:1;">
    <aside class="admin-sidebar">
      <div style="margin-bottom:24px;">
        <div style="font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-light);padding:0 10px;margin-bottom:6px;">Menu Utama</div>
        <a href="{{ route('admin.requests') }}" style="display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;font-size:13px;font-weight:600;text-decoration:none;transition:.15s;{{ request()->routeIs('admin.requests','admin.dashboard')?'background:var(--green-50);color:var(--green-800)':'color:var(--text-muted)' }}">
          📋 Permintaan Masuk
          @php $pending = \App\Models\RoomRequest::where('status','pending')->count(); @endphp
          @if($pending > 0)<span style="margin-left:auto;background:var(--green-600);color:#fff;border-radius:999px;padding:1px 7px;font-size:11px;font-weight:700;">{{ $pending }}</span>@endif
        </a>
        <a href="{{ route('admin.schedule') }}" style="display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;font-size:13px;font-weight:600;text-decoration:none;transition:.15s;{{ request()->routeIs('admin.schedule')?'background:var(--green-50);color:var(--green-800)':'color:var(--text-muted)' }}">📅 Jadwal Hari Ini</a>
        <a href="{{ route('admin.rooms') }}" style="display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;font-size:13px;font-weight:600;text-decoration:none;transition:.15s;{{ request()->routeIs('admin.rooms')?'background:var(--green-50);color:var(--green-800)':'color:var(--text-muted)' }}">🚪 Status Ruangan</a>
      </div>
      <div style="margin-bottom:24px;">
        <div style="font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-light);padding:0 10px;margin-bottom:6px;">Pengaturan</div>
        <a href="{{ route('admin.settings') }}" style="display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;font-size:13px;font-weight:600;text-decoration:none;transition:.15s;{{ request()->routeIs('admin.settings')?'background:var(--green-50);color:var(--green-800)':'color:var(--text-muted)' }}">⚙️ Pengaturan Sistem</a>
      </div>
      <div>
        <div style="font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-light);padding:0 10px;margin-bottom:6px;">Navigasi</div>
        <a href="{{ route('dashboard') }}" style="display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;font-size:13px;font-weight:600;text-decoration:none;color:var(--text-muted);">🏠 Lihat Dashboard</a>
      </div>
    </aside>

    <main class="admin-main">
      @if(session('success'))
        <div class="alert alert-success" style="margin-bottom:20px;">✓ {{ session('success') }}</div>
      @endif
      @if(session('error'))
        <div class="alert alert-error" style="margin-bottom:20px;">⚠️ {{ session('error') }}</div>
      @endif
      @yield('admin-content')
    </main>
  </div>
</div>
@endsection