<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $title ?? 'Rider Portal' ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <link href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" rel="stylesheet">
    <style>
        :root { --accent: #F97316; }
        body  { background: #f4f4f4; font-family: 'Segoe UI', sans-serif; }

        .rider-navbar {
            background: linear-gradient(135deg, #EA580C, #F97316);
            padding: 12px 20px;
            display: flex; align-items: center; justify-content: space-between;
            position: sticky; top: 0; z-index: 100;
            box-shadow: 0 2px 12px rgba(0,0,0,.15);
        }
        .rider-navbar .brand { color:#fff; font-weight:800; font-size:1.1rem; }
        .rider-navbar .rider-name { color:rgba(255,255,255,.9); font-size:.9rem; }

        .stat-card {
            background:#fff; border-radius:16px; padding:20px;
            box-shadow:0 2px 12px rgba(0,0,0,.06);
            text-align:center;
        }
        .stat-card .num { font-size:2rem; font-weight:900; color:var(--accent); }
        .stat-card .lbl { color:#6b7280; font-size:.85rem; }

        .order-card {
            background:#fff; border-radius:14px; padding:16px;
            box-shadow:0 2px 10px rgba(0,0,0,.06);
            margin-bottom:12px;
        }
        .order-card.active-delivery { border-left:4px solid #F97316; }
        .order-card.ready { border-left:4px solid #10B981; }

        .location-bar {
            background:#fff; border-radius:14px; padding:14px 16px;
            box-shadow:0 2px 10px rgba(0,0,0,.06);
            margin-bottom:16px;
        }
        .loc-dot { width:10px; height:10px; border-radius:50%;
            display:inline-block; margin-right:6px; }
        .loc-dot.active { background:#22C55E;
            box-shadow:0 0 0 3px rgba(34,197,94,.25);
            animation: pulse 1.5s infinite; }
        .loc-dot.inactive { background:#6b7280; }
        @keyframes pulse {
            0%,100% { box-shadow:0 0 0 3px rgba(34,197,94,.25); }
            50%      { box-shadow:0 0 0 6px rgba(34,197,94,.1); }
        }

        #riderMap { height:160px; border-radius:10px; margin-top:10px; }

        .btn-accent { background:var(--accent); color:#fff; border:none; }
        .btn-accent:hover { background:#EA580C; color:#fff; }
    </style>
</head>
<body>

<!-- Navbar -->
<div class="rider-navbar">
    <span class="brand"><i class="bi bi-bicycle me-2"></i>Rider Portal</span>
    <?php if (\Core\Session::get('rider_id')): ?>
    <div class="d-flex align-items-center gap-3">
        <span class="rider-name"><i class="bi bi-person-circle me-1"></i><?= e(\Core\Session::get('rider_name') ?? '') ?></span>
        <a href="<?= url('rider/logout') ?>" class="btn btn-sm btn-outline-light">
            <i class="bi bi-box-arrow-right"></i>
        </a>
    </div>
    <?php endif ?>
</div>

<div class="container py-4" style="max-width:640px;">
    <?= $content ?>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<?= $extraJs ?? '' ?>
</body>
</html>
