<?php
/**
 * detail_pesanan.php - Halaman Detail Pesanan untuk Supir
 * DIPERBAIKI - Menampilkan semua data wisatawan dengan lengkap
 * DITAMBAHKAN - Waktu Jemput, Waktu Selesai, Jenis Pembayaran, dll
 * DIPERBAIKI LAGI - Menampilkan SEMUA data dari form booking
 */
$activeMenu = 'kelolaPesanan';
$pageTitle = 'Detail Pesanan - Supir';
include __DIR__ . '/../layouts/header.php';

// Data dari controller
$pesanan = $pesanan ?? [];
$notifications = $notifications ?? [];

if (empty($pesanan)) {
    ?>
    <div class="alert alert-danger">
        <i class="fas fa-exclamation-circle"></i>
        Pesanan tidak ditemukan.
    </div>
    <a href="?page=supir&action=kelolaPesanan" class="btn btn-primary">← Kembali</a>
    <?php
    include __DIR__ . '/../layouts/footer.php';
    exit;
}

// Format tanggal
$tanggalPesan = isset($pesanan['created_at']) ? date('d/m/Y H:i', strtotime($pesanan['created_at'])) : '-';
$tanggalBerangkat = isset($pesanan['tanggal_berangkat']) ? date('d/m/Y', strtotime($pesanan['tanggal_berangkat'])) : '-';

// Format waktu jemput dan selesai
$waktuJemput = isset($pesanan['waktu_jemput_rencana']) && !empty($pesanan['waktu_jemput_rencana']) 
    ? date('H:i', strtotime($pesanan['waktu_jemput_rencana'])) 
    : '-';
$waktuSelesai = isset($pesanan['waktu_selesai_rencana']) && !empty($pesanan['waktu_selesai_rencana']) 
    ? date('H:i', strtotime($pesanan['waktu_selesai_rencana'])) 
    : '-';

// Format jenis pembayaran
$jenisPembayaranMap = [
    'full' => ['label' => '💳 Bayar Full', 'badge' => 'badge-success'],
    'dp' => ['label' => '🏦 DP 50%', 'badge' => 'badge-warning'],
];
$jenisPembayaran = $jenisPembayaranMap[$pesanan['jenis_pembayaran'] ?? 'full'] ?? ['label' => 'Full', 'badge' => 'badge-secondary'];

// Format status reschedule
$rescheduleStatusMap = [
    'tidak' => ['label' => 'Tidak Ada', 'badge' => 'badge-secondary'],
    'menunggu' => ['label' => '⏳ Menunggu Persetujuan', 'badge' => 'badge-warning'],
    'disetujui' => ['label' => '✅ Disetujui', 'badge' => 'badge-success'],
    'ditolak' => ['label' => '❌ Ditolak', 'badge' => 'badge-danger'],
];
$rescheduleStatus = $rescheduleStatusMap[$pesanan['reschedule_status'] ?? 'tidak'] ?? ['label' => 'Tidak Ada', 'badge' => 'badge-secondary'];

// Format status keberangkatan
$keberangkatanMap = [
    'menunggu' => ['label' => '⏳ Menunggu Jemput', 'badge' => 'badge-warning'],
    'dalam_perjalanan' => ['label' => '🚐 Dalam Perjalanan', 'badge' => 'badge-info'],
    'selesai' => ['label' => '🏁 Selesai', 'badge' => 'badge-success'],
];
$keberangkatan = $keberangkatanMap[$pesanan['status_keberangkatan'] ?? 'menunggu'] ?? ['label' => 'Menunggu', 'badge' => 'badge-secondary'];

// Cek apakah ada catatan
$catatan = $pesanan['catatan'] ?? '';
?>

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

<div class="dashboard-wrapper">
    <?php include __DIR__ . '/../layouts/sidebar_supir.php'; ?>

    <main class="main-content">
        <div class="content-header">
            <div>
                <h2><i class="fas fa-file-invoice" style="color:#2b6cb0;"></i> Detail Pesanan</h2>
                <p>Detail lengkap pesanan kapal Anda.</p>
            </div>
            <div>
                <a href="?page=supir&action=kelolaPesanan" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Kembali
                </a>
            </div>
        </div>

        <?php if(isset($_SESSION['flash_success'])): ?>
            <div class="alert alert-success">
                <i class="fas fa-check-circle"></i>
                <?= htmlspecialchars($_SESSION['flash_success']) ?>
                <button class="alert-close" onclick="this.parentElement.remove()">&times;</button>
                <?php unset($_SESSION['flash_success']); ?>
            </div>
        <?php endif; ?>

        <?php if(isset($_SESSION['flash_error'])): ?>
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-circle"></i>
                <?= htmlspecialchars($_SESSION['flash_error']) ?>
                <button class="alert-close" onclick="this.parentElement.remove()">&times;</button>
                <?php unset($_SESSION['flash_error']); ?>
            </div>
        <?php endif; ?>

        <!-- ========================================== -->
        <!-- BANNER STATUS PESANAN -->
        <!-- ========================================== -->
        <div class="status-banner status-<?= $pesanan['status_pesanan'] ?? 'pending' ?>">
            <div class="status-banner-icon">
                <?php
                $statusIcons = [
                    'pending' => 'fa-clock',
                    'confirmed' => 'fa-check-circle',
                    'dikonfirmasi' => 'fa-check-circle',
                    'completed' => 'fa-flag-checkered',
                    'selesai' => 'fa-flag-checkered',
                    'cancelled' => 'fa-times-circle',
                    'dibatalkan' => 'fa-times-circle',
                ];
                $icon = $statusIcons[$pesanan['status_pesanan']] ?? 'fa-circle';
                ?>
                <i class="fas <?= $icon ?>"></i>
            </div>
            <div class="status-banner-content">
                <h3>
                    <?php
                    $statusLabels = [
                        'pending' => '⏳ Menunggu Verifikasi',
                        'confirmed' => '✅ Dikonfirmasi',
                        'dikonfirmasi' => '✅ Dikonfirmasi',
                        'completed' => '🏁 Selesai',
                        'selesai' => '🏁 Selesai',
                        'cancelled' => '❌ Dibatalkan',
                        'dibatalkan' => '❌ Dibatalkan',
                    ];
                    echo $statusLabels[$pesanan['status_pesanan']] ?? ucfirst($pesanan['status_pesanan']);
                    ?>
                </h3>
                <p>Kode Pesanan: <strong><?= htmlspecialchars($pesanan['kode_pesanan']) ?></strong></p>
                <p style="font-size:0.8rem; opacity:0.7; margin-top:0.2rem;">
                    <i class="fas fa-calendar-alt"></i> 
                    <?= $tanggalBerangkat ?> 
                    <i class="fas fa-clock" style="margin-left:0.5rem;"></i> 
                    Jemput: <?= $waktuJemput ?> | Selesai: <?= $waktuSelesai ?>
                </p>
            </div>
        </div>

        <!-- ========================================== -->
        <!-- INFORMASI PESANAN -->
        <!-- ========================================== -->
        <div class="detail-grid">
            <!-- KIRI: Informasi Pesanan & Kapal -->
            <div class="detail-left">
                <!-- Informasi Pesanan -->
                <div class="info-card">
                    <h3><i class="fas fa-info-circle"></i> Informasi Pesanan</h3>
                    <div class="info-row">
                        <span class="info-label">Kode Pesanan</span>
                        <span class="info-value"><strong><?= htmlspecialchars($pesanan['kode_pesanan']) ?></strong></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Tanggal Pesan</span>
                        <span class="info-value"><?= $tanggalPesan ?></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Tanggal Berangkat</span>
                        <span class="info-value"><?= $tanggalBerangkat ?></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Durasi Sewa</span>
                        <span class="info-value"><?= $pesanan['durasi_hari'] ?? 1 ?> hari</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Jumlah Penumpang</span>
                        <span class="info-value"><?= $pesanan['jumlah_tiket'] ?? 1 ?> orang</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Total Harga</span>
                        <span class="info-value harga">Rp <?= number_format($pesanan['total_harga'], 0, ',', '.') ?></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Jenis Pembayaran</span>
                        <span class="info-value">
                            <span class="badge <?= $jenisPembayaran['badge'] ?>">
                                <?= $jenisPembayaran['label'] ?>
                            </span>
                        </span>
                    </div>
                    <?php if(($pesanan['jenis_pembayaran'] ?? 'full') == 'dp'): ?>
                        <div class="info-row" style="background: #dbeafe; padding:0.3rem 0.5rem; border-radius:4px;">
                            <span class="info-label">💰 DP Dibayar (50%)</span>
                            <span class="info-value harga">Rp <?= number_format($pesanan['jumlah_dibayar'] ?? 0, 0, ',', '.') ?></span>
                        </div>
                        <div class="info-row" style="background: #fef3c7; padding:0.3rem 0.5rem; border-radius:4px;">
                            <span class="info-label">⏳ Sisa Pembayaran</span>
                            <span class="info-value text-warning">Rp <?= number_format($pesanan['sisa_pembayaran'] ?? 0, 0, ',', '.') ?></span>
                        </div>
                    <?php endif; ?>
                    <div class="info-row">
                        <span class="info-label">Komisi Admin (10%)</span>
                        <span class="info-value">Rp <?= number_format($pesanan['komisi_admin'] ?? 0, 0, ',', '.') ?></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Diterima Supir</span>
                        <span class="info-value success">Rp <?= number_format($pesanan['nominal_diterima_supir'] ?? 0, 0, ',', '.') ?></span>
                    </div>
                    <?php if($pesanan['jenis_booking'] == 'shared' && !empty($pesanan['trip_id'])): ?>
                        <div class="info-row">
                            <span class="info-label">Trip ID</span>
                            <span class="info-value">#<?= $pesanan['trip_id'] ?></span>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- ========================================== -->
                <!-- WAKTU JEMPUT & SELESAI - FITUR BARU -->
                <!-- ========================================== -->
                <div class="info-card" style="border-color: #93c5fd; background: #eff6ff;">
                    <h3 style="color: #1e40af;"><i class="fas fa-clock" style="color:#1e40af;"></i> Waktu Perjalanan</h3>
                    <div class="info-row">
                        <span class="info-label">🕐 Waktu Jemput (Rencana)</span>
                        <span class="info-value"><strong><?= $waktuJemput ?></strong></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">🏁 Waktu Selesai (Rencana)</span>
                        <span class="info-value"><strong><?= $waktuSelesai ?></strong></span>
                    </div>
                    <?php if(!empty($pesanan['waktu_jemput_aktual'])): ?>
                        <div class="info-row" style="background: #d1fae5; padding:0.3rem 0.5rem; border-radius:4px;">
                            <span class="info-label">✅ Jemput Aktual</span>
                            <span class="info-value" style="color:#065f46; font-weight:600;">
                                <?= date('d/m/Y H:i', strtotime($pesanan['waktu_jemput_aktual'])) ?>
                            </span>
                        </div>
                    <?php endif; ?>
                    <?php if(!empty($pesanan['waktu_selesai_aktual'])): ?>
                        <div class="info-row" style="background: #d1fae5; padding:0.3rem 0.5rem; border-radius:4px;">
                            <span class="info-label">🏁 Selesai Aktual</span>
                            <span class="info-value" style="color:#065f46; font-weight:600;">
                                <?= date('d/m/Y H:i', strtotime($pesanan['waktu_selesai_aktual'])) ?>
                            </span>
                        </div>
                    <?php endif; ?>
                    <div class="info-row" style="margin-top:0.3rem; border-top:1px dashed #93c5fd; padding-top:0.5rem;">
                        <span class="info-label" style="color:#1e40af; font-size:0.7rem; display:flex; align-items:center; gap:0.3rem;">
                            <i class="fas fa-info-circle"></i> 
                            Status: <strong><?= $keberangkatan['label'] ?></strong>
                        </span>
                    </div>
                </div>

                <!-- Informasi Kapal -->
                <div class="info-card">
                    <h3><i class="fas fa-ship"></i> Informasi Kapal</h3>
                    <div class="info-row">
                        <span class="info-label">Nama Kapal</span>
                        <span class="info-value"><strong><?= htmlspecialchars($pesanan['nama_kapal']) ?></strong></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Jenis Kapal</span>
                        <span class="info-value"><?= htmlspecialchars($pesanan['jenis'] ?? '-') ?></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Pelabuhan Asal</span>
                        <span class="info-value"><?= htmlspecialchars($pesanan['pelabuhan_asal'] ?? $pesanan['route_asal'] ?? '-') ?></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Rute Perjalanan</span>
                        <span class="info-value"><?= htmlspecialchars($pesanan['route_asal'] ?? '-') ?> → <?= htmlspecialchars($pesanan['route_tujuan'] ?? '-') ?></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Fasilitas</span>
                        <span class="info-value"><?= htmlspecialchars($pesanan['fasilitas'] ?? '-') ?></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Kapasitas</span>
                        <span class="info-value"><?= $pesanan['kapasitas'] ?? '-' ?> orang</span>
                    </div>
                </div>
            </div>

            <!-- KANAN: Data Wisatawan & Status -->
            <div class="detail-right">
                <!-- ========================================== -->
                <!-- DATA WISATAWAN - LENGKAP -->
                <!-- ========================================== -->
                <div class="info-card" style="border-color: #22c55e; border-left: 4px solid #22c55e;">
                    <h3><i class="fas fa-user" style="color:#22c55e;"></i> Data Wisatawan</h3>
                    <div class="info-row">
                        <span class="info-label">Nama Lengkap</span>
                        <span class="info-value"><strong><?= htmlspecialchars($pesanan['wisatawan_nama'] ?? $pesanan['nama_lengkap'] ?? '-') ?></strong></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Email</span>
                        <span class="info-value"><?= htmlspecialchars($pesanan['wisatawan_email'] ?? $pesanan['email'] ?? '-') ?></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Nomor HP</span>
                        <span class="info-value"><?= htmlspecialchars($pesanan['wisatawan_hp'] ?? $pesanan['no_hp'] ?? '-') ?></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">NIK KTP</span>
                        <span class="info-value"><?= htmlspecialchars($pesanan['nik_ktp'] ?? '-') ?></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Jumlah Penumpang</span>
                        <span class="info-value"><?= $pesanan['jumlah_tiket'] ?? 1 ?> orang</span>
                    </div>
                    <?php if(!empty($pesanan['catatan'])): ?>
                        <div class="info-row" style="background: #fef3c7; padding:0.3rem 0.5rem; border-radius:4px; margin-top:0.3rem;">
                            <span class="info-label">📝 Catatan / Permintaan Khusus</span>
                            <span class="info-value" style="color:#92400e; font-size:0.8rem; text-align:left; word-break:break-word;"><?= nl2br(htmlspecialchars($pesanan['catatan'])) ?></span>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- ========================================== -->
                <!-- STATUS PESANAN -->
                <!-- ========================================== -->
                <div class="info-card">
                    <h3><i class="fas fa-tasks"></i> Status</h3>
                    <div class="info-row">
                        <span class="info-label">Status Pesanan</span>
                        <span class="info-value">
                            <?php
                            $statusMap = [
                                'pending' => ['badge-warning', '⏳ Menunggu Verifikasi', 'fa-clock'],
                                'confirmed' => ['badge-success', '✅ Dikonfirmasi', 'fa-check-circle'],
                                'dikonfirmasi' => ['badge-success', '✅ Dikonfirmasi', 'fa-check-circle'],
                                'completed' => ['badge-info', '🏁 Selesai', 'fa-flag-checkered'],
                                'selesai' => ['badge-info', '🏁 Selesai', 'fa-flag-checkered'],
                                'cancelled' => ['badge-danger', '❌ Dibatalkan', 'fa-times-circle'],
                                'dibatalkan' => ['badge-danger', '❌ Dibatalkan', 'fa-times-circle'],
                            ];
                            $status = $statusMap[$pesanan['status_pesanan']] ?? ['badge-secondary', ucfirst($pesanan['status_pesanan']), 'fa-circle'];
                            ?>
                            <span class="badge <?= $status[0] ?>">
                                <i class="fas <?= $status[2] ?>"></i>
                                <?= $status[1] ?>
                            </span>
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Status Pembayaran</span>
                        <span class="info-value">
                            <?php
                            $paymentMap = [
                                'belum_bayar' => ['badge-warning', '⏳ Belum Bayar', 'fa-clock'],
                                'menunggu_konfirmasi' => ['badge-warning', '⏳ Menunggu Konfirmasi', 'fa-clock'],
                                'lunas' => ['badge-success', '✅ LUNAS', 'fa-check-circle'],
                                'gagal' => ['badge-danger', '❌ Gagal', 'fa-times-circle'],
                            ];
                            $payment = $paymentMap[$pesanan['status_pembayaran']] ?? ['badge-secondary', ucfirst($pesanan['status_pembayaran']), 'fa-circle'];
                            ?>
                            <span class="badge <?= $payment[0] ?>">
                                <i class="fas <?= $payment[2] ?>"></i>
                                <?= $payment[1] ?>
                            </span>
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Status Pencairan</span>
                        <span class="info-value">
                            <?php
                            $cairMap = [
                                'belum' => ['badge-secondary', 'Belum Cair', 'fa-circle'],
                                'proses' => ['badge-warning', '⏳ Proses', 'fa-clock'],
                                'cair' => ['badge-success', '✅ Sudah Cair', 'fa-check-circle'],
                            ];
                            $cair = $cairMap[$pesanan['status_pencairan'] ?? 'belum'] ?? ['badge-secondary', 'Belum', 'fa-circle'];
                            ?>
                            <span class="badge <?= $cair[0] ?>">
                                <i class="fas <?= $cair[2] ?>"></i>
                                <?= $cair[1] ?>
                            </span>
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Status Claim</span>
                        <span class="info-value">
                            <?php
                            $claimMap = [
                                'tidak' => ['badge-secondary', 'Tidak Ada', 'fa-circle'],
                                'menunggu' => ['badge-warning', '⏳ Menunggu', 'fa-clock'],
                                'diterima' => ['badge-success', '✅ Diterima', 'fa-check-circle'],
                                'ditolak' => ['badge-danger', '❌ Ditolak', 'fa-times-circle'],
                            ];
                            $claim = $claimMap[$pesanan['status_claim'] ?? 'tidak'] ?? ['badge-secondary', 'Tidak Ada', 'fa-circle'];
                            ?>
                            <span class="badge <?= $claim[0] ?>">
                                <i class="fas <?= $claim[2] ?>"></i>
                                <?= $claim[1] ?>
                            </span>
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Status Reschedule</span>
                        <span class="info-value">
                            <span class="badge <?= $rescheduleStatus['badge'] ?>">
                                <i class="fas <?= $rescheduleStatus['badge'] == 'badge-success' ? 'fa-check-circle' : ($rescheduleStatus['badge'] == 'badge-warning' ? 'fa-clock' : 'fa-times-circle') ?>"></i>
                                <?= $rescheduleStatus['label'] ?>
                            </span>
                        </span>
                    </div>
                    <?php if(!empty($pesanan['reschedule_alasan'])): ?>
                        <div class="info-row" style="background: #fef3c7; padding:0.3rem 0.5rem; border-radius:4px; margin-top:0.3rem;">
                            <span class="info-label">📝 Alasan Reschedule</span>
                            <span class="info-value" style="color:#92400e; font-size:0.8rem; text-align:left;"><?= nl2br(htmlspecialchars($pesanan['reschedule_alasan'])) ?></span>
                        </div>
                    <?php endif; ?>
                    <?php if(!empty($pesanan['reschedule_tanggal_baru'])): ?>
                        <div class="info-row" style="background: #dbeafe; padding:0.3rem 0.5rem; border-radius:4px;">
                            <span class="info-label">📅 Tanggal Baru</span>
                            <span class="info-value" style="color:#1e40af; font-weight:600;">
                                <?= date('d/m/Y', strtotime($pesanan['reschedule_tanggal_baru'])) ?>
                            </span>
                        </div>
                    <?php endif; ?>
                </div>
<!-- ========================================== -->
<!-- 🔥 TOMBOL AKSI SUPIR -->
<!-- ========================================== -->
<div class="action-section" style="margin-top: 1.5rem; padding-top: 1rem; border-top: 2px solid #e2e8f0; display: flex; gap: 0.8rem; flex-wrap: wrap;">

    <?php
    // Cek apakah pesanan bisa dibatalkan
    $canCancelBySupir = false;
    if (!in_array($pesanan['status_pesanan'], ['completed', 'selesai', 'cancelled', 'dibatalkan'])) {
        $canCancelBySupir = true;
    }
    ?>

    <!-- 🔥 TOMBOL BATALKAN PESANAN -->
    <?php if ($canCancelBySupir): ?>
        <button type="button" class="btn btn-danger" id="btnBatalPesanan" 
                onclick="toggleBatalForm()" style="display:inline-flex; align-items:center; gap:0.5rem;">
            <i class="fas fa-times-circle"></i> Batalkan Pesanan
        </button>
    <?php endif; ?>

    <!-- Tombol Kembali -->
    <a href="?page=supir&action=kelolaPesanan" class="btn btn-secondary">
        <i class="fas fa-arrow-left"></i> Kembali ke Daftar
    </a>
</div>

<!-- ========================================== -->
<!-- 🔥 FORM BATALKAN PESANAN -->
<!-- ========================================== -->
<div id="formBatalPesanan" style="display:none; margin-top:1rem; padding:1.5rem; background:#fef2f2; border:2px solid #ef4444; border-radius:12px;">
    <h4 style="color:#991b1b; margin-bottom:0.5rem;">
        <i class="fas fa-exclamation-triangle"></i> Batalkan Pesanan
    </h4>
    <p style="color:#4a5568; font-size:0.9rem; margin-bottom:1rem;">
        Anda yakin ingin membatalkan pesanan <strong><?= htmlspecialchars($pesanan['kode_pesanan']) ?></strong>?
        <?php if ($pesanan['status_pembayaran'] == 'lunas'): ?>
            <br><span style="color:#991b1b; font-weight:600;">
                ⚠️ Wisatawan sudah LUNAS. Claim refund akan diajukan otomatis.
            </span>
        <?php endif; ?>
    </p>
    
    <form method="POST" action="?page=supir&action=batalPesanan" id="formBatal">
        <input type="hidden" name="pesanan_id" value="<?= $pesanan['id'] ?>">
        
        <div class="form-group" style="margin-bottom:0.8rem;">
            <label for="alasan" style="font-weight:600; display:block; margin-bottom:0.3rem;">
                Alasan Pembatalan <span style="color:#ef4444;">*</span>
            </label>
            <textarea name="alasan" id="alasan" class="form-control" 
                      style="width:100%; padding:0.8rem; border:1px solid #e2e8f0; border-radius:8px; min-height:80px;"
                      placeholder="Tuliskan alasan pembatalan..." required minlength="5"></textarea>
            <small style="color:#718096; font-size:0.8rem;">Minimal 5 karakter</small>
        </div>
        
        <div style="display:flex; gap:0.8rem; flex-wrap:wrap;">
            <button type="submit" class="btn btn-danger" onclick="return confirm('⚠️ Yakin ingin membatalkan pesanan ini?\n\n📌 Kode: <?= htmlspecialchars($pesanan['kode_pesanan']) ?>\n💰 Status: <?= ucfirst($pesanan['status_pembayaran']) ?>\n\nTindakan ini TIDAK DAPAT DIBATALKAN!')">
                <i class="fas fa-check"></i> Ya, Batalkan
            </button>
            <button type="button" class="btn btn-secondary" onclick="toggleBatalForm()">
                <i class="fas fa-times"></i> Batal
            </button>
        </div>
    </form>
</div>

<!-- ========================================== -->
<!-- 🔥 SCRIPT TOGGLE FORM -->
<!-- ========================================== -->
<script>
function toggleBatalForm() {
    const form = document.getElementById('formBatalPesanan');
    const btn = document.getElementById('btnBatalPesanan');
    if (form.style.display === 'none') {
        form.style.display = 'block';
        if (btn) btn.innerHTML = '<i class="fas fa-times"></i> Tutup Form';
    } else {
        form.style.display = 'none';
        if (btn) btn.innerHTML = '<i class="fas fa-times-circle"></i> Batalkan Pesanan';
    }
}
</script>

<style>
.action-section .btn {
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}
.action-section .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.btn-danger {
    background: #ef4444;
    color: #fff;
    border: none;
}
.btn-danger:hover {
    background: #dc2626;
    color: #fff;
}
.btn-secondary {
    background: #e2e8f0;
    color: #4a5568;
    border: none;
}
.btn-secondary:hover {
    background: #cbd5e0;
    color: #1a202c;
}
.form-control:focus {
    outline: none;
    border-color: #2b6cb0;
    box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.15);
}
</style>
                <!-- ========================================== -->
                <!-- INFORMASI TAMBAHAN -->
                <!-- ========================================== -->
                <div class="info-card" style="border-color: #a0aec0; background: #f7fafc;">
                    <h3><i class="fas fa-info-circle" style="color:#718096;"></i> Informasi Tambahan</h3>
                    <div class="info-row">
                        <span class="info-label">Jenis Booking</span>
                        <span class="info-value">
                            <?php
                            $tipeMap = [
                                'private' => ['label' => 'Private (Sewa Penuh)', 'badge' => 'badge-info'],
                                'shared' => ['label' => 'Shared (Berbagi)', 'badge' => 'badge-success'],
                            ];
                            $tipe = $tipeMap[$pesanan['jenis_booking'] ?? 'private'] ?? ['label' => 'Private', 'badge' => 'badge-secondary'];
                            ?>
                            <span class="badge <?= $tipe['badge'] ?>">
                                <?= $tipe['label'] ?>
                            </span>
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Status Pembatalan</span>
                        <span class="info-value">
                            <?php
                            $batalMap = [
                                'aktif' => ['label' => '✅ Aktif', 'badge' => 'badge-success'],
                                'dibatalkan' => ['label' => '❌ Dibatalkan', 'badge' => 'badge-danger'],
                                'dibatalkan_otomatis' => ['label' => '⚠️ Dibatalkan Otomatis', 'badge' => 'badge-warning'],
                            ];
                            $batal = $batalMap[$pesanan['status_pembatalan'] ?? 'aktif'] ?? ['label' => 'Aktif', 'badge' => 'badge-secondary'];
                            ?>
                            <span class="badge <?= $batal['badge'] ?>">
                                <?= $batal['label'] ?>
                            </span>
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Status Keberangkatan</span>
                        <span class="info-value">
                            <span class="badge <?= $keberangkatan['badge'] ?>">
                                <?= $keberangkatan['label'] ?>
                            </span>
                        </span>
                    </div>
                    <?php if(!empty($pesanan['alasan_batal_otomatis'])): ?>
                        <div class="info-row" style="background: #fee2e2; padding:0.3rem 0.5rem; border-radius:4px; margin-top:0.3rem;">
                            <span class="info-label" style="color:#991b1b;">⚠️ Alasan Batal Otomatis</span>
                            <span class="info-value" style="color:#991b1b; font-size:0.8rem; text-align:left;"><?= nl2br(htmlspecialchars($pesanan['alasan_batal_otomatis'])) ?></span>
                        </div>
                    <?php endif; ?>
                    <?php if(!empty($pesanan['alasan_penolakan'])): ?>
                        <div class="info-row" style="background: #fee2e2; padding:0.3rem 0.5rem; border-radius:4px; margin-top:0.3rem;">
                            <span class="info-label" style="color:#991b1b;">📝 Alasan Penolakan</span>
                            <span class="info-value" style="color:#991b1b; font-size:0.8rem; text-align:left;"><?= nl2br(htmlspecialchars($pesanan['alasan_penolakan'])) ?></span>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- ========================================== -->
        <!-- TOMBOL AKSI -->
        <!-- ========================================== -->
        <div class="action-section">
            <?php if($pesanan['status_pesanan'] == 'pending'): ?>
                <!-- Tombol Verifikasi -->
                <form method="POST" action="?page=supir&action=updateStatusPesanan" style="display:inline;">
                    <input type="hidden" name="pesanan_id" value="<?= $pesanan['id'] ?>">
                    <input type="hidden" name="status" value="confirmed">
                    <button type="submit" class="btn btn-success btn-lg" onclick="return confirm('Verifikasi pesanan ini?')">
                        <i class="fas fa-check"></i> Verifikasi Pesanan
                    </button>
                </form>
                
                <!-- Tombol Tolak -->
                <form method="POST" action="?page=supir&action=updateStatusPesanan" style="display:inline;">
                    <input type="hidden" name="pesanan_id" value="<?= $pesanan['id'] ?>">
                    <input type="hidden" name="status" value="cancelled">
                    <button type="submit" class="btn btn-danger btn-lg" onclick="return confirm('Batalkan pesanan ini?')">
                        <i class="fas fa-times"></i> Tolak Pesanan
                    </button>
                </form>
            <?php endif; ?>

            <?php if($pesanan['reschedule_status'] == 'menunggu'): ?>
                <!-- Tombol Setuju Reschedule -->
                <button class="btn btn-success btn-lg" onclick="openRescheduleModal(<?= $pesanan['id'] ?>, '<?= htmlspecialchars($pesanan['kode_pesanan']) ?>', 'setuju')">
                    <i class="fas fa-check"></i> Setuju Ubah Jadwal
                </button>
                
                <!-- Tombol Tolak Reschedule -->
                <button class="btn btn-danger btn-lg" onclick="openRescheduleModal(<?= $pesanan['id'] ?>, '<?= htmlspecialchars($pesanan['kode_pesanan']) ?>', 'tolak')">
                    <i class="fas fa-times"></i> Tolak Ubah Jadwal
                </button>
            <?php endif; ?>

            <?php if($pesanan['status_pesanan'] == 'confirmed' || $pesanan['status_pesanan'] == 'dikonfirmasi'): ?>
                <?php if($pesanan['status_pembayaran'] == 'lunas' && $pesanan['status_pencairan'] != 'cair'): ?>
                    <form method="POST" action="?page=supir&action=cairkanDana" style="display:inline;">
                        <input type="hidden" name="pesanan_id" value="<?= $pesanan['id'] ?>">
                        <button type="submit" class="btn btn-warning btn-lg" onclick="return confirm('Cairkan dana untuk pesanan ini?')">
                            <i class="fas fa-money-bill-wave"></i> Cairkan Dana
                        </button>
                    </form>
                <?php endif; ?>
            <?php endif; ?>

            <!-- Tombol Kembali -->
            <a href="?page=supir&action=kelolaPesanan" class="btn btn-secondary btn-lg">
                <i class="fas fa-arrow-left"></i> Kembali
            </a>
        </div>

        <!-- ========================================== -->
        <!-- RIWAYAT NOTIFIKASI (jika ada) -->
        <!-- ========================================== -->
        <?php if(!empty($notifications)): ?>
        <div class="info-card" style="margin-top:1.5rem;">
            <h3><i class="fas fa-bell"></i> Riwayat Notifikasi</h3>
            <div class="notification-list">
                <?php foreach($notifications as $notif): ?>
                <div class="notification-item">
                    <div class="notif-icon">
                        <i class="fas fa-<?= strpos($notif['title'] ?? '', '✅') !== false ? 'check-circle' : 
                                        (strpos($notif['title'] ?? '', '❌') !== false ? 'times-circle' : 
                                        (strpos($notif['title'] ?? '', '📋') !== false ? 'clipboard-list' : 'bell')) ?>"></i>
                    </div>
                    <div class="notif-content">
                        <div class="notif-title"><?= htmlspecialchars($notif['title'] ?? 'Notifikasi') ?></div>
                        <div class="notif-message"><?= htmlspecialchars($notif['message'] ?? '') ?></div>
                        <div class="notif-time"><?= date('d/m/Y H:i', strtotime($notif['created_at'] ?? 'now')) ?></div>
                    </div>
                    <?php if(empty($notif['is_read'])): ?>
                    <div class="notif-status">
                        <span class="badge badge-warning">Baru</span>
                    </div>
                    <?php endif; ?>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        <?php endif; ?>
    </main>
</div>

<!-- ========================================== -->
<!-- MODAL RESCHEDULE -->
<!-- ========================================== -->
<div class="modal-overlay" id="rescheduleModal">
    <div class="modal">
        <div class="modal-header">
            <h3><i class="fas fa-calendar-alt" style="color:#f59e0b;"></i> <span id="rescheduleModalTitle">Konfirmasi Perubahan Jadwal</span></h3>
            <button class="modal-close" onclick="closeRescheduleModal()">&times;</button>
        </div>
        <form method="POST" action="?page=supir&action=konfirmasiReschedule" id="rescheduleForm">
            <input type="hidden" name="pesanan_id" id="reschedulePesananId">
            <input type="hidden" name="keputusan" id="rescheduleKeputusan">

            <div class="modal-body">
                <div class="info-box">
                    <i class="fas fa-info-circle"></i>
                    <div>
                        <strong>Permintaan Perubahan Jadwal</strong>
                        <p id="rescheduleInfo">Memproses...</p>
                    </div>
                </div>

                <div class="form-group" id="rescheduleAlasanGroup" style="display:none;">
                    <label>Alasan Penolakan <span class="required">*</span></label>
                    <textarea name="alasan" id="rescheduleAlasan" class="form-control" rows="3" 
                              placeholder="Berikan alasan mengapa Anda menolak perubahan jadwal..."></textarea>
                    <small class="form-hint">Alasan akan dikirim ke wisatawan.</small>
                </div>
            </div>

            <div class="form-actions">
                <button type="button" class="btn btn-secondary" onclick="closeRescheduleModal()">Batal</button>
                <button type="submit" class="btn btn-primary" id="rescheduleSubmitBtn">
                    <i class="fas fa-paper-plane"></i> Konfirmasi
                </button>
            </div>
        </form>
    </div>
</div>

<style>
/* ============================================
   STYLE DETAIL PESANAN SUPIR
   ============================================ */
.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 #e2e8f0;
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 10px;
}

.content-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
}

.content-header p {
    color: #718096;
    font-size: 0.95rem;
    margin: 0.2rem 0 0;
}

/* Alert */
.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.8rem 1.2rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    border-left: 4px solid transparent;
}

.alert-success {
    background: #d1fae5;
    color: #065f46;
    border-left-color: #22c55e;
}

.alert-danger {
    background: #fee2e2;
    color: #991b1b;
    border-left-color: #ef4444;
}

.alert-close {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0 4px;
}

.alert-close:hover {
    opacity: 1;
}

/* Status Banner */
.status-banner {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    border: 2px solid;
}

.status-banner.status-pending {
    background: #fef3c7;
    border-color: #f59e0b;
}

.status-banner.status-confirmed,
.status-banner.status-dikonfirmasi {
    background: #d1fae5;
    border-color: #22c55e;
}

.status-banner.status-completed,
.status-banner.status-selesai {
    background: #dbeafe;
    border-color: #3b82f6;
}

.status-banner.status-cancelled,
.status-banner.status-dibatalkan {
    background: #fee2e2;
    border-color: #ef4444;
}

.status-banner-icon {
    font-size: 2.5rem;
    color: inherit;
}

.status-banner-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.status-banner-content p {
    margin: 0.1rem 0 0;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Detail Grid */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.info-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
}

.info-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    border-bottom: 1px solid #f7fafc;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    color: #718096;
    font-size: 0.8rem;
    font-weight: 500;
}

.info-value {
    font-size: 0.85rem;
    color: #1a202c;
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

.info-value.harga {
    font-weight: 700;
    color: #2b6cb0;
    font-size: 1rem;
}

.info-value.success {
    color: #22c55e;
}

.text-warning {
    color: #f59e0b;
}

/* 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;
}

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

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

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.badge-secondary {
    background: #e5e7eb;
    color: #4b5563;
}

.badge-info {
    background: #dbeafe;
    color: #1e40af;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

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

.btn-lg {
    padding: 0.7rem 1.5rem;
    font-size: 1rem;
}

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

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

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

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

.btn-primary {
    background: #2b6cb0;
    color: #fff;
}

.btn-primary:hover {
    background: #1a4a7a;
}

.btn-secondary {
    background: #e2e8f0;
    color: #4a5568;
}

.btn-secondary:hover {
    background: #cbd5e0;
}

.btn-warning {
    background: #f59e0b;
    color: #fff;
}

.btn-warning:hover {
    background: #d97706;
}

/* Action Section */
.action-section {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* Notification List */
.notification-list {
    max-height: 300px;
    overflow-y: auto;
}

.notification-item {
    display: flex;
    gap: 0.8rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f7fafc;
}

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

.notif-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.notif-content {
    flex: 1;
}

.notif-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: #1a202c;
}

.notif-message {
    font-size: 0.8rem;
    color: #4a5568;
    white-space: pre-wrap;
    word-break: break-word;
}

.notif-time {
    font-size: 0.65rem;
    color: #a0aec0;
    margin-top: 0.1rem;
}

/* Modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

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

.modal {
    background: #fff;
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.8rem 2rem;
    animation: modalIn 0.3s ease;
}

@keyframes modalIn {
    from {
        transform: scale(0.95) translateY(-20px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #e2e8f0;
}

.modal-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #a0aec0;
    transition: all 0.3s ease;
    line-height: 1;
}

.modal-close:hover {
    color: #1a202c;
}

.modal-body {
    margin-bottom: 1rem;
}

.info-box {
    display: flex;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    background: #dbeafe;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.info-box i {
    font-size: 1.5rem;
    color: #2563eb;
}

.info-box strong {
    color: #1e40af;
    font-size: 0.85rem;
}

.info-box p {
    color: #1e40af;
    font-size: 0.8rem;
    margin: 0.1rem 0;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: #4a5568;
    margin-bottom: 0.2rem;
}

.form-group .required {
    color: #ef4444;
}

.form-control {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    font-family: inherit;
    resize: vertical;
}

.form-control:focus {
    outline: none;
    border-color: #2b6cb0;
    box-shadow: 0 0 0 3px rgba(43,108,176,0.08);
}

.form-hint {
    font-size: 0.7rem;
    color: #a0aec0;
    margin-top: 0.2rem;
    display: block;
}

.form-actions {
    display: flex;
    gap: 0.8rem;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .dashboard-wrapper {
        flex-direction: column;
        padding: 0 12px;
        margin-top: 1rem;
    }
    .main-content {
        padding: 1rem;
    }
    .detail-grid {
        grid-template-columns: 1fr;
    }
    .status-banner {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }
    .action-section {
        flex-direction: column;
    }
    .action-section .btn {
        width: 100%;
        justify-content: center;
    }
    .modal {
        padding: 1.2rem;
    }
    .info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1rem;
    }
    .info-value {
        text-align: left;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 0.8rem;
    }
    .info-card {
        padding: 0.8rem 1rem;
    }
    .modal {
        padding: 1rem;
    }
    .status-banner-icon {
        font-size: 2rem;
    }
}
</style>

<script>
// ============================================
// MODAL RESCHEDULE
// ============================================
function openRescheduleModal(id, kode, keputusan) {
    document.getElementById('reschedulePesananId').value = id;
    document.getElementById('rescheduleKeputusan').value = keputusan;
    
    const title = document.getElementById('rescheduleModalTitle');
    const info = document.getElementById('rescheduleInfo');
    const alasanGroup = document.getElementById('rescheduleAlasanGroup');
    const submitBtn = document.getElementById('rescheduleSubmitBtn');
    
    if (keputusan === 'setuju') {
        title.textContent = '✅ Setujui Perubahan Jadwal';
        info.innerHTML = `
            <strong>Kode Pesanan:</strong> ${kode}<br>
            <strong>Keputusan:</strong> <span style="color:#22c55e;">SETUJU</span><br>
            <small>Wisatawan akan menerima notifikasi bahwa perubahan jadwal disetujui.</small>
        `;
        alasanGroup.style.display = 'none';
        submitBtn.className = 'btn btn-success';
        submitBtn.innerHTML = '<i class="fas fa-check"></i> Setujui';
    } else {
        title.textContent = '❌ Tolak Perubahan Jadwal';
        info.innerHTML = `
            <strong>Kode Pesanan:</strong> ${kode}<br>
            <strong>Keputusan:</strong> <span style="color:#ef4444;">TOLAK</span><br>
            <small>Wisatawan akan menerima notifikasi bahwa perubahan jadwal ditolak.</small>
        `;
        alasanGroup.style.display = 'block';
        submitBtn.className = 'btn btn-danger';
        submitBtn.innerHTML = '<i class="fas fa-times"></i> Tolak';
    }
    
    document.getElementById('rescheduleModal').classList.add('active');
    document.body.style.overflow = 'hidden';
}

function closeRescheduleModal() {
    document.getElementById('rescheduleModal').classList.remove('active');
    document.body.style.overflow = '';
}

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeRescheduleModal();
});

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

document.getElementById('rescheduleForm').addEventListener('submit', function(e) {
    const keputusan = document.getElementById('rescheduleKeputusan').value;
    const alasan = document.getElementById('rescheduleAlasan');
    
    if (keputusan === 'tolak' && alasan.value.trim() === '') {
        e.preventDefault();
        alert('Silakan isi alasan penolakan!');
        alasan.focus();
    }
});
</script>

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