<?php
require_once 'config/database.php';
require_once 'app/helpers/auth.php';
requireLogin();
$page_js = 'vehicle_request.js';
include 'views/layouts/header.php';
include 'views/layouts/sidebar.php';
$canApprove = isAdmin() || can('vehicle_request.approve');
$canAssign = isAdmin() || can('vehicle_request.assign');
?>
<main class="main-content">
<?php include 'views/layouts/topbar.php'; ?>
<div class="container-fluid p-4">
<div id="alertBox" class="alert d-none"></div>
<div class="card shadow-sm border-0 mb-4"><div class="card-body p-4 p-lg-5"><div class="row g-4 align-items-center"><div class="col-lg-8"><span class="badge bg-primary bg-opacity-10 text-primary mb-3 px-3 py-2">Fleet Operations</span><h2 class="mb-2">Vehicle Requisition</h2><p class="mb-0 text-muted">Request vehicles for official trips and track approval status.</p></div><div class="col-lg-4 text-lg-end d-flex gap-2 justify-content-lg-end">
<?php if ($canApprove): ?>
<button type="button" class="btn btn-outline-warning" id="btnPendingApprovals"><i class="bi bi-check2-square"></i> Pending <span class="badge bg-warning text-dark ms-1" id="pendingBadge">0</span></button>
<?php endif; ?>
<button type="button" class="btn btn-primary" id="btnNewRequest"><i class="bi bi-plus-lg"></i> New Request</button>
</div></div></div></div>
<div class="row g-4 mb-4"><div class="col-6 col-md-3"><div class="card kpi-card shadow-sm border-0 rounded-4 h-100"><div class="card-body py-3 px-3"><div class="d-flex justify-content-between align-items-center"><div><div class="kpi-label">My Requests</div><div class="kpi-value" id="kpiTotal">0</div></div><div class="kpi-icon text-primary fs-3"><i class="bi bi-journal"></i></div></div></div></div></div>
<div class="col-6 col-md-3"><div class="card kpi-card shadow-sm border-0 rounded-4 h-100"><div class="card-body py-3 px-3"><div class="d-flex justify-content-between align-items-center"><div><div class="kpi-label">Pending</div><div class="kpi-value" id="kpiPending">0</div></div><div class="kpi-icon text-warning fs-3"><i class="bi bi-hourglass-split"></i></div></div></div></div></div>
<div class="col-6 col-md-3"><div class="card kpi-card shadow-sm border-0 rounded-4 h-100"><div class="card-body py-3 px-3"><div class="d-flex justify-content-between align-items-center"><div><div class="kpi-label">Approved</div><div class="kpi-value" id="kpiApproved">0</div></div><div class="kpi-icon text-success fs-3"><i class="bi bi-check-circle"></i></div></div></div></div></div>
<div class="col-6 col-md-3"><div class="card kpi-card shadow-sm border-0 rounded-4 h-100"><div class="card-body py-3 px-3"><div class="d-flex justify-content-between align-items-center"><div><div class="kpi-label">Rejected</div><div class="kpi-value" id="kpiRejected">0</div></div><div class="kpi-icon text-danger fs-3"><i class="bi bi-x-circle"></i></div></div></div></div></div></div>
<div class="card shadow-sm border-0"><div class="card-body">
<div class="row mb-3"><div class="col-md-4"><input type="text" id="searchBox" class="form-control" placeholder="Search request number, purpose, route..."></div><div class="col-md-2"><select id="statusFilter" class="form-select"><option value="">All Status</option><option value="draft">Draft</option><option value="pending">Pending</option><option value="approved">Approved</option><option value="rejected">Rejected</option><option value="returned">Returned</option><option value="assigned">Assigned</option><option value="in_progress">In Progress</option><option value="completed">Completed</option><option value="cancelled">Cancelled</option></select></div><div class="col-md-2"><input type="date" id="dateFrom" class="form-control" placeholder="From"></div><div class="col-md-2"><input type="date" id="dateTo" class="form-control" placeholder="To"></div><div class="col-md-2 d-flex gap-2"><button class="btn btn-outline-secondary w-100" id="btnMyRequests"><i class="bi bi-person"></i> Mine</button></div></div>
<div class="table-responsive"><table class="table align-middle mb-0"><thead class="table-light"><tr><th>Request #</th><th>Staff</th><th>Purpose</th><th>Route</th><th>Dates</th><th>Priority</th><th>Status</th><th class="text-end">Actions</th></tr></thead><tbody id="tableBody"><tr><td colspan="8" class="text-center text-muted py-4">Loading...</td></tr></tbody></table></div></div></div>
</div>
</main>

<!-- Request Modal -->
<div class="modal fade" id="requestModal" tabindex="-1"><div class="modal-dialog modal-lg modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="modalTitle">New Vehicle Request</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body"><input type="hidden" id="itemId" value="0">
<div class="row g-3"><div class="col-md-6"><label class="form-label">Pickup Location <span class="text-danger">*</span></label><input type="text" id="pickupLocation" class="form-control" placeholder="e.g. Lagos Office"></div>
<div class="col-md-6"><label class="form-label">Destination <span class="text-danger">*</span></label><input type="text" id="destination" class="form-control" placeholder="e.g. Ibadan Depot"></div>
<div class="col-12"><label class="form-label">Journey Purpose <span class="text-danger">*</span></label><textarea id="journeyPurpose" class="form-control" rows="2" placeholder="e.g. Staff transport to regional office for training"></textarea></div>
<div class="col-md-4"><label class="form-label">Start Date <span class="text-danger">*</span></label><input type="date" id="startDate" class="form-control"></div>
<div class="col-md-4"><label class="form-label">End Date</label><input type="date" id="endDate" class="form-control"></div>
<div class="col-md-4"><label class="form-label">Passengers</label><input type="number" id="passengerCount" class="form-control" value="1" min="1"></div>
<div class="col-md-6"><label class="form-label">Priority</label><select id="priority" class="form-select"><option value="low">Low</option><option value="normal" selected>Normal</option><option value="high">High</option><option value="urgent">Urgent</option></select></div>
<div class="col-md-6"><label class="form-label">Supporting Document</label><input type="file" id="supportingDoc" class="form-control" accept=".pdf,.jpg,.png,.doc,.docx"></div>
<div class="col-12"><label class="form-label">Notes</label><textarea id="notes" class="form-control" rows="2"></textarea></div></div></div>
<div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<?php if ($canAssign): ?>
<button type="button" class="btn btn-success d-none" id="btnAssign">Assign Vehicle &amp; Driver</button>
<?php endif; ?>
<button type="button" class="btn btn-primary" id="btnSaveDraft">Save Draft</button>
<button type="button" class="btn btn-warning" id="btnSubmit">Submit for Approval</button></div></div></div></div>

<!-- Approval Modal -->
<div class="modal fade" id="approvalModal" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">Approval Action</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body"><input type="hidden" id="approvalId" value="0">
<p class="mb-2" id="approvalInfo"></p>
<div class="mb-3"><label class="form-label">Steps</label><ul class="list-group list-group-flush small" id="approvalSteps"></ul></div>
<div class="mb-3"><label class="form-label">Comment</label><textarea id="approvalComment" class="form-control" rows="2" placeholder="Add a comment..."></textarea></div></div>
<div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-info text-white" id="btnReturn">Return for Correction</button>
<button type="button" class="btn btn-danger" id="btnReject">Reject</button>
<button type="button" class="btn btn-success" id="btnApprove">Approve</button></div></div></div></div>

<!-- Assign Modal -->
<div class="modal fade" id="assignModal" tabindex="-1"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">Assign Vehicle &amp; Driver</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body"><input type="hidden" id="assignRequestId" value="0">
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center mb-2">
<label class="form-label fw-semibold mb-0"><i class="bi bi-robot me-1"></i> AI Vehicle Recommendations</label>
<button type="button" class="btn btn-sm btn-outline-primary" id="btnAIRecommend"><i class="bi bi-stars"></i> Get Recommendations</button>
</div>
<div id="aiRecommendations" class="mb-3">
<div class="text-muted small py-2">Click "Get Recommendations" to let AI suggest the best vehicle match.</div>
</div>
<hr>
</div>
<div class="mb-3"><label class="form-label">Override — Select Vehicle <span class="text-danger">*</span></label>
<select id="assignVehicleId" class="form-select"><option value="">Select vehicle (or pick from AI recommendations above)</option></select></div>
<div class="mb-3"><label class="form-label">Driver</label><select id="assignDriverId" class="form-select"><option value="">Select driver (optional)</option></select></div></div>
<div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="btnSaveAssignment">Assign &amp; Create Trip</button></div></div></div></div>

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