<?php
if (session_status() === PHP_SESSION_NONE) { session_start(); }
if (!isset($_SESSION['agent_id'])) {
    header("Location: login.php"); exit;
}
require_once '../config/db.php';

// Verify agent is still active
$chk_ag = $pdo->prepare("SELECT is_active FROM sales_agents WHERE id = ?");
$chk_ag->execute([$_SESSION['agent_id']]);
$ag_status = $chk_ag->fetch();

if (!$ag_status || $ag_status['is_active'] == 0) {
    session_destroy();
    header("Location: login.php?error=account_deactivated"); exit;
}

$agent_id   = $_SESSION['agent_id'];
$agent_name = $_SESSION['agent_name'];
$current_page = basename($_SERVER['PHP_SELF']);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agent Portal — MK Construction</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary:#18aadf; --dark:#0f172a; --dark-nav:#1e293b;
            --light:#f8fafc; --white:#fff; --text:#334155;
            --border:#e2e8f0; --danger:#ef4444; --success:#22c55e;
        }
        *{margin:0;padding:0;box-sizing:border-box;font-family:'Montserrat',sans-serif;}
        body{background:var(--light);color:var(--text);display:flex;min-height:100vh;}

        /* Sidebar */
        .ag-sidebar{width:240px;background:var(--dark-nav);color:#fff;display:flex;flex-direction:column;position:fixed;height:100vh;left:0;top:0;z-index:100;transition:transform 0.3s;}
        .ag-logo{padding:18px 20px;border-bottom:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;gap:10px;}
        .ag-logo-icon{width:36px;height:36px;background:var(--primary);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;flex-shrink:0;}
        .ag-logo-text{font-weight:800;font-size:0.95rem;line-height:1.2;}
        .ag-logo-sub{font-size:0.7rem;color:#94a3b8;font-weight:500;}
        .ag-nav{flex:1;padding:12px 0;overflow-y:auto;}
        .ag-nav a{display:flex;align-items:center;gap:10px;padding:11px 20px;color:#94a3b8;text-decoration:none;font-weight:600;font-size:0.88rem;transition:all 0.2s;border-left:3px solid transparent;}
        .ag-nav a:hover,.ag-nav a.active{color:#fff;background:rgba(255,255,255,0.07);border-left-color:var(--primary);}
        .ag-nav a i{width:18px;font-size:0.9rem;}
        .ag-nav .nav-section{padding:10px 20px 4px;font-size:0.65rem;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:0.08em;}
        .ag-footer{padding:16px 20px;border-top:1px solid rgba(255,255,255,0.1);}
        .ag-user{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
        .ag-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:0.9rem;flex-shrink:0;}
        .ag-user-name{font-weight:700;font-size:0.85rem;color:#fff;}
        .ag-user-role{font-size:0.7rem;color:#94a3b8;}
        .ag-logout{display:flex;align-items:center;gap:8px;color:#94a3b8;text-decoration:none;font-size:0.82rem;font-weight:600;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,0.05);transition:all 0.2s;}
        .ag-logout:hover{background:rgba(239,68,68,0.15);color:#ef4444;}

        /* Main */
        .ag-main{margin-left:240px;flex:1;display:flex;flex-direction:column;min-height:100vh;}
        .ag-topbar{background:#fff;border-bottom:1px solid var(--border);padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;}
        .ag-topbar h1{font-size:1.1rem;font-weight:800;color:var(--dark);}
        .ag-content{padding:24px;flex:1;}
        .mobile-menu-btn{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--dark);}

        /* Cards & Tables */
        .ag-card{background:#fff;border:2px solid var(--border);border-radius:14px;padding:22px;margin-bottom:20px;}
        .ag-card-title{font-size:1rem;font-weight:800;color:var(--dark);margin:0 0 18px;padding-bottom:12px;border-bottom:2px solid var(--border);}
        .ag-table{width:100%;border-collapse:collapse;}
        .ag-table th{text-align:left;padding:12px 15px;border-bottom:2px solid #94a3b8;color:#64748b;font-weight:700;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.04em;background:#f8fafc;}
        .ag-table td{padding:13px 15px;border-bottom:1px solid var(--border);font-size:0.9rem;}
        .ag-table tr:hover td{background:#f8fafc;}
        .ag-badge{display:inline-block;padding:3px 10px;border-radius:10px;font-size:0.72rem;font-weight:700;}
        .btn-primary{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-weight:700;font-size:0.88rem;cursor:pointer;text-decoration:none;transition:opacity 0.2s;}
        .btn-primary:hover{opacity:0.9;}
        .btn-sm{padding:7px 13px;font-size:0.8rem;border-radius:7px;}
        input,select,textarea{border:2px solid #cbd5e1;border-radius:8px;padding:10px 13px;width:100%;font-family:inherit;font-size:0.9rem;outline:none;transition:border-color 0.15s;}
        input:focus,select:focus,textarea:focus{border-color:var(--primary);}
        label{display:block;margin-bottom:6px;font-weight:700;font-size:0.78rem;color:#475569;text-transform:uppercase;letter-spacing:0.04em;}
        .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
        .col-span-2{grid-column:1/-1;}
        .alert-success{background:#dcfce7;color:#16a34a;padding:12px 16px;border-radius:8px;font-weight:600;font-size:0.88rem;margin-bottom:18px;border:1px solid #bbf7d0;}
        .alert-error{background:#fee2e2;color:#ef4444;padding:12px 16px;border-radius:8px;font-weight:600;font-size:0.88rem;margin-bottom:18px;border:1px solid #fecaca;}

        /* Admin-like Dashboard Styles */
        .welcome-banner{background:linear-gradient(135deg,var(--primary),#0369a1);border-radius:15px;padding:30px 35px;color:#fff;margin-bottom:30px;box-shadow:0 10px 20px rgba(0,0,0,0.1);position:relative;overflow:hidden;}
        .welcome-banner h2{font-size:1.8rem;font-weight:800;margin-bottom:8px;position:relative;z-index:2;}
        .welcome-banner p{font-size:1rem;opacity:0.9;position:relative;z-index:2;}
        .welcome-banner::after{content:'\f0b1';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;right:20px;bottom:-20px;font-size:10rem;opacity:0.1;transform:rotate(-15deg);z-index:1;}

        .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:25px;margin-bottom:35px;}
        .stat-card{background:#fff;border-radius:15px;padding:25px;display:flex;align-items:center;gap:20px;box-shadow:0 5px 15px rgba(0,0,0,0.05);transition:transform 0.3s ease,box-shadow 0.3s ease;border:1px solid var(--border);}
        .stat-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,0.1);}
        .stat-icon{width:60px;height:60px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;}
        .stat-info h3{font-size:0.9rem;color:#64748b;margin-bottom:5px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;}
        .stat-value{font-size:1.8rem;font-weight:800;color:var(--dark);line-height:1;}

        @media(max-width:768px){
            .ag-sidebar{transform:translateX(-100%);}
            .ag-sidebar.open{transform:translateX(0);}
            .ag-main{margin-left:0;}
            .mobile-menu-btn{display:block;}
            .form-grid{grid-template-columns:1fr;}
            
            .ag-content { padding: 15px; padding-bottom: 80px; }
            .mobile-bottom-nav { 
                display: flex !important; 
                position: fixed; bottom: 0; left: 0; right: 0; height: 65px; 
                background: #fff; box-shadow: 0 -2px 15px rgba(0,0,0,0.1); z-index: 1000; 
                justify-content: space-around; align-items: center; border-top: 1px solid var(--border); 
            }
            .mobile-bottom-nav a, .mobile-bottom-nav button { 
                display: flex; flex-direction: column; align-items: center; justify-content: center; 
                text-decoration: none; color: #94a3b8; gap: 4px; background: none; border: none; width: 20%; 
            }
            .mobile-bottom-nav a i, .mobile-bottom-nav button i { font-size: 1.2rem; }
            .mobile-bottom-nav a span, .mobile-bottom-nav button span { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; }
            .mobile-bottom-nav a.active { color: var(--primary); }
            
            .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
            .stat-card { padding: 15px; flex-direction: column; text-align: center; gap: 8px; }
            .stat-icon { width: 45px; height: 45px; font-size: 1.2rem; }
            .stat-value { font-size: 1.4rem; }
        }
        #ag-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:99;}
        #ag-overlay.show{display:block;}
        .mobile-bottom-nav { display: none; }
    </style>
</head>
<body>
<div id="ag-overlay" onclick="closeSidebar()"></div>

<!-- Sidebar -->
<aside class="ag-sidebar" id="agSidebar">
    <div class="ag-logo">
        <div class="ag-logo-icon"><i class="fa-solid fa-user-tie"></i></div>
        <div>
            <div class="ag-logo-text">Agent Portal</div>
            <div class="ag-logo-sub">MK Construction</div>
        </div>
    </div>
    <nav class="ag-nav">
        <div class="nav-section">Main</div>
        <a href="index.php" class="<?= $current_page==='index.php'?'active':'' ?>"><i class="fa-solid fa-gauge"></i> Dashboard</a>
        <div class="nav-section">Leads</div>
        <a href="lead_add.php" class="<?= $current_page==='lead_add.php'?'active':'' ?>"><i class="fa-solid fa-plus"></i> Add New Lead</a>
        <a href="my_leads.php" class="<?= $current_page==='my_leads.php'?'active':'' ?>"><i class="fa-solid fa-list"></i> My Leads</a>
        <a href="followups.php" class="<?= $current_page==='followups.php'?'active':'' ?>"><i class="fa-solid fa-bell"></i> Follow-ups</a>
        <div class="nav-section">Sales Suite</div>
        <a href="meetings.php" class="<?= $current_page==='meetings.php'?'active':'' ?>"><i class="fa-solid fa-handshake"></i> Meetings</a>
        <a href="calendar.php" class="<?= $current_page==='calendar.php'?'active':'' ?>"><i class="fa-solid fa-calendar-days"></i> My Calendar</a>
        <a href="customers.php" class="<?= $current_page==='customers.php'?'active':'' ?>"><i class="fa-solid fa-briefcase"></i> My Customers</a>
        <div class="nav-section">Reports</div>
        <a href="reports.php" class="<?= $current_page==='reports.php'?'active':'' ?>"><i class="fa-solid fa-chart-line"></i> Sales Reports</a>
    </nav>
    <div class="ag-footer">
        <div class="ag-user">
            <div class="ag-avatar"><?= strtoupper(substr($agent_name,0,1)) ?></div>
            <div>
                <div class="ag-user-name"><?= htmlspecialchars($agent_name) ?></div>
                <div class="ag-user-role">Sales Agent</div>
            </div>
        </div>
        <a href="logout.php" class="ag-logout"><i class="fa-solid fa-right-from-bracket"></i> Logout</a>
    </div>
</aside>

<!-- Main -->
<div class="ag-main">
    <header class="ag-topbar">
        <div style="display:flex;align-items:center;gap:12px;">
            <button class="mobile-menu-btn" onclick="openSidebar()"><i class="fa-solid fa-bars"></i></button>
            <h1 id="page-title">Agent Portal</h1>
        </div>
        <div style="font-size:0.82rem;color:#94a3b8;font-weight:600;" class="hide-mobile">
            <i class="fa-solid fa-circle" style="color:var(--success);font-size:0.5rem;margin-right:4px;"></i> Online
        </div>
    </header>

    <!-- Mobile Bottom Nav -->
    <nav class="mobile-bottom-nav">
        <a href="index.php" class="<?= $current_page==='index.php'?'active':'' ?>">
            <i class="fa-solid fa-gauge"></i>
            <span>Home</span>
        </a>
        <a href="my_leads.php" class="<?= $current_page==='my_leads.php'?'active':'' ?>">
            <i class="fa-solid fa-users"></i>
            <span>Leads</span>
        </a>
        <a href="followups.php" class="<?= $current_page==='followups.php'?'active':'' ?>">
            <i class="fa-solid fa-bell"></i>
            <span>Tasks</span>
        </a>
        <a href="meetings.php" class="<?= $current_page==='meetings.php'?'active':'' ?>">
            <i class="fa-solid fa-handshake"></i>
            <span>Deals</span>
        </a>
        <button onclick="openSidebar()">
            <i class="fa-solid fa-bars"></i>
            <span>Menu</span>
        </button>
    </nav>

    <script>
    function openSidebar() {
        document.getElementById('agSidebar').classList.add('open');
        document.getElementById('ag-overlay').classList.add('show');
    }
    function closeSidebar() {
        document.getElementById('agSidebar').classList.remove('open');
        document.getElementById('ag-overlay').classList.remove('show');
    }
    </script>
    <style>@media(max-width:768px){ .hide-mobile{display:none;} }</style>
    <div class="ag-content">
