<?php
/**
 * Halaman Kelola Claim Pengembalian Dana - Admin
 */
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kelola Claim Pengembalian Dana - 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; }
        .content-header h2 { font-size: 1.5rem; font-weight: 700; color: #1a202c; }
        .content-header p { color: #718096; font-size: 0.95rem; margin-top: 4px; }

        /* Stats */
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
        .stat-card { background: #f7fafc; padding: 16px 20px; border-radius: 12px; border: 1px solid #e2e8f0; }
        .stat-card .number { font-size: 1.8rem; font-weight: 700; }
        .stat-card .label { color: #718096; font-size: 0.85rem; }
        .stat-card.total .number { color: #2b6cb0; }
        .stat-card.pending .number { color: #d69e2e; }
        .stat-card.diterima .number { color: #38a169; }
        .stat-card.ditolak .number { color: #e53e3e; }
        .stat-card.refund .number { color: #805ad5; }

        /* Table */
        .table-wrapper { overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
        thead { background: #f7fafc; }
        th { padding: 12px 16px; text-align: left; font-weight: 600; color: #4a5568; border-bottom: 2px solid #e2e8f0; white-space: nowrap; }
        td { padding: 12px 16px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
        tr:hover { background: #f7fafc; }

        .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
        .badge-pending { background: #fef3c7; color: #92400e; }
        .badge-diterima { background: #d1fae5; color: #065f46; }
        .badge-ditolak { background: #fee2e2; color: #991b1b; }

        .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: none; border-radius: 6px; font-weight: 600; font-size: 0.8rem; cursor: pointer; transition: all 0.3s ease; text-decoration: none; }
        .btn-primary { background: #2b6cb0; color: #fff; }
        .btn-primary:hover { background: #1a4a7a; }
        .btn-success { background: #38a169; color: #fff; }
        .btn-success:hover { background: #2f855a; }
        .btn-danger { background: #e53e3e; color: #fff; }
        .btn-danger:hover { background: #c53030; }
        .btn-secondary { background: #e2e8f0; color: #4a5568; }
        .btn-secondary:hover { background: #cbd5e0; }
        .btn-sm { padding: 4px 10px; font-size: 0.75rem; }

        .empty-state { text-align: center; padding: 40px 20px; color: #a0aec0; }
        .empty-state i { font-size: 3rem; display: block; margin-bottom: 10px; opacity: 0.5; }

        .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-warning { background: #fef3c7; color: #92400e; border-left-color: #f59e0b; }
        .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; }

        @media (max-width: 768px) { .dashboard-wrapper { flex-direction: column; padding: 0 12px; } .main-content { padding: 1rem; } .stats-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } .table-wrapper { font-size: 0.8rem; } th, td { padding: 8px 10px; } }
    </style>
</head>
<body>
    <div class="dashboard-wrapper">
        <?php 
        $sidebarPath = __DIR__ . '/includes/sidebar_admin.php';
        if (file_exists($sidebarPath)) {
            include $sidebarPath;
        } else {
            echo '<div style="padding:1rem; background:#fee2e2; border-radius:8px; color:#991b1b; border:1px solid #fecaca; max-width:300px;">
                    <strong>⚠️ Sidebar tidak ditemukan!</strong><br>
                    Path: ' . $sidebarPath . '<br>
                    Silakan buat file: <code>views/includes/sidebar_admin.php</code>
                  </div>';
        }
        ?>
        
        <main class="main-content">
            <div class="content-header">
                <h2><i class="fas fa-file-invoice" style="color:#d69e2e;"></i> Kelola Claim Pengembalian Dana</h2>
                <p>Kelola semua pengajuan claim pengembalian dana dari wisatawan.</p>
            </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; ?>

            <!-- Statistics -->
            <div class="stats-grid">
                <div class="stat-card total">
                    <div class="number"><?= $totalClaim ?? 0 ?></div>
                    <div class="label">📋 Total Claim</div>
                </div>
                <div class="stat-card pending">
                    <div class="number"><?= $pendingClaim ?? 0 ?></div>
                    <div class="label">⏳ Menunggu</div>
                </div>
                <div class="stat-card diterima">
                    <div class="number"><?= $diterimaClaim ?? 0 ?></div>
                    <div class="label">✅ Diterima</div>
                </div>
                <div class="stat-card ditolak">
                    <div class="number"><?= $ditolakClaim ?? 0 ?></div>
                    <div class="label">❌ Ditolak</div>
                </div>
                <div class="stat-card refund">
                    <div class="number">Rp <?= number_format($totalRefund ?? 0, 0, ',', '.') ?></div>
                    <div class="label">💰 Total Refund</div>
                </div>
            </div>

            <!-- Table -->
            <div class="table-wrapper">
                <?php if (!empty($claims)): ?>
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Kode Pesanan</th>
                                <th>Wisatawan</th>
                                <th>Kapal</th>
                                <th>Tanggal</th>
                                <th>Total</th>
                                <th>Status</th>
                                <th>Tanggal Claim</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($claims as $claim): ?>
                                <tr>
                                    <td>#<?= $claim['id'] ?></td>
                                    <td><strong><?= htmlspecialchars($claim['kode_pesanan'] ?? '-') ?></strong></td>
                                    <td>
                                        <div><?= htmlspecialchars($claim['wisatawan_nama'] ?? '-') ?></div>
                                        <small style="color:#718096;font-size:0.75rem;"><?= htmlspecialchars($claim['wisatawan_hp'] ?? '-') ?></small>
                                    </td>
                                    <td><?= htmlspecialchars($claim['nama_kapal'] ?? '-') ?></td>
                                    <td><?= isset($claim['tanggal_berangkat']) ? date('d/m/Y', strtotime($claim['tanggal_berangkat'])) : '-' ?></td>
                                    <td>Rp <?= number_format($claim['total_harga'] ?? 0, 0, ',', '.') ?></td>
                                    <td>
                                        <?php if ($claim['status_claim'] == 'pending'): ?>
                                            <span class="badge badge-pending"><i class="fas fa-clock"></i> Menunggu</span>
                                        <?php elseif ($claim['status_claim'] == 'diterima'): ?>
                                            <span class="badge badge-diterima"><i class="fas fa-check"></i> Diterima</span>
                                        <?php elseif ($claim['status_claim'] == 'ditolak'): ?>
                                            <span class="badge badge-ditolak"><i class="fas fa-times"></i> Ditolak</span>
                                        <?php endif; ?>
                                    </td>
                                    <td><?= isset($claim['tanggal_claim']) ? date('d/m/Y H:i', strtotime($claim['tanggal_claim'])) : '-' ?></td>
                                    <td>
                                        <a href="?page=admin&action=detailClaim&id=<?= $claim['id'] ?>" class="btn btn-primary btn-sm">
                                            <i class="fas fa-eye"></i> Detail
                                        </a>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                <?php else: ?>
                    <div class="empty-state">
                        <i class="fas fa-inbox"></i>
                        <p>Belum ada pengajuan claim pengembalian dana.</p>
                    </div>
                <?php endif; ?>
            </div>
        </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);
            });
        });
    </script>
</body>
</html>