<?php
$sess = session();
$user = [
    'user_id'   => $sess->get('user_id'),
    'username'  => $sess->get('username'),
    'email'     => $sess->get('email'),
    'full_name' => $sess->get('full_name'),
    'role'      => $sess->get('role'),
];
$isAdmin = (($user['role'] ?? null) === 'admin');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Outbound Caller - <?= esc($this->renderSection('title') ?: ($title ?? 'Dashboard')) ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="<?= base_url('assets/css/app.css') ?>">
    <style>
        * { font-family: 'Inter', sans-serif; }
        .glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        .glass-dark {
            background: rgba(15, 23, 42, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
        .sidebar-link {
            transition: all 0.2s ease;
        }
        .sidebar-link:hover {
            background: rgba(255, 255, 255, 0.08);
            transform: translateX(4px);
        }
        .sidebar-link.active {
            background: linear-gradient(90deg, rgba(59, 130, 246, 0.2) 0%, transparent 100%);
            border-left: 3px solid #3b82f6;
        }
        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .scrollbar-thin::-webkit-scrollbar { width: 6px; }
        .scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
        .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.3); border-radius: 3px; }
    </style>
</head>
<body class="bg-slate-100 min-h-screen">

    <div class="flex min-h-screen">

        <aside class="glass-dark w-60 min-h-screen text-white flex flex-col fixed top-0 left-0 z-40">
            <div class="px-5 py-4 border-b border-white/10 flex items-center gap-3">
                <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-md">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                    </svg>
                </div>
                <div>
                    <h1 class="font-bold text-base leading-tight">Outbound</h1>
                    <p class="text-[11px] text-slate-400">Caller Suite</p>
                </div>
            </div>

            <nav class="flex-1 overflow-y-auto scrollbar-thin py-3 px-2.5 space-y-0.5">
                <div class="px-2.5 mb-1.5 mt-1.5 text-[10px] font-semibold text-slate-500 uppercase tracking-wider">Main</div>

                <?php
                    $uriPath = service('request')->getPath() ?? '';
                    $dashboardUrl = $isAdmin ? site_url('/admin') : site_url('/agent');
                    $leadsUrl     = $isAdmin ? site_url('/admin/leads') : site_url('/agent/leads');
                    $docsUrl      = $isAdmin ? site_url('/admin/documents') : site_url('/agent/documents');
                    $isActive = function ($needle) use ($uriPath) { return stripos($uriPath, ltrim($needle, '/')) !== false; };
                ?>

                <a href="<?= esc($dashboardUrl) ?>" class="sidebar-link <?= (service('request')->getPath() === trim(($isAdmin ? '/admin' : '/agent'), '/')) ? 'active' : '' ?> flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                    </svg>
                    Dashboard
                </a>

                <a href="<?= esc($leadsUrl) ?>" class="sidebar-link <?= $isActive($isAdmin ? 'admin/leads' : 'agent/leads') ? 'active' : '' ?> flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                    </svg>
                    Leads
                </a>

                <a href="<?= esc($docsUrl) ?>" class="sidebar-link <?= $isActive($isAdmin ? 'admin/documents' : 'agent/documents') ? 'active' : '' ?> flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    Documents
                </a>

                <?php if ($isAdmin): ?>
                <div class="px-2.5 mb-1.5 mt-5 text-[10px] font-semibold text-slate-500 uppercase tracking-wider">Admin</div>

                <a href="<?= esc(site_url('/admin/categories')) ?>" class="sidebar-link <?= $isActive('admin/categories') ? 'active' : '' ?> flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                    </svg>
                    Categories
                </a>

                <a href="<?= esc(site_url('/admin/lead-statuses')) ?>" class="sidebar-link <?= $isActive('admin/lead-statuses') ? 'active' : '' ?> flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
                    </svg>
                    Lead Statuses
                </a>

                <a href="<?= esc(site_url('/admin/lead-custom-fields')) ?>" class="sidebar-link <?= $isActive('admin/lead-custom-fields') ? 'active' : '' ?> flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                    </svg>
                    Custom Fields
                </a>

                <a href="<?= esc(site_url('/admin/chatbot-config')) ?>" class="sidebar-link <?= $isActive('admin/chatbot-config') ? 'active' : '' ?> flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M14.25 3.104a24.3 24.301 0 014.5 0M5 14.5c.758.126 1.53.198 2.307.214a17.403 17.403 0 005.386 0c.777-.016 1.549-.088 2.307-.214m-10 0v1.143c0 .351.061.696.178 1.024m-.178-2.167v.05c0 .329.041.651.12.959M19 14.5v.05c0 .308.079.63.12.959M19 14.5c-.758.126-1.53.198-2.307.214a17.403 17.403 0 01-5.386 0M5 15.643v1.117c0 .313.036.622.107.923m13.893-2.037v1.117c0 .313-.036.622-.107.923m-13.679 2.037c.207.269.452.518.728.744a20.936 20.936 0 0013.696 0M8 20.5h8" />
                    </svg>
                    Chatbot Config
                </a>

                <a href="<?= esc(site_url('/admin/cloudtalk-settings')) ?>" class="sidebar-link <?= $isActive('admin/cloudtalk-settings') ? 'active' : '' ?> flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                    </svg>
                    CloudTalk Settings
                </a>

                <a href="<?= esc(site_url('/admin/quiz-settings')) ?>" class="sidebar-link <?= $isActive('admin/quiz-settings') ? 'active' : '' ?> flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5m9.75-11.396v5.714a2.25 2.25 0 00.659 1.591L19 14.5M19 14.5v1.143A2.25 2.25 0 0116.75 17.893H7.25A2.25 2.25 0 015 15.643V14.5m9.75-11.396a24.3 24.301 0 004.5 0M5 14.5h14M9 20.5h6" />
                    </svg>
                    Quiz Settings
                </a>
                <a href="<?= esc(site_url('/admin/quiz-attempts')) ?>" class="sidebar-link <?= $isActive('admin/quiz-attempts') ? 'active' : '' ?> flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                    </svg>
                    Quiz Attempt History
                </a>

                <a href="<?= esc(site_url('/admin/vapi-settings')) ?>" class="sidebar-link <?= $isActive('admin/vapi-settings') ? 'active' : '' ?> flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z" />
                    </svg>
                    Vapi Settings
                </a>
                <a href="<?= esc(site_url('/admin/vapi/score-history')) ?>" class="sidebar-link <?= $isActive('admin/vapi/score-history') ? 'active' : '' ?> flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
                    </svg>
                    Vapi Score History
                </a>

                <div class="px-2.5 mb-1.5 mt-5 text-[10px] font-semibold text-slate-500 uppercase tracking-wider">Bookings</div>

                <a href="<?= esc(site_url('/admin/booking-schedules')) ?>" class="sidebar-link <?= $isActive('admin/booking-schedules') ? 'active' : '' ?> flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
                    </svg>
                    Booking Schedules
                </a>

                <a href="<?= esc(site_url('/admin/bookings')) ?>" class="sidebar-link <?= $isActive('admin/bookings') ? 'active' : '' ?> flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.422 48.422 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
                    </svg>
                    All Bookings
                </a>

                <a href="<?= esc(site_url('/admin/booking-smtp')) ?>" class="sidebar-link <?= $isActive('admin/booking-smtp') ? 'active' : '' ?> flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                    </svg>
                    SMTP & Notifications
                </a>
                <?php endif; ?>

                <div class="px-2.5 mb-1.5 mt-5 text-[10px] font-semibold text-slate-500 uppercase tracking-wider">AI Tools</div>

                <a href="<?= esc(site_url('/agent/quizzes')) ?>" class="sidebar-link <?= $isActive('agent/quizzes') ? 'active' : '' ?> flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
                    </svg>
                    Training Quizzes
                </a>

                <a href="<?= esc(site_url('/agent/mock-calls')) ?>" class="sidebar-link <?= $isActive('agent/mock-call') ? 'active' : '' ?> flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243-4.243a5 5 0 010 7.072M5.636 5.636a9 9 0 010 12.728L3 21m2.636-2.636l2.828-2.828" />
                    </svg>
                    Mock Calls
                </a>

                <?php if (!empty($user['role']) && $user['role'] === 'admin'): ?>
                <a href="<?= esc(site_url('/agent/mock-call-logs')) ?>" class="sidebar-link <?= $isActive('agent/mock-call-log') ? 'active' : '' ?> flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.422 48.422 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18zm0-6h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zm0-6h.008v.008H12V11.25zm0 2.25h.008v.008H12v-.008zm0 2.25h.008v.008H12v-.008zm0-6h.008v.008H12V11.25zm0 2.25h.008v.008H12v-.008zm0 2.25h.008v.008H12v-.008zM16.5 15h.008v.008H16.5V15zm0 2.25h.008v.008H16.5v-.008zM16.5 10.5h.008v.008H16.5V10.5zm0 2.25h.008v.008H16.5V12.75zm0 2.25h.008v.008H16.5V17.25z" />
                    </svg>
                    All Mock Call Logs
                </a>
                <?php endif; ?>

                <a href="<?= esc(site_url('/agent/my-bookings')) ?>" class="sidebar-link <?= $isActive('agent/my-bookings') ? 'active' : '' ?> flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
                    </svg>
                    My Bookings
                </a>

                <a href="<?= esc(site_url('/chat')) ?>" class="sidebar-link <?= $isActive('chat') ? 'active' : '' ?> flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                    </svg>
                    AI Assistant
                </a>
            </nav>

            <div class="p-3 border-t border-white/10">
                <div class="px-2.5 py-2 rounded-lg bg-white/5 flex items-center gap-2.5">
                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-emerald-400 to-cyan-500 flex items-center justify-center text-white font-semibold text-xs shadow-sm">
                        <?= strtoupper(substr(esc($user['full_name'] ?? 'U'), 0, 1)) ?>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-xs font-medium truncate"><?= esc($user['full_name'] ?? 'User') ?></p>
                        <p class="text-[11px] text-slate-400 capitalize"><?= esc($user['role'] ?? 'agent') ?></p>
                    </div>
                </div>
            </div>
        </aside>

        <div class="ml-60 flex-1 flex flex-col min-h-screen">

            <header class="glass sticky top-0 z-30 px-6 py-3 border-b border-slate-200/70 flex items-center justify-between">
                <div>
                    <h2 class="text-lg font-bold text-slate-800"><?= esc($this->renderSection('pageTitle') ?: ($pageTitle ?? 'Dashboard')) ?></h2>
                    <p class="text-xs text-slate-500 mt-0.5">Welcome back, <?= esc($user['full_name'] ?? 'User') ?> 👋</p>
                </div>

                <div class="flex items-center gap-3">
                    <div class="relative">
                        <button class="w-8 h-8 rounded-lg bg-slate-100 hover:bg-slate-200 flex items-center justify-center text-slate-600 transition">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                            </svg>
                            <span class="absolute -top-1 -right-1 w-3.5 h-3.5 bg-red-500 text-white text-[9px] font-bold rounded-full flex items-center justify-center">3</span>
                        </button>
                    </div>

                    <div class="h-8 w-px bg-slate-200"></div>

                    <div class="flex items-center gap-2.5 group relative">
                        <div class="text-right">
                            <p class="text-xs font-semibold text-slate-700 leading-tight"><?= esc($user['full_name'] ?? 'User') ?></p>
                            <p class="text-[11px] text-slate-500"><?= esc($user['email'] ?? '') ?></p>
                        </div>
                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-emerald-400 to-cyan-500 flex items-center justify-center text-white text-xs font-semibold shadow-sm cursor-pointer">
                            <?= strtoupper(substr(esc($user['full_name'] ?? 'U'), 0, 1)) ?>
                        </div>

                        <div class="absolute right-0 top-full mt-2 w-52 fade-in hidden group-hover:block z-50">
                            <div class="glass rounded-2xl shadow-2xl border border-slate-200/70 py-2 overflow-hidden">
                                <div class="px-4 py-2.5 border-b border-slate-100">
                                    <p class="text-xs font-semibold text-slate-800"><?= esc($user['full_name'] ?? 'User') ?></p>
                                    <p class="text-[11px] text-slate-500"><?= esc($user['email'] ?? '') ?></p>
                                </div>
                                <a href="<?= site_url('/logout') ?>" class="flex items-center gap-2.5 px-4 py-2 text-xs text-red-600 hover:bg-red-50 transition">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                                    </svg>
                                    Sign Out
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <div class="px-6 pt-5">
                <?php if (session()->getFlashdata('success')): ?>
                    <div class="mb-4 fade-in">
                        <div class="glass rounded-xl border border-emerald-200/70 bg-emerald-50/50 px-4 py-3 flex items-start gap-2.5">
                            <div class="w-7 h-7 rounded-lg bg-emerald-100 flex items-center justify-center flex-shrink-0">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                                </svg>
                            </div>
                            <div>
                                <p class="text-xs font-semibold text-emerald-800">Success</p>
                                <p class="text-xs text-emerald-700 mt-0.5"><?= session()->getFlashdata('success') ?></p>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>

                <?php if (session()->getFlashdata('error')): ?>
                    <div class="mb-4 fade-in">
                        <div class="glass rounded-xl border border-red-200/70 bg-red-50/50 px-4 py-3 flex items-start gap-2.5">
                            <div class="w-7 h-7 rounded-lg bg-red-100 flex items-center justify-center flex-shrink-0">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                                </svg>
                            </div>
                            <div>
                                <p class="text-xs font-semibold text-red-800">Error</p>
                                <p class="text-xs text-red-700 mt-0.5"><?= session()->getFlashdata('error') ?></p>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>

                <?php if (session()->getFlashdata('info')): ?>
                    <div class="mb-4 fade-in">
                        <div class="glass rounded-xl border border-blue-200/70 bg-blue-50/50 px-4 py-3 flex items-start gap-2.5">
                            <div class="w-7 h-7 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </div>
                            <div>
                                <p class="text-xs font-semibold text-blue-800">Info</p>
                                <p class="text-xs text-blue-700 mt-0.5"><?= session()->getFlashdata('info') ?></p>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>
            </div>

            <main class="flex-1 p-6 fade-in">
                <?= $content ?? $this->renderSection('content') ?>
            </main>

        </div>
    </div>

</body>
</html>
