<?php
/**
 * Halaman Ajukan Claim Pengembalian Dana
 * DIPERBAIKI - Menampilkan pesan sukses/gagal di halaman yang sama
 */
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajukan Claim - Wisatawan</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f0f4f8; }
        .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: 16px; padding: 1.8rem; box-shadow: 0 4px 20px rgba(0,0,0,0.06); border: 1px solid #e2e8f0; }
        .content-header { margin-bottom: 1.5rem; border-bottom: 1px solid #e2e8f0; padding-bottom: 1rem; }
        .content-header h2 { font-size: 1.5rem; font-weight: 700; color: #1a202c; }
        .content-header p { color: #718096; font-size: 0.95rem; margin-top: 4px; }

        .claim-form { max-width: 700px; margin: 0 auto; }
        .form-group { margin-bottom: 1.2rem; }
        .form-group label { display: block; font-weight: 600; color: #2d3748; margin-bottom: 5px; font-size: 0.9rem; }
        .form-group label .required { color: #e53e3e; }
        .form-control { width: 100%; padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 0.95rem; transition: all 0.3s; background: #f7fafc; }
        .form-control:focus { outline: none; border-color: #2b6cb0; box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.15); background: #fff; }
        .form-control:disabled { background: #edf2f7; cursor: not-allowed; opacity: 0.7; }
        textarea.form-control { min-height: 100px; resize: vertical; }
        select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a5568' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 35px; }

        .info-card { background: #ebf8ff; border-left: 4px solid #2b6cb0; padding: 15px 20px; border-radius: 8px; margin-bottom: 20px; }
        .info-card.warning { background: #fefcbf; border-left-color: #d69e2e; }
        .info-card.success { background: #c6f6d5; border-left-color: #38a169; }
        .info-card.danger { background: #fed7d7; border-left-color: #e53e3e; }
        .info-card h4 { margin-bottom: 5px; font-size: 0.95rem; }
        .info-card p { font-size: 0.9rem; color: #2d3748; }

        .order-summary { background: #f7fafc; border-radius: 10px; padding: 15px 20px; margin-bottom: 20px; }
        .order-summary .row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #e2e8f0; }
        .order-summary .row:last-child { border-bottom: none; }
        .order-summary .label { color: #718096; }
        .order-summary .value { font-weight: 500; color: #1a202c; }

        .refund-amount { background: #c6f6d5; padding: 15px 20px; border-radius: 10px; text-align: center; margin: 20px 0; }
        .refund-amount .amount { font-size: 1.8rem; font-weight: 700; color: #2f855a; }
        .refund-amount .label { color: #2d3748; font-size: 0.9rem; }

        .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border: none; border-radius: 8px; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.3s ease; text-decoration: none; }
        .btn-primary { background: #2b6cb0; color: #fff; }
        .btn-primary:hover { background: #1a4a7a; transform: translateY(-1px); }
        .btn-danger { background: #e53e3e; color: #fff; }
        .btn-danger:hover { background: #c53030; transform: translateY(-1px); }
        .btn-danger:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
        .btn-secondary { background: #e2e8f0; color: #4a5568; }
        .btn-secondary:hover { background: #cbd5e0; }
        .btn-success { background: #38a169; color: #fff; }
        .btn-success:hover { background: #2f855a; }

        .btn-group { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

        .alert { display: flex; align-items: flex-start; 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-warning { background: #fef3c7; color: #92400e; border-left-color: #f59e0b; }
        .alert-info { background: #dbeafe; color: #1e40af; border-left-color: #3b82f6; }
        .alert-close { margin-left: auto; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: inherit; opacity: 0.6; }
        .alert-close:hover { opacity: 1; }
        .alert .alert-icon { font-size: 1.5rem; flex-shrink: 0; }
        .alert .alert-content { flex: 1; }
        .alert .alert-title { font-weight: 700; font-size: 1rem; }
        .alert .alert-message { margin-top: 4px; font-size: 0.9rem; }

        @media (max-width: 768px) { .dashboard-wrapper { flex-direction: column; padding: 0 12px; } .main-content { padding: 1rem; } .btn-group { flex-direction: column; } .btn { justify-content: center; } }
    </style>
</head>
<body>
    <div class="dashboard-wrapper">
        <?php 
        $sidebarPath = __DIR__ . '/../layouts/sidebar_wisatawan.php';
        if (file_exists($sidebarPath)) {
            include $sidebarPath;
        }
        ?>
        
        <main class="main-content">
            <div class="content-header">
                <h2><i class="fas fa-file-invoice" style="color:#e53e3e;"></i> Ajukan Claim Pengembalian Dana</h2>
                <p>Ajukan claim jika supir kapal tidak menjemput sesuai jadwal.</p>
            </div>

            <?php if (isset($_SESSION['flash_success'])): ?>
                <div class="alert alert-success">
                    <i class="fas fa-check-circle alert-icon"></i>
                    <div class="alert-content">
                        <div class="alert-title">✅ Berhasil!</div>
                        <div class="alert-message"><?= htmlspecialchars($_SESSION['flash_success']) ?></div>
                    </div>
                    <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 alert-icon"></i>
                    <div class="alert-content">
                        <div class="alert-title">❌ Gagal!</div>
                        <div class="alert-message"><?= htmlspecialchars($_SESSION['flash_error']) ?></div>
                    </div>
                    <button class="alert-close" onclick="this.parentElement.remove()">&times;</button>
                    <?php unset($_SESSION['flash_error']); ?>
                </div>
            <?php endif; ?>

            <!-- 🔥 NOTIFIKASI DARI RESULT - DIPERBAIKI -->
            <?php if (isset($result) && is_array($result) && isset($result['success'])): ?>
                <?php if ($result['success']): ?>
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle alert-icon"></i>
                        <div class="alert-content">
                            <div class="alert-title">✅ <?= $result['title'] ?? 'Berhasil!' ?></div>
                            <div class="alert-message"><?= htmlspecialchars($result['message'] ?? '') ?></div>
                        </div>
                        <button class="alert-close" onclick="this.parentElement.remove()">&times;</button>
                    </div>
                <?php else: ?>
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-circle alert-icon"></i>
                        <div class="alert-content">
                            <div class="alert-title">❌ <?= $result['title'] ?? 'Gagal!' ?></div>
                            <div class="alert-message"><?= htmlspecialchars($result['message'] ?? '') ?></div>
                        </div>
                        <button class="alert-close" onclick="this.parentElement.remove()">&times;</button>
                    </div>
                <?php endif; ?>
            <?php endif; ?>

            <div class="claim-form">
                <!-- Status Claim -->
                <?php if (isset($claimMessage) && !empty($claimMessage)): ?>
                    <div class="info-card <?= strpos($claimMessage, '✅') !== false ? 'success' : (strpos($claimMessage, '⚠️') !== false ? 'warning' : (strpos($claimMessage, '❌') !== false ? 'danger' : '')) ?>">
                        <h4><i class="fas fa-info-circle"></i> Status Claim</h4>
                        <p><?= htmlspecialchars($claimMessage) ?></p>
                    </div>
                <?php endif; ?>

                <!-- Informasi Pesanan -->
                <div class="order-summary">
                    <h4 style="margin-bottom:10px;color:#2d3748;">📋 Informasi Pesanan</h4>
                    <div class="row">
                        <span class="label">Kode Pesanan</span>
                        <span class="value"><strong><?= htmlspecialchars($pesanan['kode_pesanan'] ?? '-') ?></strong></span>
                    </div>
                    <div class="row">
                        <span class="label">Kapal</span>
                        <span class="value"><?= htmlspecialchars($pesanan['nama_kapal'] ?? '-') ?></span>
                    </div>
                    <div class="row">
                        <span class="label">Tanggal Berangkat</span>
                        <span class="value"><?= isset($pesanan['tanggal_berangkat']) ? date('d/m/Y', strtotime($pesanan['tanggal_berangkat'])) : '-' ?></span>
                    </div>
                    <div class="row">
                        <span class="label">Waktu Jemput Rencana</span>
                        <span class="value"><?= htmlspecialchars($pesanan['waktu_jemput_rencana'] ?? '08:00') ?> WIB</span>
                    </div>
                    <div class="row">
                        <span class="label">Total Harga</span>
                        <span class="value">Rp <?= isset($pesanan['total_harga']) ? number_format($pesanan['total_harga'], 0, ',', '.') : '0' ?></span>
                    </div>
                    <div class="row">
                        <span class="label">Status Pembayaran</span>
                        <span class="value">
                            <?php if ($pesanan['status_pembayaran'] == 'lunas'): ?>
                                <span style="color:#38a169;">✅ Lunas</span>
                            <?php elseif ($pesanan['status_pembayaran'] == 'belum_bayar'): ?>
                                <span style="color:#e53e3e;">❌ Belum Bayar</span>
                            <?php else: ?>
                                <span style="color:#d69e2e;">⏳ <?= htmlspecialchars($pesanan['status_pembayaran']) ?></span>
                            <?php endif; ?>
                        </span>
                    </div>
                </div>

                <!-- Form Claim -->
                <?php if ($canClaim): ?>
                    <!-- 🔥 FORM DENGAN ACTION SAMA (halaman ini) -->
                    <form method="POST" action="" id="claimForm">
                        <input type="hidden" name="pesanan_id" value="<?= $pesanan['id'] ?? 0 ?>">
                        <input type="hidden" name="submit_claim" value="1">

                        <div class="refund-amount">
                            <div class="label">💰 Total Refund yang Akan Dikembalikan</div>
                            <div class="amount">Rp <?= number_format($pesanan['total_harga'] ?? 0, 0, ',', '.') ?></div>
                            <small style="color:#4a5568;">(Dana akan dikembalikan ke Saldo SAVA Anda)</small>
                        </div>

                        <div class="form-group">
                            <label>Alasan Claim <span class="required">*</span></label>
                            <select name="alasan" class="form-control" required>
                                <option value="">-- Pilih Alasan --</option>
                                <option value="Supir tidak datang sesuai jadwal">🚫 Supir tidak datang sesuai jadwal</option>
                                <option value="Supir terlambat lebih dari 2 jam">⏰ Supir terlambat lebih dari 2 jam</option>
                                <option value="Kapal tidak sesuai dengan pesanan">⛵ Kapal tidak sesuai dengan pesanan</option>
                                <option value="Pembatalan dari pihak supir">❌ Pembatalan dari pihak supir</option>
                                <option value="Lainnya">📝 Lainnya</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>Deskripsi Lengkap <span class="required">*</span></label>
                            <textarea name="deskripsi" class="form-control" placeholder="Ceritakan secara detail kejadiannya..." required minlength="10"></textarea>
                            <small style="color:#718096;font-size:0.8rem;">Minimal 10 karakter</small>
                        </div>

                        <div class="info-card warning">
                            <h4><i class="fas fa-exclamation-triangle" style="color:#d69e2e;"></i> Perhatian</h4>
                            <p>Pastikan data yang Anda masukkan benar. Claim yang terbukti palsu akan ditolak dan akun Anda dapat dikenai sanksi.</p>
                        </div>

                        <div class="btn-group">
                            <button type="submit" class="btn btn-danger" id="submitClaimBtn">
                                <i class="fas fa-paper-plane"></i> Kirim Claim
                            </button>
                            <a href="?page=wisatawan&action=status&id=<?= $pesanan['id'] ?? 0 ?>" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Kembali
                            </a>
                        </div>
                    </form>
                <?php else: ?>
                    <div class="info-card danger">
                        <h4><i class="fas fa-ban" style="color:#e53e3e;"></i> Tidak Dapat Mengajukan Claim</h4>
                        <p><?= htmlspecialchars($claimMessage ?? 'Syarat claim belum terpenuhi.') ?></p>
                    </div>
                    <div class="btn-group">
                        <a href="?page=wisatawan&action=status&id=<?= $pesanan['id'] ?? 0 ?>" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Kembali ke Detail Pesanan
                        </a>
                        <a href="?page=wisatawan&action=riwayat" class="btn btn-secondary">
                            <i class="fas fa-list"></i> Lihat Riwayat
                        </a>
                    </div>
                <?php endif; ?>
            </div>
        </main>
    </div>

    <script>
        // Validasi form sebelum submit
        document.getElementById('claimForm')?.addEventListener('submit', function(e) {
            const alasan = this.querySelector('select[name="alasan"]');
            const deskripsi = this.querySelector('textarea[name="deskripsi"]');
            
            if (!alasan.value) {
                e.preventDefault();
                alert('Silakan pilih alasan claim.');
                alasan.focus();
                return false;
            }
            
            if (!deskripsi.value || deskripsi.value.length < 10) {
                e.preventDefault();
                alert('Deskripsi harus diisi minimal 10 karakter.');
                deskripsi.focus();
                return false;
            }
            
            if (!confirm('Apakah Anda yakin ingin mengajukan claim ini?\n\nData yang Anda masukkan akan diverifikasi oleh admin.')) {
                e.preventDefault();
                return false;
            }
            
            // Disable button untuk mencegah double submit
            const btn = document.getElementById('submitClaimBtn');
            if (btn) {
                btn.disabled = true;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memproses...';
            }
        });

        // Auto-hide alert setelah 5 detik
        document.addEventListener('DOMContentLoaded', function() {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(alert => {
                setTimeout(() => {
                    alert.style.transition = 'opacity 0.5s';
                    alert.style.opacity = '0';
                    setTimeout(() => alert.remove(), 500);
                }, 5000);
            });
        });
    </script>
</body>
</html>