<?php
/**
 * verifikasi_pesanan.php - Halaman Verifikasi Pesanan untuk Supir
 * DIPERBAIKI - Tombol terima/tolak bisa diklik
 */
include __DIR__ . '/../layouts/header.php';
$activeMenu = 'pesananMasuk';

$pesanan = $pesanan ?? null;
$error_message = $_SESSION['error_message'] ?? null;
$flash_message = $_SESSION['flash_message'] ?? null;
$flash_type = $_SESSION['flash_type'] ?? null;
unset($_SESSION['error_message'], $_SESSION['flash_message'], $_SESSION['flash_type']);
?>

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

    <main class="main-content">
        <!-- Header -->
        <div class="content-header">
            <div class="header-left">
                <a href="?page=supir&action=pesananMasuk" class="btn-back">
                    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M19 12H5M12 19l-7-7 7-7"/>
                    </svg>
                    Kembali
                </a>
                <h2>📋 Verifikasi Pesanan</h2>
            </div>
            <div class="header-right">
                <span class="status-badge <?= $pesanan ? strtolower($pesanan['status_pesanan'] ?? 'pending') : '' ?>">
                    <?= ucfirst($pesanan['status_pesanan'] ?? 'Pending') ?>
                </span>
            </div>
        </div>

        <!-- Flash Messages -->
        <?php if($error_message): ?>
            <div class="alert alert-danger">
                <span class="alert-icon">❌</span>
                <div>
                    <strong>Error!</strong>
                    <p><?= htmlspecialchars($error_message) ?></p>
                </div>
            </div>
        <?php endif; ?>

        <?php if($flash_message): ?>
            <div class="alert alert-<?= $flash_type == 'success' ? 'success' : 'warning' ?>">
                <span class="alert-icon"><?= $flash_type == 'success' ? '✅' : '⚠️' ?></span>
                <div>
                    <strong><?= $flash_type == 'success' ? 'Berhasil!' : 'Info' ?></strong>
                    <p><?= htmlspecialchars($flash_message) ?></p>
                </div>
            </div>
        <?php endif; ?>

        <?php if($pesanan): ?>
            <!-- Alert Status -->
            <?php if($pesanan['status_pesanan'] == 'pending'): ?>
                <div class="alert alert-warning">
                    <span class="alert-icon">⏳</span>
                    <div>
                        <strong>Menunggu Verifikasi</strong>
                        <p>Pesanan ini belum diverifikasi. Silakan periksa detail pesanan dengan teliti sebelum memutuskan.</p>
                    </div>
                </div>
            <?php elseif($pesanan['status_pesanan'] == 'confirmed'): ?>
                <div class="alert alert-success">
                    <span class="alert-icon">✅</span>
                    <div>
                        <strong>Pesanan Diverifikasi</strong>
                        <p>Pesanan ini telah diverifikasi dan wisatawan sudah mendapatkan notifikasi untuk melakukan pembayaran.</p>
                    </div>
                </div>
            <?php elseif($pesanan['status_pesanan'] == 'cancelled'): ?>
                <div class="alert alert-danger">
                    <span class="alert-icon">🚫</span>
                    <div>
                        <strong>Pesanan Ditolak</strong>
                        <p>Pesanan ini telah ditolak. Wisatawan sudah mendapatkan notifikasi.</p>
                        <?php if(!empty($pesanan['alasan_penolakan'])): ?>
                            <p><strong>Alasan:</strong> <?= htmlspecialchars($pesanan['alasan_penolakan']) ?></p>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endif; ?>

            <!-- Detail Pesanan -->
            <div class="detail-card">
                <div class="detail-header">
                    <div class="detail-title">
                        <span class="icon">📄</span>
                        <h3>Detail Pesanan</h3>
                    </div>
                    <div class="detail-code">
                        <span class="label">Kode Pesanan</span>
                        <span class="value"><?= htmlspecialchars($pesanan['kode_pesanan'] ?? '-') ?></span>
                    </div>
                </div>

                <div class="detail-body">
                    <div class="detail-grid">
                        <!-- Data Wisatawan -->
                        <div class="detail-section">
                            <div class="section-title">
                                <span class="icon">👤</span>
                                <h4>Data Wisatawan</h4>
                            </div>
                            <div class="detail-item">
                                <span class="label">Nama Lengkap</span>
                                <span class="value"><?= htmlspecialchars($pesanan['wisatawan_nama'] ?? '-') ?></span>
                            </div>
                            <div class="detail-item">
                                <span class="label">Email</span>
                                <span class="value"><?= htmlspecialchars($pesanan['wisatawan_email'] ?? '-') ?></span>
                            </div>
                            <div class="detail-item">
                                <span class="label">Nomor HP</span>
                                <span class="value"><?= htmlspecialchars($pesanan['wisatawan_phone'] ?? '-') ?></span>
                            </div>
                            <div class="detail-item">
                                <span class="label">NIK</span>
                                <span class="value"><?= htmlspecialchars($pesanan['nik_ktp'] ?? '-') ?></span>
                            </div>
                        </div>

                        <!-- Data Kapal -->
                        <div class="detail-section">
                            <div class="section-title">
                                <span class="icon">⛵</span>
                                <h4>Data Kapal</h4>
                            </div>
                            <div class="detail-item">
                                <span class="label">Nama Kapal</span>
                                <span class="value highlight"><?= htmlspecialchars($pesanan['nama_kapal'] ?? '-') ?></span>
                            </div>
                            <div class="detail-item">
                                <span class="label">Jenis Booking</span>
                                <span class="value">
                                    <?php if($pesanan['jenis_booking'] == 'private'): ?>
                                        🚤 Private
                                    <?php else: ?>
                                        👥 Shared Trip
                                    <?php endif; ?>
                                </span>
                            </div>
                            <div class="detail-item">
                                <span class="label">Status Pesanan</span>
                                <span class="value status-<?= $pesanan['status_pesanan'] ?? 'pending' ?>">
                                    <?= ucfirst($pesanan['status_pesanan'] ?? 'Pending') ?>
                                </span>
                            </div>
                            <div class="detail-item">
                                <span class="label">Status Pembayaran</span>
                                <span class="value payment-<?= $pesanan['status_pembayaran'] ?? 'belum_bayar' ?>">
                                    <?= ucfirst(str_replace('_', ' ', $pesanan['status_pembayaran'] ?? 'Belum Bayar')) ?>
                                </span>
                            </div>
                        </div>

                        <!-- Data Perjalanan -->
                        <div class="detail-section">
                            <div class="section-title">
                                <span class="icon">🗺️</span>
                                <h4>Data Perjalanan</h4>
                            </div>
                            <div class="detail-item">
                                <span class="label">Tanggal Berangkat</span>
                                <span class="value"><?= date('d/m/Y', strtotime($pesanan['tanggal_berangkat'] ?? 'now')) ?></span>
                            </div>
                            <div class="detail-item">
                                <span class="label">Durasi Sewa</span>
                                <span class="value"><?= $pesanan['durasi_jam'] ?? 0 ?> Jam</span>
                            </div>
                            <div class="detail-item">
                                <span class="label">Jumlah Tiket</span>
                                <span class="value"><?= $pesanan['jumlah_tiket'] ?? 0 ?> Tiket</span>
                            </div>
                            <div class="detail-item">
                                <span class="label">Catatan</span>
                                <span class="value"><?= htmlspecialchars($pesanan['catatan'] ?? '-') ?></span>
                            </div>
                        </div>

                        <!-- Data Pembayaran -->
                        <div class="detail-section highlight-section">
                            <div class="section-title">
                                <span class="icon">💰</span>
                                <h4>Data Pembayaran</h4>
                            </div>
                            <div class="detail-item total">
                                <span class="label">Total Harga</span>
                                <span class="value price">Rp <?= number_format($pesanan['total_harga'] ?? 0, 0, ',', '.') ?></span>
                            </div>
                            <div class="detail-item">
                                <span class="label">Metode Pembayaran</span>
                                <span class="value"><?= htmlspecialchars($pesanan['metode_pembayaran'] ?? '-') ?></span>
                            </div>
                            <div class="detail-item">
                                <span class="label">Tanggal Pesan</span>
                                <span class="value"><?= date('d/m/Y H:i', strtotime($pesanan['created_at'] ?? 'now')) ?></span>
                            </div>
                            <?php if(!empty($pesanan['bukti_pembayaran'])): ?>
                                <div class="detail-item">
                                    <span class="label">Bukti Pembayaran</span>
                                    <span class="value">
                                        <a href="../uploads/bukti/<?= $pesanan['bukti_pembayaran'] ?>" target="_blank" class="btn-bukti">
                                            📷 Lihat Bukti
                                        </a>
                                    </span>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>

                <!-- Tombol Aksi -->
                <?php if($pesanan['status_pesanan'] == 'pending'): ?>
                    <div class="action-buttons">
                        <form method="POST" action="?page=supir&action=verifikasiPesanan&id=<?= $pesanan['id'] ?>" id="formVerifikasi">
                            <input type="hidden" name="verifikasi" id="actionVerifikasi" value="">
                            <input type="hidden" name="alasan" id="alasanPenolakan" value="">
                            
                            <button type="button" class="btn btn-success btn-terima" onclick="return confirmTerima()">
                                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M20 6L9 17l-5-5"/>
                                </svg>
                                ✅ Terima Pesanan
                            </button>
                            
                            <button type="button" class="btn btn-danger btn-tolak" onclick="return confirmTolak()">
                                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M18 6L6 18M6 6l12 12"/>
                                </svg>
                                ❌ Tolak Pesanan
                            </button>
                        </form>
                    </div>
                <?php endif; ?>
            </div>
        <?php else: ?>
            <div class="empty-state">
                <div class="empty-icon">📋</div>
                <h3>Pesanan Tidak Ditemukan</h3>
                <p>Pesanan yang Anda cari tidak ditemukan atau telah dihapus.</p>
                <a href="?page=supir&action=pesananMasuk" class="btn btn-primary">← Kembali ke Daftar Pesanan</a>
            </div>
        <?php endif; ?>
    </main>
</div>

<script>
// ============================================
// FUNGSI VERIFIKASI - DIPERBAIKI
// ============================================

function confirmTerima() {
    if (confirm('Yakin ingin MENERIMA pesanan ini?\n\nWisatawan akan mendapatkan notifikasi WhatsApp untuk melakukan pembayaran.')) {
        document.getElementById('actionVerifikasi').value = 'terima';
        document.getElementById('formVerifikasi').submit();
    }
    return false;
}

function confirmTolak() {
    var alasan = prompt('Masukkan alasan penolakan pesanan:');
    if (alasan !== null) {
        if (alasan.trim() === '') {
            alert('Alasan penolakan harus diisi!');
            return false;
        }
        if (confirm('Yakin ingin MENOLAK pesanan ini?\n\nAlasan: ' + alasan + '\n\nWisatawan akan mendapatkan notifikasi WhatsApp.')) {
            document.getElementById('actionVerifikasi').value = 'tolak';
            document.getElementById('alasanPenolakan').value = alasan;
            document.getElementById('formVerifikasi').submit();
        }
    }
    return false;
}

// ============================================
// TOMBOL TETAP BISA DIKLIK - PASTIKAN TIDAK ADA OVERLAY
// ============================================
document.addEventListener('DOMContentLoaded', function() {
    // Pastikan tidak ada elemen yang menghalangi tombol
    const buttons = document.querySelectorAll('.btn-terima, .btn-tolak');
    buttons.forEach(btn => {
        btn.style.position = 'relative';
        btn.style.zIndex = '10';
        btn.style.pointerEvents = 'auto';
    });
});
</script>

<style>
    /* ============================================
       LAYOUT
       ============================================ */
    .dashboard-wrapper {
        display: flex;
        gap: 24px;
        max-width: 1280px;
        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: 16px;
        padding: 1.8rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        border: 1px solid var(--gray-200);
    }

    /* ============================================
       HEADER
       ============================================ */
    .content-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .header-left {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .btn-back {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.8rem;
        background: var(--gray-100);
        border-radius: 8px;
        color: var(--gray-700);
        font-size: 0.85rem;
        font-weight: 500;
        transition: var(--transition);
        text-decoration: none;
    }

    .btn-back:hover {
        background: var(--gray-200);
        color: var(--gray-900);
        text-decoration: none;
    }

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

    .header-right .status-badge {
        padding: 0.3rem 1rem;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
    }

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

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

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

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

    .alert-warning {
        background: #fffbeb;
        border-left-color: #f59e0b;
        color: #92400e;
    }

    .alert-success {
        background: #f0fdf4;
        border-left-color: #22c55e;
        color: #166534;
    }

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

    .alert-icon {
        font-size: 1.5rem;
        flex-shrink: 0;
    }

    .alert strong {
        display: block;
        margin-bottom: 0.2rem;
    }

    .alert p {
        margin: 0;
        font-size: 0.9rem;
    }

    /* ============================================
       DETAIL CARD
       ============================================ */
    .detail-card {
        background: #fff;
        border-radius: 12px;
        border: 1px solid var(--gray-200);
        overflow: hidden;
    }

    .detail-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        background: var(--gray-50);
        border-bottom: 1px solid var(--gray-200);
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .detail-title {
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .detail-title .icon {
        font-size: 1.2rem;
    }

    .detail-title h3 {
        font-size: 1rem;
        font-weight: 600;
        color: var(--gray-800);
        margin: 0;
    }

    .detail-code {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.85rem;
    }

    .detail-code .label {
        color: var(--gray-500);
    }

    .detail-code .value {
        font-weight: 700;
        color: var(--primary);
        font-family: monospace;
        background: var(--gray-100);
        padding: 0.2rem 0.6rem;
        border-radius: 4px;
    }

    /* ============================================
       DETAIL BODY
       ============================================ */
    .detail-body {
        padding: 1.5rem;
    }

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

    .detail-section {
        padding: 0.8rem 1.2rem;
        border-right: 1px solid var(--gray-200);
        border-bottom: 1px solid var(--gray-200);
    }

    .detail-section:nth-child(2n) {
        border-right: none;
    }

    .detail-section:nth-child(3),
    .detail-section:nth-child(4) {
        border-bottom: none;
    }

    .detail-section.highlight-section {
        background: #f8fafc;
    }

    .section-title {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: 0.6rem;
        padding-bottom: 0.4rem;
        border-bottom: 1px solid var(--gray-200);
    }

    .section-title .icon {
        font-size: 1.1rem;
    }

    .section-title h4 {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--gray-700);
        margin: 0;
    }

    .detail-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.3rem 0;
        gap: 1rem;
    }

    .detail-item .label {
        font-size: 0.8rem;
        color: var(--gray-500);
        flex-shrink: 0;
    }

    .detail-item .value {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--gray-800);
        text-align: right;
        word-break: break-word;
    }

    .detail-item .value.highlight {
        color: var(--primary);
        font-weight: 600;
    }

    .detail-item .value.price {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--primary);
    }

    .detail-item.total {
        background: var(--primary);
        margin: 0 -0.5rem;
        padding: 0.5rem 1rem;
        border-radius: 8px;
    }

    .detail-item.total .label {
        color: rgba(255,255,255,0.8);
        font-weight: 600;
    }

    .detail-item.total .value {
        color: #fff;
        font-size: 1.3rem;
    }

    .value.status-pending { color: #d97706; }
    .value.status-confirmed { color: #059669; }
    .value.status-cancelled { color: #dc2626; }

    .value.payment-belum_bayar { color: #dc2626; }
    .value.payment-menunggu_konfirmasi { color: #d97706; }
    .value.payment-lunas { color: #059669; }

    .btn-bukti {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.2rem 0.6rem;
        background: var(--gray-100);
        border-radius: 4px;
        color: var(--gray-700);
        font-size: 0.75rem;
        transition: var(--transition);
        text-decoration: none;
    }

    .btn-bukti:hover {
        background: var(--primary);
        color: #fff;
        text-decoration: none;
    }

    /* ============================================
       ACTION BUTTONS - DIPERBAIKI
       ============================================ */
    .action-buttons {
        display: flex;
        gap: 1rem;
        padding: 1.2rem 1.5rem;
        background: var(--gray-50);
        border-top: 1px solid var(--gray-200);
        flex-wrap: wrap;
    }

    .action-buttons form {
        display: flex;
        gap: 1rem;
        width: 100%;
        flex-wrap: wrap;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.8rem 1.8rem;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        flex: 1;
        min-width: 180px;
        position: relative;
        z-index: 10;
        pointer-events: auto;
    }

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

    .btn:active {
        transform: translateY(0);
    }

    .btn-success {
        background: linear-gradient(135deg, #059669, #047857);
        color: #fff;
    }

    .btn-success:hover {
        background: linear-gradient(135deg, #047857, #065f46);
        box-shadow: 0 6px 20px rgba(5, 150, 105, 0.4);
    }

    .btn-danger {
        background: linear-gradient(135deg, #dc2626, #b91c1c);
        color: #fff;
    }

    .btn-danger:hover {
        background: linear-gradient(135deg, #b91c1c, #991b1b);
        box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
    }

    /* ============================================
       EMPTY STATE
       ============================================ */
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
    }

    .empty-icon {
        font-size: 4rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .empty-state h3 {
        font-size: 1.2rem;
        color: var(--gray-700);
        margin-bottom: 0.5rem;
    }

    .empty-state p {
        color: var(--gray-500);
        margin-bottom: 1.5rem;
    }

    .btn-primary {
        background: var(--primary);
        color: #fff;
        padding: 0.6rem 1.5rem;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        display: inline-block;
        transition: var(--transition);
    }

    .btn-primary:hover {
        background: var(--primary-light);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    /* ============================================
       RESPONSIVE
       ============================================ */
    @media (max-width: 1024px) {
        .detail-grid {
            grid-template-columns: 1fr;
        }

        .detail-section {
            border-right: none !important;
            border-bottom: 1px solid var(--gray-200) !important;
        }

        .detail-section:last-child {
            border-bottom: none !important;
        }
    }

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

        .main-content {
            padding: 1rem;
        }

        .content-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .header-left {
            width: 100%;
        }

        .detail-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .detail-body {
            padding: 0.5rem;
        }

        .detail-grid {
            grid-template-columns: 1fr;
        }

        .detail-section {
            padding: 0.6rem 0.8rem;
            border-right: none !important;
            border-bottom: 1px solid var(--gray-200) !important;
        }

        .detail-section:last-child {
            border-bottom: none !important;
        }

        .action-buttons {
            flex-direction: column;
            padding: 0.8rem 1rem;
        }

        .action-buttons form {
            flex-direction: column;
            gap: 0.6rem;
        }

        .btn {
            width: 100%;
            flex: 1 1 auto;
            padding: 0.7rem 1.2rem;
            min-width: unset;
            font-size: 0.9rem;
        }

        .detail-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.1rem;
            padding: 0.2rem 0;
        }

        .detail-item .value {
            text-align: left;
            width: 100%;
        }

        .detail-item.total {
            margin: 0;
            padding: 0.3rem 0.6rem;
        }

        .detail-item.total .value {
            text-align: left;
        }

        .detail-item .value.price {
            font-size: 1rem;
        }

        .detail-item.total .value {
            font-size: 1.1rem;
        }
    }

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

        .content-header h2 {
            font-size: 1.1rem;
        }

        .detail-code {
            flex-wrap: wrap;
        }

        .detail-body {
            padding: 0.3rem;
        }

        .detail-section {
            padding: 0.4rem 0.6rem;
        }

        .detail-item .value.price {
            font-size: 0.9rem;
        }

        .detail-item.total .value {
            font-size: 1rem;
        }

        .btn {
            font-size: 0.8rem;
            padding: 0.6rem 1rem;
        }

        .section-title h4 {
            font-size: 0.8rem;
        }

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

        .detail-item .value {
            font-size: 0.8rem;
        }
    }
</style>

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