<?php
/**
 * kelola_kapal.php - Halaman Kelola Kapal untuk Admin
 * DIPERBAIKI - Tanpa tombol Nonaktifkan
 */
include __DIR__ . '/../layouts/header.php';
$activeMenu = 'kelolaKapal';

$kapalList = $kapalList ?? [];
$unreadCount = $unreadCount ?? 0;
$pendingPayments = $pendingPayments ?? [];
$pendingClaims = $pendingClaims ?? [];
$pendingHapusCount = $pendingHapusCount ?? 0;
$pendingCount = $pendingCount ?? 0;
?>

<!-- Tambahkan Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<div class="dashboard-wrapper">
    <!-- SIDEBAR -->
    <?php include __DIR__ . '/includes/sidebar_admin.php'; ?>

    <!-- MAIN CONTENT -->
    <main class="main-content">
        <div class="content-header">
            <div class="header-left">
                <h2><i class="fas fa-ship" style="color:#2b6cb0;"></i> Kelola Kapal</h2>
                <p>Kelola semua kapal yang terdaftar di sistem.</p>
            </div>

        <?php if(isset($_SESSION['flash_message'])): ?>
            <div class="alert alert-success">
                <span class="alert-icon">✅</span>
                <?= htmlspecialchars($_SESSION['flash_message']) ?>
                <button class="alert-close" onclick="this.parentElement.remove()">✕</button>
                <?php unset($_SESSION['flash_message']); ?>
            </div>
        <?php endif; ?>

        <?php if(isset($_SESSION['error_message'])): ?>
            <div class="alert alert-danger">
                <span class="alert-icon">❌</span>
                <?= htmlspecialchars($_SESSION['error_message']) ?>
                <button class="alert-close" onclick="this.parentElement.remove()">✕</button>
                <?php unset($_SESSION['error_message']); ?>
            </div>
        <?php endif; ?>

        <!-- Kapal Menunggu Verifikasi -->
        <?php 
        $pendingKapal = array_filter($kapalList, function($k) {
            return isset($k['status_verifikasi']) && $k['status_verifikasi'] == 'pending';
        });
        ?>
        <?php if(!empty($pendingKapal)): ?>
        <div class="card-section highlight-pending">
            <div class="card-header">
                <h3><i class="fas fa-clock" style="color:#f59e0b;"></i> Kapal Menunggu Verifikasi</h3>
                <span class="badge badge-warning"><?= count($pendingKapal) ?> Menunggu</span>
            </div>
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Nama Kapal</th>
                            <th>Pemilik</th>
                            <th>Jenis</th>
                            <th>Kapasitas</th>
                            <th>Detail</th>
                            <th>Status</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $i = 1; foreach($pendingKapal as $k): ?>
                        <tr class="pending-row">
                            <td><?= $i++ ?></td>
                            <td>
                                <strong><?= htmlspecialchars($k['nama_kapal'] ?? '-') ?></strong>
                                <?php if(!empty($k['nomor_lambung'])): ?>
                                    <br><small style="color:#718096;"><?= htmlspecialchars($k['nomor_lambung']) ?></small>
                                <?php endif; ?>
                            </td>
                            <td>
                                <?= htmlspecialchars($k['pemilik_nama'] ?? '-') ?>
                                <br>
                                <small style="color:#718096;">
                                    <i class="fas fa-phone"></i> <?= htmlspecialchars($k['pemilik_no_hp'] ?? '-') ?>
                                </small>
                            </td>
                            <td><?= ucfirst($k['jenis'] ?? '-') ?></td>
                            <td><?= $k['kapasitas'] ?? 0 ?> org</td>
                            <td>
                                <button class="btn btn-sm btn-info btn-detail" 
                                        data-id="<?= $k['id'] ?>"
                                        data-nama="<?= htmlspecialchars($k['nama_kapal'] ?? '-') ?>"
                                        data-pemilik="<?= htmlspecialchars($k['pemilik_nama'] ?? '-') ?>"
                                        data-hp="<?= htmlspecialchars($k['pemilik_no_hp'] ?? '-') ?>"
                                        data-jenis="<?= ucfirst($k['jenis'] ?? '-') ?>"
                                        data-kapasitas="<?= $k['kapasitas'] ?? 0 ?>"
                                        data-pelabuhan="<?= htmlspecialchars($k['pelabuhan_asal'] ?? '-') ?>"
                                        data-fasilitas="<?= htmlspecialchars($k['fasilitas'] ?? '-') ?>"
                                        data-foto="<?= !empty($k['foto']) ? '/reservasi-kapal-wisata/uploads/kapal/' . $k['foto'] : '' ?>"
                                        data-tanggal="<?= date('d/m/Y H:i', strtotime($k['created_at'] ?? 'now')) ?>">
                                    <i class="fas fa-info-circle"></i> Detail
                                </button>
                            </td>
                            <td>
                                <span class="badge badge-pending"><i class="fas fa-clock"></i> Menunggu Verifikasi</span>
                            </td>
                            <td>
                                <div class="action-group">
                                    <form method="POST" action="?page=admin&action=verifikasiKapal&id=<?= $k['id'] ?>&act=verify" style="display:inline;">
                                        <button type="submit" class="btn btn-sm btn-success" onclick="return confirm('Yakin ingin memverifikasi kapal ini?')">
                                            <i class="fas fa-check"></i> Verifikasi
                                        </button>
                                    </form>
                                    <button class="btn btn-sm btn-danger" onclick="tolakKapal(<?= $k['id'] ?>, '<?= htmlspecialchars($k['nama_kapal'] ?? '-') ?>')">
                                        <i class="fas fa-times"></i> Tolak
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
        <?php endif; ?>

        <!-- Semua Kapal -->
        <div class="card-section">
            <div class="card-header">
                <h3><i class="fas fa-list"></i> Semua Kapal</h3>
                <span class="badge badge-secondary"><?= count($kapalList) ?> Total</span>
            </div>
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Nama Kapal</th>
                            <th>Pemilik</th>
                            <th>Jenis</th>
                            <th>Kapasitas</th>
                            <th>Detail</th>
                            <th>Status</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php 
                        $i = 1; 
                        foreach($kapalList as $k):
                            // Skip yang pending (sudah di tampilkan di atas)
                            if(isset($k['status_verifikasi']) && $k['status_verifikasi'] == 'pending') continue;
                            
                            $badge = 'badge-success';
                            $statusText = '<i class="fas fa-check-circle"></i> Terverifikasi';
                            
                            if(isset($k['status_verifikasi']) && $k['status_verifikasi'] == 'rejected') {
                                $badge = 'badge-danger';
                                $statusText = '<i class="fas fa-times-circle"></i> Ditolak';
                            } elseif(isset($k['status_verifikasi']) && $k['status_verifikasi'] == 'nonaktif') {
                                $badge = 'badge-danger';
                                $statusText = '<i class="fas fa-ban"></i> Nonaktif';
                            } elseif(!isset($k['status_verifikasi']) || $k['status_verifikasi'] != 'verified') {
                                $badge = 'badge-pending';
                                $statusText = '<i class="fas fa-clock"></i> ' . ucfirst($k['status_verifikasi'] ?? 'pending');
                            }
                            
                            // Cek status request hapus
                            $isRequested = isset($k['hapus_request']) && $k['hapus_request'] == 'menunggu';
                        ?>
                        <tr>
                            <td><?= $i++ ?></td>
                            <td>
                                <strong><?= htmlspecialchars($k['nama_kapal'] ?? '-') ?></strong>
                                <?php if(!empty($k['nomor_lambung'])): ?>
                                    <br><small style="color:#718096;"><?= htmlspecialchars($k['nomor_lambung']) ?></small>
                                <?php endif; ?>
                                <?php if($isRequested): ?>
                                    <br><span class="badge badge-danger" style="margin-top:3px;"><i class="fas fa-trash-alt"></i> Request Hapus</span>
                                <?php endif; ?>
                            </td>
                            <td>
                                <?= htmlspecialchars($k['pemilik_nama'] ?? '-') ?>
                                <br>
                                <small style="color:#718096;">
                                    <i class="fas fa-phone"></i> <?= htmlspecialchars($k['pemilik_no_hp'] ?? '-') ?>
                                </small>
                            </td>
                            <td><?= ucfirst($k['jenis'] ?? '-') ?></td>
                            <td><?= $k['kapasitas'] ?? 0 ?> org</td>
                            <td>
                                <button class="btn btn-sm btn-info btn-detail" 
                                        data-id="<?= $k['id'] ?>"
                                        data-nama="<?= htmlspecialchars($k['nama_kapal'] ?? '-') ?>"
                                        data-pemilik="<?= htmlspecialchars($k['pemilik_nama'] ?? '-') ?>"
                                        data-hp="<?= htmlspecialchars($k['pemilik_no_hp'] ?? '-') ?>"
                                        data-jenis="<?= ucfirst($k['jenis'] ?? '-') ?>"
                                        data-kapasitas="<?= $k['kapasitas'] ?? 0 ?>"
                                        data-pelabuhan="<?= htmlspecialchars($k['pelabuhan_asal'] ?? '-') ?>"
                                        data-fasilitas="<?= htmlspecialchars($k['fasilitas'] ?? '-') ?>"
                                        data-foto="<?= !empty($k['foto']) ? '/reservasi-kapal-wisata/uploads/kapal/' . $k['foto'] : '' ?>"
                                        data-tanggal="<?= date('d/m/Y H:i', strtotime($k['created_at'] ?? 'now')) ?>">
                                    <i class="fas fa-info-circle"></i> Detail
                                </button>
                            </td>
                            <td>
                                <span class="badge <?= $badge ?>"><?= $statusText ?></span>
                                <?php if(!empty($k['alasan_penolakan'])): ?>
                                    <br><small style="color:#718096; font-size:0.65rem;">
                                        Alasan: <?= htmlspecialchars($k['alasan_penolakan']) ?>
                                    </small>
                                <?php endif; ?>
                            </td>
                            <td>
                                <div class="action-group">
                                    <!-- TOMBOL HAPUS SAJA (TANPA NONAKTIFKAN) -->
                                    <a href="?page=admin&action=hapusKapal&id=<?= $k['id'] ?>" 
                                       class="btn btn-sm btn-danger" 
                                       onclick="return confirm('⚠️ PERINGATAN! Anda akan MENGHAPUS PERMANEN kapal ini!\n\nKapal: <?= htmlspecialchars($k['nama_kapal'] ?? '-') ?>\n\nData TIDAK DAPAT DIKEMBALIKAN!\n\nYakin ingin melanjutkan?')">
                                        <i class="fas fa-trash-alt"></i> Hapus
                                    </a>
                                </div>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                        
                        <?php if(empty($kapalList)): ?>
                        <tr>
                            <td colspan="8" style="text-align:center; padding:40px; color:#a0aec0;">
                                <i class="fas fa-ship" style="font-size:2rem; display:block; margin-bottom:8px;"></i>
                                Belum ada kapal terdaftar
                            </td>
                        </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- STATISTIK KAPAL -->
        <div class="kapal-stats">
            <div class="kapal-stat-item">
                <span class="stat-icon"><i class="fas fa-ship"></i></span>
                <div>
                    <span class="stat-number"><?= count($kapalList) ?></span>
                    <span class="stat-label">Total Kapal</span>
                </div>
            </div>
            <div class="kapal-stat-item">
                <span class="stat-icon" style="color:#22c55e;"><i class="fas fa-check-circle"></i></span>
                <div>
                    <span class="stat-number">
                        <?php 
                        $verifiedCount = 0;
                        foreach($kapalList as $k) {
                            if(isset($k['status_verifikasi']) && $k['status_verifikasi'] == 'verified') $verifiedCount++;
                        }
                        echo $verifiedCount;
                        ?>
                    </span>
                    <span class="stat-label">Terverifikasi</span>
                </div>
            </div>
            <div class="kapal-stat-item">
                <span class="stat-icon" style="color:#f59e0b;"><i class="fas fa-clock"></i></span>
                <div>
                    <span class="stat-number"><?= count($pendingKapal) ?></span>
                    <span class="stat-label">Menunggu Verifikasi</span>
                </div>
            </div>
            <div class="kapal-stat-item">
                <span class="stat-icon" style="color:#ef4444;"><i class="fas fa-trash-alt"></i></span>
                <div>
                    <span class="stat-number"><?= $pendingHapusCount ?></span>
                    <span class="stat-label">Request Hapus</span>
                </div>
            </div>
        </div>

        <!-- Modal Detail Kapal -->
        <div class="modal-overlay" id="modalDetailKapal">
            <div class="modal modal-detail">
                <div class="modal-header">
                    <h3><i class="fas fa-info-circle"></i> Detail Kapal</h3>
                    <button class="modal-close" onclick="closeModalDetail()">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="detail-grid">
                        <!-- Foto Kapal -->
                        <div class="detail-photo" id="detailFoto">
                            <div class="photo-placeholder">⛵</div>
                        </div>
                        
                        <!-- Informasi Kapal -->
                        <div class="detail-info">
                            <div class="detail-group">
                                <label><i class="fas fa-ship"></i> Nama Kapal</label>
                                <p id="detailNama">-</p>
                            </div>
                            <div class="detail-group">
                                <label><i class="fas fa-hashtag"></i> Nomor Lambung</label>
                                <p id="detailLambung">-</p>
                            </div>
                            <div class="detail-group">
                                <label><i class="fas fa-tag"></i> Jenis Kapal</label>
                                <p id="detailJenis">-</p>
                            </div>
                            <div class="detail-group">
                                <label><i class="fas fa-users"></i> Kapasitas</label>
                                <p id="detailKapasitas">-</p>
                            </div>
                            <div class="detail-group">
                                <label><i class="fas fa-map-marker-alt"></i> Pelabuhan Asal</label>
                                <p id="detailPelabuhan">-</p>
                            </div>
                            <div class="detail-group">
                                <label><i class="fas fa-concierge-bell"></i> Fasilitas</label>
                                <p id="detailFasilitas">-</p>
                            </div>
                        </div>
                        
                        <!-- Informasi Pemilik -->
                        <div class="detail-owner">
                            <h4><i class="fas fa-user-circle"></i> Informasi Pemilik</h4>
                            <div class="detail-group">
                                <label><i class="fas fa-user"></i> Nama Pemilik</label>
                                <p id="detailPemilik">-</p>
                            </div>
                            <div class="detail-group">
                                <label><i class="fas fa-phone"></i> Nomor HP</label>
                                <p id="detailHp">-</p>
                            </div>
                            <div class="detail-group">
                                <label><i class="fas fa-calendar-alt"></i> Tanggal Daftar</label>
                                <p id="detailTanggal">-</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" onclick="closeModalDetail()"><i class="fas fa-times"></i> Tutup</button>
                </div>
            </div>
        </div>
    </main>
</div>

<!-- Modal Tolak Kapal -->
<div class="modal-overlay" id="modalTolakKapal">
    <div class="modal">
        <div class="modal-header">
            <h3><i class="fas fa-times-circle" style="color:#ef4444;"></i> Tolak Kapal</h3>
            <button class="modal-close" onclick="closeModalTolak()">&times;</button>
        </div>
        <form method="POST" action="" id="formTolakKapal">
            <input type="hidden" name="id" id="tolakKapalId">
            <input type="hidden" name="act" value="reject">
            <div class="form-group">
                <label>Alasan Penolakan <span class="required">*</span></label>
                <textarea name="alasan" id="tolakKapalAlasan" class="form-control" rows="4" placeholder="Masukkan alasan penolakan dengan jelas..." required></textarea>
                <small class="form-hint"><i class="fas fa-info-circle"></i> Alasan akan dikirimkan ke pemilik kapal.</small>
            </div>
            <div class="form-actions">
                <button type="button" class="btn btn-secondary" onclick="closeModalTolak()"><i class="fas fa-times"></i> Batal</button>
                <button type="submit" class="btn btn-danger"><i class="fas fa-times-circle"></i> Tolak Kapal</button>
            </div>
        </form>
    </div>
</div>

<script>
// ============================================
// MODAL DETAIL KAPAL
// ============================================
document.querySelectorAll('.btn-detail').forEach(btn => {
    btn.addEventListener('click', function() {
        const id = this.dataset.id;
        const nama = this.dataset.nama || '-';
        const pemilik = this.dataset.pemilik || '-';
        const hp = this.dataset.hp || '-';
        const jenis = this.dataset.jenis || '-';
        const kapasitas = this.dataset.kapasitas || '-';
        const pelabuhan = this.dataset.pelabuhan || '-';
        const fasilitas = this.dataset.fasilitas || '-';
        const foto = this.dataset.foto || '';
        const tanggal = this.dataset.tanggal || '-';
        
        // Set data
        document.getElementById('detailNama').textContent = nama;
        document.getElementById('detailPemilik').textContent = pemilik;
        document.getElementById('detailHp').textContent = hp;
        document.getElementById('detailJenis').textContent = jenis;
        document.getElementById('detailKapasitas').textContent = kapasitas + ' orang';
        document.getElementById('detailPelabuhan').textContent = pelabuhan;
        document.getElementById('detailFasilitas').textContent = fasilitas || 'Tidak ada fasilitas';
        document.getElementById('detailTanggal').textContent = tanggal;
        
        // Set foto
        const fotoContainer = document.getElementById('detailFoto');
        if (foto) {
            fotoContainer.innerHTML = `<img src="${foto}" alt="${nama}" onerror="this.parentElement.innerHTML='<div class=\\'photo-placeholder\\'>⛵</div>'">`;
        } else {
            fotoContainer.innerHTML = `<div class="photo-placeholder">⛵</div>`;
        }
        
        // Tampilkan modal
        document.getElementById('modalDetailKapal').classList.add('active');
        document.body.style.overflow = 'hidden';
    });
});

function closeModalDetail() {
    document.getElementById('modalDetailKapal').classList.remove('active');
    document.body.style.overflow = '';
}

// ============================================
// MODAL TOLAK KAPAL
// ============================================
function tolakKapal(id, nama) {
    document.getElementById('tolakKapalId').value = id;
    document.getElementById('modalTolakKapal').classList.add('active');
    document.body.style.overflow = 'hidden';
}

function closeModalTolak() {
    document.getElementById('modalTolakKapal').classList.remove('active');
    document.body.style.overflow = '';
}

// Submit form tolak kapal
document.getElementById('formTolakKapal').addEventListener('submit', function(e) {
    e.preventDefault();
    const id = document.getElementById('tolakKapalId').value;
    const alasan = document.getElementById('tolakKapalAlasan').value;
    if(alasan.trim() === '') {
        alert('Alasan penolakan harus diisi!');
        return;
    }
    window.location.href = '?page=admin&action=verifikasiKapal&id=' + id + '&act=reject&alasan=' + encodeURIComponent(alasan);
});

// ============================================
// TUTUP MODAL DENGAN ESC
// ============================================
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeModalDetail();
        closeModalTolak();
    }
});

// ============================================
// TUTUP MODAL DENGAN KLIK LUAR
// ============================================
document.getElementById('modalDetailKapal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeModalDetail();
    }
});

document.getElementById('modalTolakKapal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeModalTolak();
    }
});

// ============================================
// AUTO CLOSE FLASH MESSAGES
// ============================================
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.alert').forEach(alert => {
        setTimeout(() => {
            alert.style.transition = 'all 0.5s ease';
            alert.style.opacity = '0';
            alert.style.transform = 'translateY(-10px)';
            setTimeout(() => alert.style.display = 'none', 500);
        }, 5000);
    });
});
</script>

<style>
    /* ============================================
       LAYOUT
       ============================================ */
    .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: 12px;
    }
    .content-header .header-left h2 {
        font-size: 1.4rem;
        font-weight: 700;
        color: #1a202c;
        margin-bottom: 0.2rem;
    }
    .content-header .header-left p {
        color: #718096;
        font-size: 0.95rem;
        margin: 0;
    }
    .content-header .header-right {
        display: flex;
        gap: 8px;
    }

    /* ============================================
       ALERT
       ============================================ */
    .alert {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0.8rem 1.2rem;
        border-radius: 10px;
        margin-bottom: 1.2rem;
        border-left: 4px solid transparent;
        transition: all 0.5s ease;
    }
    .alert-success {
        background: #d1fae5;
        color: #065f46;
        border-left-color: #22c55e;
    }
    .alert-danger {
        background: #fee2e2;
        color: #991b1b;
        border-left-color: #ef4444;
    }
    .alert-icon {
        font-size: 1.2rem;
    }
    .alert-close {
        margin-left: auto;
        background: none;
        border: none;
        font-size: 1rem;
        cursor: pointer;
        color: inherit;
        opacity: 0.6;
        padding: 0 4px;
    }
    .alert-close:hover {
        opacity: 1;
    }

    /* ============================================
       CARD SECTION
       ============================================ */
    .card-section {
        background: #fff;
        border-radius: 12px;
        padding: 1.2rem 1.5rem;
        margin-bottom: 1.5rem;
        border: 1px solid #e2e8f0;
        transition: all 0.3s ease;
    }
    .card-section:hover {
        border-color: #cbd5e0;
    }
    .card-section.highlight-pending {
        border-left: 4px solid #f59e0b;
        background: #fffbeb;
    }
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.8rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .card-header h3 {
        font-size: 1.05rem;
        font-weight: 700;
        color: #2d3748;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* ============================================
       BADGE
       ============================================ */
    .badge {
        display: inline-block;
        padding: 0.15rem 0.6rem;
        border-radius: 20px;
        font-size: 0.65rem;
        font-weight: 600;
        white-space: nowrap;
    }
    .badge-success {
        background: #d1fae5;
        color: #065f46;
    }
    .badge-pending {
        background: #fef3c7;
        color: #92400e;
    }
    .badge-danger {
        background: #fee2e2;
        color: #991b1b;
    }
    .badge-warning {
        background: #fef3c7;
        color: #92400e;
    }
    .badge-secondary {
        background: #e5e7eb;
        color: #4b5563;
    }

    /* ============================================
       TABLE
       ============================================ */
    .table-responsive {
        overflow-x: auto;
    }
    .table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.85rem;
        min-width: 800px;
    }
    .table th {
        background: #f7fafc;
        color: #4a5568;
        font-weight: 600;
        padding: 0.6rem 0.8rem;
        text-align: left;
        border-bottom: 2px solid #e2e8f0;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .table td {
        padding: 0.6rem 0.8rem;
        border-bottom: 1px solid #e2e8f0;
        vertical-align: middle;
    }
    .table tr:hover td {
        background: #f7fafc;
    }
    .table tr.pending-row {
        background: #fffbeb;
    }
    .table tr.pending-row:hover td {
        background: #fef3c7;
    }

    /* ============================================
       BUTTON
       ============================================ */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.3rem 0.8rem;
        border: none;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.75rem;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        white-space: nowrap;
    }
    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .btn-sm {
        padding: 0.2rem 0.6rem;
        font-size: 0.7rem;
    }
    .btn-primary {
        background: #2b6cb0;
        color: #fff;
    }
    .btn-primary:hover {
        background: #1a4a7a;
        color: #fff;
    }
    .btn-success {
        background: #22c55e;
        color: #fff;
    }
    .btn-success:hover {
        background: #16a34a;
        color: #fff;
    }
    .btn-danger {
        background: #ef4444;
        color: #fff;
    }
    .btn-danger:hover {
        background: #dc2626;
        color: #fff;
    }
    .btn-warning {
        background: #f59e0b;
        color: #1a202c;
    }
    .btn-warning:hover {
        background: #d97706;
        color: #1a202c;
    }
    .btn-secondary {
        background: #e2e8f0;
        color: #4a5568;
    }
    .btn-secondary:hover {
        background: #cbd5e0;
        color: #1a202c;
    }
    .btn-info {
        background: #3b82f6;
        color: #fff;
    }
    .btn-info:hover {
        background: #2563eb;
        color: #fff;
    }
    .action-group {
        display: flex;
        gap: 0.3rem;
        flex-wrap: wrap;
    }

    /* ============================================
       KAPAL STATS
       ============================================ */
    .kapal-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        margin-top: 1.5rem;
        padding: 1rem;
        background: #f7fafc;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
    }
    .kapal-stat-item {
        display: flex;
        align-items: center;
        gap: 0.8rem;
    }
    .kapal-stat-item .stat-icon {
        font-size: 1.5rem;
        opacity: 0.7;
    }
    .kapal-stat-item .stat-number {
        font-size: 1.1rem;
        font-weight: 700;
        color: #1a202c;
        display: block;
        line-height: 1.2;
    }
    .kapal-stat-item .stat-label {
        font-size: 0.7rem;
        color: #718096;
    }

    /* ============================================
       MODAL DETAIL
       ============================================ */
    .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1000;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    .modal-overlay.active {
        display: flex;
    }
    .modal {
        background: #fff;
        border-radius: 16px;
        max-width: 700px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        padding: 1.8rem 2rem;
        position: relative;
        animation: modalIn 0.3s ease;
    }
    .modal-detail {
        max-width: 750px;
    }
    @keyframes modalIn {
        from { transform: scale(0.95) translateY(-20px); opacity: 0; }
        to { transform: scale(1) translateY(0); opacity: 1; }
    }
    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.2rem;
        padding-bottom: 0.8rem;
        border-bottom: 1px solid #e2e8f0;
    }
    .modal-header h3 {
        font-size: 1.1rem;
        font-weight: 700;
        color: #1a202c;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .modal-close {
        background: none;
        border: none;
        font-size: 1.8rem;
        cursor: pointer;
        color: #a0aec0;
        transition: all 0.3s ease;
        line-height: 1;
    }
    .modal-close:hover {
        color: #1a202c;
    }
    .modal-body {
        margin-bottom: 1.2rem;
    }
    .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 0.8rem;
        padding-top: 1rem;
        border-top: 1px solid #e2e8f0;
    }

    /* Detail Grid */
    .detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem;
    }
    .detail-photo {
        grid-column: 1 / -1;
        text-align: center;
        padding: 0.5rem;
        background: #f7fafc;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        min-height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .detail-photo img {
        max-height: 200px;
        max-width: 100%;
        object-fit: cover;
        border-radius: 4px;
    }
    .photo-placeholder {
        font-size: 4rem;
        color: #a0aec0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 150px;
    }
    .detail-group {
        margin-bottom: 0.5rem;
    }
    .detail-group label {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        color: #718096;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        display: flex;
        align-items: center;
        gap: 0.3rem;
    }
    .detail-group p {
        font-size: 0.95rem;
        font-weight: 500;
        color: #1a202c;
        margin: 0.1rem 0;
        word-break: break-word;
    }
    .detail-owner {
        grid-column: 1 / -1;
        background: #f7fafc;
        padding: 1rem;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
    }
    .detail-owner h4 {
        font-size: 0.95rem;
        font-weight: 600;
        color: #4a5568;
        margin-bottom: 0.8rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Form */
    .form-group {
        margin-bottom: 1rem;
    }
    .form-group label {
        display: block;
        font-weight: 600;
        font-size: 0.85rem;
        color: #4a5568;
        margin-bottom: 0.3rem;
    }
    .form-group .required {
        color: #ef4444;
    }
    .form-control {
        width: 100%;
        padding: 0.6rem 0.8rem;
        border: 1.5px solid #e2e8f0;
        border-radius: 8px;
        font-size: 0.9rem;
        transition: all 0.3s ease;
        font-family: inherit;
        resize: vertical;
    }
    .form-control:focus {
        outline: none;
        border-color: #2b6cb0;
        box-shadow: 0 0 0 3px rgba(43,108,176,0.08);
    }
    .form-hint {
        display: block;
        font-size: 0.75rem;
        color: #a0aec0;
        margin-top: 0.2rem;
    }
    .form-actions {
        display: flex;
        gap: 0.8rem;
        justify-content: flex-end;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #e2e8f0;
    }

    /* ============================================
       RESPONSIVE
       ============================================ */
    @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;
        }
        .card-section {
            padding: 1rem;
        }
        .table td, .table th {
            padding: 0.4rem 0.5rem;
            font-size: 0.75rem;
        }
        .action-group {
            flex-direction: column;
        }
        .action-group .btn {
            width: 100%;
            justify-content: center;
        }
        .modal {
            padding: 1.2rem;
        }
        .detail-grid {
            grid-template-columns: 1fr;
        }
        .detail-owner {
            grid-column: 1 / -1;
        }
        .kapal-stats {
            grid-template-columns: 1fr 1fr;
        }
    }
    
    @media (max-width: 480px) {
        .main-content {
            padding: 0.8rem;
        }
        .card-section {
            padding: 0.8rem;
        }
        .table {
            font-size: 0.7rem;
            min-width: 600px;
        }
        .table td, .table th {
            padding: 0.3rem 0.4rem;
        }
        .modal {
            padding: 1rem;
        }
        .kapal-stats {
            grid-template-columns: 1fr;
        }
        .kapal-stat-item .stat-number {
            font-size: 1rem;
        }
    }
</style>

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