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

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

$page_js = 'tco_report.js';
include 'views/layouts/header.php';
include 'views/layouts/sidebar.php';
?>
<style>
.tco-stat { padding: 20px; border-radius: 16px; background: #fff; border: 1px solid #edf2f7; height: 100%; }
.tco-stat-label { font-size: 12px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.tco-stat-value { font-size: 24px; font-weight: 700; line-height: 1.1; }
.tco-fuel { border-left: 4px solid #f59e0b; }
.tco-maint { border-left: 4px solid #ef4444; }
.tco-ins   { border-left: 4px solid #3b82f6; }
.tco-exp   { border-left: 4px solid #8b5cf6; }
.tco-grand { border-left: 4px solid #10b981; }
</style>
<main class="main-content">
<?php include 'views/layouts/topbar.php'; ?>
<div class="container-fluid p-4">

    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body">
            <span class="section-chip mb-2"><i class="bi bi-cash-stack"></i> Cost Analysis</span>
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
                <div>
                    <h2 class="mb-1">Total Cost of Ownership</h2>
                    <p class="text-muted mb-0">Combined vehicle costs — fuel, maintenance, insurance, and expenses.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-2 mb-4">
        <div class="col-md-3">
            <label class="form-label small">Year</label>
            <select class="form-select form-select-sm" id="filterYear"></select>
        </div>
        <div class="col-md-3">
            <label class="form-label small">Vehicle</label>
            <select class="form-select form-select-sm" id="filterVehicle">
                <option value="">All Vehicles</option>
            </select>
        </div>
        <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>

    <div class="row g-3 mb-4" id="kpiRow">
        <div class="col-md-3">
            <div class="tco-stat tco-fuel">
                <div class="tco-stat-label">Total Fuel Cost</div>
                <div class="tco-stat-value" id="kpiFuel">₦0</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="tco-stat tco-maint">
                <div class="tco-stat-label">Total Maintenance</div>
                <div class="tco-stat-value" id="kpiMaint">₦0</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="tco-stat tco-ins">
                <div class="tco-stat-label">Total Insurance</div>
                <div class="tco-stat-value" id="kpiIns">₦0</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="tco-stat tco-exp">
                <div class="tco-stat-label">Total Expenses</div>
                <div class="tco-stat-value" id="kpiExpense">₦0</div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4" id="kpiRow2">
        <div class="col-md-4">
            <div class="tco-stat tco-grand">
                <div class="tco-stat-label">Grand Total TCO</div>
                <div class="tco-stat-value fs-2" id="kpiGrandTotal">₦0</div>
                <div class="tco-stat-desc text-muted small" id="kpiVehicleCount">0 vehicles</div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="tco-stat">
                <div class="tco-stat-label">Cost Breakdown</div>
                <div style="height:100px;position:relative;" id="tcoBarContainer">
                    <div id="tcoBarFuel" style="position:absolute;bottom:0;left:0;border-radius:6px 6px 0 0;" title="Fuel"></div>
                    <div id="tcoBarMaint" style="position:absolute;bottom:0;border-radius:6px 6px 0 0;" title="Maintenance"></div>
                    <div id="tcoBarIns" style="position:absolute;bottom:0;border-radius:6px 6px 0 0;" title="Insurance"></div>
                    <div id="tcoBarExp" style="position:absolute;bottom:0;right:0;border-radius:6px 6px 0 0;" title="Expenses"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-semibold">Vehicle TCO Breakdown</h5>
            <div class="d-flex gap-1">
                <button class="btn btn-sm btn-outline-success" id="btnExportCsv"><i class="bi bi-download"></i> CSV</button>
                <button class="btn btn-sm btn-outline-danger" id="btnExportPdf"><i class="bi bi-file-earmark-pdf"></i> PDF</button>
                <button class="btn btn-sm btn-outline-primary" id="btnExportExcel"><i class="bi bi-file-earmark-excel"></i> Excel</button>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-bordered table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>Plate Number</th>
                        <th>Make / Model</th>
                        <th>Type</th>
                        <th class="text-end">Fuel (₦)</th>
                        <th class="text-end">Maintenance (₦)</th>
                        <th class="text-end">Insurance (₦)</th>
                        <th class="text-end">Expenses (₦)</th>
                        <th class="text-end">TCO (₦)</th>
                        <th>Details</th>
                    </tr>
                </thead>
                <tbody id="tcoTableBody"></tbody>
            </table>
        </div>
    </div>

</div>

<div class="modal fade" id="tcoDetailModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detailModalTitle">Vehicle Cost Detail</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="detailModalBody">
                <div class="text-center text-muted py-5">Loading...</div>
            </div>
        </div>
    </div>
</div>

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