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

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

$page_js = 'compliance_page.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 shadow-sm border-0 mb-4">
        <div class="card-body p-4 p-lg-5">
            <div class="row g-4 align-items-center">
                <div class="col-lg-8">
                    <span class="badge bg-primary bg-opacity-10 text-primary mb-3 px-3 py-2">Compliance</span>
                    <h2 class="mb-2">Vehicle Renewal Registry</h2>
                    <p class="mb-0 text-muted">Track and manage all vehicle document renewals in one place.</p>
                </div>
                <div class="col-lg-4 text-lg-end">
                <button type="button" class="btn btn-primary" id="btnAddComplianceRecord"><i class="bi bi-plus-lg"></i> Add Renewal</button>
                <a href="compliance_setup.php" class="btn btn-outline-secondary ms-2"><i class="bi bi-gear"></i> Setup</a>
                <button class="btn btn-outline-secondary ms-2" id="btnRefreshCompliance" title="Refresh"><i class="bi bi-arrow-clockwise"></i></button>
                <div class="btn-group ms-2" role="group">
                    <button class="btn btn-outline-secondary" id="btnExportComplianceCsv" title="CSV"><i class="bi bi-filetype-csv"></i></button>
                    <button class="btn btn-outline-secondary" id="btnExportComplianceXlsx" title="Excel"><i class="bi bi-file-earmark-excel"></i></button>
                    <button class="btn btn-outline-secondary" id="btnExportCompliancePdf" title="PDF"><i class="bi bi-filetype-pdf"></i></button>
                </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-6 col-xl-3">
            <div class="card kpi-card shadow-sm border-0 rounded-4 h-100">
                <div class="card-body py-3 px-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="kpi-label">Document Types</div>
                            <div class="kpi-value" id="kpiDocumentTypes">0</div>
                            <div class="small text-muted">Active papers in registry</div>
                        </div>
                        <div class="kpi-icon text-primary fs-3"><i class="bi bi-file-earmark-text"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-xl-3">
            <div class="card kpi-card shadow-sm border-0 rounded-4 h-100">
                <div class="card-body py-3 px-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="kpi-label">Vehicle Profiles</div>
                            <div class="kpi-value" id="kpiVehicleProfiles">0</div>
                            <div class="small text-muted">Vehicle-document mappings</div>
                        </div>
                        <div class="kpi-icon text-success fs-3"><i class="bi bi-truck"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-xl-3">
            <div class="card kpi-card shadow-sm border-0 rounded-4 h-100">
                <div class="card-body py-3 px-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="kpi-label">Renewal Records</div>
                            <div class="kpi-value" id="kpiRenewalRecords">0</div>
                            <div class="small text-muted">Captured renewal history</div>
                        </div>
                        <div class="kpi-icon text-warning fs-3"><i class="bi bi-arrow-repeat"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-xl-3">
            <div class="card kpi-card shadow-sm border-0 rounded-4 h-100">
                <div class="card-body py-3 px-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="kpi-label">Expiring in 30 Days</div>
                            <div class="kpi-value" id="kpiExpiringDocs">0</div>
                            <div class="small text-muted">Documents needing attention</div>
                        </div>
                        <div class="kpi-icon text-danger fs-3"><i class="bi bi-exclamation-triangle"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body py-3 px-3">
            <div class="row g-2 align-items-center">
                <div class="col-auto">
                    <div class="input-group input-group-sm" style="min-width:200px">
                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                        <input type="text" class="form-control" id="complianceSearchInput" placeholder="Search records...">
                    </div>
                </div>
                <div class="col-auto">
                    <select id="complianceVehicleFilter" class="form-select form-select-sm" style="min-width:150px">
                        <option value="">All vehicles</option>
                    </select>
                </div>
                <div class="col-auto">
                    <select id="complianceDocumentTypeFilter" class="form-select form-select-sm" style="min-width:180px">
                        <option value="">All document types</option>
                    </select>
                </div>
                <div class="col">
                    <div class="d-flex gap-1 justify-content-end flex-wrap" id="complianceStatusChips">
                        <button class="btn btn-sm btn-primary chip-btn" data-status="">All</button>
                        <button class="btn btn-sm btn-outline-secondary chip-btn" data-status="valid">Valid</button>
                        <button class="btn btn-sm btn-outline-secondary chip-btn" data-status="expiring soon">Expiring Soon</button>
                        <button class="btn btn-sm btn-outline-secondary chip-btn" data-status="expired">Expired</button>
                        <button class="btn btn-sm btn-outline-secondary chip-btn" data-status="draft">Draft</button>
                    </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 gap-3">
            <h5 class="mb-0 fw-semibold">Renewal History</h5>
            <span class="text-muted small" id="renewalCount">0 records</span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table align-middle table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Vehicle</th>
                            <th>Document</th>
                            <th>Jurisdiction</th>
                            <th>Document Number</th>
                            <th>Issue Date</th>
                            <th>Expiry Date</th>
                            <th>Status</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="renewalHistoryTable">
                        <tr><td colspan="8" class="text-center text-muted py-5">Loading renewal history...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</main>

<div class="modal fade" id="complianceModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title fw-semibold" id="complianceModalTitle">Add Renewal</h5>
                    <p class="text-muted small mb-0 mt-1" id="complianceModalSubtitle">Record a new vehicle document renewal</p>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="complianceForm">
                    <input type="hidden" id="compliance_id">

                    <div class="compliance-form-section">
                        <div class="compliance-form-section-title">
                            <i class="bi bi-info-circle"></i>
                            <span>Core Details</span>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="compliance_vehicle_id" class="form-label">Vehicle <span class="text-danger">*</span></label>
                                <select id="compliance_vehicle_id" class="form-select">
                                    <option value="">Select vehicle</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="document_type_id" class="form-label">Document Type <span class="text-danger">*</span></label>
                                <select id="document_type_id" class="form-select">
                                    <option value="">Select document type</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="profile_scope" class="form-label">Scope</label>
                                <select id="profile_scope" class="form-select">
                                    <option value="national">National</option>
                                    <option value="state">State</option>
                                    <option value="local">Local</option>
                                    <option value="route">Route</option>
                                    <option value="contract">Contract</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="jurisdiction_state" class="form-label">Jurisdiction State</label>
                                <select id="jurisdiction_state" class="form-select">
                                    <option value="">Select state</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="jurisdiction_lga" class="form-label">Jurisdiction LGA</label>
                                <select id="jurisdiction_lga" class="form-select">
                                    <option value="">Select LGA</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="compliance-form-section">
                        <div class="compliance-form-section-title">
                            <i class="bi bi-calendar-event"></i>
                            <span>Dates & Status</span>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="document_number" class="form-label">Document Number</label>
                                <input type="text" id="document_number" class="form-control" placeholder="e.g. ABC-12345">
                            </div>
                            <div class="col-md-4">
                                <label for="issue_date" class="form-label">Issue Date</label>
                                <input type="date" id="issue_date" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label for="expiry_date" class="form-label">Expiry Date <span class="text-danger">*</span></label>
                                <input type="date" id="expiry_date" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label for="notification_date" class="form-label">Notification Date</label>
                                <input type="date" id="notification_date" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label for="renewal_status" class="form-label">Status</label>
                                <select id="renewal_status" class="form-select">
                                    <option value="valid">Valid</option>
                                    <option value="draft">Draft</option>
                                    <option value="expired">Expired</option>
                                    <option value="revoked">Revoked</option>
                                    <option value="waived">Waived</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="is_mandatory" class="form-label">Mandatory</label>
                                <select id="is_mandatory" class="form-select">
                                    <option value="1">Yes</option>
                                    <option value="0">No</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="compliance-form-section">
                        <div class="compliance-form-section-title">
                            <i class="bi bi-building"></i>
                            <span>Issuing Authority & Payment</span>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="issuing_authority_name" class="form-label">Issuing Authority</label>
                                <select id="issuing_authority_name" class="form-select">
                                    <option value="">Select issuing authority</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="issuing_office" class="form-label">Issuing Office</label>
                                <select id="issuing_office" class="form-select">
                                    <option value="">Select issuing office</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="vendor_name" class="form-label">Vendor / Agent</label>
                                <select id="vendor_name" class="form-select">
                                    <option value="">Select vendor / agent</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="amount_paid" class="form-label">Amount Paid (NGN)</label>
                                <div class="input-group">
                                    <span class="input-group-text">₦</span>
                                    <input type="number" step="0.01" id="amount_paid" class="form-control" placeholder="0.00">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label for="payment_reference" class="form-label">Payment Reference</label>
                                <input type="text" id="payment_reference" class="form-control" placeholder="e.g. TSB-REF-001">
                            </div>
                            <div class="col-md-4">
                                <label for="receipt_number" class="form-label">Receipt Number</label>
                                <input type="text" id="receipt_number" class="form-control" placeholder="e.g. RCP-001">
                            </div>
                            <div class="col-md-6">
                                <label for="file_url" class="form-label">File URL</label>
                                <input type="text" id="file_url" class="form-control" placeholder="https://">
                            </div>
                            <div class="col-md-6">
                                <label for="profile_remarks" class="form-label">Profile Remarks</label>
                                <input type="text" id="profile_remarks" class="form-control" placeholder="Additional notes">
                            </div>
                            <div class="col-12">
                                <label for="renewal_notes" class="form-label">Renewal Notes</label>
                                <textarea id="renewal_notes" class="form-control" rows="3" placeholder="Enter any notes about this renewal..."></textarea>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary px-4" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary px-4" id="saveComplianceRecord">
                    <i class="bi bi-check-lg me-2"></i>Save Renewal
                </button>
            </div>
        </div>
    </div>
</div>

<style>
.compliance-form-section {
    margin-bottom: 24px;
}
.compliance-form-section:last-child {
    margin-bottom: 0;
}
.compliance-form-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 1px solid #edf2f7;
}
.compliance-form-section-title i {
    font-size: 16px;
    color: #1d4ed8;
}

#complianceModal .modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(15,23,42,0.2);
}
#complianceModal .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #edf2f7;
}
#complianceModal .modal-body {
    padding: 24px;
}
#complianceModal .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #edf2f7;
}
#complianceModal .form-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}
#complianceModal .form-control,
#complianceModal .form-select {
    border-radius: 10px;
    border-color: #e2e8f0;
    min-height: 42px;
    font-size: 14px;
}
#complianceModal .form-control:focus,
#complianceModal .form-select:focus {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29,78,216,0.1);
}
#complianceModal .input-group-text {
    border-radius: 10px 0 0 10px;
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #475569;
}
</style>

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