<?php
require_once 'config.php';

$tripId = isset($_GET['trip']) ? trim($_GET['trip']) : '';
$trip = null;
$country = null;

if ($tripId) {
    try {
        $stmt = $pdo->prepare("SELECT * FROM trips WHERE id = ?");
        $stmt->execute([$tripId]);
        $trip = $stmt->fetch();
        
        if ($trip) {
            $stmtC = $pdo->prepare("SELECT * FROM countries WHERE id = ?");
            $stmtC->execute([$trip['country_id']]);
            $country = $stmtC->fetch();
        }
    } catch (Exception $e) {
    }
}

$pageTitle = $trip ? "Travelica — " . $trip['name'] : "Trip Tidak Ditemukan";
$activePage = 'destinasi';
$extraCSS = '<link rel="stylesheet" href="assets/css/detail.css" />
<style>.dt-hero { opacity: 1 !important; transform: none !important; }</style>';
include 'includes/header.php';
?>

<?php if (!$trip || !$country): ?>
  <!-- ── NOT FOUND ─────────────────────────────────────────── -->
  <div class="dt-notfound-state" id="dtNotFound" style="display:flex;">
    <div class="dt-nf-emoji">🗺</div>
    <h2>Trip Tidak Ditemukan</h2>
    <p>Paket yang Anda cari tidak tersedia atau link tidak valid.</p>
    <a href="destinasi" class="dt-nf-btn">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
      Lihat Semua Destinasi
    </a>
  </div>

<?php else: ?>

  <!-- ── MAIN ───────────────────────────────────────────────── -->
  <div id="dtMain" style="display:block;">

    <!-- HERO -->
    <section class="dt-hero" id="dtHero">
      <div class="dt-hero-bg">
        <img src="<?= htmlspecialchars($country['heroImg']) ?>" alt="<?= htmlspecialchars($trip['name']) ?>" class="dt-hero-img" id="dtHeroImg" onerror="this.src='assets/images/dest_japan.webp'" />
        <div class="dt-hero-overlay"></div>
      </div>

      <a href="negara?country=<?= htmlspecialchars($country['slug']) ?>" class="dt-back-btn" id="dtBack">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
        Kembali
      </a>

      <div class="dt-hero-content">
        <div class="dt-hero-inner">
          <!-- Breadcrumb -->
          <nav class="dt-breadcrumb" aria-label="breadcrumb">
            <a href="./">Home</a>
            <span class="dt-bc-sep">›</span>
            <a href="destinasi">Destinasi</a>
            <span class="dt-bc-sep">›</span>
            <a href="negara?country=<?= htmlspecialchars($country['slug']) ?>" id="dtBreadcrumbCountry"><?= htmlspecialchars($country['name']) ?></a>
            <span class="dt-bc-sep">›</span>
            <span id="dtBreadcrumbTrip" style="color:rgba(255,255,255,.65)"><?= htmlspecialchars($trip['name']) ?></span>
          </nav>

          <!-- Code badge -->
          <span class="dt-code-badge" id="dtCode"><?= htmlspecialchars($trip['code']) ?></span>

          <!-- Title -->
          <h1 class="dt-hero-title" id="dtName"><?= htmlspecialchars($trip['name']) ?></h1>

          <!-- Meta pills -->
          <div class="dt-meta-row">
            <span class="dt-meta-pill">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
              <span id="dtDateText"><?= htmlspecialchars($trip['dateRange']) ?></span>
            </span>
            <span class="dt-meta-pill">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
              <span id="dtDuration"><?= htmlspecialchars($trip['duration']) ?></span>
            </span>
            <span class="dt-meta-pill">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
              <span id="dtMinPax"><?= htmlspecialchars(!empty($trip['dp_info']) ? $trip['dp_info'] : ($trip['minPax'] ? 'Min. ' . (int)$trip['minPax'] . ' Pax' : '–')) ?></span>
            </span>
          </div>
        </div>
      </div>
    </section>

    <!-- MAIN 2-COL LAYOUT -->
    <main class="dt-main">
      <div class="dt-layout">

        <!-- LEFT: Content -->
        <div class="dt-content">

          <!-- Stats row -->
          <section class="dt-panel" id="dt-stats-panel">
            <h2 class="dt-panel-title">Ringkasan Trip</h2>
            <div class="dt-stats-row">
              <div class="dt-stat-item">
                <span class="dt-stat-lbl">Tanggal Keberangkatan</span>
                <span class="dt-stat-val" id="dtInfoDate"><?= htmlspecialchars($trip['dateStart']) ?> – <?= htmlspecialchars($trip['dateEnd']) ?></span>
              </div>
              <div class="dt-stat-item">
                <span class="dt-stat-lbl">Durasi Perjalanan</span>
                <span class="dt-stat-val" id="dtInfoDuration"><?= htmlspecialchars($trip['duration']) ?></span>
              </div>
              <div class="dt-stat-item">
                <span class="dt-stat-lbl"><?= htmlspecialchars(!empty($trip['dp_label']) ? $trip['dp_label'] : 'Pembayaran DP') ?></span>
                <span class="dt-stat-val" id="dtInfoMinPax"><?= htmlspecialchars(!empty($trip['dp_info']) ? $trip['dp_info'] : ($trip['minPax'] ? (int)$trip['minPax'] . ' Pax' : '–')) ?></span>
              </div>
              <div class="dt-stat-item">
                <span class="dt-stat-lbl">Tour Leader</span>
                <span class="dt-stat-val">Berpengalaman</span>
              </div>
            </div>
          </section>

          <!-- Includes & Excludes -->
          <section class="dt-panel" id="dt-incex-panel">
            <h2 class="dt-panel-title">Termasuk &amp; Tidak Termasuk</h2>
            <div class="dt-incex-grid">
              <div>
                <div class="dt-incex-heading dt-inc-h">Yang Termasuk</div>
                <?php $includes = json_decode($trip['includes'], true) ?? []; foreach($includes as $inc): ?>
                <div class="dt-list-item">
                  <svg class="dt-inc-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                  <?= htmlspecialchars($inc) ?>
                </div>
                <?php endforeach; ?>
              </div>
              <div>
                <div class="dt-incex-heading dt-exc-h">Tidak Termasuk</div>
                <?php $excludes = json_decode($trip['excludes'], true) ?? []; foreach($excludes as $exc): ?>
                <div class="dt-list-item">
                  <svg class="dt-exc-cross" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                  <?= htmlspecialchars($exc) ?>
                </div>
                <?php endforeach; ?>
              </div>
            </div>
          </section>

          <!-- Itinerary Accordion -->
          <section class="dt-panel" id="dt-itin-panel">
            <?php $itinerary = json_decode($trip['itinerary'], true) ?? []; ?>
            <div class="dt-panel-header-row">
              <h2 class="dt-panel-title">Itinerary Perjalanan</h2>
              <span class="dt-itin-count"><?= count($itinerary) ?> Hari</span>
            </div>

            <div class="dt-itin-accordion" id="dtItinAccordion">
              <?php foreach($itinerary as $index => $day): 
                $isOpen = false;
              ?>
              <div class="dt-itin-item" id="itin-day-<?= (int)$day['day'] ?>">
                <button type="button" class="dt-itin-header" aria-expanded="false">
                  <div class="dt-itin-header-left">
                    <span class="dt-day-badge">Hari <?= (int)$day['day'] ?></span>
                    <h3 class="dt-itin-title"><?= htmlspecialchars($day['title']) ?></h3>
                  </div>
                  <div class="dt-itin-toggle" aria-hidden="true">
                    <svg class="dt-toggle-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                      <line x1="12" y1="5" x2="12" y2="19"></line>
                      <line x1="5" y1="12" x2="19" y2="12"></line>
                    </svg>
                  </div>
                </button>
                <div class="dt-itin-body" style="display:none;">
                  <div class="dt-itin-body-inner">
                    <?php if(!empty($day['img'])): ?>
                    <div class="dt-itin-img-wrap">
                      <img src="<?= htmlspecialchars($day['img']) ?>" alt="Hari <?= (int)$day['day'] ?> - <?= htmlspecialchars($day['title']) ?>" class="dt-itin-img" loading="lazy" onerror="this.parentElement.style.display='none'" />
                    </div>
                    <?php endif; ?>
                    <p class="dt-itin-desc"><?= nl2br(htmlspecialchars($day['desc'])) ?></p>
                  </div>
                </div>
              </div>
              <?php endforeach; ?>
            </div>
          </section>

          <!-- Important note & Syarat Ketentuan -->
          <div class="dt-note-box" id="dt-note-panel">
            <div class="dt-note-top">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
              Catatan Penting &amp; Syarat Ketentuan
            </div>
            <p class="dt-note-text">
              Website ini tidak menyediakan sistem pembayaran online. Semua proses
              booking dan pembayaran dilakukan melalui
              <a href="<?= get_wa_link() ?>" target="_blank">WhatsApp</a>.
              Tim kami akan segera menghubungi Anda setelah menerima pesan.
            </p>
            <div class="dt-note-terms-row">
              <button type="button" class="dt-note-terms-btn" onclick="openTermsModal()">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
                Lihat Syarat &amp; Ketentuan Perjalanan
              </button>
            </div>
          </div>

        </div><!-- /dt-content -->

        <!-- RIGHT: Dark Booking Card -->
        <aside class="dt-sidebar">
          <div class="dt-booking-card" id="booking-section">

            <!-- Price -->
            <div class="dt-price-header">
              <span class="dt-price-from-lbl">Harga Mulai Dari</span>
              <div class="dt-price-row">
                <span class="dt-price-amount" id="dtPrice">Rp <?= number_format($trip['price'], 0, ',', '.') ?></span>
                <span class="dt-price-per">/pax</span>
              </div>
            </div>

            <!-- Trip info -->
            <div class="dt-trip-info-box">
              <div class="dt-tib-row">
                <span class="dt-tib-lbl">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                  Tanggal
                </span>
                <span class="dt-tib-val" id="dtBookDate"><?= htmlspecialchars($trip['dateStart']) ?></span>
              </div>
              <div class="dt-tib-row">
                <span class="dt-tib-lbl">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                  Durasi
                </span>
                <span class="dt-tib-val" id="dtBookDuration"><?= htmlspecialchars($trip['duration']) ?></span>
              </div>
              <div class="dt-tib-row">
                <span class="dt-tib-lbl">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
                  <?= htmlspecialchars(!empty($trip['dp_label']) ? $trip['dp_label'] : 'Pembayaran DP') ?>
                </span>
                <span class="dt-tib-val" id="dtBookMinPax"><?= htmlspecialchars(!empty($trip['dp_info']) ? $trip['dp_info'] : ($trip['minPax'] ? (int)$trip['minPax'] . ' Pax' : '–')) ?></span>
              </div>
            </div>

            <!-- Name input -->
            <div class="dt-form-group">
              <label class="dt-form-lbl" for="dt-nama">Nama Lengkap</label>
              <input
                type="text"
                id="dt-nama"
                class="dt-form-input"
                placeholder="Masukkan nama Anda"
                autocomplete="name"
              />
            </div>

            <!-- Pax counter -->
            <div class="dt-form-group">
              <label class="dt-form-lbl" for="dt-pax">Jumlah Peserta</label>
              <div class="dt-pax-row">
                <button class="dt-pax-btn" id="dtPaxMinus" type="button" aria-label="Kurangi">−</button>
                <input type="number" id="dt-pax" class="dt-pax-input" value="2" min="1" max="99" />
                <button class="dt-pax-btn" id="dtPaxPlus"  type="button" aria-label="Tambah">+</button>
              </div>
            </div>

            <!-- Total -->
            <div class="dt-total-box">
              <span class="dt-total-lbl">Estimasi Total</span>
              <span class="dt-total-val" id="dtTotalPrice">–</span>
            </div>

            <!-- CTA -->
            <button type="button" class="dt-book-btn" id="dtSubmitBtn" style="border:none;cursor:pointer;font-family:inherit;">
              <svg width="17" height="17" viewBox="0 0 24 24" fill="white"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" /></svg>
              Pesan via WhatsApp
            </button>

            <!-- Trust -->
            <div class="dt-trust-row">
              <span class="dt-trust-item">
                <span class="dt-trust-dot" style="--color:#4ADE80"></span>
                Aman
              </span>
              <span class="dt-trust-item">
                <span class="dt-trust-dot" style="--color:#60A5FA"></span>
                Respon Cepat
              </span>
              <span class="dt-trust-item">
                <span class="dt-trust-dot" style="--color:#E8973D"></span>
                Terpercaya
              </span>
            </div>

            <!-- Terms & Conditions Link -->
            <div class="dt-terms-link-wrap">
              <button type="button" class="dt-terms-btn" onclick="openTermsModal()">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
                Lihat Syarat &amp; Ketentuan
              </button>
            </div>

          </div>
        </aside>

      </div><!-- /dt-layout -->
    </main>

  </div><!-- /#dtMain -->

  <!-- ── MOBILE BOOKING MODAL ──────────────────────────────── -->
  <div class="dt-modal-overlay" id="dtModalOverlay" onclick="closeMobileModal()"></div>
  <div class="dt-modal" id="dtModal">
    <div class="dt-modal-header">
      <div>
        <div class="dt-modal-title">Pesan Trip</div>
        <div class="dt-modal-subtitle"><?= htmlspecialchars($trip['name']) ?></div>
      </div>
      <button class="dt-modal-close" onclick="closeMobileModal()" aria-label="Tutup">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </button>
    </div>

    <div class="dt-modal-price">
      <span class="dt-price-from-lbl">Harga Mulai Dari</span>
      <div class="dt-price-row">
        <span class="dt-price-amount">Rp <?= number_format($trip['price'], 0, ',', '.') ?></span>
        <span class="dt-price-per">/pax</span>
      </div>
    </div>

    <!-- Name input -->
    <div class="dt-form-group">
      <label class="dt-form-lbl" for="dt-nama-mobile">Nama Lengkap</label>
      <input type="text" id="dt-nama-mobile" class="dt-form-input" placeholder="Masukkan nama Anda" autocomplete="name" />
    </div>

    <!-- Pax counter -->
    <div class="dt-form-group">
      <label class="dt-form-lbl" for="dt-pax-mobile">Jumlah Peserta</label>
      <div class="dt-pax-row">
        <button class="dt-pax-btn" id="dtPaxMinusMobile" type="button" aria-label="Kurangi">−</button>
        <input type="number" id="dt-pax-mobile" class="dt-pax-input" value="2" min="1" max="99" />
        <button class="dt-pax-btn" id="dtPaxPlusMobile" type="button" aria-label="Tambah">+</button>
      </div>
    </div>

    <!-- Total -->
    <div class="dt-total-box">
      <span class="dt-total-lbl">Estimasi Total</span>
      <span class="dt-total-val" id="dtTotalPriceMobile">Rp <?= number_format($trip['price'] * 2, 0, ',', '.') ?></span>
    </div>

    <!-- CTA -->
    <button type="button" id="dtModalWaBtn" class="dt-book-btn" style="border:none;cursor:pointer;font-family:inherit;width:100%;">
      <svg width="17" height="17" viewBox="0 0 24 24" fill="white"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" /></svg>
      Pesan via WhatsApp
    </button>

    <!-- Terms Link Mobile -->
    <div class="dt-terms-link-wrap" style="margin-top: 14px;">
      <button type="button" class="dt-terms-btn" onclick="openTermsModal()">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
        Lihat Syarat &amp; Ketentuan
      </button>
    </div>
  </div>

  <!-- ── MOBILE BOTTOM BAR ─────────────────────────────────── -->
  <div class="dt-mobile-bar" id="dtMobileBar">
    <div class="dt-mb-price">
      <span class="dt-mb-from">Mulai dari</span>
      <span class="dt-mb-amount">Rp <?= number_format($trip['price'], 0, ',', '.') ?></span>
      <span class="dt-mb-per">/pax</span>
    </div>
    <button type="button" class="dt-mb-btn" id="dtMobileBookBtn" onclick="openMobileModal()">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="white"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" /></svg>
      Pesan Sekarang
    </button>
  </div>

  <!-- ── TERMS & CONDITIONS POPUP MODAL ────────────────────── -->
  <div class="dt-terms-overlay" id="dtTermsOverlay" onclick="if(event.target===this)closeTermsModal()">
    <div class="dt-terms-dialog" role="dialog" aria-modal="true" aria-labelledby="dtTermsTitle">
      <div class="dt-terms-header">
        <div class="dt-terms-header-info">
          <div class="dt-terms-header-icon">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
          </div>
          <div>
            <h3 class="dt-terms-title" id="dtTermsTitle">Syarat &amp; Ketentuan Perjalanan</h3>
            <p class="dt-terms-subtitle">Travelica Agency — Harap dibaca dengan saksama</p>
          </div>
        </div>
        <button type="button" class="dt-terms-close" onclick="closeTermsModal()" aria-label="Tutup Syarat & Ketentuan">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
      </div>

      <div class="dt-terms-body">
        <?= get_terms_conditions_html() ?>
      </div>

      <div class="dt-terms-footer">
        <button type="button" class="dt-terms-ok-btn" onclick="closeTermsModal()">
          Saya Mengerti &amp; Tutup
        </button>
      </div>
    </div>
  </div>

  <!-- WhatsApp Selection Modal & Floating Trigger -->
  <?php include __DIR__ . '/includes/wa-modal.php'; ?>

  <script src="assets/js/main.js"></script>
  <script>
  (function() {
    var price = <?= (int)$trip['price'] ?>;
    var tripTitle = <?= json_encode($trip['durationShort'] ?: ($trip['duration'] ?: $trip['code'])) ?>;
    var tripRute  = <?= json_encode($trip['name']) ?>;
    var tripTgl   = <?= json_encode($trip['dateRange']) ?>;
    var cleanWaNum = <?= json_encode(clean_wa_number()) ?>;

    function formatRp(n) {
      return 'Rp ' + n.toLocaleString('id-ID');
    }

    function buildBookingMsg(pax, nama) {
      var lines = [
        'Halo Travelica, saya tertarik booking trip berikut:',
        '',
        'Trip    : ' + tripTitle,
        'Rute    : ' + tripRute,
        'Tanggal : ' + tripTgl,
        'Jumlah Pax : ' + (pax ? pax + ' Pax' : '–'),
        'Nama    : ' + (nama.trim() || '–'),
        '',
        'Mohon informasi selanjutnya.',
        'Terima kasih.'
      ];
      return lines.join('\n');
    }

    function updateMobileTotal() {
      var pax = parseInt(document.getElementById('dt-pax-mobile').value) || 1;
      document.getElementById('dtTotalPriceMobile').textContent = formatRp(price * pax);
    }

    window.openMobileModal = function() {
      document.getElementById('dtModal').classList.add('open');
      document.getElementById('dtModalOverlay').classList.add('open');
      document.body.style.overflow = 'hidden';
      updateMobileTotal();
    };

    window.closeMobileModal = function() {
      document.getElementById('dtModal').classList.remove('open');
      document.getElementById('dtModalOverlay').classList.remove('open');
      var termsOverlay = document.getElementById('dtTermsOverlay');
      var waOverlay = document.getElementById('waModalOverlay');
      if ((!termsOverlay || !termsOverlay.classList.contains('open')) && (!waOverlay || !waOverlay.classList.contains('open'))) {
        document.body.style.overflow = '';
      }
    };

    window.openTermsModal = function() {
      var overlay = document.getElementById('dtTermsOverlay');
      if (overlay) {
        overlay.classList.add('open');
        document.body.style.overflow = 'hidden';
      }
    };

    window.closeTermsModal = function() {
      var overlay = document.getElementById('dtTermsOverlay');
      if (overlay) {
        overlay.classList.remove('open');
        var mobModal = document.getElementById('dtModal');
        var waOverlay = document.getElementById('waModalOverlay');
        if ((!mobModal || !mobModal.classList.contains('open')) && (!waOverlay || !waOverlay.classList.contains('open'))) {
          document.body.style.overflow = '';
        }
      }
    };

    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') {
        closeTermsModal();
        closeMobileModal();
      }
    });

    document.addEventListener('DOMContentLoaded', function() {
      var minusBtn = document.getElementById('dtPaxMinusMobile');
      var plusBtn  = document.getElementById('dtPaxPlusMobile');
      var paxInput = document.getElementById('dt-pax-mobile');
      var namaInput = document.getElementById('dt-nama-mobile');
      var mobWaBtn = document.getElementById('dtModalWaBtn');

      if (minusBtn) minusBtn.addEventListener('click', function() {
        var v = parseInt(paxInput.value) || 1;
        if (v > 1) { paxInput.value = v - 1; updateMobileTotal(); }
      });
      if (plusBtn) plusBtn.addEventListener('click', function() {
        var v = parseInt(paxInput.value) || 1;
        if (v < 99) { paxInput.value = v + 1; updateMobileTotal(); }
      });
      if (paxInput) paxInput.addEventListener('input', updateMobileTotal);
      if (namaInput) namaInput.addEventListener('input', updateMobileTotal);

      if (mobWaBtn) {
        mobWaBtn.addEventListener('click', function(e) {
          e.preventDefault();
          var pax = parseInt(paxInput ? paxInput.value : '1') || 1;
          var nama = namaInput ? namaInput.value : '';
          var text = buildBookingMsg(pax, nama);
          closeMobileModal();
          if (typeof openWhatsAppModal === 'function') {
            openWhatsAppModal(text);
          }
        });
      }

      // Also handle desktop pax
      var paxD = document.getElementById('dt-pax');
      var namaD = document.getElementById('dt-nama');
      var totalD = document.getElementById('dtTotalPrice');
      var waBtn = document.getElementById('dtSubmitBtn');

      function updateDesktopTotal() {
        if (!paxD || !totalD) return;
        var pax = parseInt(paxD.value) || 1;
        totalD.textContent = formatRp(price * pax);
      }

      if (paxD) {
        var minusD = document.getElementById('dtPaxMinus');
        var plusD  = document.getElementById('dtPaxPlus');
        if (minusD) minusD.addEventListener('click', function() {
          var v = parseInt(paxD.value) || 1;
          if (v > 1) { paxD.value = v - 1; updateDesktopTotal(); }
        });
        if (plusD) plusD.addEventListener('click', function() {
          var v = parseInt(paxD.value) || 1;
          if (v < 99) { paxD.value = v + 1; updateDesktopTotal(); }
        });
        paxD.addEventListener('input', updateDesktopTotal);
        if (namaD) namaD.addEventListener('input', updateDesktopTotal);
        updateDesktopTotal();
      }

      if (waBtn) {
        waBtn.addEventListener('click', function(e) {
          e.preventDefault();
          var pax = parseInt(paxD ? paxD.value : '1') || 1;
          var nama = namaD ? namaD.value : '';
          var text = buildBookingMsg(pax, nama);
          if (typeof openWhatsAppModal === 'function') {
            openWhatsAppModal(text);
          }
        });
      }

      // Itinerary Accordion Toggle Handler
      var itinHeaders = document.querySelectorAll('.dt-itin-header');
      itinHeaders.forEach(function(btn) {
        btn.addEventListener('click', function() {
          var item = this.closest('.dt-itin-item');
          var body = item.querySelector('.dt-itin-body');
          var isCurrentlyOpen = item.classList.contains('active');

          if (isCurrentlyOpen) {
            item.classList.remove('active');
            this.setAttribute('aria-expanded', 'false');
            body.style.display = 'none';
          } else {
            item.classList.add('active');
            this.setAttribute('aria-expanded', 'true');
            body.style.display = 'block';
          }
        });
      });
    });
  })();
  </script>

<?php endif; ?>
</body>
</html>
