<?php
/**
 * detail_kapal.php - Halaman Detail Kapal untuk Supir
 * DIPERBAIKI - Menampilkan foto kapal (BUKAN foto profil)
 */
$activeMenu = 'kelolaKapal';
$pageTitle = 'Detail Kapal - Supir';
include __DIR__ . '/../layouts/header.php';

$kapal = $kapal ?? null;
$unreadCount = $unreadCount ?? 0;

if (!$kapal) {
    header("Location: ?page=supir&action=kelolaKapal");
    exit;
}

// Ambil data pesanan untuk kapal ini
try {
    $stmt = $this->pdo->prepare("
        SELECT COUNT(*) as total FROM pesanan WHERE kapal_id = ?
    ");
    $stmt->execute([$kapal['id']]);
    $totalPesanan = $stmt->fetchColumn();
} catch (Exception $e) {
    $totalPesanan = 0;
}

// Ambil data rute untuk kapal ini
try {
    $stmt = $this->pdo->prepare("
        SELECT * FROM kapal_rute WHERE kapal_id = ? ORDER BY created_at DESC
    ");
    $stmt->execute([$kapal['id']]);
    $ruteList = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (Exception $e) {
    $ruteList = [];
}

// Ambil data jadwal untuk kapal ini
try {
    $stmt = $this->pdo->prepare("
        SELECT * FROM schedules WHERE kapal_id = ? ORDER BY tanggal_berangkat DESC LIMIT 5
    ");
    $stmt->execute([$kapal['id']]);
    $jadwalList = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (Exception $e) {
    $jadwalList = [];
}

// ==============================================
// CEK FOTO KAPAL - AMBIL DARI DATABASE KAPAL
// ==============================================
$fotoUrl = '';
$fotoExists = false;

// ✅ AMBIL FOTO DARI KOLOM 'foto' DI TABEL KAPAL
// JANGAN AMBIL DARI SESSION ($_SESSION['foto_profil'])
$fotoFile = $kapal['foto'] ?? '';

// Debug - tampilkan di error log
error_log("=== FOTO KAPAL ===");
error_log("Foto file dari database: " . ($fotoFile ?: 'KOSONG'));
error_log("Nama Kapal: " . ($kapal['nama_kapal'] ?? 'Tidak ada'));

if (!empty($fotoFile)) {
    // Cek di beberapa lokasi
    $pathsToCheck = [
        $_SERVER['DOCUMENT_ROOT'] . '/reservasi-kapal-wisata/uploads/kapal/' . $fotoFile,
        $_SERVER['DOCUMENT_ROOT'] . '/uploads/kapal/' . $fotoFile,
        __DIR__ . '/../../uploads/kapal/' . $fotoFile,
        __DIR__ . '/../uploads/kapal/' . $fotoFile,
        __DIR__ . '/uploads/kapal/' . $fotoFile,
    ];
    
    foreach ($pathsToCheck as $path) {
        if (file_exists($path)) {
            $fotoExists = true;
            $fotoUrl = '/reservasi-kapal-wisata/uploads/kapal/' . $fotoFile;
            error_log("Foto ditemukan di: " . $path);
            break;
        }
    }
    
    if (!$fotoExists) {
        error_log("Foto TIDAK ditemukan di semua lokasi yang dicoba");
    }
} else {
    error_log("Tidak ada foto kapal di database");
}
?>

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

    <main class="main-content">
        <div class="content-header">
            <div>
                <h2><i class="fas fa-ship" style="color:#2b6cb0;"></i> Detail Kapal</h2>
                <p>Informasi lengkap kapal Anda.</p>
            </div>
            <div class="header-actions">
                <a href="?page=supir&action=kelolaKapal" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Kembali
                </a>
                <?php if($kapal['status_verifikasi'] != 'verified'): ?>
                    <a href="?page=supir&action=editKapal&id=<?= $kapal['id'] ?>" class="btn btn-warning">
                        <i class="fas fa-edit"></i> Edit
                    </a>
                <?php endif; ?>
            </div>
        </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; ?>

        <!-- ========================================== -->
        <!-- FOTO DAN INFO KAPAL -->
        <!-- ========================================== -->
        <div class="detail-section">
            <div class="detail-card">
                <div class="detail-header">
                    <h3><?= htmlspecialchars($kapal['nama_kapal']) ?></h3>
                    <span class="badge <?= $kapal['status_verifikasi'] == 'verified' ? 'badge-success' : 'badge-warning' ?>">
                        <i class="fas <?= $kapal['status_verifikasi'] == 'verified' ? 'fa-check-circle' : 'fa-clock' ?>"></i>
                        <?= $kapal['status_verifikasi'] == 'verified' ? 'Terverifikasi' : 'Menunggu Verifikasi' ?>
                    </span>
                </div>
                
                <div class="detail-body">
                    <!-- FOTO KAPAL - HANYA FOTO KAPAL (BUKAN FOTO PROFIL) -->
                    <div class="kapal-photo-section">
                        <?php if($fotoExists && !empty($fotoUrl)): ?>
                            <div class="kapal-photo">
                                <img src="<?= $fotoUrl ?>" 
                                     alt="<?= htmlspecialchars($kapal['nama_kapal']) ?>"
                                     onerror="this.style.display='none'; this.parentElement.innerHTML='<div class=\'kapal-photo-placeholder\'><i class=\'fas fa-ship fa-5x\'></i><p>Foto kapal tidak tersedia</p></div>'">
                            </div>
                        <?php else: ?>
                            <div class="kapal-photo-placeholder">
                                <i class="fas fa-ship fa-5x"></i>
                                <p>Foto kapal belum tersedia</p>
                                <small>Upload foto melalui menu Edit Kapal</small>
                            </div>
                        <?php endif; ?>
                    </div>

                    <!-- INFO KAPAL -->
                    <div class="detail-grid">
                        <div class="detail-item">
                            <span class="label"><i class="fas fa-tag"></i> Kode Kapal</span>
                            <span class="value"><?= htmlspecialchars($kapal['nomor_lambung'] ?? $kapal['kode_kapal'] ?? '-') ?></span>
                        </div>
                        <div class="detail-item">
                            <span class="label"><i class="fas fa-ship"></i> Jenis Kapal</span>
                            <span class="value"><?= ucfirst(htmlspecialchars($kapal['jenis'] ?? '-')) ?></span>
                        </div>
                        <div class="detail-item">
                            <span class="label"><i class="fas fa-users"></i> Kapasitas</span>
                            <span class="value"><?= $kapal['kapasitas'] ?? 0 ?> orang</span>
                        </div>
                        <div class="detail-item">
                            <span class="label"><i class="fas fa-map-marker-alt"></i> Pelabuhan Asal</span>
                            <span class="value"><?= htmlspecialchars($kapal['pelabuhan_asal'] ?? $kapal['pelabuhan'] ?? '-') ?></span>
                        </div>
                        <div class="detail-item">
                            <span class="label"><i class="fas fa-flag-checkered"></i> Pelabuhan Tujuan</span>
                            <span class="value"><?= htmlspecialchars($kapal['pelabuhan_tujuan'] ?? '-') ?></span>
                        </div>
                        <div class="detail-item">
                            <span class="label"><i class="fas fa-money-bill-wave"></i> Harga Sewa</span>
                            <span class="value harga">Rp <?= number_format($kapal['harga_sewa'] ?? 0, 0, ',', '.') ?></span>
                        </div>
                        <div class="detail-item">
                            <span class="label"><i class="fas fa-calendar-alt"></i> Tanggal Daftar</span>
                            <span class="value"><?= isset($kapal['created_at']) ? date('d/m/Y H:i', strtotime($kapal['created_at'])) : '-' ?></span>
                        </div>
                        <div class="detail-item">
                            <span class="label"><i class="fas fa-clipboard-list"></i> Total Pesanan</span>
                            <span class="value"><?= $totalPesanan ?> pesanan</span>
                        </div>
                        <div class="detail-item">
                            <span class="label"><i class="fas fa-route"></i> Total Rute</span>
                            <span class="value"><?= count($ruteList) ?> rute</span>
                        </div>
                    </div>
                    
                    <!-- FASILITAS -->
                    <?php if(!empty($kapal['fasilitas'])): ?>
                        <div class="detail-description">
                            <span class="label"><i class="fas fa-concierge-bell"></i> Fasilitas</span>
                            <p><?= nl2br(htmlspecialchars($kapal['fasilitas'])) ?></p>
                        </div>
                    <?php endif; ?>
                    
                    <!-- DESKRIPSI -->
                    <?php if(!empty($kapal['deskripsi'])): ?>
                        <div class="detail-description">
                            <span class="label"><i class="fas fa-align-left"></i> Deskripsi</span>
                            <p><?= nl2br(htmlspecialchars($kapal['deskripsi'])) ?></p>
                        </div>
                    <?php endif; ?>
                </div>
            </div>

            <!-- ========================================== -->
            <!-- RUTE KAPAL -->
            <!-- ========================================== -->
            <div class="detail-card">
                <div class="detail-header">
                    <h4><i class="fas fa-route"></i> Rute Kapal</h4>
                    <a href="?page=supir&action=kelolaRute" class="btn btn-sm btn-primary">
                        <i class="fas fa-plus"></i> Kelola Rute
                    </a>
                </div>
                
                <?php if(empty($ruteList)): ?>
                    <div class="empty-state-small">
                        <p>Belum ada rute untuk kapal ini.</p>
                        <a href="?page=supir&action=kelolaRute" class="btn btn-sm btn-primary">Tambah Rute</a>
                    </div>
                <?php else: ?>
                    <div class="rute-list">
                        <?php foreach($ruteList as $rute): ?>
                            <div class="rute-item">
                                <div class="rute-info">
                                    <span class="rute-route">
                                        <i class="fas fa-location-dot"></i> <?= htmlspecialchars($rute['asal'] ?? 'Parapat') ?>
                                        <i class="fas fa-arrow-right"></i>
                                        <i class="fas fa-flag"></i> <?= htmlspecialchars($rute['tujuan']) ?>
                                    </span>
                                    <span class="rute-harga">Rp <?= number_format($rute['harga_jual'] ?? 0, 0, ',', '.') ?></span>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>

            <!-- ========================================== -->
            <!-- JADWAL KAPAL -->
            <!-- ========================================== -->
            <div class="detail-card">
                <div class="detail-header">
                    <h4><i class="fas fa-calendar-alt"></i> Jadwal Kapal</h4>
                    <a href="?page=supir&action=kelolaJadwal" class="btn btn-sm btn-primary">
                        <i class="fas fa-plus"></i> Kelola Jadwal
                    </a>
                </div>
                
                <?php if(empty($jadwalList)): ?>
                    <div class="empty-state-small">
                        <p>Belum ada jadwal untuk kapal ini.</p>
                        <a href="?page=supir&action=kelolaJadwal" class="btn btn-sm btn-primary">Tambah Jadwal</a>
                    </div>
                <?php else: ?>
                    <div class="jadwal-list">
                        <?php foreach($jadwalList as $jadwal): ?>
                            <div class="jadwal-item">
                                <div class="jadwal-info">
                                    <span class="jadwal-tanggal">
                                        <i class="fas fa-calendar-day"></i>
                                        <?= isset($jadwal['tanggal_berangkat']) ? date('d/m/Y', strtotime($jadwal['tanggal_berangkat'])) : '-' ?>
                                    </span>
                                    <span class="jadwal-jam">
                                        <i class="fas fa-clock"></i> <?= htmlspecialchars($jadwal['jam_berangkat'] ?? '-') ?>
                                    </span>
                                    <span class="jadwal-kuota">
                                        <i class="fas fa-users"></i> Kuota: <?= $jadwal['kuota'] ?? 0 ?>
                                    </span>
                                    <span class="jadwal-harga">Rp <?= number_format($jadwal['harga'] ?? 0, 0, ',', '.') ?></span>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </main>
</div>

<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: 1rem;
}

.content-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a202c;
}

.content-header p {
    color: #718096;
    font-size: 0.95rem;
    margin: 0;
}

.header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.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-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;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 1rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.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-warning {
    background: #f59e0b;
    color: #1a202c;
}

.btn-warning:hover {
    background: #d97706;
    color: #1a202c;
}

.btn-sm {
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
}

.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-success {
    background: #d1fae5;
    color: #065f46;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

/* ========================================== */
/* DETAIL SECTION */
/* ========================================== */
.detail-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.detail-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1.2rem;
    background: #f7fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.detail-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
}

.detail-header h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0;
}

.detail-body {
    padding: 1.2rem;
}

/* ========================================== */
/* FOTO KAPAL - HANYA FOTO KAPAL */
/* ========================================== */
.kapal-photo-section {
    display: flex;
    justify-content: center;
    margin-bottom: 1.2rem;
}

.kapal-photo {
    width: 100%;
    max-width: 400px;
    height: 250px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    background: #f7fafc;
}

.kapal-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kapal-photo-placeholder {
    width: 100%;
    max-width: 400px;
    height: 250px;
    border-radius: 10px;
    border: 2px dashed #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f7fafc;
    color: #a0aec0;
}

.kapal-photo-placeholder i {
    color: #cbd5e0;
    margin-bottom: 0.5rem;
}

.kapal-photo-placeholder p {
    font-size: 0.85rem;
    margin: 0;
}

.kapal-photo-placeholder small {
    font-size: 0.7rem;
    color: #a0aec0;
}

/* ========================================== */
/* DETAIL GRID */
/* ========================================== */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem 1.5rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
    padding: 0.3rem 0;
    border-bottom: 1px solid #f7fafc;
}

.detail-item .label {
    font-size: 0.7rem;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.detail-item .value {
    font-weight: 600;
    color: #1a202c;
    font-size: 0.9rem;
}

.detail-item .value.harga {
    color: #2b6cb0;
}

.detail-description {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid #e2e8f0;
}

.detail-description .label {
    font-size: 0.7rem;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.detail-description p {
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: #4a5568;
    line-height: 1.6;
}

/* ========================================== */
/* RUTE LIST */
/* ========================================== */
.rute-list {
    padding: 0.5rem 1.2rem 1.2rem;
}

.rute-item {
    padding: 0.4rem 0;
    border-bottom: 1px solid #f7fafc;
}

.rute-item:last-child {
    border-bottom: none;
}

.rute-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rute-route {
    font-size: 0.85rem;
    color: #1a202c;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.rute-route i {
    color: #718096;
    font-size: 0.7rem;
}

.rute-harga {
    font-weight: 600;
    color: #2b6cb0;
    font-size: 0.85rem;
}

/* ========================================== */
/* JADWAL LIST */
/* ========================================== */
.jadwal-list {
    padding: 0.5rem 1.2rem 1.2rem;
}

.jadwal-item {
    padding: 0.4rem 0;
    border-bottom: 1px solid #f7fafc;
}

.jadwal-item:last-child {
    border-bottom: none;
}

.jadwal-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.jadwal-tanggal {
    font-weight: 600;
    color: #1a202c;
    font-size: 0.85rem;
}

.jadwal-jam {
    font-size: 0.8rem;
    color: #4a5568;
}

.jadwal-kuota {
    font-size: 0.8rem;
    color: #4a5568;
}

.jadwal-harga {
    font-weight: 600;
    color: #2b6cb0;
    font-size: 0.85rem;
}

/* ========================================== */
/* EMPTY STATE SMALL */
/* ========================================== */
.empty-state-small {
    text-align: center;
    padding: 1.5rem 1rem;
    color: #718096;
}

.empty-state-small p {
    margin-bottom: 0.5rem;
}

@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;
    }
    .detail-grid {
        grid-template-columns: 1fr;
    }
    .rute-info {
        flex-direction: column;
        align-items: flex-start;
    }
    .jadwal-info {
        flex-direction: column;
        align-items: flex-start;
    }
    .header-actions {
        width: 100%;
    }
    .header-actions .btn {
        width: 100%;
        justify-content: center;
    }
    .kapal-photo,
    .kapal-photo-placeholder {
        height: 180px;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 0.8rem;
    }
    .detail-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .kapal-photo,
    .kapal-photo-placeholder {
        height: 150px;
    }
}
</style>

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