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

$userName = $_SESSION['user_name'] ?? 'User';
$page_js = 'fuel_setup.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="fuelSetupAlertBox" class="alert d-none"></div>
    <div class="card shadow-sm border-0 fuel-hero mb-4">
        <div class="card-body p-4 p-lg-5">
            <div class="row g-4 align-items-center">
                <div class="col-lg-8">
                    <span class="section-chip fuel-chip mb-3">Fuel Setup</span>
                    <h2 class="mb-2">Manage fuel types, offices, companies, filling stations, approvers, and changing fuel prices</h2>
                    <p class="mb-0 fuel-hero-copy">Keep all fuel master data under Settings so the fueling voucher page stays focused on operational entry only.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-xl-3">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-white border-0">
                    <h5 class="mb-1">Fuel Type Setup</h5>
                    <p class="text-muted mb-0">Manage available fuel types for entry.</p>
                </div>
                <div class="card-body">
                    <form id="fuelTypeForm" class="row g-3">
                        <div class="col-md-6">
                            <label for="setup_fuel_type_name" class="form-label">Fuel Type</label>
                            <input type="text" id="setup_fuel_type_name" class="form-control" placeholder="Petrol">
                        </div>
                        <div class="col-md-3">
                            <label for="setup_fuel_type_code" class="form-label">Code</label>
                            <input type="text" id="setup_fuel_type_code" class="form-control" placeholder="PMS">
                        </div>
                        <div class="col-md-3">
                            <label for="setup_fuel_unit" class="form-label">Unit</label>
                            <input type="text" id="setup_fuel_unit" class="form-control" value="Litre">
                        </div>
                        <div class="col-12">
                            <button type="button" class="btn btn-outline-primary" id="saveFuelType">Save Fuel Type</button>
                        </div>
                    </form>

                    <div class="table-responsive mt-3">
                        <table class="table align-middle table-sm">
                            <thead class="table-light">
                                <tr>
                                    <th>Fuel Type</th>
                                    <th>Code</th>
                                    <th>Unit</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="fuelTypeTable">
                                <tr><td colspan="4" class="text-center text-muted">Loading fuel types...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-white border-0">
                    <h5 class="mb-1">Office Setup</h5>
                    <p class="text-muted mb-0">Manage the office dropdown used on fuel vouchers.</p>
                </div>
                <div class="card-body">
                    <form id="fuelOfficeForm" class="row g-3">
                        <div class="col-12">
                            <label for="setup_office_name" class="form-label">Office</label>
                            <input type="text" id="setup_office_name" class="form-control" placeholder="Office name">
                        </div>
                        <div class="col-12">
                            <button type="button" class="btn btn-outline-primary" id="saveFuelOffice">Save Office</button>
                        </div>
                    </form>

                    <div class="table-responsive mt-3">
                        <table class="table align-middle table-sm">
                            <thead class="table-light">
                                <tr>
                                    <th>Office</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="fuelOfficeTable">
                                <tr><td colspan="2" class="text-center text-muted">Loading offices...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-white border-0">
                    <h5 class="mb-1">Fuel Company Setup</h5>
                    <p class="text-muted mb-0">Manage the company dropdown used on fuel vouchers.</p>
                </div>
                <div class="card-body">
                    <form id="fuelCompanyForm" class="row g-3">
                        <div class="col-md-8">
                            <label for="setup_company_name" class="form-label">Company</label>
                            <input type="text" id="setup_company_name" class="form-control" placeholder="Company name">
                        </div>
                        <div class="col-md-4">
                            <label for="setup_company_code" class="form-label">Code</label>
                            <input type="text" id="setup_company_code" class="form-control" placeholder="COMP">
                        </div>
                        <div class="col-12">
                            <button type="button" class="btn btn-outline-primary" id="saveFuelCompany">Save Company</button>
                        </div>
                    </form>

                    <div class="table-responsive mt-3">
                        <table class="table align-middle table-sm">
                            <thead class="table-light">
                                <tr>
                                    <th>Company</th>
                                    <th>Code</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="fuelCompanyTable">
                                <tr><td colspan="3" class="text-center text-muted">Loading companies...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-white border-0">
                    <h5 class="mb-1">Filling Station Setup</h5>
                    <p class="text-muted mb-0">Manage the filling station dropdown used on fuel vouchers.</p>
                </div>
                <div class="card-body">
                    <form id="fuelStationForm" class="row g-3">
                        <div class="col-md-12">
                            <label for="setup_station_name" class="form-label">Filling Station</label>
                            <input type="text" id="setup_station_name" class="form-control" placeholder="Station name">
                        </div>
                        <div class="col-md-6">
                            <label for="setup_station_state_id" class="form-label">State</label>
                            <select id="setup_station_state_id" class="form-select">
                                <option value="">Select state</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="setup_station_phone" class="form-label">Phone</label>
                            <input type="text" id="setup_station_phone" class="form-control">
                        </div>
                        <div class="col-12">
                            <label for="setup_station_address" class="form-label">Address</label>
                            <input type="text" id="setup_station_address" class="form-control">
                        </div>
                        <div class="col-12">
                            <button type="button" class="btn btn-outline-primary" id="saveFuelStation">Save Filling Station</button>
                        </div>
                    </form>

                    <div class="table-responsive mt-3">
                        <table class="table align-middle table-sm">
                            <thead class="table-light">
                                <tr>
                                    <th>Station</th>
                                    <th>State</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="fuelStationTable">
                                <tr><td colspan="3" class="text-center text-muted">Loading filling stations...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-white border-0">
                    <h5 class="mb-1">Fuel Approval Setup</h5>
                    <p class="text-muted mb-0">Choose users that can approve fuel requests.</p>
                </div>
                <div class="card-body">
                    <form id="fuelApprovalForm" class="row g-3">
                        <div class="col-12">
                            <label for="setup_approval_user_id" class="form-label">User</label>
                            <select id="setup_approval_user_id" class="form-select">
                                <option value="">Select user</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <button type="button" class="btn btn-outline-primary" id="saveFuelApprovalUser">Save Approval User</button>
                        </div>
                    </form>

                    <div class="table-responsive mt-3">
                        <table class="table align-middle table-sm">
                            <thead class="table-light">
                                <tr>
                                    <th>User</th>
                                    <th>Email</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="fuelApprovalUserTable">
                                <tr><td colspan="3" class="text-center text-muted">Loading approval users...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0 mt-4">
        <div class="card-header bg-white border-0">
            <h5 class="mb-1">Fuel Price Setup</h5>
            <p class="text-muted mb-0">Capture changing Nigeria prices by state.</p>
        </div>
        <div class="card-body">
            <form id="fuelPriceForm" class="row g-3">
                <div class="col-md-3">
                    <label for="setup_price_fuel_type_id" class="form-label">Fuel Type</label>
                    <select id="setup_price_fuel_type_id" class="form-select">
                        <option value="">Select fuel type</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="setup_price_effective_date" class="form-label">Effective Date</label>
                    <input type="date" id="setup_price_effective_date" class="form-control">
                </div>
                <div class="col-md-2">
                    <label for="setup_price_state_id" class="form-label">State</label>
                    <select id="setup_price_state_id" class="form-select">
                        <option value="">Select state</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="setup_price_per_liter" class="form-label">Price Per Liter</label>
                    <input type="number" step="0.01" id="setup_price_per_liter" class="form-control">
                </div>
                <div class="col-md-2">
                    <label for="setup_price_vendor" class="form-label">Vendor / Source</label>
                    <input type="text" id="setup_price_vendor" class="form-control">
                </div>
                <div class="col-md-10">
                    <label for="setup_price_remarks" class="form-label">Remarks</label>
                    <input type="text" id="setup_price_remarks" class="form-control">
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="button" class="btn btn-outline-primary w-100" id="saveFuelPrice">Save Price History</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card shadow-sm border-0 mt-4">
        <div class="card-header bg-white border-0">
            <h5 class="mb-1">Fuel Price History</h5>
            <p class="text-muted mb-0">Latest price records by fuel type, state, and date.</p>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table align-middle table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>Effective Date</th>
                            <th>Fuel Type</th>
                            <th>State</th>
                            <th>Price / Ltr</th>
                            <th>Vendor</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="fuelPriceTable">
                        <tr><td colspan="6" class="text-center text-muted">Loading fuel price history...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</main>

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