<?php
require_once 'config/database.php';
require_once 'app/helpers/auth.php';
requireLogin();
$userName = $_SESSION['user_name'] ?? 'User';
$page_js = 'gps_tracking.js';
$extra_css = '
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
    #trackingMap { height: 600px; border-radius: 12px; }
    .vehicle-marker-label { font-weight: 600; font-size: 11px; white-space: nowrap; text-shadow: 0 0 3px #fff; }
    .leaflet-popup-content { margin: 8px 12px; }
    .leaflet-popup-content h6 { margin-bottom: 4px; }
    .leaflet-popup-content table { font-size: 12px; width: 100%; }
    .leaflet-popup-content td { padding: 1px 4px; }
    .idle-badge { font-size: 11px; padding: 2px 6px; }
    .gps-kpi-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 1.1rem; }
    #liveToggleBtn .spinner-border { width: 12px; height: 12px; }
</style>
';
include 'views/layouts/header.php';
include 'views/layouts/sidebar.php';
?>
<main class="main-content">
<?php include 'views/layouts/topbar.php'; ?>
<div class="container-fluid p-3 p-md-4">
    <div id="alertBox" class="alert d-none"></div>

    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body p-3 p-md-4">
            <div class="d-flex flex-column flex-md-row justify-content-between gap-3 align-items-md-center">
                <div>
                    <span class="badge bg-primary bg-opacity-10 text-primary mb-2 px-3 py-2"><i class="bi bi-satellite"></i> GPS Fleet Tracking</span>
                    <h3 class="mb-1">Live Vehicle Tracking</h3>
                    <p class="text-muted mb-0">Real-time GPS positions of all tracked fleet vehicles.</p>
                </div>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-outline-success active" id="liveToggleBtn"><i class="bi bi-play-fill me-1"></i> Live <span class="spinner-border spinner-border-sm d-none ms-1" id="liveSpinner"></span></button>
                    <button type="button" class="btn btn-outline-secondary" id="btnFitAll"><i class="bi bi-arrows-fullscreen me-1"></i> Fit All</button>
                    <button type="button" class="btn btn-outline-primary" id="btnRefreshPositions"><i class="bi bi-arrow-clockwise me-1"></i> Refresh</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-6 col-md-3">
            <div class="card kpi-card shadow-sm border-0 h-100"><div class="card-body py-3 px-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="gps-kpi-icon bg-primary bg-opacity-10 text-primary"><i class="bi bi-truck"></i></div>
                    <div><div class="kpi-label">Tracked Vehicles</div><div class="kpi-value fs-4" id="kpiTracked">0</div></div>
                </div>
            </div></div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card kpi-card shadow-sm border-0 h-100"><div class="card-body py-3 px-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="gps-kpi-icon bg-success bg-opacity-10 text-success"><i class="bi bi-geo-alt-fill"></i></div>
                    <div><div class="kpi-label">With Position</div><div class="kpi-value fs-4" id="kpiWithPosition">0</div></div>
                </div>
            </div></div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card kpi-card shadow-sm border-0 h-100"><div class="card-body py-3 px-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="gps-kpi-icon bg-warning bg-opacity-10 text-warning"><i class="bi bi-clock"></i></div>
                    <div><div class="kpi-label">Idle</div><div class="kpi-value fs-4" id="kpiIdle">0</div></div>
                </div>
            </div></div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card kpi-card shadow-sm border-0 h-100"><div class="card-body py-3 px-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="gps-kpi-icon bg-danger bg-opacity-10 text-danger"><i class="bi bi-wifi-off"></i></div>
                    <div><div class="kpi-label">Offline</div><div class="kpi-value fs-4" id="kpiOffline">0</div></div>
                </div>
            </div></div>
        </div>
    </div>

    <div class="row g-3">
        <div class="col-lg-9">
            <div class="card shadow-sm border-0">
                <div class="card-body p-2 p-md-3">
                    <div id="trackingMap"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white py-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="mb-0"><i class="bi bi-list-ul me-1"></i> Vehicles</h6>
                        <input type="text" id="vehicleFilter" class="form-control form-control-sm" placeholder="Filter..." style="width:130px">
                    </div>
                </div>
                <div class="card-body p-0" style="max-height:560px;overflow-y:auto">
                    <div id="vehicleList" class="list-group list-group-flush small">
                        <div class="list-group-item text-muted text-center py-4">Loading vehicles...</div>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm border-0 mt-3">
                <div class="card-header bg-white py-2">
                    <h6 class="mb-0"><i class="bi bi-signpost-2 me-1"></i> Idle Alerts</h6>
                </div>
                <div class="card-body p-0" style="max-height:200px;overflow-y:auto">
                    <div id="idleList" class="list-group list-group-flush small">
                        <div class="list-group-item text-muted text-center py-3">No idle alerts</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</main>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
const CSRF_TOKEN = <?= json_encode(generateCsrfToken(), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
</script>
<?php include 'views/layouts/footer.php'; ?>
