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

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

$page_js = 'tyres.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-circle"></i> Tyre Management</span>
            <h2 class="mb-1">Tyre Lifecycle Management</h2>
            <p class="text-muted mb-0">Track tyres from purchase to fitment, retread, and scrap.</p>
        </div>
        <button class="btn btn-primary fw-semibold px-4" id="btnAddTyre"><i class="bi bi-plus-lg me-2"></i>New Tyre</button>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-6 col-md-2"><div class="card kpi-card shadow-sm border-0 h-100"><div class="card-body"><div class="kpi-label">In Stock</div><div class="kpi-value" id="kpiInStock">0</div></div></div></div>
        <div class="col-6 col-md-2"><div class="card kpi-card shadow-sm border-0 h-100"><div class="card-body"><div class="kpi-label">Fitted</div><div class="kpi-value" id="kpiFitted">0</div></div></div></div>
        <div class="col-6 col-md-2"><div class="card kpi-card shadow-sm border-0 h-100"><div class="card-body"><div class="kpi-label">Retreaded</div><div class="kpi-value" id="kpiRetreaded">0</div></div></div></div>
        <div class="col-6 col-md-2"><div class="card kpi-card shadow-sm border-0 h-100"><div class="card-body"><div class="kpi-label">Scrapped</div><div class="kpi-value" id="kpiScrapped">0</div></div></div></div>
        <div class="col-6 col-md-2"><div class="card kpi-card shadow-sm border-0 h-100"><div class="card-body"><div class="kpi-label">Total</div><div class="kpi-value" id="kpiTotalTyres">0</div></div></div></div>
        <div class="col-6 col-md-2"><div class="card kpi-card shadow-sm border-0 h-100"><div class="card-body"><div class="kpi-label">Cost (₦)</div><div class="kpi-value" id="kpiTyreCost">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 fw-semibold text-muted">Search</label><input type="text" class="form-control" id="tyreSearch" placeholder="Brand, serial, plate..."></div>
            <div class="col-md-2"><label class="form-label small fw-semibold text-muted">Vehicle</label><select id="tyreVehicleFilter" class="form-select"><option value="">All</option></select></div>
            <div class="col-md-2"><label class="form-label small fw-semibold text-muted">Status</label><select id="tyreStatusFilter" class="form-select"><option value="">All</option><option value="in_stock">In Stock</option><option value="fitted">Fitted</option><option value="retreaded">Retreaded</option><option value="scrapped">Scrapped</option></select></div>
            <div class="col-md-3"></div>
            <div class="col-md-2"><button class="btn btn-outline-secondary w-100" id="btnRefreshTyres"><i class="bi bi-arrow-clockwise me-2"></i>Refresh</button></div>
            <div class="col-md-1">
                <div class="btn-group w-100" role="group">
                    <button class="btn btn-outline-secondary" id="btnExportTyresCsv" title="CSV"><i class="bi bi-filetype-csv"></i></button>
                    <button class="btn btn-outline-secondary" id="btnExportTyresXlsx" title="Excel"><i class="bi bi-file-earmark-excel"></i></button>
                    <button class="btn btn-outline-secondary" id="btnExportTyresPdf" title="PDF"><i class="bi bi-filetype-pdf"></i></button>
                </div>
            </div>
        </div></div>
    </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>Brand</th><th>Size</th><th>Serial #</th><th>Vehicle</th><th>Position</th><th>Purchased</th><th>Fitted</th><th>Status</th><th class="text-end">Actions</th>
            </tr></thead>
            <tbody id="tyreTable"><tr><td colspan="9" class="text-center text-muted py-4">Loading...</td></tr></tbody>
        </table></div>
    </div>
</div>
</main>

<div class="modal fade" id="tyreModal" 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="tyreModalTitle">New Tyre</h5><p class="text-muted small mb-0 mt-1">Add a tyre to inventory</p></div><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">
        <form id="tyreForm">
            <input type="hidden" id="tyre_id">
            <div class="row g-3">
                <div class="col-md-6"><label class="form-label">Brand</label><select id="tyre_brand_id" class="form-select"><option value="">Select brand</option></select></div>
                <div class="col-md-6"><label class="form-label">Brand (override)</label><input type="text" id="tyre_brand" class="form-control" placeholder="Leave blank to use from setup"></div>
                <div class="col-md-6"><label class="form-label">Model</label><select id="tyre_model_id" class="form-select"><option value="">Select model</option></select></div>
                <div class="col-md-6"><label class="form-label">Model (override)</label><input type="text" id="tyre_model" class="form-control" placeholder="Leave blank to use from setup"></div>
                <div class="col-md-4"><label class="form-label">Size</label><input type="text" id="tyre_size" class="form-control" placeholder="e.g. 215/65R15"></div>
                <div class="col-md-6"><label class="form-label">Serial Number</label><input type="text" id="tyre_serial_number" class="form-control"></div>
                <div class="col-md-6"><label class="form-label">Vehicle</label><select id="tyre_vehicle_id" class="form-select"><option value="">Not fitted</option></select></div>
                <div class="col-md-4"><label class="form-label">Position</label><select id="tyre_position" class="form-select"><option value="">Select</option><option value="front_left">Front Left</option><option value="front_right">Front Right</option><option value="rear_left">Rear Left</option><option value="rear_right">Rear Right</option><option value="spare">Spare</option></select></div>
                <div class="col-md-4"><label class="form-label">Purchase Date</label><input type="date" id="tyre_purchase_date" class="form-control"></div>
                <div class="col-md-4"><label class="form-label">Purchase Cost (₦)</label><input type="number" step="0.01" id="tyre_purchase_cost" class="form-control"></div>
                <div class="col-md-4"><label class="form-label">Fitted Date</label><input type="date" id="tyre_fitted_date" class="form-control"></div>
                <div class="col-md-4"><label class="form-label">Fitted Odometer</label><input type="number" id="tyre_fitted_odometer" class="form-control"></div>
                <div class="col-md-4"><label class="form-label">Status</label><select id="tyre_status" class="form-select"><option value="in_stock">In Stock</option><option value="fitted">Fitted</option></select></div>
                <div class="col-12"><label class="form-label">Notes</label><textarea id="tyre_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="saveTyre"><i class="bi bi-check-lg me-2"></i>Save Tyre</button>
    </div>
</div></div></div>

<div class="modal fade" id="retreadModal" tabindex="-1"><div class="modal-dialog modal-dialog-centered"><div class="modal-content">
    <div class="modal-header"><h5 class="modal-title fw-semibold">Record Retread</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">
        <form id="retreadForm">
            <input type="hidden" id="retread_tyre_id">
            <div class="row g-3">
                <div class="col-12"><label class="form-label">Retread Date</label><input type="date" id="retread_date" class="form-control"></div>
                <div class="col-md-6"><label class="form-label">Cost (₦)</label><input type="number" step="0.01" id="retread_cost" class="form-control"></div>
                <div class="col-md-6"><label class="form-label">Vendor</label><input type="text" id="retread_vendor_name" class="form-control"></div>
                <div class="col-12"><label class="form-label">Notes</label><textarea id="retread_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="saveRetread"><i class="bi bi-check-lg me-2"></i>Save Retread</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'; ?>
