<!DOCTYPE html>
<html>
<head>
    <title>CRM Admin</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

    <style>
        body {
            background: #f4f6f9;
        }

        .navbar {
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .sidebar {
            height: 100vh;
            background: #1e293b;
            color: white;
            position: fixed;
            width: 220px;
            top: 0;
            left: 0;
            padding-top: 60px;
        }

        .sidebar a {
            display: block;
            color: #cbd5e1;
            padding: 12px 20px;
            text-decoration: none;
        }

        .sidebar a:hover {
            background: #334155;
            color: white;
        }

        .content {
            margin-left: 220px;
            padding: 20px;
        }

        .card-box {
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .topbar {
            position: fixed;
            width: 100%;
            z-index: 1000;
        }
    </style>
</head>
<body>

<!-- TOP NAVBAR -->
<nav class="navbar navbar-dark bg-dark px-3 topbar">
    <a class="navbar-brand" href="{{ route('admin.dashboard') }}">
        CRM Panel
    </a>
</nav>

<!-- SIDEBAR -->
<div class="sidebar">

    <a href="{{ route('admin.dashboard') }}">
        <i class="bi bi-speedometer2"></i> Dashboard
    </a>

    <a href="{{ route('admin.leads') }}">
        <i class="bi bi-people"></i> Leads
    </a>

    <a href="{{ route('admin.counselors') }}">
        <i class="bi bi-person-badge"></i> Counselors
    </a>

    <a href="{{ route('admin.counselor.create') }}">
        <i class="bi bi-person-plus"></i> Add Counselor
    </a>

</div>

<!-- MAIN CONTENT -->
<div class="content">

    <!-- Page Title -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4>@yield('title', 'Dashboard')</h4>

     
    </div>

    @yield('content')

</div>

</body>
</html>