<?php
require_once 'config/database.php';
require_once 'app/helpers/auth.php';
requireLogin();
$userName = $_SESSION['user_name'] ?? 'User';
$page_js = 'dashboard.js';

include 'views/layouts/header.php';
include 'views/layouts/sidebar.php';
?>
<style>
.skeleton { background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-h2 { height: 32px; width: 60%; margin-bottom: 8px; }
.skeleton-p { height: 16px; width: 80%; }
.skeleton-stat { height: 80px; width: 100%; }
.skeleton-chart { height: 200px; width: 100%; }
</style>
<main class="main-content">
    <?php include 'views/layouts/topbar.php'; ?>
    <div class="container-fluid p-4">

        <div class="card shadow-sm border-0 dashboard-hero mb-4 enterprise-hero">
            <div class="card-body p-4 p-lg-5">
                <div class="row g-4 align-items-center">
                    <div class="col-xl-7">
                        <span class="section-chip dashboard-chip mb-3">Enterprise Dashboard</span>
                        <h1 class="display-6 fw-semibold mb-2">Fleet Intelligence Cockpit</h1>
                        <p class="mb-0 dashboard-hero-copy">Real-time visibility into fleet operations, maintenance workflow, fuel consumption, compliance status, and system-wide activity.</p>
                    </div>
                    <div class="col-xl-5 text-end">
                        <div class="dashboard-status-badge">
                            <span class="badge bg-success me-2"><i class="bi bi-circle-fill"></i> Fleet Operational</span>
                            <span class="small text-muted d-block mt-2" id="lastUpdateTime">Last updated: just now</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mb-4">
            <h5 class="mb-3 fw-semibold">Fleet Health & Performance</h5>
            <div class="row g-3">
                <div class="col-12 col-sm-6 col-lg-3">
                    <div class="card kpi-card enterprise-kpi shadow-sm border-0 h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <div class="flex-grow-1">
                                    <div class="kpi-label">Fleet Utilization</div>
                                    <div class="kpi-value" id="kpiUtilization">0%</div>
                                    <div class="small text-muted">Active vs available</div>
                                    <div class="progress mt-2" style="height:4px;"><div class="progress-bar bg-primary" id="utilizationBar" style="width:0%"></div></div>
                                </div>
                                <div class="text-primary" style="font-size:1.5rem;"><i class="bi bi-speedometer2"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-lg-3">
                    <div class="card kpi-card enterprise-kpi shadow-sm border-0 h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <div class="flex-grow-1">
                                    <div class="kpi-label">Fleet Health</div>
                                    <div class="kpi-value" id="kpiHealth">0%</div>
                                    <div class="small text-muted">Non-maintenance vs total</div>
                                    <div class="progress mt-2" style="height:4px;"><div class="progress-bar bg-success" id="healthBar" style="width:0%"></div></div>
                                </div>
                                <div class="text-success" style="font-size:1.5rem;"><i class="bi bi-heart-pulse"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-lg-3">
                    <div class="card kpi-card enterprise-kpi shadow-sm border-0 h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <div class="flex-grow-1">
                                    <div class="kpi-label">Compliance Score</div>
                                    <div class="kpi-value" id="kpiCompliance">0%</div>
                                    <div class="small text-muted">Valid documents</div>
                                    <div class="progress mt-2" style="height:4px;"><div class="progress-bar bg-info" id="complianceBar" style="width:0%"></div></div>
                                </div>
                                <div class="text-info" style="font-size:1.5rem;"><i class="bi bi-shield-check"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-lg-3">
                    <div class="card kpi-card enterprise-kpi shadow-sm border-0 h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <div class="flex-grow-1">
                                    <div class="kpi-label">Workflow Status</div>
                                    <div class="kpi-value" id="kpiWorkflow">0</div>
                                    <div class="small text-muted">Pending approvals</div>
                                    <div class="progress mt-2" style="height:4px;"><div class="progress-bar bg-warning" id="workflowBar" style="width:0%"></div></div>
                                </div>
                                <div class="text-warning" style="font-size:1.5rem;"><i class="bi bi-clock-history"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mb-4">
            <div class="row g-3">
                <div class="col-12 col-sm-6 col-md-4 col-lg-2">
                    <div class="stat-mini-card"><div class="stat-value" id="statActiveVehicles">0</div><div class="stat-label">Active Vehicles</div></div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-2">
                    <div class="stat-mini-card"><div class="stat-value" id="statActiveDrivers">0</div><div class="stat-label">Active Drivers</div></div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-2">
                    <div class="stat-mini-card alert-variant"><div class="stat-value" id="statInWorkshop">0</div><div class="stat-label">In Workshop</div></div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-2">
                    <div class="stat-mini-card alert-variant"><div class="stat-value" id="statExpiring">0</div><div class="stat-label">Expiring Docs</div></div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-2">
                    <div class="stat-mini-card"><div class="stat-value" id="statPendingApprovals">0</div><div class="stat-label">Approvals</div></div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-2">
                    <div class="stat-mini-card"><div class="stat-value" id="statMaintenanceJobs">0</div><div class="stat-label">Complaints</div></div>
                </div>
            </div>
        </div>

        <div class="row g-4 mb-4">
            <div class="col-lg-8">
                <div class="card shadow-sm border-0 dashboard-chart-card h-100">
                    <div class="card-header bg-white border-0 d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
                        <div><h5 class="mb-1">Fleet Activity Timeline</h5><p class="text-muted mb-0 small">System actions over the last 30 days</p></div>
                        <select id="activityPeriod" class="form-select w-auto"><option value="7">Last 7 Days</option><option value="14">Last 14 Days</option><option value="30" selected>Last 30 Days</option></select>
                    </div>
                    <div class="card-body"><canvas id="activityTimelineChart" height="100"></canvas></div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-header bg-white border-0"><h5 class="mb-1">Action Breakdown</h5><p class="text-muted mb-0 small">Recent system events by category</p></div>
                    <div class="card-body"><canvas id="actionTypeChart" height="100"></canvas></div>
                </div>
            </div>
        </div>

        <div class="row g-4 mb-4">
            <div class="col-lg-6">
                <div class="card shadow-sm border-0 dashboard-chart-card h-100">
                    <div class="card-header bg-white border-0"><h5 class="mb-1">Maintenance Pipeline</h5><p class="text-muted mb-0 small">Job status distribution and flow</p></div>
                    <div class="card-body"><canvas id="maintenancePipelineChart" height="120"></canvas></div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card shadow-sm border-0 dashboard-chart-card h-100">
                    <div class="card-header bg-white border-0"><h5 class="mb-1">Fuel Spend Trend</h5><p class="text-muted mb-0 small">Monthly fuel consumption and cost</p></div>
                    <div class="card-body"><canvas id="fuelSpendChart" height="120"></canvas></div>
                </div>
            </div>
        </div>

        <div class="row g-4 mb-4">
            <div class="col-lg-6">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
                        <div><h5 class="mb-1">Alerts & Compliance</h5><p class="text-muted mb-0 small">Items requiring attention</p></div>
                        <button type="button" class="btn btn-outline-primary btn-sm" id="btnViewAllAlerts">View All</button>
                    </div>
                    <div class="card-body"><div id="alertsList"><div class="text-muted small">Loading alerts...</div></div></div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
                        <div><h5 class="mb-1">Recent Activity</h5><p class="text-muted mb-0 small">Latest system actions and approvals</p></div>
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="btnViewAllActivity">View All</button>
                    </div>
                    <div class="card-body"><div id="activityFeed"><div class="text-muted small">Loading activity...</div></div></div>
                </div>
            </div>
        </div>

        <div class="card shadow-sm border-0 mb-4">
            <div class="card-header bg-white border-0 d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3">
                <div><h5 class="mb-1">Fleet Master View</h5><p class="text-muted mb-0 small">Current status, assignments, and maintenance needs</p></div>
                <div class="d-flex flex-column flex-sm-row gap-2">
                    <input type="text" class="form-control" id="dashboardSearch" placeholder="Search vehicle, driver, or status">
                    <select id="dashboardFilter" class="form-select w-auto"><option value="">All Status</option><option value="active">Active</option><option value="workshop">In Workshop</option><option value="maintenance">Maintenance Due</option></select>
                    <button class="btn btn-primary" id="btnRefreshDashboard"><i class="bi bi-arrow-clockwise me-1"></i>Refresh</button>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table align-middle table-hover">
                        <thead class="table-light"><tr><th>Plate</th><th>Vehicle</th><th>Driver</th><th>Status</th><th>Fleet Mode</th><th>Maint. Status</th><th>Compliance</th><th>Action</th></tr></thead>
                        <tbody id="fleetTableBody"><tr><td colspan="8" class="text-center text-muted py-4">Loading fleet data...</td></tr></tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</main>

<div class="offcanvas offcanvas-end" tabindex="-1" id="dashboardDetailsCanvas">
    <div class="offcanvas-header"><h5 class="offcanvas-title">Details</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button></div>
    <div class="offcanvas-body" id="detailsBody"><div class="text-muted">Loading...</div></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
<?php include 'views/layouts/footer.php'; ?>