<?php
// admin/_layout.php — shared sidebar layout
// Call adm_layout_start($activePage, $pageTitle) at top of content
// Call adm_layout_end() at bottom

function adm_layout_start(string $active, string $title): void {
?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><?= htmlspecialchars($title) ?> — Travelica Admin</title>
  <link rel="stylesheet" href="../assets/css/admin.css" />
  <link rel="stylesheet" href="assets/css/admin.css" />
</head>
<body>

<!-- Toast container -->
<div class="adm-toast-container" id="adm-toast-container"></div>

<!-- Mobile overlay -->
<div class="adm-overlay" id="adm-overlay" onclick="closeSidebar()"></div>

<!-- Topbar (mobile) -->
<div class="adm-topbar">
  <img src="../assets/images/logo.webp" alt="Travelica" class="adm-topbar-logo" onerror="this.style.display='none'" />
  <button class="adm-hamburger" onclick="openSidebar()" aria-label="Menu">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
    </svg>
  </button>
</div>

<div class="adm-wrap">
  <!-- Sidebar -->
  <aside class="adm-sidebar" id="adm-sidebar">
    <div class="adm-sidebar-logo">
      <img src="../assets/images/logo.webp" alt="Travelica" onerror="this.style.display='none'" />
      <div>
        <div style="color:#fff;font-weight:800;font-size:15px;letter-spacing:-.3px;">Travelica</div>
        <div class="adm-sidebar-badge">Admin Panel</div>
      </div>
    </div>

    <nav class="adm-nav">
      <div class="adm-nav-section">Utama</div>
      <a href="index.php" class="adm-nav-link <?= $active === 'dashboard' ? 'active' : '' ?>">
        <svg class="adm-nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
          <rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/>
          <rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>
        </svg>
        Dashboard
      </a>

      <div class="adm-nav-section">Tahapan Pengelolaan (3 Step)</div>
      <a href="destinasi.php" class="adm-nav-link <?= $active === 'destinasi' ? 'active' : '' ?>">
        <svg class="adm-nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
          <circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/>
          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
        </svg>
        <span style="display:flex;align-items:center;gap:6px;">
          <span style="font-size:10px;background:#334155;padding:1px 5px;border-radius:4px;font-weight:700;">1</span> Destinasi
        </span>
      </a>
      <a href="trips.php" class="adm-nav-link <?= $active === 'trips' ? 'active' : '' ?>">
        <svg class="adm-nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
          <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
        </svg>
        <span style="display:flex;align-items:center;gap:6px;">
          <span style="font-size:10px;background:#334155;padding:1px 5px;border-radius:4px;font-weight:700;">2</span> Paket Trip
        </span>
      </a>
      <a href="itinerary.php" class="adm-nav-link <?= $active === 'itinerary' ? 'active' : '' ?>">
        <svg class="adm-nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
          <rect x="3" y="4" width="18" height="18" rx="2" ry="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 style="display:flex;align-items:center;gap:6px;">
          <span style="font-size:10px;background:#334155;padding:1px 5px;border-radius:4px;font-weight:700;">3</span> Detail & Itinerary
        </span>
      </a>

      <div class="adm-nav-section">Konten &amp; Media</div>
      <a href="videos.php" class="adm-nav-link <?= $active === 'videos' ? 'active' : '' ?>">
        <svg class="adm-nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
          <polygon points="23 7 16 12 23 17 23 7"/>
          <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
        </svg>
        Video Perjalanan
      </a>
      <a href="galeri.php" class="adm-nav-link <?= $active === 'galeri' ? 'active' : '' ?>">
        <svg class="adm-nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
          <circle cx="8.5" cy="8.5" r="1.5"/>
          <polyline points="21 15 16 10 5 21"/>
        </svg>
        Galeri Foto Tour
      </a>

      <div class="adm-nav-section">Konfigurasi</div>
      <a href="pengaturan.php" class="adm-nav-link <?= $active === 'pengaturan' ? 'active' : '' ?>">
        <svg class="adm-nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
          <circle cx="12" cy="12" r="3"/>
          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
        </svg>
        Pengaturan
      </a>

      <div class="adm-nav-section">Website</div>
      <a href="../" target="_blank" class="adm-nav-link">
        <svg class="adm-nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
          <polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>
        </svg>
        Lihat Website
      </a>
    </nav>

    <div class="adm-sidebar-footer">
      <a href="logout.php" class="adm-logout-btn">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
          <polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>
        </svg>
        Logout
      </a>
    </div>
  </aside>

  <!-- Main -->
  <main class="adm-main">
<?php
}

function adm_layout_end(): void {
?>
  </main>
</div>

<script>
function openSidebar() {
  document.getElementById('adm-sidebar').classList.add('open');
  document.getElementById('adm-overlay').classList.add('open');
}
function closeSidebar() {
  document.getElementById('adm-sidebar').classList.remove('open');
  document.getElementById('adm-overlay').classList.remove('open');
}

// Toast notification
function showToast(msg, type = 'success') {
  const icons = {
    success: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>',
    error:   '<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>',
    info:    '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>'
  };
  const toast = document.createElement('div');
  toast.className = `adm-toast ${type}`;
  toast.innerHTML = `<span class="adm-toast-icon">${icons[type]||icons.info}</span><span>${msg}</span>`;
  const container = document.getElementById('adm-toast-container');
  container.appendChild(toast);
  setTimeout(() => {
    toast.classList.add('hide');
    setTimeout(() => toast.remove(), 350);
  }, 3200);
}

// Show flash message from session if present
<?php if (!empty($_SESSION['adm_toast'])): ?>
showToast(<?= json_encode($_SESSION['adm_toast']['msg']) ?>, <?= json_encode($_SESSION['adm_toast']['type']) ?>);
<?php unset($_SESSION['adm_toast']); endif; ?>

// Image preview helper (URL)
function previewImg(inputEl, previewEl) {
  const url = inputEl.value.trim();
  if (url) { previewEl.src = url; previewEl.classList.add('show'); }
  else { previewEl.classList.remove('show'); }
}

// Image upload preview helper (File)
function previewUpload(input, previewId, labelId) {
  var file = input.files[0];
  if (!file) return;
  var reader = new FileReader();
  reader.onload = function(e) {
    var img = document.getElementById(previewId);
    if (img) {
      img.src = e.target.result;
      img.classList.add('show');
    }
  };
  reader.readAsDataURL(file);
  if (labelId) {
    var lbl = document.getElementById(labelId);
    if (lbl) lbl.textContent = file.name;
  }
}

// Confirm delete modal
let pendingDeleteFn = null;
function confirmDelete(msg, fn) {
  document.getElementById('adm-confirm-msg').textContent = msg;
  pendingDeleteFn = fn;
  document.getElementById('adm-confirm-modal').classList.add('open');
}
function closeConfirmModal() {
  document.getElementById('adm-confirm-modal').classList.remove('open');
  pendingDeleteFn = null;
}
document.addEventListener('DOMContentLoaded', function() {
  var yesBtn = document.getElementById('adm-confirm-yes');
  if (yesBtn) yesBtn.addEventListener('click', function() {
    if (pendingDeleteFn) pendingDeleteFn();
    closeConfirmModal();
  });
});
</script>

<!-- Confirm Delete Modal -->
<div class="adm-modal-overlay" id="adm-confirm-modal">
  <div class="adm-modal">
    <h3>Konfirmasi Hapus</h3>
    <p id="adm-confirm-msg">Apakah Anda yakin ingin menghapus item ini?</p>
    <div class="adm-modal-btns">
      <button class="btn btn-outline" onclick="closeConfirmModal()">Batal</button>
      <button class="btn btn-danger" id="adm-confirm-yes">Ya, Hapus</button>
    </div>
  </div>
</div>

</body>
</html>
<?php
}
