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

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

$page_js = 'trips.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-signpost-2"></i> Fleet Operations</span>
            <h2 class="mb-1">Trip / Journey Management</h2>
            <p class="text-muted mb-0">Log and track every vehicle trip — driver, route, distance, and status.</p>
        </div>
        <button class="btn btn-primary fw-semibold px-4" id="btnAddTrip"><i class="bi bi-plus-lg me-2"></i>New Trip</button>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-6 col-md-3">
            <div class="card kpi-card shadow-sm border-0 h-100"><div class="card-body">
                <div class="kpi-label">Active Trips</div>
                <div class="kpi-value" id="kpiActiveTrips">0</div>
            </div></div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card kpi-card shadow-sm border-0 h-100"><div class="card-body">
                <div class="kpi-label">Completed</div>
                <div class="kpi-value" id="kpiCompletedTrips">0</div>
            </div></div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card kpi-card shadow-sm border-0 h-100"><div class="card-body">
                <div class="kpi-label">Total Trips</div>
                <div class="kpi-value" id="kpiTotalTrips">0</div>
            </div></div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card kpi-card shadow-sm border-0 h-100"><div class="card-body">
                <div class="kpi-label">Total KM</div>
                <div class="kpi-value" id="kpiTotalKm">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">Search</label>
                    <input type="text" class="form-control" id="tripSearch" placeholder="Plate, driver, purpose...">
                </div>
                <div class="col-md-2">
                    <label class="form-label small fw-semibold text-muted">Vehicle</label>
                    <select id="tripVehicleFilter" 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="tripStatusFilter" class="form-select">
                        <option value="">All</option>
                        <option value="active">Active</option>
                        <option value="completed">Completed</option>
                        <option value="cancelled">Cancelled</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="tripDateFrom">
                </div>
                <div class="col-md-2">
                    <label class="form-label small fw-semibold text-muted">To</label>
                    <input type="date" class="form-control" id="tripDateTo">
                </div>
                <div class="col-md-1">
                    <button class="btn btn-outline-secondary w-100" id="btnRefreshTrips"><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="btnExportTripsCsv" title="CSV"><i class="bi bi-filetype-csv"></i></button>
                        <button class="btn btn-outline-secondary" id="btnExportTripsXlsx" title="Excel"><i class="bi bi-file-earmark-excel"></i></button>
                        <button class="btn btn-outline-secondary" id="btnExportTripsPdf" 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>Start</th>
                        <th>End</th>
                        <th>Distance</th>
                        <th>Purpose</th>
                        <th>Route</th>
                        <th>Status</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody id="tripTable"><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="tripModal" 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="tripModalTitle">New Trip</h5><p class="text-muted small mb-0 mt-1" id="tripModalSubtitle">Log a vehicle journey</p></div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="tripForm">
                    <input type="hidden" id="trip_id">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Vehicle <span class="text-danger">*</span></label>
                            <select id="trip_vehicle_id" class="form-select" required><option value="">Select vehicle</option></select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Driver</label>
                            <select id="trip_driver_id" class="form-select"><option value="">Select driver</option></select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Start Date / Time <span class="text-danger">*</span></label>
                            <input type="datetime-local" id="trip_start_date" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">End Date / Time</label>
                            <input type="datetime-local" id="trip_end_date" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Start Odometer</label>
                            <input type="number" id="trip_start_odometer" class="form-control" placeholder="km">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">End Odometer</label>
                            <input type="number" id="trip_end_odometer" class="form-control" placeholder="km">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Status</label>
                            <select id="trip_status" class="form-select">
                                <option value="active">Active</option>
                                <option value="completed">Completed</option>
                                <option value="cancelled">Cancelled</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Start Location</label>
                            <input type="text" id="trip_start_location" class="form-control" placeholder="Origin">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">End Location</label>
                            <input type="text" id="trip_end_location" class="form-control" placeholder="Destination">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Purpose</label>
                            <input type="text" id="trip_purpose" class="form-control" placeholder="e.g. Staff pickup, delivery">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Route Description</label>
                            <input type="text" id="trip_route_description" class="form-control" placeholder="e.g. Lagos-Ibadan Express">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Notes</label>
                            <textarea id="trip_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="saveTrip"><i class="bi bi-check-lg me-2"></i>Save Trip</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'; ?>
