<?php
declare(strict_types=1);
require_once 'config/database.php';
require_once 'app/helpers/auth.php';
requireLogin();

$userName = $_SESSION['user_name'] ?? 'User';
$id = isset($_GET['id']) ? (int)$_GET['id'] : 0;

if ($id <= 0) {
    echo "<div class='alert alert-danger m-4'>Invalid driver ID</div>";
    exit;
}

$page_js = 'driver_profile.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 id="alertBox" class="alert alert-danger d-none"></div>

    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3 mb-4">
        <div class="d-flex gap-4 align-items-start">
            <div id="driverPicContainer">
                <div class="driver-pic-placeholder">
                    <i class="bi bi-person-circle"></i>
                </div>
            </div>
            <div>
                <a href="drivers.php" class="btn btn-link text-decoration-none px-0 mb-2">
                    <i class="bi bi-arrow-left"></i>
                    Back to Drivers
                </a>
                <h2 id="driverTitle" class="mb-1">Driver Profile</h2>
                <p class="text-muted mb-0" id="driverSubtitle">Driver record, assignment and license view.</p>
            </div>
        </div>
        <div class="d-flex align-items-center gap-2">
            <span class="badge fs-6" id="driverStatus">-</span>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card kpi-card shadow-sm border-0 h-100">
                <div class="card-body">
                    <div class="kpi-label">Driver Code</div>
                    <div class="fw-semibold fs-5" id="driverCode">-</div>
                    <div class="text-muted small mt-2">Internal driver identifier</div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card kpi-card shadow-sm border-0 h-100">
                <div class="card-body">
                    <div class="kpi-label">Current Vehicle</div>
                    <div class="fw-semibold fs-5" id="assignedVehicle">-</div>
                    <div class="text-muted small mt-2">Active assignment</div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card kpi-card shadow-sm border-0 h-100">
                <div class="card-body">
                    <div class="kpi-label">Phone</div>
                    <div class="fw-semibold fs-5" id="driverPhone">-</div>
                    <div class="text-muted small mt-2">Primary contact</div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card kpi-card shadow-sm border-0 h-100">
                <div class="card-body">
                    <div class="kpi-label">License Valid Until</div>
                    <div class="fw-semibold fs-5" id="licenseValidUntil">-</div>
                    <div class="text-muted small mt-2">Latest license expiry</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-6">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Driver Details</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="text-muted small">Full Name</div>
                            <div class="fw-semibold" id="fullName">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">Surname</div>
                            <div class="fw-semibold" id="surname">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">First Name</div>
                            <div class="fw-semibold" id="firstName">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">Other Name</div>
                            <div class="fw-semibold" id="otherName">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">Date of Birth</div>
                            <div class="fw-semibold" id="dateOfBirth">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">Resumption Date</div>
                            <div class="fw-semibold" id="resumptionDate">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">Confirmation Date</div>
                            <div class="fw-semibold" id="confirmationDate">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">Exit Date</div>
                            <div class="fw-semibold" id="exitDate">-</div>
                        </div>
                        <div class="col-12">
                            <div class="text-muted small">Address</div>
                            <div class="fw-semibold" id="driverAddress">-</div>
                        </div>
                        <div class="col-12">
                            <div class="text-muted small">Remarks</div>
                            <div class="fw-semibold" id="remarks">-</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">License Details</h5>
                    <button type="button" class="btn btn-primary btn-sm" id="btnAddRenewal">Add Renewal</button>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="text-muted small">License Number</div>
                            <div class="fw-semibold" id="licenseNumber">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">Category</div>
                            <div class="fw-semibold" id="licenseCategory">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">Issued Date</div>
                            <div class="fw-semibold" id="issuedDate">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">First Issue</div>
                            <div class="fw-semibold" id="firstIssueDate">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">Notification Date</div>
                            <div class="fw-semibold" id="notificationDate">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">License Status</div>
                            <div class="fw-semibold" id="licenseStatus">-</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-white">
                    <h5 class="mb-0">License Renewal History</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table align-middle table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>License No</th>
                                    <th>Category</th>
                                    <th>Issued</th>
                                    <th>Valid Until</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="licenseHistoryTable">
                                <tr><td colspan="6" class="text-center text-muted">Loading renewal history...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm border-0">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Emergency Contacts</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-12 mb-3">
                            <div class="text-muted small fw-semibold">Driver Photo</div>
                            <div id="profileDriverPicContainer">
                                <div class="driver-pic-placeholder">
                                    <i class="bi bi-person-circle"></i>
                </div>
                </div>
            </div>
                        <div class="col-6">
                            <div class="text-muted small">Next of Kin</div>
                            <div class="fw-semibold" id="nextOfKinName">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">Next of Kin Phone</div>
                            <div class="fw-semibold" id="nextOfKinPhone">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">Guarantor</div>
                            <div class="fw-semibold" id="guarantorName">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">Guarantor Phone</div>
                            <div class="fw-semibold" id="guarantorPhone">-</div>
                        </div>
                        <div class="col-12">
                            <div class="text-muted small">Guarantor Address</div>
                            <div class="fw-semibold" id="guarantorAddress">-</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mt-2">
        <div class="col-12">
            <ul class="nav nav-tabs" id="driverExtrasTabs">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#medicalTab">Medical Records</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#certTab">Certifications</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#trainingTab">Training</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#violationTab">Violations</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#offDutyTab">Off Duty</a>
                </li>
            </ul>

            <div class="tab-content border border-top-0 rounded-bottom p-3 bg-white shadow-sm">
                <div class="tab-pane fade show active" id="medicalTab">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0">Medical Examination Records</h5>
                        <button type="button" class="btn btn-primary btn-sm" id="btnAddMedical">Add Record</button>
                    </div>
                    <div class="table-responsive">
                        <table class="table align-middle table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Type</th>
                                    <th>Date</th>
                                    <th>Performed By</th>
                                    <th>Status</th>
                                    <th>Valid Until</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="medicalTable">
                                <tr><td colspan="6" class="text-center text-muted">Loading...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="tab-pane fade" id="certTab">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0">Certifications & Endorsements</h5>
                        <button type="button" class="btn btn-primary btn-sm" id="btnAddCert">Add Certification</button>
                    </div>
                    <div class="table-responsive">
                        <table class="table align-middle table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th>Issuing Authority</th>
                                    <th>Expiry</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="certTable">
                                <tr><td colspan="6" class="text-center text-muted">Loading...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="tab-pane fade" id="trainingTab">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0">Training History</h5>
                        <button type="button" class="btn btn-primary btn-sm" id="btnAddTraining">Add Training</button>
                    </div>
                    <div class="table-responsive">
                        <table class="table align-middle table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th>Provider</th>
                                    <th>Date</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="trainingTable">
                                <tr><td colspan="6" class="text-center text-muted">Loading...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="tab-pane fade" id="violationTab">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0">Traffic Violations</h5>
                        <button type="button" class="btn btn-primary btn-sm" id="btnAddViolation">Add Violation</button>
                    </div>
                    <div class="table-responsive">
                        <table class="table align-middle table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Type</th>
                                    <th>Date</th>
                                    <th>Location</th>
                                    <th>Points</th>
                                    <th>Fine</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="violationTable">
                                <tr><td colspan="7" class="text-center text-muted">Loading...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="tab-pane fade" id="offDutyTab">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0">Monthly Off-Duty Days <span class="badge bg-info ms-2">Max 5 / month</span></h5>
                        <div class="d-flex gap-2 align-items-center">
                            <input type="month" id="offDutyMonth" class="form-control form-control-sm" style="max-width:200px">
                            <button type="button" class="btn btn-primary btn-sm" id="btnAddOffDuty">Add Off Day</button>
                        </div>
                    </div>
                    <div id="offDutySummary" class="row g-2 mb-3"></div>
                    <div class="table-responsive">
                        <table class="table align-middle table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Date</th>
                                    <th>Reason</th>
                                    <th>Notes</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="offDutyTable">
                                <tr><td colspan="4" class="text-center text-muted">Loading...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</main>

<!-- Medical Modal -->
<div class="modal fade" id="medicalModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="medicalModalTitle">Add Medical Record</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="medicalForm">
                    <input type="hidden" id="medical_id">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="medical_examination_type" class="form-label">Examination Type</label>
                            <select id="medical_examination_type" class="form-select" required>
                                <option value="">Select type...</option>
                                <option value="Vision Test">Vision Test</option>
                                <option value="Hearing Test">Hearing Test</option>
                                <option value="Physical Examination">Physical Examination</option>
                                <option value="Blood Pressure">Blood Pressure</option>
                                <option value="Drug Test">Drug Test</option>
                                <option value="Alcohol Test">Alcohol Test</option>
                                <option value="Psychological Evaluation">Psychological Evaluation</option>
                                <option value="General Medical">General Medical</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="medical_examination_date" class="form-label">Examination Date</label>
                            <input type="date" id="medical_examination_date" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label for="medical_performed_by" class="form-label">Performed By</label>
                            <input type="text" id="medical_performed_by" class="form-control" placeholder="Doctor / Clinic">
                        </div>
                        <div class="col-md-6">
                            <label for="medical_status" class="form-label">Result Status</label>
                            <select id="medical_status" class="form-select">
                                <option value="fit">Fit</option>
                                <option value="unfit">Unfit</option>
                                <option value="conditional">Conditional</option>
                                <option value="pending">Pending</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="medical_valid_until" class="form-label">Valid Until</label>
                            <input type="date" id="medical_valid_until" class="form-control">
                        </div>
                        <div class="col-12">
                            <label for="medical_results" class="form-label">Results</label>
                            <textarea id="medical_results" class="form-control" rows="2"></textarea>
                        </div>
                        <div class="col-12">
                            <label for="medical_notes" class="form-label">Notes</label>
                            <textarea id="medical_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="saveMedical">Save Record</button>
            </div>
        </div>
    </div>
</div>

<!-- Certification Modal -->
<div class="modal fade" id="certModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="certModalTitle">Add Certification</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="certForm">
                    <input type="hidden" id="cert_id">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="cert_type" class="form-label">Certification Type</label>
                            <select id="cert_type" class="form-select" required>
                                <option value="">Select type...</option>
                                <option value="Defensive Driving">Defensive Driving</option>
                                <option value="Hazardous Materials">Hazardous Materials</option>
                                <option value="First Aid">First Aid</option>
                                <option value="Fleet Safety">Fleet Safety</option>
                                <option value="Advanced Driving">Advanced Driving</option>
                                <option value="Vehicle Inspection">Vehicle Inspection</option>
                                <option value="Fire Safety">Fire Safety</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="cert_name" class="form-label">Certification Name</label>
                            <input type="text" id="cert_name" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label for="cert_authority" class="form-label">Issuing Authority</label>
                            <input type="text" id="cert_authority" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label for="cert_number" class="form-label">Certification Number</label>
                            <input type="text" id="cert_number" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label for="cert_issued_date" class="form-label">Issued Date</label>
                            <input type="date" id="cert_issued_date" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label for="cert_expiry_date" class="form-label">Expiry Date</label>
                            <input type="date" id="cert_expiry_date" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label for="cert_status" class="form-label">Status</label>
                            <select id="cert_status" class="form-select">
                                <option value="active">Active</option>
                                <option value="expired">Expired</option>
                                <option value="suspended">Suspended</option>
                                <option value="revoked">Revoked</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <label for="cert_notes" class="form-label">Notes</label>
                            <textarea id="cert_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="saveCert">Save Certification</button>
            </div>
        </div>
    </div>
</div>

<!-- Training Modal -->
<div class="modal fade" id="trainingModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="trainingModalTitle">Add Training Record</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="trainingForm">
                    <input type="hidden" id="training_id">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="training_type" class="form-label">Training Type</label>
                            <select id="training_type" class="form-select" required>
                                <option value="">Select type...</option>
                                <option value="In-House">In-House</option>
                                <option value="External">External</option>
                                <option value="Online">Online</option>
                                <option value="On-the-Job">On-the-Job</option>
                                <option value="Workshop">Workshop</option>
                                <option value="Seminar">Seminar</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="training_name" class="form-label">Training Name</label>
                            <input type="text" id="training_name" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label for="training_provider" class="form-label">Provider</label>
                            <input type="text" id="training_provider" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label for="training_duration_hours" class="form-label">Duration (hours)</label>
                            <input type="number" id="training_duration_hours" class="form-control" step="0.5" min="0">
                        </div>
                        <div class="col-md-6">
                            <label for="training_date" class="form-label">Training Date</label>
                            <input type="date" id="training_date" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label for="training_completion_date" class="form-label">Completion Date</label>
                            <input type="date" id="training_completion_date" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label for="training_status" class="form-label">Status</label>
                            <select id="training_status" class="form-select">
                                <option value="completed">Completed</option>
                                <option value="in_progress">In Progress</option>
                                <option value="withdrawn">Withdrawn</option>
                                <option value="cancelled">Cancelled</option>
                            </select>
                        </div>
                        <div class="col-md-6 d-flex align-items-center">
                            <div class="form-check mt-4">
                                <input type="checkbox" id="training_certificate_issued" class="form-check-input" value="1">
                                <label for="training_certificate_issued" class="form-check-label">Certificate Issued</label>
                </div>

                <div class="tab-pane fade" id="offDutyTab">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0">Monthly Off-Duty Days <span class="badge bg-info ms-2">Max 5 / month</span></h5>
                        <div class="d-flex gap-2 align-items-center">
                            <input type="month" id="offDutyMonth" class="form-control form-control-sm" style="max-width:200px">
                            <button type="button" class="btn btn-primary btn-sm" id="btnAddOffDuty">Add Off Day</button>
                        </div>
                    </div>
                    <div id="offDutySummary" class="row g-2 mb-3"></div>
                    <div class="table-responsive">
                        <table class="table align-middle table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Date</th>
                                    <th>Reason</th>
                                    <th>Notes</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="offDutyTable">
                                <tr><td colspan="4" class="text-center text-muted">Loading...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
                        <div class="col-12">
                            <label for="training_notes" class="form-label">Notes</label>
                            <textarea id="training_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="saveTraining">Save Training</button>
            </div>
        </div>
    </div>
</div>

<!-- Violation Modal -->
<div class="modal fade" id="violationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="violationModalTitle">Add Violation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="violationForm">
                    <input type="hidden" id="violation_id">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="violation_type" class="form-label">Violation Type</label>
                            <select id="violation_type" class="form-select" required>
                                <option value="">Select type...</option>
                                <option value="Speeding">Speeding</option>
                                <option value="Parking">Parking</option>
                                <option value="Reckless Driving">Reckless Driving</option>
                                <option value="DUI">DUI / Alcohol</option>
                                <option value="Traffic Light">Traffic Light Violation</option>
                                <option value="Overloading">Overloading</option>
                                <option value="No License">Driving Without License</option>
                                <option value="Expired Documents">Expired Documents</option>
                                <option value="Seatbelt">Seatbelt Violation</option>
                                <option value="Phone">Phone While Driving</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="violation_date" class="form-label">Violation Date</label>
                            <input type="date" id="violation_date" class="form-control" required>
                        </div>
                        <div class="col-12">
                            <label for="violation_offense" class="form-label">Offense Description</label>
                            <textarea id="violation_offense" class="form-control" rows="2"></textarea>
                        </div>
                        <div class="col-md-6">
                            <label for="violation_location" class="form-label">Location</label>
                            <input type="text" id="violation_location" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label for="violation_police_report" class="form-label">Police Report #</label>
                            <input type="text" id="violation_police_report" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label for="violation_points" class="form-label">Penalty Points</label>
                            <input type="number" id="violation_points" class="form-control" min="0" value="0">
                        </div>
                        <div class="col-md-4">
                            <label for="violation_fine" class="form-label">Fine Amount (₦)</label>
                            <input type="number" id="violation_fine" class="form-control" min="0" step="0.01" value="0">
                        </div>
                        <div class="col-md-4">
                            <label for="violation_status" class="form-label">Status</label>
                            <select id="violation_status" class="form-select">
                                <option value="pending">Pending</option>
                                <option value="paid">Paid</option>
                                <option value="contested">Contested</option>
                                <option value="resolved">Resolved</option>
                                <option value="waived">Waived</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="violation_resolution_date" class="form-label">Resolution Date</label>
                            <input type="date" id="violation_resolution_date" class="form-control">
                        </div>
                        <div class="col-12">
                            <label for="violation_notes" class="form-label">Notes</label>
                            <textarea id="violation_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="saveViolation">Save Violation</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="licenseRenewalModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="licenseRenewalModalTitle">Add License Renewal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="licenseRenewalForm">
                    <input type="hidden" id="renewal_id">

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="renewal_license_number" class="form-label">License Number</label>
                            <input type="text" id="renewal_license_number" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label for="renewal_category" class="form-label">Category</label>
                            <input type="text" id="renewal_category" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label for="renewal_issued_date" class="form-label">Issued Date</label>
                            <input type="date" id="renewal_issued_date" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label for="renewal_valid_until" class="form-label">Expiry Date</label>
                            <input type="date" id="renewal_valid_until" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label for="renewal_first_issue_date" class="form-label">First Issue Date</label>
                            <input type="date" id="renewal_first_issue_date" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label for="renewal_notification_date" class="form-label">Notification Date</label>
                            <input type="date" id="renewal_notification_date" class="form-control">
                        </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="saveRenewal">Save Renewal</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="offDutyModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="offDutyModalTitle">Add Off-Duty Day</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="offDutyForm">
                    <input type="hidden" id="off_duty_id">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="off_duty_date" class="form-label">Date <span class="text-danger">*</span></label>
                            <input type="date" id="off_duty_date" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label for="off_duty_reason" class="form-label">Reason</label>
                            <select id="off_duty_reason" class="form-select">
                                <option value="">Select reason</option>
                                <option value="Annual Leave">Annual Leave</option>
                                <option value="Sick Leave">Sick Leave</option>
                                <option value="Off Duty">Off Duty</option>
                                <option value="Personal">Personal</option>
                                <option value="Public Holiday">Public Holiday</option>
                                <option value="Training">Training</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <label for="off_duty_notes" class="form-label">Notes</label>
                            <textarea id="off_duty_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="saveOffDuty">Save</button>
            </div>
        </div>
    </div>
</div>

<script>
const DRIVER_ID = <?= (int)$id ?>;
</script>

<?php include 'views/layouts/footer.php'; ?>
