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

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

$page_js = 'insurance.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-shield-check"></i> Risk Management</span>
            <h2 class="mb-1">Insurance Management</h2>
            <p class="text-muted mb-0">Track vehicle insurance policies, renewals, and claims.</p>
        </div>
        <button class="btn btn-primary fw-semibold px-4" id="btnAddPolicy"><i class="bi bi-plus-lg me-2"></i>New Policy</button>
    </div>

    <ul class="nav nav-tabs mb-4" id="insuranceTabs">
        <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#policiesTab">Policies</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#claimsTab">Claims</button></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="policiesTab">
            <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 Policies</div><div class="kpi-value" id="kpiActivePolicies">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">Expiring in 30d</div><div class="kpi-value" id="kpiExpiringPolicies">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">Expired</div><div class="kpi-value" id="kpiExpiredPolicies">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 Policies</div><div class="kpi-value" id="kpiTotalPolicies">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">Vehicle</label><select id="policyVehicleFilter" 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="policyStatusFilter" class="form-select"><option value="">All</option><option value="active">Active</option><option value="inactive">Inactive</option></select></div>
                    <div class="col-md-2"><label class="form-label small fw-semibold text-muted">Expiring Soon</label><select id="policyExpiringFilter" class="form-select"><option value="">No filter</option><option value="1">Next 30 days</option></select></div>
                    <div class="col-md-2"><label class="form-label small fw-semibold text-muted">Expired</label><select id="policyExpiredFilter" class="form-select"><option value="">No filter</option><option value="1">Show expired</option></select></div>
                    <div class="col-md-3"><button class="btn btn-outline-secondary w-100" id="btnRefreshPolicies"><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="btnExportInsuranceCsv" title="CSV"><i class="bi bi-filetype-csv"></i></button>
                <button class="btn btn-outline-secondary" id="btnExportInsuranceXlsx" title="Excel"><i class="bi bi-file-earmark-excel"></i></button>
                <button class="btn btn-outline-secondary" id="btnExportInsurancePdf" 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>Vehicle</th><th>Policy #</th><th>Insurer</th><th>Type</th><th>Coverage</th><th>Days Left</th><th>Premium</th><th>Claims</th><th>Status</th><th class="text-end">Actions</th>
                    </tr></thead>
                    <tbody id="policyTable"><tr><td colspan="10" class="text-center text-muted py-4">Loading...</td></tr></tbody>
                </table></div>
            </div>
        </div>

        <div class="tab-pane fade" id="claimsTab">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="d-flex gap-2">
                    <select id="claimPolicyFilter" class="form-select"><option value="">All policies</option></select>
                    <select id="claimStatusFilter" class="form-select"><option value="">All statuses</option><option value="filed">Filed</option><option value="assessed">Assessed</option><option value="approved">Approved</option><option value="settled">Settled</option><option value="rejected">Rejected</option></select>
                </div>
                <button class="btn btn-primary" id="btnAddClaim"><i class="bi bi-plus-lg me-2"></i>New Claim</button>
                <div class="btn-group ms-2" role="group">
                    <button class="btn btn-outline-secondary" id="btnExportClaimsCsv" title="CSV"><i class="bi bi-filetype-csv"></i></button>
                    <button class="btn btn-outline-secondary" id="btnExportClaimsXlsx" title="Excel"><i class="bi bi-file-earmark-excel"></i></button>
                    <button class="btn btn-outline-secondary" id="btnExportClaimsPdf" title="PDF"><i class="bi bi-filetype-pdf"></i></button>
                </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>Vehicle</th><th>Policy</th><th>Claim #</th><th>Incident Date</th><th>Claim Amount</th><th>Settlement</th><th>Payment Date</th><th>Status</th><th class="text-end">Actions</th></tr></thead>
                    <tbody id="claimTable"><tr><td colspan="8" class="text-center text-muted py-4">Loading...</td></tr></tbody>
                </table></div>
            </div>
        </div>
    </div>
</div>
</main>

<div class="modal fade" id="insuranceModal" tabindex="-1"><div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"><div class="modal-content">
    <div class="modal-header"><div><h5 class="modal-title fw-semibold" id="insuranceModalTitle">New Policy</h5><p class="text-muted small mb-0 mt-1">Add a vehicle insurance policy</p></div><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">
        <form id="insuranceForm">
            <input type="hidden" id="insurance_id">
            <div class="row g-3">
                <div class="col-md-6"><label class="form-label">Vehicle <span class="text-danger">*</span></label><select id="insurance_vehicle_id" class="form-select"><option value="">Select vehicle</option></select></div>
                <div class="col-md-6"><label class="form-label">Policy Number <span class="text-danger">*</span></label><input type="text" id="insurance_policy_number" class="form-control"></div>
                <div class="col-md-6"><label class="form-label">Insurer <span class="text-danger">*</span></label><select id="insurance_insurer_id" class="form-select"><option value="">Select insurer</option></select></div>
                <div class="col-md-6"><label class="form-label">Policy Type</label><select id="insurance_policy_type" class="form-select"><option value="comprehensive">Comprehensive</option><option value="third_party">Third Party</option><option value="third_party_fire_theft">Third Party Fire & Theft</option><option value="other">Other</option></select></div>
                <div class="col-md-4"><label class="form-label">Coverage Start <span class="text-danger">*</span></label><input type="date" id="insurance_coverage_start" class="form-control"></div>
                <div class="col-md-4"><label class="form-label">Coverage End <span class="text-danger">*</span></label><input type="date" id="insurance_coverage_end" class="form-control"></div>
                <div class="col-md-4"><label class="form-label">Premium (₦)</label><input type="number" step="0.01" id="insurance_premium_amount" class="form-control"></div>
                <div class="col-md-6"><label class="form-label">Status</label><select id="insurance_is_active" class="form-select"><option value="1">Active</option><option value="0">Inactive</option></select></div>
                <div class="col-12"><label class="form-label">Notes</label><textarea id="insurance_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="saveInsurance"><i class="bi bi-check-lg me-2"></i>Save Policy</button>
    </div>
</div></div></div>

<div class="modal fade" id="claimModal" tabindex="-1"><div class="modal-dialog modal-dialog-centered"><div class="modal-content">
    <div class="modal-header"><div><h5 class="modal-title fw-semibold" id="claimModalTitle">New Claim</h5><p class="text-muted small mb-0 mt-1">Record an insurance claim</p></div><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">
        <form id="claimForm">
            <input type="hidden" id="claim_id">
            <div class="row g-3">
                <div class="col-12"><label class="form-label">Policy <span class="text-danger">*</span></label><select id="claim_policy_id" class="form-select"><option value="">Select policy</option></select></div>
                <div class="col-md-6"><label class="form-label">Claim Number</label><input type="text" id="claim_number" class="form-control"></div>
                <div class="col-md-6"><label class="form-label">Incident Date</label><input type="date" id="claim_incident_date" class="form-control"></div>
                <div class="col-md-6"><label class="form-label">Claim Amount (₦)</label><input type="number" step="0.01" id="claim_amount" class="form-control"></div>
                <div class="col-md-6"><label class="form-label">Settlement (₦)</label><input type="number" step="0.01" id="claim_settlement_amount" class="form-control"></div>
                <div class="col-md-6"><label class="form-label">Payment Date</label><input type="date" id="claim_payment_date" class="form-control"></div>
                <div class="col-12"><label class="form-label">Status</label><select id="claim_status" class="form-select"><option value="filed">Filed</option><option value="assessed">Assessed</option><option value="approved">Approved</option><option value="settled">Settled</option><option value="rejected">Rejected</option></select></div>
                <div class="col-12"><label class="form-label">Description</label><textarea id="claim_description" 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="saveClaim"><i class="bi bi-check-lg me-2"></i>Save Claim</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'; ?>
