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

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

$page_js = 'expenses.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="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3 mb-4">
        <div>
            <span class="section-chip mb-2"><i class="bi bi-cash-stack"></i> Expenses</span>
            <h2 class="mb-1">Vehicle Expenses</h2>
            <p class="text-muted mb-0">Track tolls, parking, permits, cleaning, and other vehicle costs.</p>
        </div>
        <button class="btn btn-primary fw-semibold px-4" id="btnAddExpense"><i class="bi bi-plus-lg me-2"></i>New Expense</button>
    </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 fw-semibold text-muted">Vehicle</label><select id="expVehicleFilter" class="form-select"><option value="">All</option></select></div>
            <div class="col-md-2"><label class="form-label small fw-semibold text-muted">Category</label><select id="expCategoryFilter" class="form-select"><option value="">All</option></select></div>
            <div class="col-md-2"><label class="form-label small fw-semibold text-muted">From</label><input type="date" class="form-control" id="expDateFrom"></div>
            <div class="col-md-2"><label class="form-label small fw-semibold text-muted">To</label><input type="date" class="form-control" id="expDateTo"></div>
            <div class="col-md-2"><label class="form-label small fw-semibold text-muted">Search</label><input type="text" class="form-control" id="expSearch" placeholder="Keyword..."></div>
            <div class="col-md-1"><button class="btn btn-outline-secondary w-100" id="btnRefreshExpenses"><i class="bi bi-arrow-clockwise"></i></button></div>
            <div class="col-md-1">
                <div class="btn-group w-100" role="group">
                    <button class="btn btn-outline-secondary" id="btnExportExpensesCsv" title="CSV"><i class="bi bi-filetype-csv"></i></button>
                    <button class="btn btn-outline-secondary" id="btnExportExpensesXlsx" title="Excel"><i class="bi bi-file-earmark-excel"></i></button>
                    <button class="btn btn-outline-secondary" id="btnExportExpensesPdf" title="PDF"><i class="bi bi-filetype-pdf"></i></button>
                </div>
            </div>
        </div></div>
    </div>

    <div id="expenseSummary" class="row g-3 mb-4"></div>

    <div class="card shadow-sm border-0">
        <div class="table-responsive"><table class="table align-middle table-hover mb-0">
            <thead class="table-light"><tr>
                <th>Date</th><th>Vehicle</th><th>Category</th><th>Description</th><th>Amount</th><th>Driver</th><th class="text-end">Actions</th>
            </tr></thead>
            <tbody id="expenseTable"><tr><td colspan="7" class="text-center text-muted py-4">Loading...</td></tr></tbody>
        </table></div>
    </div>
</div>
</main>

<div class="modal fade" id="expenseModal" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"><div class="modal-content">
    <div class="modal-header"><div><h5 class="modal-title fw-semibold" id="expenseModalTitle">New Expense</h5><p class="text-muted small mb-0 mt-1">Add a vehicle expense</p></div><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">
        <form id="expenseForm">
            <input type="hidden" id="expense_id">
            <div class="row g-3">
                <div class="col-md-6"><label class="form-label">Vehicle <span class="text-danger">*</span></label><select id="expense_vehicle_id" class="form-select"><option value="">Select vehicle</option></select></div>
                <div class="col-md-6"><label class="form-label">Category</label><select id="expense_category_id" class="form-select"><option value="">Select category</option></select></div>
                <div class="col-md-6"><label class="form-label">Expense Date</label><input type="date" id="expense_date" class="form-control"></div>
                <div class="col-md-6"><label class="form-label">Amount (₦) <span class="text-danger">*</span></label><input type="number" step="0.01" id="expense_amount" class="form-control"></div>
                <div class="col-md-6"><label class="form-label">Driver</label><select id="expense_driver_id" class="form-select"><option value="">Select driver</option></select></div>
                <div class="col-md-6"><label class="form-label">Receipt URL</label><input type="text" id="expense_receipt_url" class="form-control" placeholder="https://"></div>
                <div class="col-12"><label class="form-label">Description</label><input type="text" id="expense_description" class="form-control"></div>
                <div class="col-12"><label class="form-label">Notes</label><textarea id="expense_notes" class="form-control" rows="2"></textarea></div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="saveExpense"><i class="bi bi-check-lg me-2"></i>Save Expense</button>
    </div>
</div></div></div>

<script>window.CSRF_TOKEN = <?= json_encode(generateCsrfToken(), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;</script>
<?php include 'views/layouts/footer.php'; ?>
