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

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

$page_js = 'vehicle_inspection.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-clipboard-check"></i> Fleet Safety</span>
            <h2 class="mb-1">Vehicle Inspection</h2>
            <p class="text-muted mb-0">Record and track vehicle body, interior, and device inspections.</p>
        </div>
        <button class="btn btn-primary fw-semibold px-4" id="btnAddInspection"><i class="bi bi-plus-lg me-2"></i>New Inspection</button>
    </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-4">
                    <label class="form-label small fw-semibold text-muted">Vehicle</label>
                    <select id="filterVehicle" class="form-select"><option value="">All vehicles</option></select>
                </div>
                <div class="col-md-3">
                    <label class="form-label small fw-semibold text-muted">From</label>
                    <input type="date" id="filterDateFrom" class="form-control">
                </div>
                <div class="col-md-3">
                    <label class="form-label small fw-semibold text-muted">To</label>
                    <input type="date" id="filterDateTo" class="form-control">
                </div>
                <div class="col-md-2">
                    <button class="btn btn-outline-secondary w-100" id="btnRefresh"><i class="bi bi-arrow-clockwise me-2"></i>Refresh</button>
                </div>
                <div class="col-md-1">
                    <div class="btn-group w-100" role="group">
                        <button class="btn btn-outline-secondary" id="btnExportInspCsv" title="CSV"><i class="bi bi-filetype-csv"></i></button>
                        <button class="btn btn-outline-secondary" id="btnExportInspXlsx" title="Excel"><i class="bi bi-file-earmark-excel"></i></button>
                        <button class="btn btn-outline-secondary" id="btnExportInspPdf" 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>Date</th>
                        <th>Vehicle</th>
                        <th>Inspector</th>
                        <th>Items</th>
                        <th>Fails</th>
                        <th>Result</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody id="inspectionTable"><tr><td colspan="7" class="text-center text-muted py-4">Loading...</td></tr></tbody>
            </table>
        </div>
    </div>
</div>
</main>

<div class="modal fade" id="inspectionModal" tabindex="-1"><div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable"><div class="modal-content">
    <div class="modal-header">
        <div><h5 class="modal-title fw-semibold" id="inspectionModalTitle">New Inspection</h5><p class="text-muted small mb-0 mt-1">Complete vehicle inspection checklist</p></div>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
    </div>
    <div class="modal-body">
        <form id="inspectionForm">
            <input type="hidden" id="inspection_id">
            <div class="row g-3 mb-4">
                <div class="col-md-4">
                    <label class="form-label">Vehicle <span class="text-danger">*</span></label>
                    <select id="inspection_vehicle_id" class="form-select"><option value="">Select vehicle</option></select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Inspection Date <span class="text-danger">*</span></label>
                    <input type="date" id="inspection_date" class="form-control">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Inspector Name</label>
                    <input type="text" id="inspector_name" class="form-control" placeholder="Inspector name">
                </div>
            </div>

            <div class="inspection-form-section">
                <div class="inspection-form-section-title"><i class="bi bi-car-front me-2"></i>Body &amp; Interior Check</div>
                <div class="table-responsive">
                    <table class="table table-sm table-bordered mb-0" id="bodyInteriorTable">
                        <thead class="table-light"><tr><th style="width:40%">Item</th><th style="width:12%">Pass</th><th style="width:12%">Fail</th><th style="width:12%">N/A</th><th>Remarks</th></tr></thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            <div class="inspection-form-section mt-4">
                <div class="inspection-form-section-title"><i class="bi bi-diagram-3 me-2"></i>Devices &amp; Routing Check</div>
                <div class="table-responsive">
                    <table class="table table-sm table-bordered mb-0" id="devicesRoutingTable">
                        <thead class="table-light"><tr><th style="width:40%">Item</th><th style="width:12%">Pass</th><th style="width:12%">Fail</th><th style="width:12%">N/A</th><th>Remarks</th></tr></thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            <div class="row g-3 mt-4">
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Overall Result</label>
                    <select id="overall_result" class="form-select">
                        <option value="pass">Pass</option>
                        <option value="fail">Fail</option>
                    </select>
                </div>
                <div class="col-12">
                    <label class="form-label">Notes</label>
                    <textarea id="inspection_notes" class="form-control" rows="2"></textarea>
                </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="saveInspection"><i class="bi bi-check-lg me-2"></i>Save Inspection</button>
    </div>
</div></div></div>

<style>
.inspection-form-section { border: 1px solid #dee2e6; border-radius: .5rem; padding: 1rem; background: #fafbfc; }
.inspection-form-section-title { font-weight: 600; font-size: .95rem; margin-bottom: .75rem; color: #495057; }
.inspection-form-section .table { margin-bottom: 0; }
.inspection-form-section .table th { font-size: .8rem; }
.inspection-form-section .table td { vertical-align: middle; }
.inspection-form-section .form-check-input { cursor: pointer; }
.radio-group { display: flex; gap: .5rem; align-items: center; }
.radio-group .form-check { padding-left: 1.5rem; margin-bottom: 0; }
.radio-group .form-check-input { margin-left: -1.5rem; }
</style>

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