<!DOCTYPE html>
<html lang="id">
<head>
 <meta charset="UTF-8">
 <title>Admin - @yield('title', 'Dashboard')</title>
 <link rel="icon" type="image/x-icon" href="{{ asset('images/logo.png') }}">
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

 <style>
 body {
  background-color: #f8f9fa;
 }
 .sidebar {
  min-height: 100vh;
  background: linear-gradient(180deg, #198754, #0d5035);
  color: #fff;
  width: 260px;
  position: relative;
  box-shadow: 2px 0 8px rgba(0,0,0,0.1);
 }
 .sidebar a {
  color: #d1e7dd;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.95rem;
 }
 .sidebar a:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transform: translateX(5px);
 }
 .sidebar a.active {
  background: rgba(255, 255, 255, 0.25);
  font-weight: 600;
  color: #fff;
  box-shadow: inset 2px 0 0 #fff;
 }
 .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #d1e7dd;
  color: #0f5132;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
 }
 .sidebar h6 {
  font-size: 0.75rem;
  letter-spacing: 1px;
  color: #a3cfbb;
  margin-top: 1rem;
 }
 .sidebar::-webkit-scrollbar {
  width: 6px;
 }
 .sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.3);
  border-radius: 10px;
 }
</style>

</head>
<body>

<div class="d-flex">
  <aside class="sidebar p-3 d-flex flex-column">
   <!-- Logo -->
   <div class="text-center mb-3">
    <img src="{{ asset('images/logo.png') }}" alt="Logo"
         class="img-fluid "
         style="max-width: 90px;">
   </div>

   <!-- Judul -->
   <div class="text-center fs-6 fw-bold border-bottom pb-3 mb-3">
    ASAMA INDONESIA MANUFACTURING
   </div>

   <h6 class="text-uppercase">Ruangan</h6>
   @php
    $rooms = [
     'guest_room_1',
     'guest_room_2',
     'meeting_room_1',
     'meeting_room_4',
     'meeting_room_5',
     'meeting_room_qc',
     'training_room_1',
     'training_room_2',
     'training_room_3',
    ];

    $icons = [
     'guest_room'   => 'bi-house-door',
     'meeting_room' => 'bi-people',
     'meeting_room_qc'      => 'bi-search',
    ];
   @endphp

   <nav class="flex-grow-1">
    @foreach($rooms as $r)
      @php
        $icon = 'bi-door-open'; // default
        foreach($icons as $key => $ic) {
          if(str_contains($r, $key)) {
            $icon = $ic;
            break;
          }
        }
      @endphp
     <a href="{{ url('/booking-admin/' . $r . '/bookings') }}"
   class="{{ (isset($room) && $room === $r) ? 'active' : '' }}">
   <i class="bi {{ $icon }}"></i>
   {{ strtoupper(str_replace('_', ' ', $r)) }}
</a>

    @endforeach
   </nav>

   <!-- Logout -->
   <form action="{{ route('logout') }}" method="POST" class="mt-3">
    @csrf
    <button type="submit" class="btn btn-danger w-100 d-flex align-items-center justify-content-center gap-2">
     <i class="bi bi-box-arrow-right"></i> Logout
    </button>
   </form>

   <div class="mt-auto pt-3 border-top small text-center text-light">
    &copy; {{ date('Y') }} <br> Asama Indonesia Manufacturing
   </div>
  </aside>

  <!-- Main Content -->
  <main class="flex-grow-1">
   <!-- Topbar -->
   <nav class="navbar navbar-light bg-white shadow-sm px-3 d-flex justify-content-between">
    <span class="fw-semibold">@yield('title', 'Dashboard')</span>
    <div class="d-flex align-items-center gap-2">
     <span class="text-muted small">Halo, {{ auth()->user()->name ?? 'Admin' }}</span>
     <div class="avatar">
      {{ strtoupper(substr(auth()->user()->name ?? 'A', 0, 1)) }}
     </div>
    </div>
   </nav>

   <!-- Content -->
   <div class="container-fluid p-4">
    @yield('content')
   </div>
  </main>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
