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

$userName = $_SESSION['user_name'] ?? 'User';
$id = isset($_GET['id']) ? (int)$_GET['id'] : 0;

if ($id <= 0) {
    echo "<div class='alert alert-danger m-4'>Invalid vehicle ID</div>";
    exit;
}

$page_js = 'vehicle_profile.js';
$page_extra_js = 'vehicle_assignment.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 id="alertBox" class="alert alert-danger d-none"></div>

    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3 mb-4">
        <div>
            <a href="vehicles.php" class="btn btn-link text-decoration-none px-0 mb-2">
                <i class="bi bi-arrow-left"></i>
                Back to Vehicles
            </a>
            <h2 id="vehicleTitle" class="mb-1">Vehicle Profile</h2>
            <p class="text-muted mb-0" id="vehicleSubtitle">Manage vehicle details, assignments, and compliance.</p>
        </div>
        <div class="d-flex align-items-center gap-2">
            <span class="badge fs-6" id="vehicleStatus">-</span>
            <button type="button" class="btn btn-outline-primary" id="btnEditVehicle">
                <i class="bi bi-pencil"></i> Edit Vehicle
            </button>
        </div>
    </div>

    <!-- Navigation Tabs -->
    <ul class="nav nav-tabs mb-4" id="vehicleTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab">Overview</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="assignment-tab" data-bs-toggle="tab" data-bs-target="#assignment" type="button" role="tab">Assignment</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="fuel-tab" data-bs-toggle="tab" data-bs-target="#fuel" type="button" role="tab">Fuel & Performance</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="compliance-tab" data-bs-toggle="tab" data-bs-target="#compliance" type="button" role="tab">Compliance</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="maintenance-tab" data-bs-toggle="tab" data-bs-target="#maintenance" type="button" role="tab">Maintenance</button>
        </li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content" id="vehicleTabContent">
        <!-- Overview Tab -->
        <div class="tab-pane fade show active" id="overview" role="tabpanel">
            <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="kpi-label">Assigned Driver</div>
                            <div class="fw-semibold fs-5" id="currentDriver">-</div>
                            <div class="text-muted small mt-2">Current active assignment</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="kpi-label">Baseline Consumption</div>
                            <div class="fw-semibold fs-5" id="standardConsumption">-</div>
                            <div class="text-muted small mt-2">Fuel configuration record</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="kpi-label">Latest Monthly Distance</div>
                            <div class="fw-semibold fs-5" id="latestDistance">-</div>
                            <div class="text-muted small mt-2">Most recent fuel month record</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="kpi-label">Compliance Items</div>
                            <div class="fw-semibold fs-5" id="complianceCount">0</div>
                            <div class="text-muted small mt-2">Insurance and license records</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Vehicle Details</h5>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="btnEditDetails">
                                <i class="bi bi-pencil"></i> Edit
                            </button>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-6">
                                    <div class="text-muted small">Plate</div>
                                    <div class="fw-semibold" id="plate">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Year</div>
                                    <div class="fw-semibold" id="year">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Owner</div>
                                    <div class="fw-semibold" id="owner">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Property</div>
                                    <div class="fw-semibold" id="property">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Type</div>
                                    <div class="fw-semibold" id="type">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Model</div>
                                    <div class="fw-semibold" id="model">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Use Type</div>
                                    <div class="fw-semibold" id="useType">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Source</div>
                                    <div class="fw-semibold" id="source">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Displacement</div>
                                    <div class="fw-semibold" id="displacement">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Seats</div>
                                    <div class="fw-semibold" id="seats">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Need OBD</div>
                                    <div class="fw-semibold" id="needObd">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">OBD Device</div>
                                    <div class="fw-semibold" id="obdDeviceNo">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Use MR Car</div>
                                    <div class="fw-semibold" id="useMrCar">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Schedule Expiry</div>
                                    <div class="fw-semibold" id="scheduleExpirationDate">-</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Dates And References</h5>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="btnEditDates">
                                <i class="bi bi-pencil"></i> Edit
                            </button>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-6">
                                    <div class="text-muted small">Registration</div>
                                    <div class="fw-semibold" id="registrationDate">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">First Effective</div>
                                    <div class="fw-semibold" id="firstEffectiveDate">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Entry Date</div>
                                    <div class="fw-semibold" id="entryDate">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Exit Date</div>
                                    <div class="fw-semibold" id="exitDate">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Supplier</div>
                                    <div class="fw-semibold" id="supplierId">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Contract</div>
                                    <div class="fw-semibold" id="contractId">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Country</div>
                                    <div class="fw-semibold" id="countryId">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">City</div>
                                    <div class="fw-semibold" id="cityId">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Region</div>
                                    <div class="fw-semibold" id="regionId">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Department</div>
                                    <div class="fw-semibold" id="departmentId">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Project</div>
                                    <div class="fw-semibold" id="projectId">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Office</div>
                                    <div class="fw-semibold" id="officeId">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Location</div>
                                    <div class="fw-semibold" id="locationId">-</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">Schedule</div>
                                    <div class="fw-semibold" id="scheduleId">-</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Assignment Tab -->
        <div class="tab-pane fade" id="assignment" role="tabpanel">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Current Assignment</h5>
                    <div>
                        <button type="button" class="btn btn-sm btn-outline-success me-2" id="btnNewAssignment">
                            <i class="bi bi-plus"></i> New Assignment
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-primary" id="btnEditAssignment">
                            <i class="bi bi-pencil"></i> Edit
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="text-muted small">Driver</div>
                            <div class="fw-semibold" id="assignmentDriver">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">Start</div>
                            <div class="fw-semibold" id="assignmentStart">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">End</div>
                            <div class="fw-semibold" id="assignmentEnd">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">Status</div>
                            <div class="fw-semibold" id="assignmentStatus">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">Leased Days</div>
                            <div class="fw-semibold" id="assignmentLeasedDays">-</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm border-0 mt-4">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Assignment History</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table align-middle table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Driver</th>
                                    <th>Company</th>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Status</th>
                                    <th>Duration</th>
                                </tr>
                            </thead>
                            <tbody id="assignmentHistoryTable">
                                <tr><td colspan="6" class="text-center text-muted">Loading assignment history...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Fuel Tab -->
        <div class="tab-pane fade" id="fuel" role="tabpanel">
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Fuel Configuration</h5>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="btnEditFuelConfig">
                        <i class="bi bi-pencil"></i> Edit
                    </button>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="text-muted small">Efficiency Baseline</div>
                            <div class="fw-semibold" id="fuelConfigEfficiency">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">Standard Consumption</div>
                            <div class="fw-semibold" id="fuelConfigStandard">-</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm border-0">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Monthly Fuel Performance</h5>
                </div>
                <div class="card-body">
                    <div id="fuelMonthlyChart" style="min-height:110px;"></div>
                    <div class="table-responsive mt-3">
                        <table class="table align-middle table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Month</th>
                                    <th>Liters</th>
                                    <th>Rate</th>
                                    <th>Mileage</th>
                                    <th>Distance</th>
                                    <th>Baseline Diff</th>
                                </tr>
                            </thead>
                            <tbody id="fuelMonthlyTable">
                                <tr><td colspan="6" class="text-center text-muted">Loading monthly fuel data...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Compliance Tab -->
        <div class="tab-pane fade" id="compliance" role="tabpanel">
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Insurance Records</h5>
                    <button type="button" class="btn btn-sm btn-outline-success" id="btnAddInsurance">
                        <i class="bi bi-plus"></i> Add Insurance
                    </button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table align-middle table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Policy #</th>
                                    <th>Insurer</th>
                                    <th>Type</th>
                                    <th>Coverage Start</th>
                                    <th>Coverage End</th>
                                    <th>Active</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="insuranceTable">
                                <tr><td colspan="8" class="text-center text-muted">Loading insurance records...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm border-0">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Vehicle License Records</h5>
                    <button type="button" class="btn btn-sm btn-outline-success" id="btnAddLicense">
                        <i class="bi bi-plus"></i> Add License
                    </button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table align-middle table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>License No</th>
                                    <th>Issued</th>
                                    <th>Valid Until</th>
                                    <th>Notification</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="licenseTable">
                                <tr><td colspan="6" class="text-center text-muted">Loading vehicle licenses...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Maintenance Tab -->
        <div class="tab-pane fade" id="maintenance" role="tabpanel">
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Maintenance History</h5>
                    <button type="button" class="btn btn-sm btn-outline-success" id="btnScheduleMaintenance">
                        <i class="bi bi-plus"></i> Schedule Maintenance
                    </button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table align-middle table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Date</th>
                                    <th>Type</th>
                                    <th>Description</th>
                                    <th>Technician</th>
                                    <th>Cost</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="maintenanceTable">
                                <tr><td colspan="7" class="text-center text-muted">Loading maintenance records...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm border-0">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Upcoming Maintenance</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table align-middle table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Service Type</th>
                                    <th>Due Date</th>
                                    <th>Due Mileage</th>
                                    <th>Priority</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="upcomingMaintenanceTable">
                                <tr><td colspan="5" class="text-center text-muted">Loading upcoming maintenance...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</main>

<script>
    window.VEHICLE_ID = <?= json_encode($id) ?>;
</script>

<!-- Edit Vehicle Details Modal -->
<div class="modal fade" id="editVehicleModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Vehicle Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editVehicleForm">
                    <input type="hidden" id="editVehicleId" name="vehicleId">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="editPlate" class="form-label">Plate Number *</label>
                            <input type="text" class="form-control" id="editPlate" name="plate" required>
                        </div>
                        <div class="col-md-6">
                            <label for="editYear" class="form-label">Year</label>
                            <input type="number" class="form-control" id="editYear" name="year" min="1900" max="2030">
                        </div>
                        <div class="col-md-6">
                            <label for="editOwner" class="form-label">Owner</label>
                            <select class="form-select" id="editOwner" name="owner">
                                <option value="">Select Owner</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="editProperty" class="form-label">Property</label>
                            <input type="text" class="form-control" id="editProperty" name="property">
                        </div>
                        <div class="col-md-6">
                            <label for="editType" class="form-label">Type</label>
                            <select class="form-select" id="editType" name="type">
                                <option value="">Select Type</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="editModel" class="form-label">Model</label>
                            <select class="form-select" id="editModel" name="model">
                                <option value="">Select Model</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="editUseType" class="form-label">Use Type</label>
                            <select class="form-select" id="editUseType" name="useType">
                                <option value="">Select Use Type</option>
                                <option value="personal">Personal</option>
                                <option value="business">Business</option>
                                <option value="commercial">Commercial</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="editSource" class="form-label">Source</label>
                            <input type="text" class="form-control" id="editSource" name="source">
                        </div>
                        <div class="col-md-6">
                            <label for="editDisplacement" class="form-label">Displacement</label>
                            <input type="text" class="form-control" id="editDisplacement" name="displacement">
                        </div>
                        <div class="col-md-6">
                            <label for="editSeats" class="form-label">Seats</label>
                            <input type="number" class="form-control" id="editSeats" name="seats" min="1">
                        </div>
                        <div class="col-md-6">
                            <label for="editNeedObd" class="form-label">Need OBD</label>
                            <select class="form-select" id="editNeedObd" name="needObd">
                                <option value="0">No</option>
                                <option value="1">Yes</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="editObdDeviceNo" class="form-label">OBD Device No</label>
                            <input type="text" class="form-control" id="editObdDeviceNo" name="obdDeviceNo">
                        </div>
                        <div class="col-md-6">
                            <label for="editUseMrCar" class="form-label">Use MR Car</label>
                            <select class="form-select" id="editUseMrCar" name="useMrCar">
                                <option value="0">No</option>
                                <option value="1">Yes</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="editScheduleExpirationDate" class="form-label">Schedule Expiry</label>
                            <input type="date" class="form-control" id="editScheduleExpirationDate" name="scheduleExpirationDate">
                        </div>
                    </div>
                </form>
            </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="btnSaveVehicle">Save Changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Dates Modal -->
<div class="modal fade" id="editDatesModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Dates and References</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editDatesForm">
                    <input type="hidden" id="editDatesVehicleId" name="vehicleId">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="editRegistrationDate" class="form-label">Registration Date</label>
                            <input type="date" class="form-control" id="editRegistrationDate" name="registrationDate">
                        </div>
                        <div class="col-md-6">
                            <label for="editFirstEffectiveDate" class="form-label">First Effective Date</label>
                            <input type="date" class="form-control" id="editFirstEffectiveDate" name="firstEffectiveDate">
                        </div>
                        <div class="col-md-6">
                            <label for="editEntryDate" class="form-label">Entry Date</label>
                            <input type="date" class="form-control" id="editEntryDate" name="entryDate">
                        </div>
                        <div class="col-md-6">
                            <label for="editExitDate" class="form-label">Exit Date</label>
                            <input type="date" class="form-control" id="editExitDate" name="exitDate">
                        </div>
                        <div class="col-md-6">
                            <label for="editSupplierId" class="form-label">Supplier</label>
                            <select class="form-select" id="editSupplierId" name="supplierId"><option value="">Select Supplier</option></select>
                        </div>
                        <div class="col-md-6">
                            <label for="editContractId" class="form-label">Contract</label>
                            <select class="form-select" id="editContractId" name="contractId"><option value="">Select Contract</option></select>
                        </div>
                        <div class="col-md-6">
                            <label for="editCountryId" class="form-label">Country</label>
                            <select class="form-select" id="editCountryId" name="countryId"><option value="">Select Country</option></select>
                        </div>
                        <div class="col-md-6">
                            <label for="editCityId" class="form-label">City</label>
                            <select class="form-select" id="editCityId" name="cityId"><option value="">Select City</option></select>
                        </div>
                        <div class="col-md-6">
                            <label for="editRegionId" class="form-label">Region</label>
                            <select class="form-select" id="editRegionId" name="regionId"><option value="">Select Region</option></select>
                        </div>
                        <div class="col-md-6">
                            <label for="editDepartmentId" class="form-label">Department</label>
                            <select class="form-select" id="editDepartmentId" name="departmentId"><option value="">Select Department</option></select>
                        </div>
                        <div class="col-md-6">
                            <label for="editProjectId" class="form-label">Project</label>
                            <select class="form-select" id="editProjectId" name="projectId"><option value="">Select Project</option></select>
                        </div>
                        <div class="col-md-6">
                            <label for="editOfficeId" class="form-label">Office</label>
                            <select class="form-select" id="editOfficeId" name="officeId"><option value="">Select Office</option></select>
                        </div>
                        <div class="col-md-6">
                            <label for="editLocationId" class="form-label">Location</label>
                            <select class="form-select" id="editLocationId" name="locationId"><option value="">Select Location</option></select>
                        </div>
                        <div class="col-md-6">
                            <label for="editScheduleId" class="form-label">Schedule</label>
                            <select class="form-select" id="editScheduleId" name="scheduleId"><option value="">Select Schedule</option></select>
                        </div>
                    </div>
                </form>
            </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="btnSaveDates">Save Changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Assignment Modal -->
<div class="modal fade" id="assignmentModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="assignmentModalTitle">Manage Assignment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="assignmentModalAlert" class="alert alert-danger d-none"></div>
                <form id="assignmentForm">
                    <input type="hidden" id="assignmentId" name="assignmentId">
                    <input type="hidden" id="assignmentVehicleId" name="vehicleId">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="assignmentDriverSelect" class="form-label">Driver *</label>
                            <select class="form-select" id="assignmentDriverSelect" name="driverId" required>
                                <option value="">Select Driver</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="assignmentCompanySelect" class="form-label">Company</label>
                            <select class="form-select" id="assignmentCompanySelect" name="companyId">
                                <option value="">Select Company</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="assignmentStartDate" class="form-label">Start Date *</label>
                            <input type="date" class="form-control" id="assignmentStartDate" name="startDate" required>
                        </div>
                        <div class="col-md-6">
                            <label for="assignmentEndDate" class="form-label">End Date</label>
                            <input type="date" class="form-control" id="assignmentEndDate" name="endDate">
                        </div>
                        <div class="col-md-6">
                            <label for="assignmentStatusSelect" class="form-label">Status</label>
                            <select class="form-select" id="assignmentStatusSelect" name="status">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                                <option value="suspended">Suspended</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="assignmentLeasedDaysInput" class="form-label">Leased Days</label>
                            <input type="number" class="form-control" id="assignmentLeasedDaysInput" name="leasedDays" min="0">
                        </div>
                    </div>
                </form>
            </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">Save Assignment</button>
            </div>
        </div>
    </div>
</div>

<!-- Fuel Config Modal -->
<div class="modal fade" id="fuelConfigModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Fuel Configuration</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="fuelConfigForm">
                    <input type="hidden" id="fuelConfigVehicleId" name="vehicleId">
                    <div class="row g-3">
                        <div class="col-12">
                            <div class="form-check mb-3">
                                <input type="checkbox" class="form-check-input" id="editAutoBaseline" name="auto_calculate_baseline" value="1" checked>
                                <label class="form-check-label" for="editAutoBaseline">Auto-calculate from actual fuel entries</label>
                                <div class="text-muted small">When enabled, baselines are automatically derived from the last 12 months of fuel data on each save/approval.</div>
                            </div>
                        </div>
                        <div class="col-12" id="fuelBaselineFields">
                            <label for="editFuelEfficiency" class="form-label">Efficiency Baseline (L/100km)</label>
                            <input type="number" class="form-control" id="editFuelEfficiency" name="efficiency" step="0.01" min="0">
                        </div>
                        <div class="col-12" id="fuelStandardFields">
                            <label for="editFuelStandard" class="form-label">Standard Consumption (L/month)</label>
                            <input type="number" class="form-control" id="editFuelStandard" name="standardConsumption" step="0.01" min="0">
                        </div>
                    </div>
                </form>
            </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="btnSaveFuelConfig">Save Configuration</button>
            </div>
        </div>
    </div>
</div>

<!-- Insurance Modal -->
<div class="modal fade" id="insuranceModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="insuranceModalTitle">Insurance Policy</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="insuranceForm">
                    <input type="hidden" id="insuranceId" name="id">
                    <input type="hidden" id="insuranceVehicleId" name="vehicle_id">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="insurancePolicyNumber" class="form-label">Policy Number *</label>
                            <input type="text" class="form-control" id="insurancePolicyNumber" name="policy_number" required>
                        </div>
                        <div class="col-md-6">
                            <label for="insuranceInsurerId" class="form-label">Insurer *</label>
                            <select class="form-select" id="insuranceInsurerId" name="insurer_id" required>
                                <option value="">Select Insurer</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="insurancePolicyType" class="form-label">Policy Type *</label>
                            <select class="form-select" id="insurancePolicyType" name="policy_type" required>
                                <option value="">Select Type</option>
                                <option value="comprehensive">Comprehensive</option>
                                <option value="third_party">Third Party</option>
                                <option value="third_party_fire_theft">Third Party Fire & Theft</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="insuranceCoverageStart" class="form-label">Coverage Start *</label>
                            <input type="date" class="form-control" id="insuranceCoverageStart" name="coverage_start" required>
                        </div>
                        <div class="col-md-6">
                            <label for="insuranceCoverageEnd" class="form-label">Coverage End *</label>
                            <input type="date" class="form-control" id="insuranceCoverageEnd" name="coverage_end" required>
                        </div>
                        <div class="col-md-6">
                            <label for="insurancePremiumAmount" class="form-label">Premium Amount</label>
                            <input type="number" step="0.01" class="form-control" id="insurancePremiumAmount" name="premium_amount">
                        </div>
                        <div class="col-md-6">
                            <label for="insuranceIsActive" class="form-label">Status</label>
                            <select class="form-select" id="insuranceIsActive" name="is_active">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <label for="insuranceNotes" class="form-label">Notes</label>
                            <textarea class="form-control" id="insuranceNotes" name="notes" rows="3"></textarea>
                        </div>
                    </div>
                </form>
            </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="btnSaveInsurance">Save Policy</button>
            </div>
        </div>
    </div>
</div>

<!-- License Modal -->
<div class="modal fade" id="licenseModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="licenseModalTitle">Vehicle License</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="licenseForm">
                    <input type="hidden" id="licenseId" name="licenseId">
                    <input type="hidden" id="licenseVehicleId" name="vehicleId">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="licenseNumber" class="form-label">License Number *</label>
                            <input type="text" class="form-control" id="licenseNumber" name="licenseNumber" required>
                        </div>
                        <div class="col-md-6">
                            <label for="licenseIssuedDate" class="form-label">Issued Date *</label>
                            <input type="date" class="form-control" id="licenseIssuedDate" name="issuedDate" required>
                        </div>
                        <div class="col-md-6">
                            <label for="licenseExpiryDate" class="form-label">Valid Until *</label>
                            <input type="date" class="form-control" id="licenseExpiryDate" name="validUntil" required>
                        </div>
                        <div class="col-md-6">
                            <label for="licenseNotificationDays" class="form-label">Notification (Days)</label>
                            <input type="number" class="form-control" id="licenseNotificationDays" name="notificationDays" min="0" value="30">
                        </div>
                        <div class="col-12">
                            <label for="licenseNotes" class="form-label">Notes</label>
                            <textarea class="form-control" id="licenseNotes" name="notes" rows="3"></textarea>
                        </div>
                    </div>
                </form>
            </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="btnSaveLicense">Save License</button>
            </div>
        </div>
    </div>
</div>

<!-- Maintenance Modal -->
<div class="modal fade" id="maintenanceModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="maintenanceModalTitle">Maintenance Record</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="maintenanceForm">
                    <input type="hidden" id="maintenanceRecordId" name="maintenanceId">
                    <input type="hidden" id="maintenanceVehicleId" name="vehicleId">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="maintenanceDate" class="form-label">Date *</label>
                            <input type="date" class="form-control" id="maintenanceDate" name="date" required>
                        </div>
                        <div class="col-md-6">
                            <label for="maintenanceType" class="form-label">Type *</label>
                            <select class="form-select" id="maintenanceType" name="type" required>
                                <option value="">Select Type</option>
                                <option value="scheduled">Scheduled Maintenance</option>
                                <option value="repair">Repair</option>
                                <option value="emergency">Emergency</option>
                                <option value="inspection">Inspection</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <label for="maintenanceDescription" class="form-label">Description *</label>
                            <textarea class="form-control" id="maintenanceDescription" name="description" rows="3" required></textarea>
                        </div>
                        <div class="col-md-6">
                            <label for="maintenanceTechnician" class="form-label">Technician</label>
                            <input type="text" class="form-control" id="maintenanceTechnician" name="technician">
                        </div>
                        <div class="col-md-6">
                            <label for="maintenanceCost" class="form-label">Cost</label>
                            <input type="number" class="form-control" id="maintenanceCost" name="cost" step="0.01" min="0">
                        </div>
                        <div class="col-md-6">
                            <label for="maintenanceMileage" class="form-label">Mileage</label>
                            <input type="number" class="form-control" id="maintenanceMileage" name="mileage" min="0">
                        </div>
                        <div class="col-md-6">
                            <label for="maintenanceStatus" class="form-label">Status</label>
                            <select class="form-select" id="maintenanceStatus" name="status">
                                <option value="completed">Completed</option>
                                <option value="scheduled">Scheduled</option>
                                <option value="in_progress">In Progress</option>
                                <option value="cancelled">Cancelled</option>
                            </select>
                        </div>
                    </div>
                </form>
            </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="btnSaveMaintenance">Save Maintenance</button>
            </div>
        </div>
    </div>
</div>

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