<?php
/**
 * kelola_supir.php - Halaman Kelola Supir untuk Admin
 * DIPERBAIKI - Detail supir dengan modal popup + fitur lengkap
 */
include __DIR__ . '/../layouts/header.php';
$activeMenu = 'kelolaSupir';

$supir = $supir ?? [];
$kapal = $kapal ?? [];
$pendingCount = $pendingCount ?? 0;
$pendingHapusCount = $pendingHapusCount ?? 0;
$pendingPayments = $pendingPayments ?? [];
$pendingClaims = $pendingClaims ?? [];
?>

<!-- Tambahkan Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<div class="dashboard-wrapper">
    <!-- SIDEBAR -->
    <?php include __DIR__ . '/includes/sidebar_admin.php'; ?>

    <!-- MAIN CONTENT -->
    <main class="main-content">
        <div class="content-header">
            <h2><i class="fas fa-users" style="color:var(--primary);"></i> Kelola Supir </h2>
            <p>Daftar semua pemilik kapal yang terdaftar di sistem. Total: <strong><?= count($supir) ?></strong> supir.</p>
        </div>

        <!-- STATISTIK CARD -->
        <div class="stats-mini">
            <div class="stat-mini-item">
                <span class="stat-mini-number"><?= count($supir) ?></span>
                <span class="stat-mini-label"><i class="fas fa-users"></i> Total Supir</span>
            </div>
            <div class="stat-mini-item">
                <span class="stat-mini-number" style="color:#22c55e;"><?= count(array_filter($supir, fn($s) => $s['is_active'] == 1)) ?></span>
                <span class="stat-mini-label"><i class="fas fa-check-circle" style="color:#22c55e;"></i> Aktif</span>
            </div>
            <div class="stat-mini-item">
                <span class="stat-mini-number" style="color:#ef4444;"><?= count(array_filter($supir, fn($s) => $s['is_active'] == 0)) ?></span>
                <span class="stat-mini-label"><i class="fas fa-times-circle" style="color:#ef4444;"></i> Nonaktif</span>
            </div>
            <div class="stat-mini-item">
                <span class="stat-mini-number" style="color:#3b82f6;"><?= count($kapal ?? []) ?></span>
                <span class="stat-mini-label"><i class="fas fa-ship" style="color:#3b82f6;"></i> Total Kapal</span>
            </div>
        </div>

        <!-- FILTER & SEARCH -->
        <div class="filter-section">
            <div class="filter-row">
                <div class="filter-group">
                    <label><i class="fas fa-search"></i> Cari</label>
                    <input type="text" id="searchInput" placeholder="Cari nama atau email..." onkeyup="filterTable()">
                </div>
                <div class="filter-group">
                    <label><i class="fas fa-filter"></i> Status</label>
                    <select id="statusFilter" onchange="filterTable()">
                        <option value="all">Semua Status</option>
                        <option value="1"><i class="fas fa-check-circle" style="color:#22c55e;"></i> Aktif</option>
                        <option value="0"><i class="fas fa-times-circle" style="color:#ef4444;"></i> Nonaktif</option>
                    </select>
                </div>
                <div class="filter-group" style="flex:0.5;">
                    <label>&nbsp;</label>
                    <button class="btn btn-secondary" onclick="resetFilter()"><i class="fas fa-undo"></i> Reset</button>
                </div>
            </div>
        </div>

        <!-- DAFTAR SUPIR -->
        <?php if(empty($supir)): ?>
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i> Belum ada supir / pemilik kapal terdaftar.
            </div>
        <?php else: ?>
            <div class="table-wrapper">
                <table id="supirTable">
                    <thead>
                        <tr>
                            <th><i class="fas fa-hashtag"></i> #</th>
                            <th><i class="fas fa-user"></i> Nama</th>
                            <th><i class="fas fa-envelope"></i> Email</th>
                            <th><i class="fas fa-phone"></i> No HP</th>
                            <th><i class="fas fa-ship"></i> Jumlah Kapal</th>
                            <th><i class="fas fa-info-circle"></i> Status</th>
                            <th><i class="fas fa-cog"></i> Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach($supir as $i => $s): 
                            // Hitung jumlah kapal milik supir
                            $stmt = $this->pdo->prepare("SELECT COUNT(*) as total FROM kapal WHERE pemilik_id = ?");
                            $stmt->execute([$s['id']]);
                            $totalKapal = $stmt->fetch(PDO::FETCH_ASSOC)['total'];
                        ?>
                            <tr data-id="<?= $s['id'] ?>"
                                data-nama="<?= strtolower($s['nama']) ?>" 
                                data-email="<?= strtolower($s['email']) ?>" 
                                data-status="<?= $s['is_active'] ?>">
                                <td><?= $i+1 ?></td>
                                <td>
                                    <div style="display:flex; align-items:center; gap:0.5rem;">
                                        <span style="display:inline-flex; width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg, var(--primary), var(--primary-light)); color:#fff; align-items:center; justify-content:center; font-weight:700; font-size:0.75rem;">
                                            <?= strtoupper(substr($s['nama'], 0, 2)) ?>
                                        </span>
                                        <?= htmlspecialchars($s['nama']) ?>
                                    </div>
                                </td>
                                <td>
                                    <div style="display:flex; align-items:center; gap:0.3rem;">
                                        <i class="fas fa-envelope" style="color:var(--gray-400); font-size:0.7rem;"></i>
                                        <?= htmlspecialchars($s['email']) ?>
                                    </div>
                                </td>
                                <td>
                                    <div style="display:flex; align-items:center; gap:0.3rem;">
                                        <i class="fas fa-phone" style="color:var(--gray-400); font-size:0.7rem;"></i>
                                        <?= htmlspecialchars($s['no_hp']) ?>
                                    </div>
                                </td>
                                <td>
                                    <div style="display:flex; align-items:center; gap:0.3rem;">
                                        <i class="fas fa-ship" style="color:var(--primary);"></i>
                                        <strong><?= $totalKapal ?></strong>
                                    </div>
                                </td>
                                <td>
                                    <?php if($s['is_active']): ?>
                                        <span class="badge badge-success"><i class="fas fa-check-circle"></i> Aktif</span>
                                    <?php else: ?>
                                        <span class="badge badge-danger"><i class="fas fa-times-circle"></i> Nonaktif</span>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <div class="action-group">
                                        <?php if($s['is_active']): ?>
                                            <button onclick="toggleStatus(<?= $s['id'] ?>, 0)" class="btn btn-sm btn-danger">
                                                <i class="fas fa-ban"></i> Nonaktifkan
                                            </button>
                                        <?php else: ?>
                                            <button onclick="toggleStatus(<?= $s['id'] ?>, 1)" class="btn btn-sm btn-success">
                                                <i class="fas fa-check"></i> Aktifkan
                                            </button>
                                        <?php endif; ?>
                                        <button onclick="openDetail(<?= $s['id'] ?>)" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> Detail
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        <?php endif; ?>

        <!-- INFORMASI TAMBAHAN -->
        <div class="info-extra">
            <div class="info-extra-item">
                <i class="fas fa-ship" style="color:var(--primary);"></i>
                <span>Total kapal terdaftar: <strong><?= count($kapal ?? []) ?></strong></span>
            </div>
            <div class="info-extra-item">
                <i class="fas fa-check-circle" style="color:#22c55e;"></i>
                <span>Supir aktif: <strong><?= count(array_filter($supir, fn($s) => $s['is_active'] == 1)) ?></strong></span>
            </div>
            <div class="info-extra-item">
                <i class="fas fa-times-circle" style="color:#ef4444;"></i>
                <span>Supir nonaktif: <strong><?= count(array_filter($supir, fn($s) => $s['is_active'] == 0)) ?></strong></span>
            </div>
        </div>
    </main>
</div>

<!-- MODAL DETAIL SUPIR -->
<div class="modal-overlay" id="detailModal">
    <div class="modal-box">
        <div class="modal-header">
            <h3><i class="fas fa-id-card" style="color:var(--primary);"></i> Detail Supir</h3>
            <button class="modal-close-btn" onclick="closeModal()">&times;</button>
        </div>
        <div class="modal-body" id="modalBody">
            <div class="loading-text">
                <i class="fas fa-spinner fa-spin"></i> Memuat data...
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal()"><i class="fas fa-times"></i> Tutup</button>
        </div>
    </div>
</div>

<!-- MODAL KONFIRMASI TOGGLE STATUS -->
<div class="modal-overlay" id="confirmModal">
    <div class="modal-box modal-confirm">
        <div class="modal-header">
            <h3><i class="fas fa-exclamation-triangle" style="color:#f59e0b;"></i> Konfirmasi</h3>
            <button class="modal-close-btn" onclick="closeConfirmModal()">&times;</button>
        </div>
        <div class="modal-body" id="confirmBody">
            <p id="confirmMessage">Apakah Anda yakin ingin mengubah status supir ini?</p>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeConfirmModal()"><i class="fas fa-times"></i> Batal</button>
            <button class="btn btn-primary" id="confirmActionBtn" onclick="executeToggle()"><i class="fas fa-check"></i> Ya, Lanjutkan</button>
        </div>
    </div>
</div>

<style>
    /* ============================================
       LAYOUT
       ============================================ */
    .dashboard-wrapper {
        display: flex;
        gap: 24px;
        max-width: 1200px;
        margin: 1.5rem auto 0;
        padding: 0 20px;
        width: 100%;
        flex: 1;
        align-items: flex-start;
    }

    .main-content {
        flex: 1;
        min-width: 0;
        background: #fff;
        border-radius: 14px;
        padding: 1.8rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        border: 1px solid var(--gray-200);
    }

    .content-header {
        margin-bottom: 1.5rem;
    }

    .content-header h2 {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 0.2rem;
    }

    .content-header p {
        color: var(--gray-500);
        font-size: 0.95rem;
    }

    /* ============================================
       STATS MINI
       ============================================ */
    .stats-mini {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.8rem;
        margin-bottom: 1.5rem;
    }

    .stat-mini-item {
        background: #fff;
        padding: 0.6rem 0.8rem;
        border-radius: 10px;
        border: 1px solid var(--gray-200);
        text-align: center;
        transition: var(--transition);
    }

    .stat-mini-item:hover {
        border-color: var(--primary);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    .stat-mini-number {
        font-size: 1.3rem;
        font-weight: 700;
        display: block;
        line-height: 1.2;
        color: var(--gray-900);
    }

    .stat-mini-label {
        font-size: 0.7rem;
        color: var(--gray-500);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
    }

    /* ============================================
       FILTER SECTION
       ============================================ */
    .filter-section {
        background: #fff;
        border-radius: 14px;
        padding: 1.2rem 1.5rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.04);
        border: 1px solid var(--gray-200);
        margin-bottom: 1.5rem;
    }

    .filter-row {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .filter-group {
        flex: 1;
        min-width: 160px;
    }

    .filter-group label {
        display: block;
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--gray-500);
        margin-bottom: 0.2rem;
        display: flex;
        align-items: center;
        gap: 0.3rem;
    }

    .filter-group input,
    .filter-group select {
        width: 100%;
        padding: 0.5rem 0.8rem;
        border: 1.5px solid var(--gray-200);
        border-radius: 8px;
        font-size: 0.9rem;
        background: var(--gray-50);
        transition: var(--transition);
        font-family: inherit;
    }

    .filter-group input:focus,
    .filter-group select:focus {
        outline: none;
        border-color: var(--primary);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(15,59,94,0.08);
    }

    /* ============================================
       TABLE
       ============================================ */
    .table-wrapper {
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.04);
        border: 1px solid var(--gray-200);
        overflow-x: auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9rem;
        min-width: 700px;
    }

    table th {
        background: var(--gray-50);
        color: var(--gray-700);
        font-weight: 600;
        padding: 0.7rem 1rem;
        text-align: left;
        border-bottom: 2px solid var(--gray-200);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        white-space: nowrap;
    }

    table th i {
        margin-right: 0.2rem;
        opacity: 0.6;
    }

    table td {
        padding: 0.7rem 1rem;
        border-bottom: 1px solid var(--gray-100);
        vertical-align: middle;
    }

    table tr:hover td {
        background: var(--gray-50);
    }

    table tr.hidden {
        display: none;
    }

    /* ============================================
       BADGE
       ============================================ */
    .badge {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        padding: 0.15rem 0.6rem;
        border-radius: 20px;
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .badge-success {
        background: #d1fae5;
        color: #065f46;
    }

    .badge-danger {
        background: #fee2e2;
        color: #991b1b;
    }

    /* ============================================
       ALERT
       ============================================ */
    .alert-info {
        background: #dbeafe;
        color: #1e40af;
        border-left: 4px solid var(--primary);
        padding: 1.2rem 1.5rem;
        border-radius: 12px;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* ============================================
       INFO EXTRA
       ============================================ */
    .info-extra {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
        margin-top: 1rem;
        padding: 0.8rem 1rem;
        background: var(--gray-50);
        border-radius: 10px;
        border: 1px solid var(--gray-200);
    }

    .info-extra-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.85rem;
        color: var(--gray-600);
    }

    .info-extra-item i {
        font-size: 1rem;
    }

    /* ============================================
       BUTTONS
       ============================================ */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 1rem;
        border: none;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.8rem;
        cursor: pointer;
        transition: var(--transition);
        text-decoration: none;
    }

    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .btn-success {
        background: #22c55e;
        color: #fff;
    }

    .btn-success:hover {
        background: #16a34a;
        color: #fff;
    }

    .btn-danger {
        background: #ef4444;
        color: #fff;
    }

    .btn-danger:hover {
        background: #dc2626;
        color: #fff;
    }

    .btn-secondary {
        background: var(--gray-200);
        color: var(--gray-700);
    }

    .btn-secondary:hover {
        background: var(--gray-300);
        color: var(--gray-800);
    }

    .btn-info {
        background: #3b82f6;
        color: #fff;
    }

    .btn-info:hover {
        background: #2563eb;
        color: #fff;
    }

    .btn-primary {
        background: var(--primary);
        color: #fff;
    }

    .btn-primary:hover {
        background: var(--primary-dark);
        color: #fff;
    }

    .btn-sm {
        padding: 0.2rem 0.6rem;
        font-size: 0.7rem;
    }

    .action-group {
        display: flex;
        gap: 0.3rem;
        flex-wrap: wrap;
    }

    /* ============================================
       MODAL
       ============================================ */
    .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        backdrop-filter: blur(4px);
        z-index: 1000;
        justify-content: center;
        align-items: center;
        animation: fadeIn 0.3s ease;
    }

    .modal-overlay.show {
        display: flex;
    }

    .modal-box {
        background: #fff;
        border-radius: 16px;
        max-width: 550px;
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
        animation: slideUp 0.3s ease;
        box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    }

    .modal-box.modal-confirm {
        max-width: 420px;
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.2rem 1.5rem;
        border-bottom: 1px solid var(--gray-200);
        background: var(--gray-50);
        border-radius: 16px 16px 0 0;
    }

    .modal-header h3 {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--gray-900);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .modal-close-btn {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--gray-400);
        transition: var(--transition);
        padding: 0 0.3rem;
        line-height: 1;
    }

    .modal-close-btn:hover {
        color: var(--gray-700);
        transform: rotate(90deg);
    }

    .modal-body {
        padding: 1.5rem;
    }

    .modal-footer {
        padding: 1rem 1.5rem;
        border-top: 1px solid var(--gray-200);
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
        border-radius: 0 0 16px 16px;
        background: var(--gray-50);
    }

    .loading-text {
        text-align: center;
        padding: 2rem 0;
        color: var(--gray-500);
    }

    /* Detail item styling */
    .detail-avatar {
        text-align: center;
        margin-bottom: 1.2rem;
    }

    .detail-avatar .avatar {
        display: inline-flex;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary), var(--primary-light));
        color: #fff;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        font-weight: 700;
    }

    .detail-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .detail-item {
        display: flex;
        justify-content: space-between;
        padding: 0.7rem 0;
        border-bottom: 1px solid var(--gray-100);
        align-items: center;
    }

    .detail-item:last-child {
        border-bottom: none;
    }

    .detail-item .label {
        font-weight: 600;
        color: var(--gray-600);
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .detail-item .value {
        font-weight: 500;
        color: var(--gray-900);
        text-align: right;
        word-break: break-word;
        max-width: 60%;
    }

    .detail-item .value .badge {
        font-size: 0.7rem;
    }

    /* ============================================
       ANIMATIONS
       ============================================ */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ============================================
       RESPONSIVE
       ============================================ */
    @media (max-width: 992px) {
        .stats-mini {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .dashboard-wrapper {
            flex-direction: column;
            padding: 0 12px;
            margin-top: 1rem;
        }

        .main-content {
            padding: 1rem;
        }

        .stats-mini {
            grid-template-columns: repeat(2, 1fr);
        }

        .filter-row {
            flex-direction: column;
            gap: 0.5rem;
        }

        .filter-group {
            min-width: auto;
        }

        table {
            font-size: 0.8rem;
            min-width: 600px;
        }

        table th,
        table td {
            padding: 0.4rem 0.6rem;
        }

        .action-group {
            flex-direction: column;
        }

        .action-group .btn {
            width: 100%;
            justify-content: center;
        }

        .info-extra {
            flex-direction: column;
            gap: 0.3rem;
        }

        .modal-box {
            width: 98%;
            max-width: 98%;
            margin: 0.5rem;
        }

        .detail-item .value {
            max-width: 50%;
            font-size: 0.8rem;
        }
    }

    @media (max-width: 480px) {
        .main-content {
            padding: 0.8rem;
        }

        .stats-mini {
            grid-template-columns: 1fr 1fr;
        }

        .stat-mini-number {
            font-size: 1.1rem;
        }

        table {
            font-size: 0.7rem;
            min-width: 500px;
        }

        table th,
        table td {
            padding: 0.3rem 0.4rem;
        }

        .btn {
            font-size: 0.65rem;
            padding: 0.2rem 0.5rem;
        }

        .action-group {
            flex-direction: column;
        }
    }
</style>

<script>
    // ============================================
    // FILTER TABLE
    // ============================================
    function filterTable() {
        const search = document.getElementById('searchInput').value.toLowerCase();
        const status = document.getElementById('statusFilter').value;
        const rows = document.querySelectorAll('#supirTable tbody tr');
        
        rows.forEach(row => {
            const nama = row.dataset.nama || '';
            const email = row.dataset.email || '';
            const rowStatus = row.dataset.status || '';
            
            let show = true;
            if (status !== 'all' && rowStatus !== status) show = false;
            if (search && !nama.includes(search) && !email.includes(search)) show = false;
            
            row.classList.toggle('hidden', !show);
        });
    }

    function resetFilter() {
        document.getElementById('searchInput').value = '';
        document.getElementById('statusFilter').value = 'all';
        filterTable();
    }

    document.addEventListener('DOMContentLoaded', filterTable);

    // ============================================
    // DETAIL SUPIR - MODAL
    // ============================================
    function openDetail(id) {
        const modal = document.getElementById('detailModal');
        const body = document.getElementById('modalBody');
        
        // Show loading
        body.innerHTML = `
            <div class="loading-text">
                <i class="fas fa-spinner fa-spin"></i> Memuat data supir...
            </div>
        `;
        
        modal.classList.add('show');
        
        // Fetch data via AJAX
        fetch(`?page=admin&action=getSupirDetail&id=${id}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const s = data.data;
                    const statusBadge = s.is_active == 1 
                        ? '<span class="badge badge-success"><i class="fas fa-check-circle"></i> Aktif</span>'
                        : '<span class="badge badge-danger"><i class="fas fa-times-circle"></i> Nonaktif</span>';
                    
                    body.innerHTML = `
                        <div class="detail-avatar">
                            <div class="avatar">${s.nama.substring(0, 2).toUpperCase()}</div>
                        </div>
                        <div class="detail-grid">
                            <div class="detail-item">
                                <span class="label"><i class="fas fa-user"></i> Nama Lengkap</span>
                                <span class="value">${s.nama}</span>
                            </div>
                            <div class="detail-item">
                                <span class="label"><i class="fas fa-envelope"></i> Email</span>
                                <span class="value">${s.email}</span>
                            </div>
                            <div class="detail-item">
                                <span class="label"><i class="fas fa-phone"></i> No HP</span>
                                <span class="value">${s.no_hp}</span>
                            </div>
                            <div class="detail-item">
                                <span class="label"><i class="fas fa-ship"></i> Jumlah Kapal</span>
                                <span class="value"><strong>${s.total_kapal}</strong></span>
                            </div>
                            <div class="detail-item">
                                <span class="label"><i class="fas fa-calendar-alt"></i> Bergabung</span>
                                <span class="value">${s.created_at ? formatDate(s.created_at) : '-'}</span>
                            </div>
                            <div class="detail-item">
                                <span class="label"><i class="fas fa-info-circle"></i> Status</span>
                                <span class="value">${statusBadge}</span>
                            </div>
                        </div>
                    `;
                } else {
                    body.innerHTML = `
                        <div class="alert alert-info" style="background:#fee2e2; color:#991b1b; border-color:#ef4444;">
                            <i class="fas fa-exclamation-circle"></i> ${data.message || 'Gagal memuat data supir'}
                        </div>
                    `;
                }
            })
            .catch(error => {
                body.innerHTML = `
                    <div class="alert alert-info" style="background:#fee2e2; color:#991b1b; border-color:#ef4444;">
                        <i class="fas fa-exclamation-circle"></i> Terjadi kesalahan saat memuat data
                    </div>
                `;
                console.error('Error:', error);
            });
    }

    function closeModal() {
        document.getElementById('detailModal').classList.remove('show');
    }

    // Tutup modal jika klik overlay
    document.getElementById('detailModal').addEventListener('click', function(e) {
        if (e.target === this) closeModal();
    });

    // ============================================
    // TOGGLE STATUS - MODAL KONFIRMASI
    // ============================================
    let toggleData = { id: null, status: null };

    function toggleStatus(id, newStatus) {
        toggleData.id = id;
        toggleData.status = newStatus;
        
        const modal = document.getElementById('confirmModal');
        const message = document.getElementById('confirmMessage');
        const actionBtn = document.getElementById('confirmActionBtn');
        
        const statusText = newStatus == 1 ? 'AKTIF' : 'NONAKTIF';
        const actionText = newStatus == 1 ? 'Aktifkan' : 'Nonaktifkan';
        
        message.innerHTML = `Apakah Anda yakin ingin <strong>${actionText}</strong> supir ini menjadi status <strong>${statusText}</strong>?`;
        actionBtn.innerHTML = `<i class="fas fa-check"></i> Ya, ${actionText}`;
        
        if (newStatus == 1) {
            actionBtn.className = 'btn btn-success';
        } else {
            actionBtn.className = 'btn btn-danger';
        }
        
        modal.classList.add('show');
    }

    function closeConfirmModal() {
        document.getElementById('confirmModal').classList.remove('show');
        toggleData = { id: null, status: null };
    }

    document.getElementById('confirmModal').addEventListener('click', function(e) {
        if (e.target === this) closeConfirmModal();
    });

    function executeToggle() {
        if (!toggleData.id) return;
        
        const { id, status } = toggleData;
        const action = status == 1 ? 'aktifkanSupir' : 'nonaktifkanSupir';
        
        // Redirect ke action dengan parameter
        window.location.href = `?page=admin&action=${action}&id=${id}`;
    }

    // ============================================
    // HELPER - Format Date
    // ============================================
    function formatDate(dateStr) {
        if (!dateStr) return '-';
        const date = new Date(dateStr);
        if (isNaN(date)) return dateStr;
        return date.toLocaleDateString('id-ID', {
            day: 'numeric',
            month: 'long',
            year: 'numeric'
        });
    }
</script>

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