<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ $title ?? "e-KTP" }} | Dashboard</title>

  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="{{ asset('assets/plugins/fontawesome-free/css/all.min.css') }}">

  <!-- AdminLTE -->
  <link rel="stylesheet" href="{{ asset('assets/dist/css/adminlte.min.css') }}">

  <!-- Modern Custom CSS -->
<style>
  /* Font & Background */
  body {
    font-family: 'Inter', sans-serif;
    background: #f4f6fa;
    color: #111;
    transition: background 0.3s, color 0.3s;
  }

  /* FIX NAVBAR SCROLL LEFT-RIGHT */
  .navbar {
    overflow-x: hidden !important;
  }

  /* Navbar modern */
  .main-header.navbar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: background 0.3s, box-shadow 0.3s;
  }

  .navbar .nav-link {
    color: #111 !important;
    font-weight: 500;
    transition: color 0.2s, transform 0.2s;
  }

  .navbar .nav-link:hover {
    color: #1e40af !important;
    transform: translateY(-2px);
  }

  /* Sidebar modern */
  .main-sidebar {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(14px);
    border-right: 1px solid rgba(0,0,0,0.08);
    transition: background 0.3s;
  }

  .brand-link {
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .brand-text {
    font-weight: 700;
    font-size: 1.2rem;
    color: #1e40af;
    letter-spacing: 0.5px;
    transition: color 0.2s;
  }

  .brand-text:hover {
    color: #3b82f6;
  }

  /* Sidebar menu */
  .nav-sidebar .nav-link {
    margin: 6px 12px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    transition: 0.3s;
    color: #111 !important;
  }

  .nav-sidebar .nav-link:hover {
    background: #e0efff;
    transform: translateX(5px);
    color: #1e40af !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  }

  .nav-sidebar .nav-link.active {
    background: #dbeafe !important;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    color: #1e40af !important;
  }

  /* User panel */
  .user-panel img {
    border-radius: 50%;
    border: 2px solid #fff;
    transition: transform 0.3s, box-shadow 0.3s;
  }

  .user-panel img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  }

  /* Content style */
  .content-wrapper {
    backdrop-filter: blur(6px);
    padding: 25px;
    transition: padding 0.3s;
  }

  /* Modern card */
  .modern-card {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: 0.3s;
  }

  .modern-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  }

  /* Centered nav title */
  .nav-title-center {
    text-align: center !important;
    font-size: 1.4rem;
    font-weight: 700 !important;
    letter-spacing: 1px;
    margin: 18px 0 8px 0;
    color: #1e40af !important;
    text-transform: uppercase;
  }

  /* Scrollbar modern */
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(30, 64, 175, 0.5);
    border-radius: 8px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(30, 64, 175, 0.8);
  }

  /* Button modern */
  .btn-modern {
    background: #1e40af;
    color: #fff;
    border-radius: 12px;
    padding: 8px 18px;
    font-weight: 500;
    transition: 0.3s;
  }
  /* Biar nav menu tidak melebar ke samping */
.nav-sidebar .nav-link {
    width: 85%;              /* atur lebar card */
    margin: 6px auto;        /* auto = center kiri-kanan */
    padding: 10px 14px;      /* lebih rapat */
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}


  .btn-modern:hover {
    background: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  }
</style>

</head>

<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">

  <!-- NAVBAR -->
  <nav class="main-header navbar navbar-expand navbar-light">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button">
          <i class="fas fa-bars"></i>
        </a>
      </li>

      <li class="nav-item d-none d-sm-inline-block">
        <a href="#" class="nav-link">Home</a>
      </li>
    </ul>

    <!-- Right Navbar -->
    <ul class="navbar-nav ml-auto">

      <li class="nav-item">
        <a class="nav-link" data-widget="navbar-search" href="#" role="button">
          <i class="fas fa-search"></i>
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link" data-widget="fullscreen" href="#" role="button">
          <i class="fas fa-expand-arrows-alt"></i>
        </a>
      </li>

<a href="{{ route('logout') }}"
   onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
   class="nav-link">
   <i class="fas fa-sign-out-alt"></i> Logout
</a>

<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display:none;">
  @csrf
</form>


    </ul>
  </nav>
  <!-- END NAVBAR -->

  <!-- SIDEBAR -->
  <aside class="main-sidebar elevation-4">

<a href="#" class="brand-link text-center">
  <img src="{{ asset('assets/dist/img/AdminLTELogo.png') }}" 
       class="brand-image img-circle elevation-3" style="opacity:.9">
  <span class="brand-text" style="color:#000 !important;">e-Perpustakaan</span>
</a>


    <div class="sidebar">

      <!-- User panel -->
      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        <div class="image">
          <img src="{{ asset('assets/dist/img/user2-160x160.jpg') }}" class="img-circle elevation-2" alt="User">
        </div>
        <div class="info">
          <span class="d-block" style="font-weight:600;">{{ auth()->user()->name }}</span>
        </div>
      </div>

      <!-- Sidebar search -->

      <!-- Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column">

      <li class="nav-header nav-title-center">NAVIGASI</li>
{{-- Admin  --}}
  


<li class="nav-item">
  <a href="{{ route('buku.index') }}" class="nav-link">
    <i class="nav-icon fas fa-book text-info"></i>
    <p>Buku</p>
  </a>
</li>


<li class="nav-item">
  <a href="{{ route('peminjaman.index') }}" class="nav-link">
    <i class="nav-icon fas fa-book-reader text-info"></i>
    <p>Peminjaman</p>
  </a>
</li>

<li class="nav-item">
  <a href="#" class="nav-link">
    <i class="nav-icon fas fa-undo-alt text-info"></i>
    <p>Pengembalian</p>
  </a>
</li>

<li class="nav-item">
  <a href="{{ route('laporan.buku') }}" class="nav-link">
    <i class="nav-icon fas fa-file-alt text-info"></i>
    <p>Laporan Buku</p>
  </a>
</li>


<li class="nav-item">
  <a href="#" class="nav-link">
    <i class="nav-icon fas fa-clipboard-list text-info"></i>
    <p>Pendaftaran</p>
  </a>
</li>

<li class="nav-item">
  <a href="{{ route('siswa.index') }}" class="nav-link">
    <i class="nav-icon fas fa-user-graduate text-info"></i>
    <p>Data Siswa</p>
  </a>
</li>


        </ul>
      </nav>

    </div>
  </aside>

  <!-- CONTENT -->
  @yield('content')
  <!-- END CONTENT -->

</div>

<!-- Scripts -->
<script src="{{ asset('assets/plugins/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('assets/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('assets/dist/js/adminlte.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>
