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

$userName = $_SESSION['user_name'] ?? 'User';
$page_js = 'drivers.js';

include 'views/layouts/header.php';
include 'views/layouts/sidebar.php';
?>

<style>
    .drivers-shell {
        --drivers-bg: linear-gradient(135deg, #f5f8ff 0%, #eef6f4 100%);
        --drivers-accent: #0f766e;
        --drivers-accent-soft: #ccfbf1;
        --drivers-ink: #0f172a;
        --drivers-muted: #64748b;
    }

    .drivers-shell {
        background: var(--drivers-bg);
        border-radius: 20px;
        padding: 1.2rem;
    }

    .drivers-hero {
        background: radial-gradient(circle at top right, #e0f2fe 0%, #ffffff 46%, #f8fafc 100%);
        border: 1px solid #dbeafe;
        border-radius: 18px;
        padding: 1.25rem;
    }

    .drivers-hero h1 {
        font-size: clamp(1.4rem, 2.2vw, 2rem);
        color: var(--drivers-ink);
        margin-bottom: .35rem;
    }

    .drivers-hero p {
        color: var(--drivers-muted);
        margin-bottom: 0;
    }

    .kpi-card {
        border-radius: 14px;
        transition: transform .15s ease, box-shadow .15s ease;
    }

    .kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    }

    .kpi-label {
        font-size: .76rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--drivers-muted);
        font-weight: 600;
    }

    .kpi-value {
        font-size: clamp(1.4rem, 2.2vw, 1.9rem);
        color: var(--drivers-ink);
        font-weight: 700;
    }

    .kpi-icon {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: var(--drivers-accent-soft);
        font-size: 1.2rem;
    }

    .drivers-panel {
        border-radius: 18px;
        border: 1px solid #e2e8f0;
    }

    .drivers-toolbar .form-control {
        min-width: 220px;
    }

    #driverTable td {
        vertical-align: middle;
    }

    .driver-pic-list {
        width: 36px;
        height: 36px;
        border-radius: 999px;
        object-fit: cover;
    }

    @media (max-width: 768px) {
        .drivers-shell {
            border-radius: 14px;
            padding: .8rem;
        }

        .drivers-toolbar .form-control {
            min-width: 0;
        }
    }
</style>

<main class="main-content">
    <?php include 'views/layouts/topbar.php'; ?>

    <div class="container-fluid p-3 p-md-4">
        <div class="drivers-shell">
            <div class="drivers-hero mb-4 d-flex flex-column flex-lg-row justify-content-between gap-3 align-items-lg-center">
                <div>
                    <h1>Driver Management Hub</h1>
                    <p>Track driver records, licensing health, and status updates from one workspace.</p>
                </div>
                <div class="d-flex gap-2 flex-wrap">
                    <button class="btn btn-outline-secondary" id="btnRefreshDrivers" type="button">
                        <i class="bi bi-arrow-clockwise me-1"></i>Refresh
                    </button>
                    <div class="btn-group" role="group">
                        <button class="btn btn-outline-secondary" id="btnExportDriversCsv" title="CSV"><i class="bi bi-filetype-csv"></i></button>
                        <button class="btn btn-outline-secondary" id="btnExportDriversXlsx" title="Excel"><i class="bi bi-file-earmark-excel"></i></button>
                        <button class="btn btn-outline-secondary" id="btnExportDriversPdf" title="PDF"><i class="bi bi-filetype-pdf"></i></button>
                    </div>
                    <button class="btn btn-primary" id="btnAddDriver" type="button">
                        <i class="bi bi-plus-lg me-1"></i>Add Driver
                    </button>
                </div>
            </div>

            <div class="row g-3 mb-4">
                <div class="col-12 col-md-6 col-xl">
                    <div class="card kpi-card shadow-sm border-0 h-100" data-filter="total">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="kpi-label">Total Drivers</div>
                                    <div class="kpi-value" id="kpiDriversTotal">0</div>
                                </div>
                                <div class="kpi-icon text-primary"><i class="bi bi-people"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl">
                    <div class="card kpi-card shadow-sm border-0 h-100" data-filter="active">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="kpi-label">Active Drivers</div>
                                    <div class="kpi-value" id="kpiDriversActive">0</div>
                                </div>
                                <div class="kpi-icon text-success"><i class="bi bi-person-check"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl">
                    <div class="card kpi-card shadow-sm border-0 h-100" data-filter="inactive">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="kpi-label">Inactive Drivers</div>
                                    <div class="kpi-value" id="kpiDriversInactive">0</div>
                                </div>
                                <div class="kpi-icon text-secondary"><i class="bi bi-person-dash"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl">
                    <div class="card kpi-card shadow-sm border-0 h-100" data-filter="expiring_soon">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="kpi-label">Expiring Soon</div>
                                    <div class="kpi-value" id="kpiDriversExpiring">0</div>
                                </div>
                                <div class="kpi-icon text-warning"><i class="bi bi-exclamation-triangle"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl">
                    <div class="card kpi-card shadow-sm border-0 h-100" data-filter="expired">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="kpi-label">Expired Licenses</div>
                                    <div class="kpi-value" id="kpiDriversExpired">0</div>
                                </div>
                                <div class="kpi-icon text-danger"><i class="bi bi-x-circle"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card drivers-panel shadow-sm bg-white">
                <div class="card-header bg-white border-0 pb-0">
                    <div class="d-flex flex-column flex-lg-row justify-content-between gap-3 align-items-lg-center drivers-toolbar">
                        <div>
                            <h4 class="mb-1">Drivers</h4>
                            <p class="text-muted mb-0">Manage profile details, contacts, and license expiry visibility.</p>
                        </div>
                        <div class="d-flex flex-column flex-sm-row gap-2 w-100 w-lg-auto">
                            <input type="text" id="searchDriver" class="form-control" placeholder="Search name, phone or email">
                        </div>
                    </div>
                </div>
                <div class="card-body pt-3">
                    <div class="table-responsive">
                        <table class="table align-middle table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Driver</th>
                                    <th>Contact</th>
                                    <th>License</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="driverTable">
                                <tr>
                                    <td colspan="5" class="text-center text-muted py-4">Loading drivers...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<div class="modal fade" id="driverModal" 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">
                <h5 class="modal-title" id="driverModalTitle">Add Driver</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="driverForm">
                    <input type="hidden" id="driver_id">

                    <div class="row g-3">
                        <div class="col-12">
                            <h6 class="text-uppercase text-muted mb-1">Identity</h6>
                        </div>

                        <div class="col-md-4">
                            <label for="driver_id_code" class="form-label">Driver Code</label>
                            <input type="text" id="driver_id_code" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label for="driver_status" class="form-label">Driver Status</label>
                            <select id="driver_status" class="form-select">
                                <option value="Active">Active</option>
                                <option value="Inactive">Inactive</option>
                                <option value="Suspended">Suspended</option>
                                <option value="Exited">Exited</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="driver_active_status" class="form-label">Active Flag</label>
                            <select id="driver_active_status" class="form-select">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label for="driver_surname" class="form-label">Surname</label>
                            <input type="text" id="driver_surname" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label for="driver_first_name" class="form-label">First Name</label>
                            <input type="text" id="driver_first_name" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label for="driver_other_name" class="form-label">Other Name</label>
                            <input type="text" id="driver_other_name" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label for="driver_full_name" class="form-label">Full Name</label>
                            <input type="text" id="driver_full_name" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label for="driver_photo" class="form-label">Profile Picture</label>
                            <input type="file" id="driver_photo" class="form-control" accept="image/*">
                            <div id="driverPhotoPreview" class="mt-2" style="display:none;">
                                <img id="photoPreviewImg" class="rounded" style="max-width:120px;max-height:120px;">
                            </div>
                        </div>

                        <div class="col-12 mt-2">
                            <h6 class="text-uppercase text-muted mb-1">Contact & Employment</h6>
                        </div>

                        <div class="col-md-6">
                            <label for="driver_phone" class="form-label">Phone</label>
                            <input type="text" id="driver_phone" class="form-control">
                        </div>
                        <div class="col-12">
                            <label for="driver_address" class="form-label">Address</label>
                            <input type="text" id="driver_address" class="form-control">
                        </div>

                        <div class="col-md-3">
                            <label for="driver_date_of_birth" class="form-label">Date of Birth</label>
                            <input type="date" id="driver_date_of_birth" class="form-control">
                        </div>
                        <div class="col-md-3">
                            <label for="driver_resumption_date" class="form-label">Resumption Date</label>
                            <input type="date" id="driver_resumption_date" class="form-control">
                        </div>
                        <div class="col-md-3">
                            <label for="driver_confirmation_date" class="form-label">Confirmation Date</label>
                            <input type="date" id="driver_confirmation_date" class="form-control">
                        </div>
                        <div class="col-md-3">
                            <label for="driver_exit_date" class="form-label">Exit Date</label>
                            <input type="date" id="driver_exit_date" class="form-control">
                        </div>

                        <div class="col-12">
                            <label for="driver_remarks" class="form-label">Remarks</label>
                            <textarea id="driver_remarks" class="form-control" rows="2"></textarea>
                        </div>

                        <div class="col-12 mt-2">
                            <h6 class="text-uppercase text-muted mb-1">License</h6>
                        </div>

                        <div class="col-md-6">
                            <label for="driver_license_number" class="form-label">License Number</label>
                            <input type="text" id="driver_license_number" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label for="driver_license_valid_until" class="form-label">License Valid Until</label>
                            <input type="date" id="driver_license_valid_until" class="form-control">
                        </div>

                        <div class="col-12 mt-2">
                            <h6 class="text-uppercase text-muted mb-1">Emergency Contact</h6>
                        </div>

                        <div class="col-md-6">
                            <label for="next_of_kin_name" class="form-label">Next of Kin Name</label>
                            <input type="text" id="next_of_kin_name" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label for="next_of_kin_phone" class="form-label">Next of Kin Phone</label>
                            <input type="text" id="next_of_kin_phone" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label for="guarantor_name" class="form-label">Guarantor Name</label>
                            <input type="text" id="guarantor_name" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label for="guarantor_phone" class="form-label">Guarantor Phone</label>
                            <input type="text" id="guarantor_phone" class="form-control">
                        </div>
                        <div class="col-12">
                            <label for="guarantor_address" class="form-label">Guarantor Address</label>
                            <input type="text" id="guarantor_address" 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="saveDriver">Save Driver</button>
            </div>
        </div>
    </div>
</div>

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