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

$userName = $_SESSION['user_name'] ?? 'User';
$page_js = 'vehicles.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="row g-3 mb-4">
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card kpi-card shadow-sm border-0 h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="kpi-label">Total Vehicles</div>
                            <div class="kpi-value" id="kpiVehiclesTotal">0</div>
                        </div>
                        <div class="kpi-icon text-primary">
                            <i class="bi bi-truck"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-xl-3">
            <div class="card kpi-card shadow-sm border-0 h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="kpi-label">Active Fleet</div>
                            <div class="kpi-value" id="kpiVehiclesActive">0</div>
                        </div>
                        <div class="kpi-icon text-success">
                            <i class="bi bi-check2-circle"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-xl-3">
            <div class="card kpi-card shadow-sm border-0 h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="kpi-label">In Workshop</div>
                            <div class="kpi-value" id="kpiVehiclesWorkshop">0</div>
                        </div>
                        <div class="kpi-icon text-warning">
                            <i class="bi bi-tools"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-xl-3">
            <div class="card kpi-card shadow-sm border-0 h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="kpi-label">Inactive Units</div>
                            <div class="kpi-value" id="kpiVehiclesInactive">0</div>
                        </div>
                        <div class="kpi-icon text-secondary">
                            <i class="bi bi-pause-circle"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3">
            <div>
                <h4 class="mb-1">Vehicles</h4>
                <p class="text-muted mb-0">Track fleet inventory, operating status and quick access to each vehicle profile.</p>
            </div>
            <div class="d-flex flex-column flex-sm-row gap-2 w-100 w-lg-auto">
                <input type="text" id="searchVehicle" class="form-control" placeholder="Search plate, model or type">
                <select id="statusFilter" class="form-select" style="max-width:160px"><option value="">All Status</option><option value="Active">Active</option><option value="Maintenance">Maintenance</option><option value="Inactive">Inactive</option><option value="Retired">Retired</option></select>
                <button class="btn btn-outline-secondary" id="btnRefresh">Refresh</button>
                <button class="btn btn-outline-info" id="btnExport"><i class="bi bi-download"></i> Export</button>
                <button class="btn btn-primary" id="btnAddVehicle">Add Vehicle</button>
            </div>
        </div>
        <div class="card-body">
                <div class="table-responsive">
                <table class="table align-middle table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>Vehicle</th>
                            <th>Classification</th>
                            <th>Year</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="vehicleTable">
                        <tr>
                            <td colspan="5" class="text-center text-muted">Loading vehicles...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="d-flex justify-content-between align-items-center mt-3" id="paginationControls">
                <small class="text-muted" id="paginationInfo"></small>
                <nav><ul class="pagination pagination-sm mb-0" id="paginationNav"></ul></nav>
            </div>
        </div>
    </div>
</div>

</main>

<div class="modal fade" id="vehicleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="modalTitle" class="modal-title">Add Vehicle</h5>
                <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <form id="vehicleForm">
                    <input type="hidden" id="vehicle_id">

                    <div class="row g-3">
                        <div class="col-12">
                            <h6 class="text-uppercase text-muted mb-0">Core Details</h6>
                        </div>

                        <div class="col-md-6">
                            <label for="plate_number" class="form-label">Plate Number</label>
                            <input type="text" id="plate_number" class="form-control" required>
                        </div>

                        <div class="col-md-6">
                            <label for="vehicle_owner" class="form-label">Owner</label>
                            <select id="vehicle_owner" class="form-select">
                                <option value="">Select Owner</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label for="vehicle_property" class="form-label">Property</label>
                            <input type="text" id="vehicle_property" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label for="vehicle_model" class="form-label">Model</label>
                            <select id="vehicle_model" class="form-select">
                                <option value="">Select Model</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label for="vehicle_type" class="form-label">Type</label>
                            <select id="vehicle_type" class="form-select">
                                <option value="">Select Type</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label for="year_of_manufacturing" class="form-label">Year</label>
                            <input type="number" id="year_of_manufacturing" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label for="vehicle_status" class="form-label">Status</label>
                            <select id="vehicle_status" class="form-select">
                                <option value="Active">Active</option>
                                <option value="Maintenance">Maintenance</option>
                                <option value="Inactive">Inactive</option>
                                <option value="Retired">Retired</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label for="vehicle_use_type" class="form-label">Use Type</label>
                            <select id="vehicle_use_type" class="form-select">
                                <option value="">Select Use Type</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label for="vehicle_source" class="form-label">Source</label>
                            <input type="text" id="vehicle_source" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label for="vehicle_displacement" class="form-label">Displacement</label>
                            <input type="text" id="vehicle_displacement" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label for="vehicle_seats" class="form-label">Seats</label>
                            <input type="number" id="vehicle_seats" class="form-control">
                        </div>

                        <div class="col-12 mt-2">
                            <h6 class="text-uppercase text-muted mb-0">Fuel And Device Setup</h6>
                        </div>

                        <div class="col-md-6">
                            <label for="standard_fuel_consumption" class="form-label">Standard Fuel Consumption (L/100km)</label>
                            <input type="number" step="0.01" id="standard_fuel_consumption" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label for="efficiency_baseline_km" class="form-label">Efficiency Baseline (km)</label>
                            <input type="number" step="0.01" id="efficiency_baseline_km" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label for="need_obd" class="form-label">Need OBD</label>
                            <select id="need_obd" class="form-select">
                                <option value="1">Yes</option>
                                <option value="0">No</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label for="obd_device_no" class="form-label">OBD Device No</label>
                            <input type="text" id="obd_device_no" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label for="use_mr_car" class="form-label">Use MR Car</label>
                            <select id="use_mr_car" class="form-select">
                                <option value="1">Yes</option>
                                <option value="0">No</option>
                            </select>
                        </div>

                        <div class="col-12 mt-2">
                            <h6 class="text-uppercase text-muted mb-0">Dates</h6>
                        </div>

                        <div class="col-md-6">
                            <label for="registration_date" class="form-label">Registration Date</label>
                            <input type="date" id="registration_date" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label for="first_effective_date" class="form-label">First Effective Date</label>
                            <input type="date" id="first_effective_date" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label for="entry_date" class="form-label">Entry Date</label>
                            <input type="date" id="entry_date" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label for="vehicle_exit_date" class="form-label">Exit Date</label>
                            <input type="date" id="vehicle_exit_date" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label for="schedule_expiration_date" class="form-label">Schedule Expiration Date</label>
                            <input type="date" id="schedule_expiration_date" class="form-control">
                        </div>

                        <div class="col-12 mt-2">
                            <h6 class="text-uppercase text-muted mb-0">Reference IDs</h6>
                        </div>

                        <div class="col-md-4">
                            <label for="supplier_id" class="form-label">Supplier</label>
                            <select id="supplier_id" class="form-select">
                                <option value="">Select supplier</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label for="contract_id" class="form-label">Contract</label>
                            <select id="contract_id" class="form-select">
                                <option value="">Select contract</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label for="country_id" class="form-label">Country</label>
                            <select id="country_id" class="form-select">
                                <option value="">Select country</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label for="city_id" class="form-label">City</label>
                            <select id="city_id" class="form-select">
                                <option value="">Select city</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label for="region_id" class="form-label">Region</label>
                            <select id="region_id" class="form-select">
                                <option value="">Select region</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label for="department_id" class="form-label">Department</label>
                            <select id="department_id" class="form-select">
                                <option value="">Select department</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label for="project_id" class="form-label">Project</label>
                            <select id="project_id" class="form-select">
                                <option value="">Select project</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label for="office_id" class="form-label">Office</label>
                            <select id="office_id" class="form-select">
                                <option value="">Select office</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label for="location_id" class="form-label">Location</label>
                            <select id="location_id" class="form-select">
                                <option value="">Select location</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label for="schedule_id" class="form-label">Schedule</label>
                            <select id="schedule_id" class="form-select">
                                <option value="">Select schedule</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="saveVehicle">Save Vehicle</button>
            </div>
        </div>
    </div>
</div>

<?php include 'views/layouts/footer.php'; ?>
