<?php
declare(strict_types=1);
require_once 'config/database.php';
require_once 'app/helpers/auth.php';
requireLogin();
require_once __DIR__ . '/app/helpers/csrf.php';
require_once __DIR__ . '/app/helpers/rbac.php';
$userName = $_SESSION['user_name'] ?? 'User';
$page_js = 'fuel_cards.js';
$canCreate = isAdmin() || can('fuel_card.create');
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-3 p-md-4">
    <div id="alertBox" class="alert d-none"></div>

    <section class="mb-4">
        <span class="section-chip mb-3"><i class="bi bi-credit-card-2-front"></i> Fuel Card Management</span>
        <h1 class="mb-2">Fuel Cards</h1>
        <p class="text-muted mb-0">Manage fuel cards, providers, and transaction history.</p>
    </section>

    <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">Active Cards</div>
                    <div class="kpi-value" id="kpiActiveCards">0</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">Total Balance</div>
                    <div class="kpi-value" id="kpiTotalBalance">₦0.00</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">Providers</div>
                    <div class="kpi-value" id="kpiProviders">0</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">Cards</div>
                    <div class="kpi-value" id="kpiTotalCards">0</div>
                </div>
            </div>
        </div>
    </div>

    <ul class="nav nav-tabs mb-3" id="cardTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabCards" type="button"><i class="bi bi-credit-card me-1"></i> Cards</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabProviders" type="button"><i class="bi bi-building me-1"></i> Providers</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabTransactions" type="button"><i class="bi bi-arrow-left-right me-1"></i> Transactions</button>
        </li>
    </ul>

    <div class="tab-content">
        <!-- Cards Tab -->
        <div class="tab-pane fade show active" id="tabCards">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white d-flex flex-wrap justify-content-between align-items-center gap-2 py-2">
                    <div class="d-flex gap-2">
                        <select id="filterCardStatus" class="form-select form-select-sm" style="min-width:120px">
                            <option value="">All statuses</option>
                            <option value="active">Active</option>
                            <option value="suspended">Suspended</option>
                            <option value="lost">Lost</option>
                            <option value="cancelled">Cancelled</option>
                            <option value="expired">Expired</option>
                        </select>
                        <select id="filterCardProvider" class="form-select form-select-sm" style="min-width:140px">
                            <option value="">All providers</option>
                        </select>
                        <input type="text" id="filterCardSearch" class="form-control form-control-sm" placeholder="Search..." style="min-width:120px">
                    </div>
                    <?php if ($canCreate): ?>
                    <button class="btn btn-primary btn-sm" id="btnNewCard"><i class="bi bi-plus-lg me-1"></i> New Card</button>
                    <?php endif; ?>
                </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>Card #</th>
                                    <th>Provider</th>
                                    <th>Type</th>
                                    <th>Assigned To</th>
                                    <th>Balance</th>
                                    <th>Monthly Limit</th>
                                    <th>Status</th>
                                    <th>Expiry</th>
                                    <th class="text-end">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="cardsTable">
                                <tr><td colspan="9" class="text-center text-muted py-4">Loading...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Providers Tab -->
        <div class="tab-pane fade" id="tabProviders">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white d-flex justify-content-between align-items-center py-2">
                    <h6 class="mb-0">Fuel Card Providers</h6>
                    <?php if ($canCreate): ?>
                    <button class="btn btn-primary btn-sm" id="btnNewProvider"><i class="bi bi-plus-lg me-1"></i> Add Provider</button>
                    <?php endif; ?>
                </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>Name</th><th>Code</th><th class="text-end">Actions</th></tr>
                            </thead>
                            <tbody id="providersTable">
                                <tr><td colspan="3" class="text-center text-muted py-4">Loading...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Transactions Tab -->
        <div class="tab-pane fade" id="tabTransactions">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white d-flex justify-content-between align-items-center py-2">
                    <h6 class="mb-0">Card Transactions</h6>
                    <?php if ($canCreate): ?>
                    <button class="btn btn-primary btn-sm" id="btnNewTransaction"><i class="bi bi-plus-lg me-1"></i> Log Transaction</button>
                    <?php endif; ?>
                </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>Date</th><th>Card</th><th>Type</th><th>Amount</th><th>Balance Before</th><th>Balance After</th><th>Reference</th><th>Notes</th></tr>
                            </thead>
                            <tbody id="transactionsTable">
                                <tr><td colspan="8" class="text-center text-muted py-4">Loading...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Card Modal -->
<div class="modal fade" id="cardModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-credit-card me-2"></i><span id="cardModalTitle">New Card</span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="cardForm">
                <input type="hidden" id="card_id" name="id">
                <input type="hidden" name="_csrf_token" value="<?= generateCsrfToken() ?>">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6"><label class="form-label">Card Number</label><input type="text" id="card_number" name="card_number" class="form-control form-control-sm" required></div>
                        <div class="col-md-6"><label class="form-label">Card Type</label><select id="card_type" name="card_type" class="form-select form-select-sm"><option value="physical">Physical</option><option value="virtual">Virtual</option></select></div>
                        <div class="col-md-6"><label class="form-label">Provider</label><select id="card_provider_id" name="provider_id" class="form-select form-select-sm"><option value="">Select provider</option></select></div>
                        <div class="col-md-6"><label class="form-label">Status</label><select id="card_status" name="status" class="form-select form-select-sm"><option value="active">Active</option><option value="suspended">Suspended</option><option value="lost">Lost</option><option value="cancelled">Cancelled</option><option value="expired">Expired</option></select></div>
                        <div class="col-md-6"><label class="form-label">Assigned To Type</label><select id="card_assigned_to_type" name="assigned_to_type" class="form-select form-select-sm"><option value="none">Not assigned</option><option value="vehicle">Vehicle</option><option value="driver">Driver</option></select></div>
                        <div class="col-md-6"><label class="form-label">Assigned To</label><select id="card_assigned_to_id" name="assigned_to_id" class="form-select form-select-sm"><option value="">Select...</option></select></div>
                        <div class="col-md-4"><label class="form-label">Current Balance</label><input type="number" step="0.01" id="card_current_balance" name="current_balance" class="form-control form-control-sm" value="0"></div>
                        <div class="col-md-4"><label class="form-label">Monthly Limit</label><input type="number" step="0.01" id="card_monthly_limit" name="monthly_limit" class="form-control form-control-sm"></div>
                        <div class="col-md-4"><label class="form-label">Per-Transaction Limit</label><input type="number" step="0.01" id="card_per_transaction_limit" name="per_transaction_limit" class="form-control form-control-sm"></div>
                        <div class="col-md-6"><label class="form-label">Issued Date</label><input type="date" id="card_issued_date" name="issued_date" class="form-control form-control-sm"></div>
                        <div class="col-md-6"><label class="form-label">Expiry Date</label><input type="date" id="card_expiry_date" name="expiry_date" class="form-control form-control-sm"></div>
                        <div class="col-12"><label class="form-label">Notes</label><textarea id="card_notes" name="notes" class="form-control form-control-sm" rows="2"></textarea></div>
                    </div>
                </div>
                <div class="modal-footer"><button type="submit" class="btn btn-primary btn-sm">Save Card</button></div>
            </form>
        </div>
    </div>
</div>

<!-- Provider Modal -->
<div class="modal fade" id="providerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><span id="providerModalTitle">New Provider</span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="providerForm">
                <input type="hidden" id="provider_id" name="id">
                <input type="hidden" name="_csrf_token" value="<?= generateCsrfToken() ?>">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-12"><label class="form-label">Provider Name</label><input type="text" id="provider_name" name="name" class="form-control form-control-sm" required></div>
                        <div class="col-12"><label class="form-label">Code</label><input type="text" id="provider_code" name="code" class="form-control form-control-sm"></div>
                    </div>
                </div>
                <div class="modal-footer"><button type="submit" class="btn btn-primary btn-sm">Save Provider</button></div>
            </form>
        </div>
    </div>
</div>

<!-- Transaction Modal -->
<div class="modal fade" id="transactionModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Log Transaction</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="transactionForm">
                <input type="hidden" name="_csrf_token" value="<?= generateCsrfToken() ?>">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-12"><label class="form-label">Card</label><select id="tx_card_id" name="fuel_card_id" class="form-select form-select-sm" required><option value="">Select card</option></select></div>
                        <div class="col-6"><label class="form-label">Type</label><select id="tx_type" name="transaction_type" class="form-select form-select-sm"><option value="purchase">Purchase</option><option value="refund">Refund</option><option value="credit">Credit</option><option value="adjustment">Adjustment</option><option value="fee">Fee</option></select></div>
                        <div class="col-6"><label class="form-label">Amount</label><input type="number" step="0.01" id="tx_amount" name="amount" class="form-control form-control-sm" required></div>
                        <div class="col-12"><label class="form-label">Reference</label><input type="text" id="tx_reference" name="reference" class="form-control form-control-sm"></div>
                        <div class="col-12"><label class="form-label">Notes</label><textarea id="tx_notes" name="notes" class="form-control form-control-sm" rows="2"></textarea></div>
                    </div>
                </div>
                <div class="modal-footer"><button type="submit" class="btn btn-primary btn-sm">Log Transaction</button></div>
            </form>
        </div>
    </div>
</div>
</main>
<?php include __DIR__ . '/views/layouts/footer.php'; ?>
