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

if (!can('fuel.view')) {
    echo "<div class='alert alert-danger m-4'>Access denied</div>";
    exit;
}

$page_js = 'fuel_request_report.js';

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

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

<div class="container-fluid p-4">

    <div class="card bg-primary text-white shadow-sm border-0 mb-4">
        <div class="card-body">
            <h4 class="mb-1"><i class="bi bi-fuel-pump"></i> Fuel Request Report</h4>
            <p class="mb-0 opacity-75">Analyse fuel requests by approval status, date range, and vehicle.</p>
        </div>
    </div>

    <div class="row g-3 mb-4" id="kpiRow">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="text-muted small">Total Requests</div>
                    <div class="fs-3 fw-bold" id="kpiTotalCount">0</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="text-muted small">Total Litres</div>
                    <div class="fs-3 fw-bold" id="kpiTotalLiters">0</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="text-muted small">Total Amount (NGN)</div>
                    <div class="fs-3 fw-bold" id="kpiTotalAmount">0.00</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="text-muted small">Approved</div>
                    <div class="fs-3 fw-bold text-success" id="kpiApprovedCount">0</div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body">
            <div class="row g-2 align-items-end">
                <div class="col-md-3">
                    <label class="form-label small">Start Date</label>
                    <input type="date" class="form-control form-control-sm" id="filterStartDate">
                </div>
                <div class="col-md-3">
                    <label class="form-label small">End Date</label>
                    <input type="date" class="form-control form-control-sm" id="filterEndDate">
                </div>
                <div class="col-md-2">
                    <label class="form-label small">Approval Status</label>
                    <select class="form-select form-select-sm" id="filterStatus">
                        <option value="">All</option>
                        <option value="Pending">Pending</option>
                        <option value="Approved">Approved</option>
                        <option value="Rejected">Rejected</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small">Search</label>
                    <input type="text" class="form-control form-control-sm" id="filterSearch" placeholder="Voucher / Vehicle / Driver">
                </div>
                <div class="col-md-2 d-flex gap-1">
                    <button class="btn btn-sm btn-outline-primary flex-fill" id="btnRefresh"><i class="bi bi-arrow-clockwise"></i> Refresh</button>
                    <button class="btn btn-sm btn-outline-success flex-fill" id="btnExport"><i class="bi bi-download"></i> CSV</button>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-bordered table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Voucher</th>
                            <th>Date</th>
                            <th>Vehicle</th>
                            <th>Driver</th>
                            <th>Fuel Type</th>
                            <th>Litres</th>
                            <th>Rate (NGN/L)</th>
                            <th>Total (NGN)</th>
                            <th>Station</th>
                            <th>Status</th>
                            <th>Created By</th>
                        </tr>
                    </thead>
                    <tbody id="reportTableBody"></tbody>
                </table>
            </div>
        </div>
    </div>

</div>
</main>

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