<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
    <style>
        body {
            display: flex;
        }

        .sidebar {
            width: 250px;
            min-height: 100vh;
            padding: 40px 20px;
            /* Menyesuaikan padding */
            color: white;
            background: linear-gradient(to bottom,
                    rgba(42, 103, 159, 0.84),
                    rgba(50, 148, 221, 0.88),
                    rgba(28, 103, 177, 0.90),
                    rgba(4, 32, 75, 0.92));
        }

        .sidebar .logo {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            /* Jarak antara gambar dan teks */
            margin-bottom: 30px;
        }

        .sidebar .logo img {
            width: 80px;
            /* Sesuaikan ukuran gambar */
            height: 50px;
        }

        .sidebar h4 {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 0px;
            /* Jarak bawah agar lebih proporsional */
            text-align: center;
        }

        .nav-link {
            color: white !important;
            font-size: 16px;
            padding: 10px 15px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            gap: 20px;
            /* Menambahkan jarak antara ikon dan teks */
        }

        .nav-link:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .nav-item {
            margin-bottom: 15px;
            /* Memberikan jarak antar menu */
        }

        .content {
            flex: 1;
            padding: 80px 40px 40px;
            /* Menambahkan padding-top agar tidak tertutup */
        }
    </style>
</head>

<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark px-3 d-flex justify-content-between"
    style="position: absolute; top: 0; left: 250px; width: calc(100% - 250px); height: 60px; background: linear-gradient(to right, rgba(42, 103, 159, 0.84), rgba(50, 148, 221, 0.88)); z-index: 999;">
    <div class="ms-auto">
        <!-- Dropdown Menu for Profile and Logout -->
        <div class="dropdown">
            <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="fas fa-user-circle"></i> Menu
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <li>
                    <a class="dropdown-item" href="{{ route('admin.profil') }}">
                        <i class="fas fa-user-circle"></i> Profil
                    </a>
                </li>
                <li>
                    <hr class="dropdown-divider">
                </li>
                <li>
                    <form action="{{ route('logout') }}" method="POST" style="display: inline;">
                        @csrf
                        <button type="submit" class="dropdown-item">
                            <i class="fas fa-sign-out-alt"></i> Logout
                        </button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</nav>

    <div class="sidebar">
        <div class="logo">
            <img src="{{ asset('assets/admin/icon.png') }}" alt="Logo">
            <h4>Kos Calista</h4>
        </div>
        <ul class="nav flex-column">
            <li class="nav-item">
                <a href="/dashboard-admin" class="nav-link"><i class="bi bi-speedometer2"></i><span>Dashboard</span></a>
            </li>
            <li class="nav-item">
                <a href="/customer" class="nav-link"><i class="bi bi-people"></i><span>Data Customer</span></a>
            </li>
            <li class="nav-item">
                <a href="/rooms" class="nav-link"><i class="bi bi-door-closed"></i><span>Data Kamar</span></a>
            </li>
            <li class="nav-item">
                <a href="/booking" class="nav-link"><i class="bi bi-calendar-check"></i><span>Data Booking</span></a>
            </li>
            <li class="nav-item">
                <a href="/transaksi" class="nav-link"><i class="bi bi-cash-stack"></i><span>Data Transaksi</span></a>
            </li>
            <li class="nav-item">
                <a href="/expense" class="nav-link"><i class="bi bi-wallet2"></i><span>Pengeluaran</span></a>
            </li>
            <li class="nav-item">
                <a href="/keuangan" class="nav-link"><i class="bi bi-credit-card"></i><span>Laporan Keuangan</span></a>
            </li>
        </ul>
    </div>

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

    <!-- Bootstrap JavaScript Bundle (termasuk Popper.js) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
</body>

</html>