<?php
require_once 'config/database.php';
require_once 'app/helpers/auth.php';
require_once 'app/helpers/rbac.php';
requireLogin();

if (!isAdmin() && !can('driver_scorecard.view')) {
    echo "<div class='alert alert-danger m-4'>Access denied</div>"; exit;
}

$page_js = 'driver_scorecard.js';
include 'views/layouts/header.php';
include 'views/layouts/sidebar.php';
?>
<style>
.scorecard-stat { padding: 20px; border-radius: 16px; background: #fff; border: 1px solid #edf2f7; height: 100%; }
.scorecard-stat-label { font-size: 12px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.scorecard-stat-value { font-size: 28px; font-weight: 700; line-height: 1.1; }
.scorecard-stat-desc { font-size: 12px; color: #94a3b8; margin-top: 4px; }
</style>
<main class="main-content">
<?php include 'views/layouts/topbar.php'; ?>
<div class="container-fluid p-4">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3 mb-4">
        <div>
            <span class="section-chip mb-2"><i class="bi bi-person-badge"></i> Performance</span>
            <h2 class="mb-1">Driver Scorecard</h2>
            <p class="text-muted mb-0">Performance metrics, trip stats, fuel efficiency, and incident history per driver.</p>
        </div>
        <div style="min-width:250px">
            <select id="scorecardDriverSelect" class="form-select form-select-lg">
                <option value="">Select a driver...</option>
            </select>
        </div>
    </div>

    <div id="scorecardContent" class="d-none">
        <div class="row g-3 mb-4" id="driverInfo">
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <div class="card-body d-flex align-items-center gap-3">
                        <div style="width:56px;height:56px;border-radius:16px;background:#eef4ff;display:flex;align-items:center;justify-content:center;font-size:24px;color:#1d4ed8;flex-shrink:0;">
                            <i class="bi bi-person-circle"></i>
                        </div>
                        <div>
                            <h4 class="mb-1 fw-semibold" id="driverName">-</h4>
                            <div class="text-muted small" id="driverDetails">-</div>
                        </div>
                        <div class="ms-auto">
                            <span class="badge fs-6" id="licenseBadge">-</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-3 mb-4">
            <div class="col-6 col-md-3"><div class="scorecard-stat"><div class="scorecard-stat-label">Total Trips</div><div class="scorecard-stat-value" id="scTotalTrips">0</div><div class="scorecard-stat-desc">Completed / Active</div></div></div>
            <div class="col-6 col-md-3"><div class="scorecard-stat"><div class="scorecard-stat-label">Total Distance</div><div class="scorecard-stat-value" id="scTotalKm">0 km</div><div class="scorecard-stat-desc">From completed trips</div></div></div>
            <div class="col-6 col-md-3"><div class="scorecard-stat"><div class="scorecard-stat-label">Fuel Efficiency</div><div class="scorecard-stat-value" id="scFuelEfficiency">0</div><div class="scorecard-stat-desc">km per litre</div></div></div>
            <div class="col-6 col-md-3"><div class="scorecard-stat"><div class="scorecard-stat-label">Fuel Cost</div><div class="scorecard-stat-value" id="scFuelCost">₦0</div><div class="scorecard-stat-desc">Total fuel spent</div></div></div>
        </div>

        <div class="row g-3 mb-4">
            <div class="col-6 col-md-3"><div class="scorecard-stat"><div class="scorecard-stat-label">Incidents</div><div class="scorecard-stat-value" id="scIncidents">0</div><div class="scorecard-stat-desc">Major / At fault</div></div></div>
            <div class="col-6 col-md-3"><div class="scorecard-stat"><div class="scorecard-stat-label">Fuelings</div><div class="scorecard-stat-value" id="scFuelings">0</div><div class="scorecard-stat-desc">Total litres: <span id="scTotalLitres">0</span></div></div></div>
            <div class="col-6 col-md-3"><div class="scorecard-stat"><div class="scorecard-stat-label">Avg Cost/L</div><div class="scorecard-stat-value" id="scAvgCostPerLitre">₦0</div></div></div>
            <div class="col-6 col-md-3"><div class="scorecard-stat"><div class="scorecard-stat-label">License</div><div class="scorecard-stat-value" id="scLicenseExpiry">-</div><div class="scorecard-stat-desc" id="scLicenseDays">-</div></div></div>
        </div>

        <div class="card shadow-sm border-0">
            <div class="card-header bg-white"><h5 class="mb-0 fw-semibold">Recent Vehicle Assignments</h5></div>
            <div class="table-responsive"><table class="table align-middle mb-0">
                <thead class="table-light"><tr><th>Vehicle</th><th>From</th><th>To</th></tr></thead>
                <tbody id="assignmentTable"><tr><td colspan="3" class="text-muted text-center">No assignments</td></tr></tbody>
            </table></div>
        </div>
    </div>

    <div id="scorecardEmpty" class="text-center py-5">
        <i class="bi bi-person-badge" style="font-size:48px;color:#cbd5e1;"></i>
        <h5 class="mt-3 text-muted">Select a driver to view their scorecard</h5>
    </div>
</div>
</main>
<script>window.CSRF_TOKEN = <?= json_encode(generateCsrfToken(), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;</script>
<?php include 'views/layouts/footer.php'; ?>
