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

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

$page_js = 'incidents.js';
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-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-exclamation-triangle"></i> Risk Management</span>
            <h2 class="mb-1">Accident / Incident Reporting</h2>
            <p class="text-muted mb-0">Log and track vehicle accidents, damages, and resolution status.</p>
        </div>
        <button class="btn btn-primary fw-semibold px-4" id="btnAddIncident"><i class="bi bi-plus-lg me-2"></i>Report Incident</button>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-6 col-md-2"><div class="card kpi-card shadow-sm border-0 h-100"><div class="card-body"><div class="kpi-label">Reported</div><div class="kpi-value" id="kpiReported">0</div></div></div></div>
        <div class="col-6 col-md-2"><div class="card kpi-card shadow-sm border-0 h-100"><div class="card-body"><div class="kpi-label">Assessing</div><div class="kpi-value" id="kpiAssessing">0</div></div></div></div>
        <div class="col-6 col-md-2"><div class="card kpi-card shadow-sm border-0 h-100"><div class="card-body"><div class="kpi-label">In Repair</div><div class="kpi-value" id="kpiInRepair">0</div></div></div></div>
        <div class="col-6 col-md-2"><div class="card kpi-card shadow-sm border-0 h-100"><div class="card-body"><div class="kpi-label">Resolved</div><div class="kpi-value" id="kpiResolved">0</div></div></div></div>
        <div class="col-6 col-md-2"><div class="card kpi-card shadow-sm border-0 h-100"><div class="card-body"><div class="kpi-label">Major/Total Loss</div><div class="kpi-value" id="kpiMajor">0</div></div></div></div>
        <div class="col-6 col-md-2"><div class="card kpi-card shadow-sm border-0 h-100"><div class="card-body"><div class="kpi-label">Total</div><div class="kpi-value" id="kpiTotal">0</div></div></div></div>
    </div>

    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body"><div class="row g-2 align-items-end">
            <div class="col-md-3"><label class="form-label small fw-semibold text-muted">Vehicle</label><select id="incVehicleFilter" class="form-select"><option value="">All</option></select></div>
            <div class="col-md-2"><label class="form-label small fw-semibold text-muted">Status</label><select id="incStatusFilter" class="form-select"><option value="">All</option><option value="reported">Reported</option><option value="assessing">Assessing</option><option value="in_repair">In Repair</option><option value="resolved">Resolved</option><option value="closed">Closed</option></select></div>
            <div class="col-md-2"><label class="form-label small fw-semibold text-muted">Type</label><select id="incTypeFilter" class="form-select"><option value="">All</option><option value="collision">Collision</option><option value="fire">Fire</option><option value="theft">Theft</option><option value="vandalism">Vandalism</option></select></div>
            <div class="col-md-2"><label class="form-label small fw-semibold text-muted">Severity</label><select id="incSeverityFilter" class="form-select"><option value="">All</option><option value="minor">Minor</option><option value="moderate">Moderate</option><option value="major">Major</option><option value="total_loss">Total Loss</option></select></div>
            <div class="col-md-2"><label class="form-label small fw-semibold text-muted">From</label><input type="date" class="form-control" id="incDateFrom"></div>
            <div class="col-md-1"><button class="btn btn-outline-secondary w-100" id="btnRefreshIncidents"><i class="bi bi-arrow-clockwise"></i></button></div>
            <div class="col-md-1">
                <div class="btn-group w-100" role="group">
                    <button class="btn btn-outline-secondary" id="btnExportIncidentsCsv" title="CSV"><i class="bi bi-filetype-csv"></i></button>
                    <button class="btn btn-outline-secondary" id="btnExportIncidentsXlsx" title="Excel"><i class="bi bi-file-earmark-excel"></i></button>
                    <button class="btn btn-outline-secondary" id="btnExportIncidentsPdf" title="PDF"><i class="bi bi-filetype-pdf"></i></button>
                </div>
            </div>
        </div></div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="table-responsive"><table class="table align-middle table-hover mb-0">
            <thead class="table-light"><tr>
                <th>Vehicle</th><th>Driver</th><th>Date</th><th>Type</th><th>Severity</th><th>Location</th><th>Damage Est.</th><th>Status</th><th class="text-end">Actions</th>
            </tr></thead>
            <tbody id="incidentTable"><tr><td colspan="9" class="text-center text-muted py-4">Loading...</td></tr></tbody>
        </table></div>
    </div>
</div>
</main>

<div class="modal fade" id="incidentModal" tabindex="-1"><div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"><div class="modal-content">
    <div class="modal-header"><div><h5 class="modal-title fw-semibold" id="incidentModalTitle">Report Incident</h5><p class="text-muted small mb-0 mt-1">Record accident or incident details</p></div><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">
        <form id="incidentForm">
            <input type="hidden" id="incident_id">
            <div class="row g-3">
                <div class="col-md-6"><label class="form-label">Vehicle <span class="text-danger">*</span></label><select id="incident_vehicle_id" class="form-select"><option value="">Select vehicle</option></select></div>
                <div class="col-md-6"><label class="form-label">Driver</label><select id="incident_driver_id" class="form-select"><option value="">Select driver</option></select></div>
                <div class="col-md-4"><label class="form-label">Incident Date <span class="text-danger">*</span></label><input type="date" id="incident_date" class="form-control"></div>
                <div class="col-md-4"><label class="form-label">Time</label><input type="time" id="incident_time" class="form-control"></div>
                <div class="col-md-4"><label class="form-label">Location</label><input type="text" id="incident_location" class="form-control"></div>
                <div class="col-md-4"><label class="form-label">Incident Type</label><select id="incident_type" class="form-select"><option value="collision">Collision</option><option value="fire">Fire</option><option value="theft">Theft</option><option value="vandalism">Vandalism</option><option value="natural_disaster">Natural Disaster</option><option value="other">Other</option></select></div>
                <div class="col-md-4"><label class="form-label">Severity</label><select id="incident_severity" class="form-select"><option value="minor">Minor</option><option value="moderate">Moderate</option><option value="major">Major</option><option value="total_loss">Total Loss</option></select></div>
                <div class="col-md-4"><label class="form-label">Damage Estimate (₦)</label><input type="number" step="0.01" id="incident_damage_cost_estimate" class="form-control"></div>
                <div class="col-md-4"><label class="form-label">Police Report #</label><input type="text" id="incident_police_report_number" class="form-control"></div>
                <div class="col-md-4"><label class="form-label">Police Station</label><input type="text" id="incident_police_station" class="form-control"></div>
                <div class="col-md-4"><label class="form-label">Fleet at Fault?</label><select id="incident_is_fleet_fault" class="form-select"><option value="">Unknown</option><option value="1">Yes</option><option value="0">No</option></select></div>
                <div class="col-12"><label class="form-label">Description</label><textarea id="incident_description" class="form-control" rows="2"></textarea></div>
                <div class="col-12"><label class="form-label">Third Party Details</label><textarea id="incident_third_party_details" class="form-control" rows="2"></textarea></div>
                <div class="col-12"><label class="form-label">Status</label><select id="incident_status" class="form-select"><option value="reported">Reported</option><option value="assessing">Assessing</option><option value="in_repair">In Repair</option><option value="resolved">Resolved</option><option value="closed">Closed</option></select></div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="saveIncident"><i class="bi bi-check-lg me-2"></i>Save Incident</button>
    </div>
</div></div></div>

<script>window.CSRF_TOKEN = <?= json_encode(generateCsrfToken(), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;</script>
<?php include 'views/layouts/footer.php'; ?>
