<?php
/**
 * Halaman Detail Claim Pengembalian Dana - Admin
 * DIPERBAIKI - Menampilkan alasan pengajuan claim (dibatalkan supir/wisatawan)
 */
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detail Claim - Admin</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; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
        .content-header h2 { font-size: 1.5rem; font-weight: 700; color: #1a202c; }
        .content-header p { color: #718096; font-size: 0.95rem; margin-top: 4px; }

        .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
        .info-card { background: #f7fafc; padding: 16px 20px; border-radius: 12px; border: 1px solid #e2e8f0; }
        .info-card .label { color: #718096; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; }
        .info-card .value { font-weight: 600; font-size: 1rem; margin-top: 4px; }

        .claim-detail { background: #fefcbf; border-left: 4px solid #d69e2e; padding: 16px 20px; border-radius: 8px; margin-bottom: 20px; }
        .claim-detail .label { color: #92400e; font-weight: 600; }
        .claim-detail .value { color: #744210; white-space: pre-wrap; }

        .form-group { margin-bottom: 1rem; }
        .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: #fff; }
        .form-control:focus { outline: none; border-color: #2b6cb0; box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.15); }
        textarea.form-control { min-height: 100px; resize: vertical; }

        .badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
        .badge-pending { background: #fef3c7; color: #92400e; }
        .badge-diterima { background: #d1fae5; color: #065f46; }
        .badge-ditolak { background: #fee2e2; color: #991b1b; }
        .badge-info { background: #dbeafe; color: #1e40af; }
        .badge-warning { background: #fef3c7; color: #92400e; }
        .badge-danger { background: #fee2e2; color: #991b1b; }
        .badge-secondary { background: #e5e7eb; color: #4b5563; }

        .btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border: none; border-radius: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; text-decoration: none; }
        .btn-success { background: #38a169; color: #fff; }
        .btn-success:hover { background: #2f855a; transform: translateY(-1px); }
        .btn-danger { background: #e53e3e; color: #fff; }
        .btn-danger:hover { background: #c53030; transform: translateY(-1px); }
        .btn-secondary { background: #e2e8f0; color: #4a5568; }
        .btn-secondary:hover { background: #cbd5e0; }
        .btn-primary { background: #2b6cb0; color: #fff; }
        .btn-primary:hover { background: #1a4a7a; transform: translateY(-1px); }
        .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-close { margin-left: auto; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: inherit; opacity: 0.6; }
        .alert-close:hover { opacity: 1; }

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

        .section-title { margin: 20px 0 12px 0; color: #2d3748; font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
        .section-title i { color: #2b6cb0; }

        .admin-note { background: #ebf8ff; border-left: 4px solid #2b6cb0; padding: 16px 20px; border-radius: 8px; margin-bottom: 20px; }
        .admin-note .label { color: #2b6cb0; font-weight: 600; }
        .admin-note .value { margin-top: 8px; white-space: pre-wrap; }

        .claim-reason-box { 
            background: #f7fafc; 
            border-radius: 12px; 
            padding: 16px 20px; 
            border: 1px solid #e2e8f0;
            margin-bottom: 20px;
        }
        .claim-reason-box .reason-label {
            font-weight: 600;
            color: #4a5568;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .claim-reason-box .reason-detail {
            margin-top: 8px;
            padding: 10px 14px;
            background: #fff;
            border-radius: 8px;
            border-left: 3px solid #2b6cb0;
            font-size: 0.9rem;
            color: #4a5568;
        }

        @media (max-width: 768px) { 
            .dashboard-wrapper { flex-direction: column; padding: 0 12px; } 
            .main-content { padding: 1rem; } 
            .info-grid { grid-template-columns: 1fr; }
            .content-header { flex-direction: column; align-items: flex-start; }
        }
        @media (max-width: 480px) { 
            .main-content { padding: 0.8rem; } 
            .btn-group { flex-direction: column; } 
            .btn { justify-content: center; width: 100%; }
            .refund-box .amount { font-size: 1.5rem; }
        }
    </style>
</head>
<body>
    <div class="dashboard-wrapper">
        <?php 
        $sidebarPath = __DIR__ . '/../layouts/sidebar_admin.php';
        if (file_exists($sidebarPath)) {
            include $sidebarPath;
        }
        ?>
        
        <main class="main-content">
            <div class="content-header">
                <div>
                    <h2><i class="fas fa-file-invoice" style="color:#d69e2e;"></i> Detail Claim Pengembalian Dana</h2>
                    <p>Detail lengkap pengajuan claim dan kelola keputusan.</p>
                </div>
                <div>
                    <a href="?page=admin&action=claimPengembalian" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Kembali ke Daftar
                    </a>
                </div>
            </div>

            <!-- FLASH MESSAGES -->
            <?php if (isset($_SESSION['flash_success'])): ?>
                <div class="alert alert-success">
                    <i class="fas fa-check-circle" style="font-size:1.2rem;"></i>
                    <div>
                        <strong>✅ Berhasil!</strong>
                        <p style="margin:0.3rem 0 0;"><?= htmlspecialchars($_SESSION['flash_success']) ?></p>
                    </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" style="font-size:1.2rem;"></i>
                    <div>
                        <strong>❌ Gagal!</strong>
                        <p style="margin:0.3rem 0 0;"><?= htmlspecialchars($_SESSION['flash_error']) ?></p>
                    </div>
                    <button class="alert-close" onclick="this.parentElement.remove()">&times;</button>
                    <?php unset($_SESSION['flash_error']); ?>
                </div>
            <?php endif; ?>

            <!-- STATUS CLAIM -->
            <div style="margin-bottom: 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
                <span style="font-weight:600; color:#4a5568;">Status Claim:</span>
                <?php if ($claim['status_claim'] == 'pending'): ?>
                    <span class="badge badge-pending"><i class="fas fa-clock"></i> Menunggu Verifikasi</span>
                <?php elseif ($claim['status_claim'] == 'diterima'): ?>
                    <span class="badge badge-diterima"><i class="fas fa-check-circle"></i> Diterima</span>
                <?php elseif ($claim['status_claim'] == 'ditolak'): ?>
                    <span class="badge badge-ditolak"><i class="fas fa-times-circle"></i> Ditolak</span>
                <?php endif; ?>
            </div>

            <!-- ========================================== -->
            <!-- 🔥 ALASAN PENGAJUAN CLAIM - DITAMBAHKAN -->
            <!-- ========================================== -->
            <div class="claim-reason-box">
                <div class="reason-label">
                    📌 Alasan Pengajuan Claim:
                    <span class="badge <?= $claimReasonBadge ?? 'badge-secondary' ?>" style="padding: 4px 14px; font-size: 0.8rem;">
                        <i class="fas <?= $claimReasonIcon ?? 'fa-info-circle' ?>"></i>
                        <?= htmlspecialchars($claimReason ?? 'Belum diketahui') ?>
                    </span>
                </div>
                <?php if (!empty($claimReasonDetail)): ?>
                    <div class="reason-detail">
                        <i class="fas fa-info-circle" style="color:#2b6cb0;"></i>
                        <?= htmlspecialchars($claimReasonDetail) ?>
                    </div>
                <?php endif; ?>
            </div>

            <!-- INFORMASI PESANAN -->
            <h4 class="section-title"><i class="fas fa-shopping-cart"></i> Informasi Pesanan</h4>
            <div class="info-grid">
                <div class="info-card">
                    <div class="label">Kode Pesanan</div>
                    <div class="value"><strong><?= htmlspecialchars($claim['kode_pesanan'] ?? '-') ?></strong></div>
                </div>
                <div class="info-card">
                    <div class="label">Status Pembayaran</div>
                    <div class="value">
                        <?php if ($claim['status_pembayaran'] == 'lunas'): ?>
                            <span style="color:#38a169;">✅ Lunas</span>
                        <?php else: ?>
                            <span style="color:#e53e3e;">❌ <?= htmlspecialchars($claim['status_pembayaran']) ?></span>
                        <?php endif; ?>
                    </div>
                </div>
                <div class="info-card">
                    <div class="label">Tanggal Pesan</div>
                    <div class="value"><?= isset($claim['tanggal_pesan']) ? date('d/m/Y H:i', strtotime($claim['tanggal_pesan'])) : '-' ?></div>
                </div>
                <div class="info-card">
                    <div class="label">Tanggal Berangkat</div>
                    <div class="value"><?= isset($claim['tanggal_berangkat']) ? date('d/m/Y', strtotime($claim['tanggal_berangkat'])) : '-' ?></div>
                </div>
                <div class="info-card">
                    <div class="label">Total Harga</div>
                    <div class="value" style="font-size:1.1rem; color:#2b6cb0; font-weight:700;">
                        Rp <?= number_format($claim['total_harga'] ?? 0, 0, ',', '.') ?>
                    </div>
                </div>
                <div class="info-card">
                    <div class="label">Tanggal Claim</div>
                    <div class="value"><?= isset($claim['tanggal_claim']) ? date('d/m/Y H:i', strtotime($claim['tanggal_claim'])) : '-' ?></div>
                </div>
            </div>

            <!-- INFORMASI WISATAWAN -->
            <h4 class="section-title"><i class="fas fa-user"></i> Informasi Wisatawan</h4>
            <div class="info-grid">
                <div class="info-card">
                    <div class="label">Nama Lengkap</div>
                    <div class="value"><strong><?= htmlspecialchars($claim['wisatawan_nama'] ?? '-') ?></strong></div>
                </div>
                <div class="info-card">
                    <div class="label">Nomor HP</div>
                    <div class="value"><?= htmlspecialchars($claim['wisatawan_hp'] ?? '-') ?></div>
                </div>
                <div class="info-card">
                    <div class="label">Email</div>
                    <div class="value"><?= htmlspecialchars($claim['wisatawan_email'] ?? '-') ?></div>
                </div>
                <div class="info-card">
                    <div class="label">NIK KTP</div>
                    <div class="value"><?= htmlspecialchars($claim['wisatawan_nik'] ?? '-') ?></div>
                </div>
            </div>

            <!-- INFORMASI KAPAL -->
            <h4 class="section-title"><i class="fas fa-ship"></i> Informasi Kapal</h4>
            <div class="info-grid">
                <div class="info-card">
                    <div class="label">Nama Kapal</div>
                    <div class="value"><strong><?= htmlspecialchars($claim['nama_kapal'] ?? '-') ?></strong></div>
                </div>
                <div class="info-card">
                    <div class="label">Rute</div>
                    <div class="value"><?= htmlspecialchars($claim['pelabuhan_asal'] ?? '-') ?> → <?= htmlspecialchars($claim['pelabuhan_tujuan'] ?? '-') ?></div>
                </div>
                <div class="info-card">
                    <div class="label">Pemilik Kapal</div>
                    <div class="value"><?= htmlspecialchars($claim['pemilik_kapal'] ?? '-') ?></div>
                </div>
                <div class="info-card">
                    <div class="label">Kontak Pemilik</div>
                    <div class="value"><?= htmlspecialchars($claim['pemilik_hp'] ?? '-') ?></div>
                </div>
            </div>

            <!-- ALASAN CLAIM -->
            <div class="claim-detail">
                <div class="label"><i class="fas fa-pen"></i> Alasan Claim (Dari Wisatawan)</div>
                <div class="value" style="margin-top:8px;"><?= nl2br(htmlspecialchars($claim['alasan_claim'] ?? '-')) ?></div>
            </div>

            <!-- CATATAN ADMIN (JIKA SUDAH DIPROSES) -->
            <?php if (!empty($claim['alasan_admin']) && $claim['status_claim'] != 'pending'): ?>
                <div class="admin-note">
                    <div class="label"><i class="fas fa-sticky-note"></i> Catatan Admin</div>
                    <div class="value"><?= nl2br(htmlspecialchars($claim['alasan_admin'])) ?></div>
                </div>
            <?php endif; ?>

            <!-- FORM PROSES CLAIM (JIKA MASIH PENDING) -->
            <?php if ($claim['status_claim'] == 'pending'): ?>
                <div style="background:#f7fafc; border-radius:12px; padding:24px; border:1px solid #e2e8f0; margin-top:20px;">
                    <h4 style="margin-bottom:16px; color:#2d3748;">
                        <i class="fas fa-gavel" style="color:#d69e2e;"></i> Proses Claim
                    </h4>
                    
                    <form method="POST" action="?page=admin&action=prosesClaim" id="prosesClaimForm">
                        <input type="hidden" name="claim_id" value="<?= $claim['id'] ?>">
                        <input type="hidden" name="pesanan_id" value="<?= $claim['pesanan_id'] ?>">

                        <!-- Jumlah Refund -->
                        <div class="refund-box">
                            <div class="label">💰 Jumlah Refund yang Akan Dikembalikan</div>
                            <div class="amount">Rp <?= number_format($claim['total_harga'] ?? 0, 0, ',', '.') ?></div>
                            <input type="hidden" name="jumlah_refund" value="<?= $claim['total_harga'] ?? 0 ?>">
                            <small style="color:#4a5568;">Dana akan ditambahkan ke <strong>Saldo SAVA</strong> Wisatawan</small>
                        </div>

                        <!-- KEPUTUSAN -->
                        <div class="form-group">
                            <label>Keputusan <span class="required">*</span></label>
                            <select name="keputusan" class="form-control" required>
                                <option value="">-- Pilih Keputusan --</option>
                                <option value="diterima" style="color:#38a169; font-weight:600;">✅ Terima Claim</option>
                                <option value="ditolak" style="color:#e53e3e; font-weight:600;">❌ Tolak Claim</option>
                            </select>
                        </div>

                        <!-- ALASAN ADMIN -->
                        <div class="form-group">
                            <label>Catatan / Alasan Admin <span class="required">*</span></label>
                            <textarea name="alasan_admin" class="form-control" placeholder="Berikan alasan/catatan untuk keputusan ini..." required minlength="5"></textarea>
                            <small style="color:#718096; font-size:0.8rem;">Minimal 5 karakter</small>
                        </div>

                        <!-- TOMBOL -->
                        <div class="btn-group">
                            <button type="submit" class="btn btn-success" id="submitBtn">
                                <i class="fas fa-check"></i> Proses Claim
                            </button>
                            <a href="?page=admin&action=claimPengembalian" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Kembali
                            </a>
                        </div>
                    </form>
                </div>
            <?php else: ?>
                <!-- Jika sudah diproses -->
                <div style="background:#f7fafc; border-radius:12px; padding:20px; border:1px solid #e2e8f0; margin-top:20px; text-align:center;">
                    <?php if ($claim['status_claim'] == 'diterima'): ?>
                        <div style="color:#38a169; font-size:1.2rem; font-weight:700;">
                            <i class="fas fa-check-circle"></i> Claim telah DITERIMA
                        </div>
                        <p style="color:#4a5568; margin-top:8px;">
                            Dana sebesar <strong>Rp <?= number_format($claim['total_harga'] ?? 0, 0, ',', '.') ?></strong> 
                            telah dikembalikan ke saldo wisatawan.
                        </p>
                    <?php elseif ($claim['status_claim'] == 'ditolak'): ?>
                        <div style="color:#e53e3e; font-size:1.2rem; font-weight:700;">
                            <i class="fas fa-times-circle"></i> Claim telah DITOLAK
                        </div>
                        <p style="color:#4a5568; margin-top:8px;">
                            Alasan: <?= htmlspecialchars($claim['alasan_admin'] ?? '-') ?>
                        </p>
                    <?php endif; ?>
                    
                    <div style="margin-top:16px;">
                        <a href="?page=admin&action=claimPengembalian" class="btn btn-primary">
                            <i class="fas fa-arrow-left"></i> Kembali ke Daftar Claim
                        </a>
                    </div>
                </div>
            <?php endif; ?>

        </main>
    </div>

    <script>
        // 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);
            });
        });

        // Validasi form sebelum submit
        document.getElementById('prosesClaimForm')?.addEventListener('submit', function(e) {
            const keputusan = this.querySelector('select[name="keputusan"]');
            const alasan = this.querySelector('textarea[name="alasan_admin"]');
            
            if (!keputusan.value) {
                e.preventDefault();
                alert('Silakan pilih keputusan (Terima atau Tolak).');
                keputusan.focus();
                return false;
            }
            
            if (!alasan.value || alasan.value.length < 5) {
                e.preventDefault();
                alert('Catatan admin harus diisi minimal 5 karakter.');
                alasan.focus();
                return false;
            }
            
            const statusText = keputusan.value == 'diterima' ? 'MENERIMA' : 'MENOLAK';
            if (!confirm('⚠️ Anda akan ' + statusText + ' claim ini?\n\n📝 Catatan: ' + alasan.value)) {
                e.preventDefault();
                return false;
            }
            
            const btn = document.getElementById('submitBtn');
            if (btn) {
                btn.disabled = true;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memproses...';
            }
        });
    </script>

</body>
</html>