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

$userName = $_SESSION['user_name'] ?? 'User';
$page_js = 'fuel_approvals.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="fuelApprovalAlertBox" 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-xl-8">
                    <span class="section-chip fuel-chip mb-3">Fuel Approvals</span>
                    <h2 class="mb-2">Review pending fuel requests without opening the full voucher</h2>
                    <p class="mb-0 fuel-hero-copy">Approvers can filter the queue, review the key voucher details, and approve or reject requests directly from one focused screen.</p>
                </div>
                <div class="col-xl-4">
                    <div class="row g-3">
                        <div class="col-sm-6">
                            <div class="fuel-summary-card">
                                <div class="fuel-summary-label">Pending</div>
                                <div class="fuel-summary-value" id="fuelApprovalPendingCount">0</div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="fuel-summary-card">
                                <div class="fuel-summary-label">Approved</div>
                                <div class="fuel-summary-value" id="fuelApprovalApprovedCount">0</div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="fuel-summary-card">
                                <div class="fuel-summary-label">Rejected</div>
                                <div class="fuel-summary-value" id="fuelApprovalRejectedCount">0</div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="fuel-summary-card">
                                <div class="fuel-summary-label">Visible Queue</div>
                                <div class="fuel-summary-value" id="fuelApprovalVisibleCount">0</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white border-0 d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3">
            <div>
                <h5 class="mb-1">Approval Queue</h5>
                <p class="text-muted mb-0">Filter fuel requests by status, vehicle, month, or search terms.</p>
            </div>
            <div class="d-flex flex-column flex-sm-row gap-2">
                <select id="fuelApprovalStatusFilter" class="form-select">
                    <option value="Pending">Pending only</option>
                    <option value="">All statuses</option>
                    <option value="Approved">Approved</option>
                    <option value="Rejected">Rejected</option>
                </select>
                <select id="fuelApprovalVehicleFilter" class="form-select">
                    <option value="">All vehicles</option>
                </select>
                <input type="month" id="fuelApprovalMonthFilter" class="form-control">
                <input type="text" id="fuelApprovalSearch" class="form-control" placeholder="Search voucher, plate, driver, company">
                <button type="button" class="btn btn-outline-secondary" id="btnRefreshFuelApprovalQueue">Refresh</button>
                <button type="button" class="btn btn-outline-success btn-sm" id="btnExportFuelApprovalCsv"><i class="bi bi-download me-1"></i> CSV</button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <div id="fuelBatchActions" class="d-none mb-3 p-2 bg-light rounded d-flex align-items-center gap-3">
                    <span class="fw-semibold small" id="fuelBatchCount">0 selected</span>
                    <button type="button" class="btn btn-sm btn-success" id="btnBatchApprove">Approve Selected</button>
                    <button type="button" class="btn btn-sm btn-outline-danger" id="btnBatchReject">Reject Selected</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="btnBatchClear">Clear</button>
                </div>
                <table class="table align-middle table-hover">
                    <thead class="table-light">
                        <tr>
                            <th style="width:40px;"><input type="checkbox" id="fuelBatchSelectAll"></th>
                            <th>Voucher</th>
                            <th>Date / Time</th>
                            <th>Vehicle</th>
                            <th>Assignment</th>
                            <th>Fuel</th>
                            <th>Financial</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="fuelApprovalQueueTable">
                        <tr><td colspan="9" class="text-center text-muted">Loading fuel approval queue...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</main>

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