<?php
/**
 * form_batal_pesanan.php - Halaman Form Batalkan Pesanan
 */
$activeMenu = 'riwayatPesanan';
$pageTitle = 'Batalkan Pesanan - Wisatawan';
include __DIR__ . '/../layouts/header.php';

$pesanan = $pesanan ?? [];
$canCancel = $canCancel ?? false;
$user = $user ?? null;
$unreadCount = $unreadCount ?? 0;

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

<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_wisatawan.php'; ?>

    <main class="main-content">
        <div class="content-header">
            <div>
                <h2><i class="fas fa-times-circle" style="color:#dc2626;"></i> Batalkan Pesanan</h2>
                <p>Batalkan pesanan kapal Anda.</p>
            </div>
            <a href="?page=wisatawan&action=status&id=<?= $pesanan['id'] ?>" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Kembali
            </a>
        </div>

        <div class="info-card">
            <h3><i class="fas fa-file-invoice"></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">Kapal</span>
                <span class="info-value"><?= htmlspecialchars($pesanan['nama_kapal']) ?></span>
            </div>
            <div class="info-row">
                <span class="info-label">Tanggal Berangkat</span>
                <span class="info-value"><?= date('d/m/Y', strtotime($pesanan['tanggal_berangkat'])) ?></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">Status</span>
                <span class="info-value">
                    <span class="badge badge-warning">
                        <i class="fas fa-clock"></i> <?= ucfirst($pesanan['status_pesanan']) ?>
                    </span>
                </span>
            </div>
        </div>

        <?php if($canCancel): ?>
        <div class="cancel-form">
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle" style="color:#f59e0b; font-size:1.5rem;"></i>
                <div>
                    <strong>⚠️ Perhatian!</strong>
                    <p style="margin:0.3rem 0 0;">Dengan membatalkan pesanan, tindakan ini tidak dapat dibatalkan.</p>
                </div>
            </div>

            <form method="POST" action="?page=wisatawan&action=prosesBatalPesanan" id="cancelForm">
                <input type="hidden" name="pesanan_id" value="<?= $pesanan['id'] ?>">

                <div class="form-group">
                    <label>Alasan Pembatalan <span class="required">*</span></label>
                    <select name="alasan" class="form-input" required>
                        <option value="">-- Pilih alasan --</option>
                        <option value="Perubahan rencana">📅 Perubahan rencana</option>
                        <option value="Mendapatkan harga lebih baik">💰 Mendapatkan harga lebih baik</option>
                        <option value="Kendala keuangan">💳 Kendala keuangan</option>
                        <option value="Kapal sudah dipesan orang lain">⛵ Kapal sudah dipesan orang lain</option>
                        <option value="Lainnya">📝 Lainnya</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Deskripsi / Catatan Tambahan</label>
                    <textarea name="deskripsi" class="form-textarea" rows="3" 
                              placeholder="Ceritakan secara singkat alasan pembatalan..."></textarea>
                </div>

                <div class="form-actions">
                    <a href="?page=wisatawan&action=status&id=<?= $pesanan['id'] ?>" class="btn btn-secondary">
                        <i class="fas fa-times"></i> Batal
                    </a>
                    <button type="submit" class="btn btn-danger btn-lg" id="submitBtn">
                        <i class="fas fa-check"></i> Ya, Batalkan Pesanan
                    </button>
                </div>
            </form>
        </div>
        <?php else: ?>
        <div class="alert alert-danger">
            <i class="fas fa-exclamation-circle"></i>
            <div>
                <strong>❌ Tidak Dapat Dibatalkan</strong>
                <p style="margin:0.3rem 0 0;">
                    Pesanan dengan status <strong><?= ucfirst($pesanan['status_pesanan']) ?></strong> tidak dapat dibatalkan.
                </p>
            </div>
        </div>
        <div style="margin-top:1rem; text-align:center;">
            <a href="?page=wisatawan&action=status&id=<?= $pesanan['id'] ?>" class="btn btn-primary">
                <i class="fas fa-arrow-left"></i> Kembali ke Detail Pesanan
            </a>
        </div>
        <?php endif; ?>
    </main>
</div>

<script>
document.getElementById('cancelForm')?.addEventListener('submit', function(e) {
    const alasan = document.querySelector('select[name="alasan"]').value;
    if (!alasan) {
        e.preventDefault();
        alert('❌ Silakan pilih alasan pembatalan.');
        return false;
    }
    if (!confirm('⚠️ Yakin ingin membatalkan pesanan ini?\n\nTindakan ini tidak dapat dibatalkan!')) {
        e.preventDefault();
        return false;
    }
    const btn = document.getElementById('submitBtn');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memproses...';
});
</script>

<style>
.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;
}
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0.8rem 1.2rem;
    border-radius: 10px;
    border-left: 4px solid transparent;
}
.alert-warning {
    background: #fffbeb;
    color: #92400e;
    border-left-color: #f59e0b;
}
.alert-danger {
    background: #fee2e2;
    color: #991b1b;
    border-left-color: #ef4444;
}
.info-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 1.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;
}
.info-value.harga {
    font-weight: 700;
    color: #2b6cb0;
    font-size: 1rem;
}
.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-warning {
    background: #fef3c7;
    color: #92400e;
}
.cancel-form {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
}
.form-group {
    margin-bottom: 0.8rem;
}
.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.2rem;
}
.form-group .required {
    color: #ef4444;
}
.form-input, .form-textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
}
.form-input:focus, .form-textarea:focus {
    outline: none;
    border-color: #2b6cb0;
    box-shadow: 0 0 0 3px rgba(43,108,176,0.08);
}
.form-textarea {
    resize: vertical;
    min-height: 80px;
}
.form-actions {
    display: flex;
    gap: 0.8rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.2rem;
    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-primary {
    background: #2b6cb0;
    color: #fff;
}
.btn-primary:hover {
    background: #1a4a7a;
    color: #fff;
}
.btn-secondary {
    background: #e2e8f0;
    color: #4a5568;
}
.btn-secondary:hover {
    background: #cbd5e0;
    color: #1a202c;
}
.btn-danger {
    background: #dc2626;
    color: #fff;
}
.btn-danger:hover {
    background: #b91c1c;
    color: #fff;
}
.btn-lg {
    padding: 0.7rem 1.5rem;
    font-size: 1rem;
}
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
@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;
    }
    .info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1rem;
    }
    .info-value {
        text-align: left;
    }
    .form-actions {
        flex-direction: column;
    }
    .form-actions .btn {
        width: 100%;
        justify-content: center;
    }
}
</style>

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