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

require_once __DIR__ . '/app/helpers/csrf.php';

$userName = $_SESSION['user_name'] ?? 'User';
$page_js = 'fuel.js';

include __DIR__ . '/views/layouts/header.php';
include __DIR__ . '/views/layouts/sidebar.php';
?>

<main class="main-content">
<?php include __DIR__ . '/views/layouts/topbar.php'; ?>

<div class="container-fluid p-4">
    <div id="fuelAlertBox" class="alert d-none"></div>

    <section class="mb-4">
        <span class="section-chip mb-3">
            <i class="bi bi-fuel-pump"></i> Fuel Management
        </span>
        <h1 class="mb-2">Fuel Voucher Capture</h1>
        <p class="text-muted mb-0">Capture fueling vouchers with vehicle assignment, quantity, pricing, mileage, and approval details.</p>
    </section>

    <!-- KPI Cards -->
    <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">Fuel Companies</div>
                    <div class="kpi-value" id="fuelCompanyCount">0</div>
                    <div class="text-muted small mt-2">Registered fuel vendors</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">Price Records</div>
                    <div class="kpi-value" id="fuelPriceCount">0</div>
                    <div class="text-muted small mt-2">Fuel price history entries</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">Fuel Entries</div>
                    <div class="kpi-value" id="fuelEntryCount">0</div>
                    <div class="text-muted small mt-2">Vouchers in current filter</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">Filter Month</div>
                    <div class="kpi-value" id="fuelCurrentMonthLabel">All Months</div>
                    <div class="text-muted small mt-2">Register view filter</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Action Bar -->
    <div class="d-flex justify-content-end mb-4">
        <button class="btn btn-primary" type="button" id="btnOpenFuelForm">
            <i class="bi bi-plus-lg me-1"></i> New Fuel Entry
        </button>
    </div>

    <!-- Fuel Register Table -->
    <div class="card shadow-sm border-0 mt-4">
        <div class="card-header bg-white">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <div>
                    <h4 class="mb-1">Fuel Register</h4>
                    <p class="text-muted mb-0 small">Review fuel vouchers, pricing, mileage, and approval status.</p>
                </div>
            </div>
            <div class="d-flex gap-2 align-items-center flex-wrap">
                <select id="fuelFilterVehicle" class="form-select form-select-sm" style="min-width:140px">
                    <option value="">All vehicles</option>
                </select>
                <input type="text" id="fuelFilterVehicleSearch" class="form-control form-control-sm" placeholder="Vehicle plate" style="width:130px;flex-shrink:0">
                <input type="date" id="fuelDateFrom" class="form-control form-control-sm" style="width:130px;flex-shrink:0" title="From date">
                <input type="date" id="fuelDateTo" class="form-control form-control-sm" style="width:130px;flex-shrink:0" title="To date">
                <input type="text" id="fuelFilterSearch" class="form-control form-control-sm" placeholder="Search..." style="width:150px;flex-shrink:0">
                <div class="d-flex gap-1 align-items-center">
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="btnRefreshFuelEntries"><i class="bi bi-arrow-clockwise"></i></button>
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-success" id="btnExportFuelCsv"><i class="bi bi-filetype-csv"></i></button>
                        <button type="button" class="btn btn-outline-primary" id="btnExportFuelXlsx"><i class="bi bi-file-earmark-excel"></i></button>
                        <button type="button" class="btn btn-outline-danger" id="btnExportFuelPdf"><i class="bi bi-filetype-pdf"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table align-middle table-hover table-sm mb-0">
                    <thead class="table-light">
                        <tr>
                            <th style="min-width:120px">Date</th>
                            <th style="min-width:140px">Vehicle</th>
                            <th style="min-width:130px">Fuel</th>
                            <th style="min-width:120px" class="text-end">Amount</th>
                            <th style="min-width:120px">Baseline</th>
                            <th style="min-width:90px">Status</th>
                            <th style="min-width:100px" class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="fuelEntriesTable">
                        <tr><td colspan="7" class="text-center text-muted py-4">Loading fuel register...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Fuel Entry Form Modal (Create) -->
<div class="modal fade" id="fuelFormModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-fuel-pump me-2"></i>Fuel Entry Form</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row g-4">
                    <div class="col-xl-8">
                        <form id="fuelEntryForm" novalidate>
                            <input type="hidden" id="fuel_entry_id">
                            <input type="hidden" id="fuel_price_history_id">

                            <!-- System Information -->
                            <fieldset class="border rounded-3 p-3 mb-3 bg-light d-none">
                                <legend class="float-none w-auto px-2 fw-semibold fs-6 mb-0">
                                    <a class="text-decoration-none text-dark" data-bs-toggle="collapse" href="#fuelSectionSystem" role="button">
                                        <i class="bi bi-gear me-1"></i> System Info
                                    </a>
                                </legend>
                                <div class="collapse show" id="fuelSectionSystem">
                                    <div class="row g-3 mt-2">
                                        <div class="col-md-4">
                                            <label for="fuel_voucher_id" class="form-label">Voucher ID</label>
                                            <input type="text" id="fuel_voucher_id" class="form-control form-control-sm" placeholder="Auto-generated" readonly>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="fuel_created_by_name" class="form-label">Created By</label>
                                            <input type="text" id="fuel_created_by_name" class="form-control form-control-sm" value="<?= htmlspecialchars($userName) ?>" readonly>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="fuel_created_at" class="form-label">Created At</label>
                                            <input type="text" id="fuel_created_at" class="form-control form-control-sm" placeholder="System generated" readonly>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="fuel_updated_at" class="form-label">Updated At</label>
                                            <input type="text" id="fuel_updated_at" class="form-control form-control-sm" placeholder="System generated" readonly>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="fuel_approval_status" class="form-label">Approval Status</label>
                                            <select id="fuel_approval_status" class="form-select form-select-sm">
                                                <option value="Pending">Pending</option>
                                                <option value="Approved">Approved</option>
                                                <option value="Rejected">Rejected</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="fuel_approved_by_user_id" class="form-label">Approved By</label>
                                            <select id="fuel_approved_by_user_id" class="form-select form-select-sm">
                                                <option value="">Select approver</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>

                            <!-- Fueling Details -->
                            <fieldset class="border rounded-3 p-3 mb-3">
                                <legend class="float-none w-auto px-2 fw-semibold fs-6 mb-0">
                                    <a class="text-decoration-none text-dark" data-bs-toggle="collapse" href="#fuelSectionFueling" role="button">
                                        <i class="bi bi-droplet me-1"></i> Fueling Details
                                    </a>
                                </legend>
                                <div class="collapse show" id="fuelSectionFueling">
                                    <div class="row g-3 mt-2">
                                        <div class="col-md-4">
                                            <label for="fuel_record_date" class="form-label">Fueling Date</label>
                                            <input type="date" id="fuel_record_date" class="form-control form-control-sm">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="fuel_fueling_time" class="form-label">Fueling Time</label>
                                            <input type="time" id="fuel_fueling_time" class="form-control form-control-sm">
                                        </div>
                                        <div class="col-md-4 d-none">
                                            <label for="fuel_month_year" class="form-label">Month</label>
                                            <input type="month" id="fuel_month_year" class="form-control form-control-sm">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="fuel_fueling_type" class="form-label">Fueling Type</label>
                                            <select id="fuel_fueling_type" class="form-select form-select-sm">
                                                <option value="">Select fueling type</option>
                                                <option value="Routine">Routine</option>
                                                <option value="Top Up">Top Up</option>
                                                <option value="Emergency">Emergency</option>
                                                <option value="Workshop">Workshop</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4 d-none">
                                            <label for="fuel_fueling_status" class="form-label">Fueling Status</label>
                                            <select id="fuel_fueling_status" class="form-select form-select-sm">
                                                <option value="Completed">Completed</option>
                                                <option value="Pending">Pending</option>
                                                <option value="Cancelled">Cancelled</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>

                            <!-- Vehicle & Assignment -->
                            <fieldset class="border rounded-3 p-3 mb-3">
                                <legend class="float-none w-auto px-2 fw-semibold fs-6 mb-0">
                                    <a class="text-decoration-none text-dark" data-bs-toggle="collapse" href="#fuelSectionVehicle" role="button">
                                        <i class="bi bi-truck me-1"></i> Vehicle & Assignment
                                    </a>
                                </legend>
                                <div class="collapse show" id="fuelSectionVehicle">
                                    <div class="row g-3 mt-2">
                                        <div class="col-md-4">
                                            <label for="fuel_vehicle_id" class="form-label">Vehicle No</label>
                                            <select id="fuel_vehicle_id" class="form-select form-select-sm">
                                                <option value="">Select vehicle</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4 d-none">
                                            <label for="fuel_vehicle_type" class="form-label">Model</label>
                                            <input type="text" id="fuel_vehicle_type" class="form-control form-control-sm" readonly>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="fuel_driver_id" class="form-label">Driver Name</label>
                                            <select id="fuel_driver_id" class="form-select form-select-sm">
                                                <option value="">Select driver</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="fuel_office_id" class="form-label">Office</label>
                                            <select id="fuel_office_id" class="form-select form-select-sm">
                                                <option value="">Select office</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="fuel_company_id" class="form-label">Company</label>
                                            <select id="fuel_company_id" class="form-select form-select-sm">
                                                <option value="">Select company</option>
                                            </select>
                                            <input type="hidden" id="fuel_company_name">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="fuel_fleet_supervisor_user_id" class="form-label">Fleet Supervisor</label>
                                            <select id="fuel_fleet_supervisor_user_id" class="form-select form-select-sm">
                                                <option value="">Select fleet supervisor</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>

                            <!-- Fuel Information -->
                            <fieldset class="border rounded-3 p-3 mb-3">
                                <legend class="float-none w-auto px-2 fw-semibold fs-6 mb-0">
                                    <a class="text-decoration-none text-dark" data-bs-toggle="collapse" href="#fuelSectionFuelInfo" role="button">
                                        <i class="bi bi-cash-coin me-1"></i> Fuel & Pricing
                                    </a>
                                </legend>
                                <div class="collapse show" id="fuelSectionFuelInfo">
                                    <div class="row g-3 mt-2">
                                        <div class="col-md-4">
                                            <label for="fuel_type_id" class="form-label">Fuel Type</label>
                                            <select id="fuel_type_id" class="form-select form-select-sm">
                                                <option value="">Select fuel type</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="fuel_state_id" class="form-label">State</label>
                                            <select id="fuel_state_id" class="form-select form-select-sm">
                                                <option value="">Select state</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="fuel_fuel_level" class="form-label">Fuel Level</label>
                                            <select id="fuel_fuel_level" class="form-select form-select-sm">
                                                <option value="">Select fuel level</option>
                                                <option value="Empty">Empty</option>
                                                <option value="Quarter Tank">Quarter Tank</option>
                                                <option value="Half Tank">Half Tank</option>
                                                <option value="Three Quarter Tank">Three Quarter Tank</option>
                                                <option value="Full Tank">Full Tank</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="fuel_purchase_liters" class="form-label">Quantity (Litres)</label>
                                            <input type="number" step="0.01" id="fuel_purchase_liters" class="form-control form-control-sm">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="fuel_dispensed_litres" class="form-label">Dispensed Litres</label>
                                            <input type="number" step="0.01" id="fuel_dispensed_litres" class="form-control form-control-sm">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="fuel_filling_station_id" class="form-label">Filling Station</label>
                                            <select id="fuel_filling_station_id" class="form-select form-select-sm">
                                                <option value="">Select filling station</option>
                                            </select>
                                            <input type="hidden" id="fuel_filling_station">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="fuel_naira_per_liter" class="form-label">Naira / Liter</label>
                                            <input type="number" step="0.01" id="fuel_naira_per_liter" class="form-control form-control-sm">
                                        </div>
                                        <div class="col-md-4 d-none">
                                            <label for="fuel_total_amount" class="form-label">Total Amount</label>
                                            <input type="text" id="fuel_total_amount" class="form-control form-control-sm" readonly>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="fuel_card_id" class="form-label">Fuel Card</label>
                                            <select id="fuel_card_id" class="form-select form-select-sm">
                                                <option value="">No card used</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4 d-none">
                                            <label for="fuel_card_balance" class="form-label">Card Balance</label>
                                            <input type="number" step="0.01" id="fuel_card_balance" class="form-control form-control-sm" readonly>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>

                            <!-- Mileage Information -->
                            <fieldset class="border rounded-3 p-3 mb-3">
                                <legend class="float-none w-auto px-2 fw-semibold fs-6 mb-0">
                                    <a class="text-decoration-none text-dark" data-bs-toggle="collapse" href="#fuelSectionMileage" role="button">
                                        <i class="bi bi-speedometer2 me-1"></i> Mileage
                                    </a>
                                </legend>
                                <div class="collapse show" id="fuelSectionMileage">
                                    <div class="row g-3 mt-2">
                                        <div class="col-md-4">
                                            <label for="fuel_actual_mileage" class="form-label">Current Odometer</label>
                                            <input type="number" id="fuel_actual_mileage" class="form-control form-control-sm" placeholder="Odometer reading now">
                                        </div>
                                        <div class="col-md-4 d-none">
                                            <label for="fuel_mileage_date" class="form-label">Mileage Date</label>
                                            <input type="date" id="fuel_mileage_date" class="form-control form-control-sm">
                                        </div>
                                        <div class="col-md-4 d-none">
                                            <label for="fuel_mileage_time" class="form-label">Mileage Time</label>
                                            <input type="time" id="fuel_mileage_time" class="form-control form-control-sm">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="fuel_begin_km" class="form-label">Previous Odometer</label>
                                            <input type="number" id="fuel_begin_km" class="form-control form-control-sm" placeholder="Last fuel-up odometer">
                                        </div>
                                        <div class="col-md-4 d-none">
                                            <label for="fuel_end_km" class="form-label">Ending Mileage</label>
                                            <input type="number" id="fuel_end_km" class="form-control form-control-sm">
                                        </div>
                                        <div class="col-md-4 d-none">
                                            <label for="fuel_monthly_mileage_km" class="form-label">Monthly Mileage</label>
                                            <input type="number" id="fuel_monthly_mileage_km" class="form-control form-control-sm">
                                        </div>
                                        <div class="col-md-4 d-none">
                                            <label for="fuel_total_consumption" class="form-label">Fuel Consumption</label>
                                            <input type="number" step="0.01" id="fuel_total_consumption" class="form-control form-control-sm" readonly>
                                        </div>
                                        <div class="col-md-4 d-none">
                                            <label for="fuel_baseline_difference" class="form-label">Baseline Difference</label>
                                            <input type="text" id="fuel_baseline_difference" class="form-control form-control-sm" readonly>
                                        </div>
                                        <div class="col-md-4 d-none">
                                            <label for="fuel_over_baseline_rate" class="form-label">Over-Baseline Rate</label>
                                            <input type="text" id="fuel_over_baseline_rate" class="form-control form-control-sm" readonly>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>

                            <!-- Additional -->
                            <fieldset class="border rounded-3 p-3 mb-3">
                                <legend class="float-none w-auto px-2 fw-semibold fs-6 mb-0">
                                    <a class="text-decoration-none text-dark" data-bs-toggle="collapse" href="#fuelSectionNotes" role="button">
                                        <i class="bi bi-chat-dots me-1"></i> Notes
                                    </a>
                                </legend>
                                <div class="collapse show" id="fuelSectionNotes">
                                    <div class="row g-3 mt-2">
                                        <div class="col-12">
                                            <textarea id="fuel_notes" class="form-control form-control-sm" rows="2" placeholder="Voucher comment, unusual trip, approval note, or fueling remark"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>

                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-primary" id="saveFuelEntry"><i class="bi bi-floppy me-1"></i> Save Fuel Entry</button>
                                <button type="button" class="btn btn-outline-secondary" id="btnResetFuelFormAlt"><i class="bi bi-x-circle me-1"></i> Reset</button>
                            </div>
                        </form>
                    </div>
                    <div class="col-xl-4">
                        <!-- Quick Reference / Summary -->
                        <div class="card shadow-sm border-0 sticky-top" style="top:1rem">
                            <div class="card-header bg-white">
                                <h5 class="mb-0">Quick Reference</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Vehicle</label>
                                    <div id="fuelQuickVehicle" class="p-2 bg-light rounded small">Select a vehicle to see details</div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Latest Price Lookup</label>
                                    <div id="fuelQuickPrice" class="p-2 bg-light rounded small">Select fuel type, state, and date then click "Lookup Price"</div>
                                </div>
                                <div>
                                    <label class="form-label fw-semibold">Computed Values</label>
                                    <div class="p-2 bg-light rounded small">
                                        <div class="d-flex justify-content-between"><span>Total Amount:</span><span id="fuelQuickTotal" class="fw-semibold">—</span></div>
                                        <div class="d-flex justify-content-between"><span>Consumption:</span><span id="fuelQuickConsumption" class="fw-semibold">—</span></div>
                                        <div class="d-flex justify-content-between"><span>Baseline Difference:</span><span id="fuelQuickDiff" class="fw-semibold">—</span></div>
                                        <div class="d-flex justify-content-between"><span>Over-Baseline Rate:</span><span id="fuelQuickOverRate" class="fw-semibold">—</span></div>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <button class="btn btn-outline-secondary btn-sm w-100" type="button" id="btnUseLatestPrice"><i class="bi bi-search me-1"></i> Lookup Price</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </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="btnOpenFuelFormSaved"><i class="bi bi-floppy me-1"></i> Save Fuel Entry</button>
            </div>
        </div>
    </div>
</div>

<!-- Fuel Entry Edit Modal -->
<div class="modal fade" id="fuelEntryModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="fuelEntryModalTitle">Fuel Entry Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="fuelEntryEditForm">
                    <input type="hidden" id="fuelEditEntryId">
                    <div class="row g-3">

                        <div class="col-md-4">
                            <label class="form-label">Vehicle</label>
                            <select id="fuelEditVehicleId" class="form-select form-select-sm">
                                <option value="">Select vehicle</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Driver</label>
                            <select id="fuelEditDriverId" class="form-select form-select-sm">
                                <option value="">Select driver</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Fueling Date</label>
                            <input type="date" id="fuelEditRecordDate" class="form-control form-control-sm">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Fuel Type</label>
                            <select id="fuelEditFuelTypeId" class="form-select form-select-sm">
                                <option value="">Select fuel type</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Fueling Type</label>
                            <select id="fuelEditFuelingType" class="form-select form-select-sm">
                                <option value="">Select fueling type</option>
                                <option value="Routine">Routine</option>
                                <option value="Top Up">Top Up</option>
                                <option value="Emergency">Emergency</option>
                                <option value="Workshop">Workshop</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Fueling Status</label>
                            <select id="fuelEditFuelingStatus" class="form-select form-select-sm">
                                <option value="Completed">Completed</option>
                                <option value="Pending">Pending</option>
                                <option value="Cancelled">Cancelled</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Quantity (Litres)</label>
                            <input type="number" step="0.01" id="fuelEditLiters" class="form-control form-control-sm">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Naira / Liter</label>
                            <input type="number" step="0.01" id="fuelEditRate" class="form-control form-control-sm">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Total Amount</label>
                            <input type="text" id="fuelEditTotalAmount" class="form-control form-control-sm" readonly>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Actual Mileage</label>
                            <input type="number" id="fuelEditActualMileage" class="form-control form-control-sm">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Begin KM</label>
                            <input type="number" id="fuelEditBeginKm" class="form-control form-control-sm">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">End KM</label>
                            <input type="number" id="fuelEditEndKm" class="form-control form-control-sm">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Card Balance</label>
                            <input type="number" step="0.01" id="fuelEditCardBalance" class="form-control form-control-sm">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Approval Status</label>
                            <select id="fuelEditApprovalStatus" class="form-select form-select-sm">
                                <option value="Pending">Pending</option>
                                <option value="Approved">Approved</option>
                                <option value="Rejected">Rejected</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Approved By</label>
                            <select id="fuelEditApprovedBy" class="form-select form-select-sm">
                                <option value="">Select approver</option>
                            </select>
                        </div>

                        <div class="col-12">
                            <label class="form-label">Notes</label>
                            <textarea id="fuelEditNotes" class="form-control form-control-sm" rows="2"></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="btnSaveFuelEdit"><i class="bi bi-floppy me-1"></i> Save Changes</button>
            </div>
        </div>
    </div>
</div>
<?php include __DIR__ . '/views/layouts/footer.php'; ?>
