<?php
require_once __DIR__ . '/../config/Database.php'; 
require_once __DIR__ . '/../models/Kos.php';     

$kos = null; 
$kos_manager = null; 
$search = isset($_GET['cari']) ? trim($_GET['cari']) : ''; 

try {
    $kos_manager = new Kos();

    $kos_id = isset($_GET['id']) ? intval($_GET['id']) : 0; 

    if ($kos_id === 0) { 
        header("HTTP/1.0 400 Bad Request");
        echo '<!DOCTYPE html><html lang="id"><head><meta charset="UTF-8"><title>ID Tidak Valid</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"></head><body><div class="container mt-5"><div class="alert alert-danger text-center" role="alert">ID Kos tidak valid. Kembali ke <a href="/" class="alert-link">halaman utama</a>.</div></div></body></html>';
        exit;
    }

    $kos = $kos_manager->getKosById($kos_id); 

} catch (Exception $e) { 
    error_log("Error di detail_kos.php: " . $e->getMessage());
    header("HTTP/1.0 500 Internal Server Error");
    echo '<!DOCTYPE html><html lang="id"><head><meta charset="UTF-8"><title>Error Sistem</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"></head><body><div class="container mt-5"><div class="alert alert-danger text-center" role="alert">Terjadi gangguan sistem. Silakan coba lagi nanti.</div></div></body></html>';
    exit;
}

if (!$kos) { 
    header("HTTP/1.0 404 Not Found");
    // Asumsi Anda memiliki file 404.php di direktori public
    // Jika tidak ada, baris ini akan menyebabkan error. Anda bisa menggantinya dengan pesan sederhana.
    // include '404.php'; 
    echo '<!DOCTYPE html><html lang="id"><head><meta charset="UTF-8"><title>Tidak Ditemukan</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"></head><body><div class="container mt-5"><div class="alert alert-warning text-center" role="alert">Kos yang Anda cari tidak ditemukan. Kembali ke <a href="/" class="alert-link">halaman utama</a>.</div></div></body></html>';
    exit;
}

$harga_tampil = Kos::formatRupiah($kos['harga']);

$nomor_pengelola_raw = $kos['nomor_pengelola'] ?? ''; 
$whatsapp_number = ''; 

if (!empty($nomor_pengelola_raw)) { 
    $clean_number = preg_replace('/[^0-9]/', '', $nomor_pengelola_raw);

    if (substr($clean_number, 0, 1) === '0') {
        $whatsapp_number = '62' . substr($clean_number, 1);
    } else {
        $whatsapp_number = $clean_number; 
    }
}

$whatsapp_url = 'https://wa.me/' . htmlspecialchars($whatsapp_number); 

?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Detail Kos - <?= htmlspecialchars($kos['nama']) ?></title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <link href="/style.css" rel="stylesheet">

    <style>
        /* Anda bisa memindahkan ini ke style.css jika diinginkan */
        :root { --primary-color: #6a0dad; --secondary-color: #4b0082; }
        body { font-family: 'Poppins', sans-serif; background-color: #f8f9fa; }
        .navbar-brand { font-weight: 600; color: var(--primary-color) !important; font-size: 1.8rem; }
        .kos-header { background-color: white; border-bottom: 1px solid #e0e0e0; padding: 15px 0; margin-bottom: 20px; }
        .image-gallery img { width: 100%; height: 400px; object-fit: cover; border-radius: 8px; }
        .thumbnail-gallery img { height: 100px; object-fit: cover; border-radius: 5px; cursor: pointer; transition: transform 0.2s ease-in-out; border: 2px solid transparent; }
        .thumbnail-gallery img:hover { transform: scale(1.05); }
        .thumbnail-gallery img.active { border-color: #007bff; }
        .details-card { background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.05); }
        .price-box { background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.05); position: sticky; top: 20px; }
        .old-price { text-decoration: line-through; color: #888; font-size: 0.9em; }
        .current-price { font-size: 1.8rem; font-weight: bold; color: #e53935; }
        .section-title { font-weight: bold; color: #333; margin-top: 25px; margin-bottom: 15px; padding-bottom: 5px; border-bottom: 1px solid #eee; }
        .facility-list { list-style: none; padding-left: 0; columns: 2; -webkit-columns: 2; -moz-columns: 2; }
        .facility-list li { margin-bottom: 8px; color: #555; }
        .facility-list li i { margin-right: 8px; color: #28a745; }
        .rating-badge { background-color: #28a745; color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold; display: inline-block; margin-left: 10px; }
        .contact-btn { width: 100%; padding: 12px; font-size: 1.1rem; font-weight: bold; }
        /* Styles copied from index.php */
        .search-container { max-width: 600px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: 12px; }
        .search-input { border: 1px solid #ddd; border-radius: 12px 0 0 12px; padding: 12px 20px; font-size: 1rem; }
        .search-btn { background-color: var(--primary-color); border: none; border-radius: 0 12px 12px 0; padding: 12px 24px; font-weight: 600; }
        .hero-section {
          background-color: #f8f9fa;
          padding: 3rem 0;
          border-bottom: 1px solid #dee2e6;
        }
        footer {
          background-color: #343a40;
          color: white;
        }
        .footer-links a {
          color: white;
          text-decoration: none;
        }
        .footer-links a:hover {
          text-decoration: underline;
        }
    </style>
</head>
<body>

<nav class="navbar navbar-light bg-light py-1 p-3 sticky-top shadow-sm">
  <div class="container">
    <a class="navbar-brand" href="/index.php">CariKos</a>
    <form class="d-flex w-50" method="GET" action="/index.php">
      <input class="form-control search-input "
      type="search"
      name="cari"
      placeholder="Masukkan nama lokasi/area/alamat"
      value="<?= htmlspecialchars($search) ?>">
      <button class="btn btn-success search-btn" type="submit">Cari</button>
    </form>
  </div>
</nav>

<div class="container mt-4">
    <div class="kos-header details-card p-3 mb-3">
        <h1 class="h3 mb-1"><?= htmlspecialchars($kos['nama']) ?></h1>
        <p class="text-muted mb-2"><i class="bi bi-geo-alt-fill"></i> <?= htmlspecialchars($kos['lokasi']) ?></p>
        <span class="badge bg-primary me-2"><?= htmlspecialchars($kos['kategori']) ?></span>
        <span class="badge bg-warning text-dark"><i class="bi bi-star-fill"></i> <?= htmlspecialchars($kos['rating']) ?></span>
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="details-card mb-4">
                <div class="image-gallery mb-3">
                    <?php
                    $main_image_src = !empty($kos['gambar_detail'][0]) ? '/assets/images/kos/' . htmlspecialchars($kos['gambar_detail'][0]) : '/assets/images/default.jpg';
                    ?>
                    <img id="mainImage" src="<?= $main_image_src ?>" alt="<?= htmlspecialchars($kos['nama']) ?>" class="img-fluid" onerror="this.onerror=null;this.src='/assets/images/default.jpg';">
                </div>
                <div class="thumbnail-gallery d-flex justify-content-center gap-2">
                    <?php foreach ($kos['gambar_detail'] as $index => $gambar): ?>
                        <img src="/assets/images/kos/<?= htmlspecialchars($gambar) ?>"
                             alt="Thumbnail <?= $index + 1 ?>"
                             class="img-fluid thumbnail <?= $index === 0 ? 'active' : '' ?>"
                             onclick="changeMainImage(this)"
                             onerror="this.onerror=null;this.src='/assets/images/default.jpg';">
                    <?php endforeach; ?>
                    <?php if (empty($kos['gambar_detail'])): ?>
                        <img src="/assets/images/default.jpg" alt="Thumbnail Default" class="img-fluid thumbnail active">
                    <?php endif; ?>
                </div>
            </div>

            <div class="details-card mb-4">
                <h4 class="section-title">Tentang Kos ini</h4>
                <p>
                    <?= nl2br(htmlspecialchars($kos['deskripsi'])) ?>
                </p>

                <h5 class="mt-4 mb-3">Spesifikasi Tipe Kamar</h5>
                <ul class="list-unstyled facility-list">
                    <li><i class="bi bi-check-circle-fill"></i> Ukuran Kamar: 2 x 3 meter</li>
                    <li><i class="bi bi-check-circle-fill"></i> Tidak termasuk listrik</li>
                    <li><i class="bi bi-check-circle-fill"></i> Kamar mandi dalam</li>
                    <li><i class="bi bi-check-circle-fill"></i> Ventilasi baik</li>
                </ul>

                <h5 class="mt-4 mb-3">Fasilitas Kamar</h5>
                <ul class="list-unstyled facility-list">
                    <li><i class="bi bi-check-circle-fill"></i> Kasur</li>
                    <li><i class="bi bi-check-circle-fill"></i> Bantal</li>
                    <li><i class="bi bi-check-circle-fill"></i> Guling</li>
                    <li><i class="bi bi-check-circle-fill"></i> Lemari Pakaian</li>
                    <li><i class="bi bi-check-circle-fill"></i> Meja Belajar</li>
                    <li><i class="bi bi-check-circle-fill"></i> Kursi</li>
                </ul>

                <h5 class="mt-4 mb-3">Fasilitas Kamar Mandi</h5>
                <ul class="list-unstyled facility-list">
                    <li><i class="bi bi-check-circle-fill"></i> Kloset Jongkok</li>
                    <li><i class="bi bi-check-circle-fill"></i> Shower</li>
                    <li><i class="bi bi-check-circle-fill"></i> Ember Mandi</li>
                </ul>

                <h5 class="mt-4 mb-3">Fasilitas Umum</h5>
                <ul class="list-unstyled facility-list">
                    <li><i class="bi bi-check-circle-fill"></i> WiFi</li>
                    <li><i class="bi bi-check-circle-fill"></i> Ruang Tamu</li>
                    <li><i class="bi bi-check-circle-fill"></i> Dapur Bersama</li>
                    <li><i class="bi bi-check-circle-fill"></i> Dispenser Air</li>
                    <li><i class="bi bi-check-circle-fill"></i> Area Jemur</li>
                    <li><i class="bi bi-check-circle-fill"></i> Taman</li>
                </ul>

                <h5 class="mt-4 mb-3">Fasilitas Parkir</h5>
                <ul class="list-unstyled facility-list">
                    <li><i class="bi bi-check-circle-fill"></i> Parkir Motor</li>
                    <li><i class="bi bi-check-circle-fill"></i> Parkir Mobil</li>
                </ul>

                <h5 class="mt-4 mb-3">Peraturan Kos</h5>
                <ul class="list-unstyled facility-list">
                    <li><i class="bi bi-x-circle-fill text-danger"></i> Tidak untuk pasutri</li>
                    <li><i class="bi bi-x-circle-fill text-danger"></i> Tidak boleh bawa anak</li>
                    <li><i class="bi bi-check-circle-fill"></i> Maksimal 1 orang/kamar</li>
                    <li><i class="bi bi-x-circle-fill text-danger"></i> Lawan jenis dilarang ke kamar</li>
                    <li><i class="bi bi-x-circle-fill text-danger"></i> Tamu dilarang menginap</li>
                </ul>

                <h5 class="mt-4 mb-3">Catatan Tambahan</h5>
                <p>
                    Lokasi strategis di depan jalan utama, akses mudah ke transportasi umum. Lingkungan aman, nyaman dan bersih.
                    (Catatan statis)
                </p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="price-box">
                <h5 class="text-muted mb-2">Harga Sewa</h5>
                <div class="d-flex align-items-baseline mb-2">
                    <span class="current-price"><?= $harga_tampil ?></span>
                </div>
                <p class="text-muted small">per tahun</p>

                <hr>

                <p class="text-center mb-3">Tertarik dengan kos ini?</p>
                <a href="<?= $whatsapp_url ?>" class="btn contact-btn whatsapp mb-2" target="_blank" rel="noopener noreferrer">
                    <i class="bi bi-whatsapp"></i> Tanya Pemilik
                </a>


                <div class="mt-4 text-center">
                    <p class="mb-1 text-muted">Butuh Bantuan?</p>
                    <a href="#" class="text-decoration-none">Pusat Bantuan</a>
                </div>
            </div>
        </div>
    </div>
</div>

<footer class="py-3">
  <div class="container">
    <div class="row">

      <div class="col-md-12">
        <div class="row">
          <div class="col-md-3 mb-4">
            <h5 class="mb-3">CARIKOS</h5>
            <ul class="list-unstyled footer-links">
              <li class="mb-2"><a href="#tentangkami">Tentang Kami</a></li>
              <li class="mb-2"><a href="https://wa.me/6283869816926" target="_blank" rel="noopener noreferrer">Promosikan Kost Anda</a></li>
              <li class="mb-2"><a href="https://wa.me/6283869816926" target="_blank" rel="noopener noreferrer">Pusat Bantuan</a></li>
              <li class="mb-2"><a href="developers.php" target="_blank" rel="noopener noreferrer">Developers</a></li>
            </ul>
          </div>
          <div class="col-md-3 mb-4">
            <h5 class="mb-3">KEBIJAKAN</h5>
            <ul class="list-unstyled footer-links">
              <li class="mb-2"><a href="/kebijakan_privasi.php">Kebijakan Privasi</a></li>
              <li class="mb-2"><a href="/s_k.php">Syarat dan Ketentuan Umum</a></li>
            </ul>
          </div>
          <div class="col-md-3 mb-4">
  <h5 class="mb-3">DEVELOPERS</h5>
  <ul class="list-unstyled footer-links">
    <li class="mb-2"><a href="https://zaidan243.devport.my.id/" target="_blank">Zaidan Umar</a></li>
    <li class="mb-2"><a href="https://sugeng278.devport.my.id/" target="_blank">Sugeng Pambudi</a></li>
    <li class="mb-2"><a href="https://devy245.devport.my.id/" target="_blank">Devy Lusiana</a></li>
    <li class="mb-2"><a href="https://aisyah270.devport.my.id/" target="_blank">Aisyah Nur Ramadhani</a></li>
  </ul>
</div>
          <div class="col-md-3 mb-4">
            <h5 class="mb-3">HUBUNGI KAMI</h5>
            <ul class="list-unstyled footer-links">
              <li class="mb-2"><a href="mailto:carikos@gmail.com">carikos@gmail.com</a></li>
              <li class="mb-2"><a href="https://wa.me/6282225634660" target="_blank" rel="noopener noreferrer">+62 82225634660 (Zaidan)</a></li>
              <li class="mb-2"><a href="https://wa.me/6283869816926" target="_blank" rel="noopener noreferrer">+62 83869816926 (Sugeng)</a></li>
              <li class="mb-2"><a href="https://wa.me/6282136068560" target="_blank" rel="noopener noreferrer">+62 82136068560 (Devy)</a></li>
              <li class="mb-2"><a href="https://wa.me/6285721681375" target="_blank" rel="noopener noreferrer">+62 85721681375 (Aisyah)</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
    <div class="border-top pt-3 mt-3">
      <div class="row">
        <div class="col-md-12 text-md-end">
          <small>© 2025 carikos.devport.my.id All rights reserved</small>
        </div>
      </div>
    </div>
  </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    function changeMainImage(thumbnail) {
        const mainImage = document.getElementById('mainImage');
        mainImage.src = thumbnail.src;

        const thumbnails = document.querySelectorAll('.thumbnail-gallery .thumbnail');
        thumbnails.forEach(img => img.classList.remove('active'));

        thumbnail.classList.add('active');
    }
</script>
</body>
</html>