{% extends "base.html" %}
{% block title %}{{ 'Edit' if mode == 'edit' else 'Tambah' }} Foto Galeri{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">{{ '✏️ Edit' if mode == 'edit' else '➕ Tambah' }} Foto Galeri</h1>
    <p class="page-sub">{{ 'Perbarui informasi foto galeri' if mode == 'edit' else 'Tambah foto baru ke galeri publik' }}</p>
  </div>
  <a href="{{ url_for('daftar_galeri') }}" class="btn btn--outline">← Kembali</a>
</div>

<div style="display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start">

  <!-- Form -->
  <div class="card">
    <form method="POST">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

      <div class="form-group">
        <label for="judul">Judul Foto <span class="required">*</span></label>
        <input type="text" id="judul" name="judul" class="form-control"
               placeholder="Contoh: Pantai & Dermaga"
               value="{{ data.judul if data else '' }}" required>
      </div>

      <div class="form-group">
        <label for="deskripsi">Deskripsi / Caption</label>
        <input type="text" id="deskripsi" name="deskripsi" class="form-control"
               placeholder="Contoh: Pemandangan pantai saat sunrise"
               value="{{ data.deskripsi if data else '' }}">
      </div>

      <!-- Pilih Emoji -->
      <div class="form-group">
        <label>Ikon / Emoji Foto <span class="required">*</span></label>
        <div class="emoji-grid" id="emoji-grid">
          {% set emojis = ['🌊','🛏️','🤿','🌅','🍽️','🏝️','🚤','🌺','🐠','🦈','🌙','⛵','🦀','🐚','🌿','🏄','🌄','🛖','🌟','✨'] %}
          {% for e in emojis %}
          <button type="button"
                  class="emoji-btn {% if (data and data.emoji == e) or (not data and loop.index == 1) %}emoji-btn--active{% endif %}"
                  onclick="pilihEmoji(this, '{{ e }}')">{{ e }}</button>
          {% endfor %}
        </div>
        <input type="hidden" id="emoji" name="emoji"
               value="{{ data.emoji if data else '🌊' }}">
        <div class="form-hint">Klik emoji untuk memilih ikon foto</div>
      </div>

      <!-- Pilih Warna Background -->
      <div class="form-group">
        <label>Warna Latar Foto <span class="required">*</span></label>
        <div class="warna-grid">
          {% set warnas = [
            ('gal-bg-1', 'Biru Laut',   '#BFDBFE'),
            ('gal-bg-2', 'Hijau Tropis','#A7F3D0'),
            ('gal-bg-3', 'Kuning Pasir','#FDE68A'),
            ('gal-bg-4', 'Ungu Senja',  '#DDD6FE'),
            ('gal-bg-5', 'Merah Muda',  '#FBCFE8'),
          ] %}
          {% for kelas, nama, hex in warnas %}
          <label class="warna-option">
            <input type="radio" name="warna_bg" value="{{ kelas }}"
                   {% if (data and data.warna_bg == kelas) or (not data and loop.index == 1) %}checked{% endif %}
                   onchange="updatePreview()">
            <span class="warna-swatch" style="background:{{ hex }}">{{ nama }}</span>
          </label>
          {% endfor %}
        </div>
      </div>

      <div class="form-row">
        <div class="form-group">
          <label for="urutan">Urutan Tampil</label>
          <input type="number" id="urutan" name="urutan" class="form-control"
                 value="{{ data.urutan if data else 0 }}" min="0" max="99">
          <div class="form-hint">Angka kecil = tampil lebih dulu. Foto urutan 1 = foto utama (lebih besar)</div>
        </div>
        <div class="form-group">
          <label>Status</label>
          <label style="display:flex;align-items:center;gap:10px;margin-top:10px;cursor:pointer">
            <input type="checkbox" name="aktif" id="aktif"
                   {% if not data or data.aktif %}checked{% endif %}
                   style="width:18px;height:18px">
            <span>Tampilkan di halaman tamu</span>
          </label>
        </div>
      </div>

      <div class="form-actions">
        <a href="{{ url_for('daftar_galeri') }}" class="btn btn--outline">Batal</a>
        <button type="submit" class="btn btn--primary">
          💾 {{ 'Simpan Perubahan' if mode == 'edit' else 'Tambah ke Galeri' }}
        </button>
      </div>
    </form>
  </div>

  <!-- Preview -->
  <div class="card" style="position:sticky;top:20px">
    <h2 class="card__title">👁️ Preview</h2>
    <div class="galeri-preview-box" id="preview-box">
      <div class="galeri-preview-img gal-bg-1" id="preview-bg">
        <span id="preview-emoji" style="font-size:56px">🌊</span>
      </div>
      <div style="padding:12px">
        <div id="preview-judul" style="font-weight:700;font-size:14px">Judul Foto</div>
        <div id="preview-desc" style="font-size:12px;color:#6B7280;margin-top:4px">Deskripsi foto</div>
      </div>
    </div>
    <p style="font-size:11px;color:#9CA3AF;margin-top:8px;text-align:center">
      Tampilan di halaman tamu
    </p>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script>
  function pilihEmoji(btn, emoji) {
    document.querySelectorAll('.emoji-btn').forEach(b => b.classList.remove('emoji-btn--active'));
    btn.classList.add('emoji-btn--active');
    document.getElementById('emoji').value = emoji;
    document.getElementById('preview-emoji').textContent = emoji;
  }

  function updatePreview() {
    const warnaEl = document.querySelector('input[name="warna_bg"]:checked');
    const bg      = document.getElementById('preview-bg');
    if (warnaEl && bg) {
      bg.className = 'galeri-preview-img ' + warnaEl.value;
    }
  }

  // Sync judul & deskripsi ke preview realtime
  document.getElementById('judul')?.addEventListener('input', function() {
    document.getElementById('preview-judul').textContent = this.value || 'Judul Foto';
  });
  document.getElementById('deskripsi')?.addEventListener('input', function() {
    document.getElementById('preview-desc').textContent = this.value || 'Deskripsi foto';
  });

  // Set preview awal dari data existing
  const existingEmoji = document.getElementById('emoji')?.value;
  if (existingEmoji) document.getElementById('preview-emoji').textContent = existingEmoji;

  const existingJudul = document.getElementById('judul')?.value;
  if (existingJudul) document.getElementById('preview-judul').textContent = existingJudul;

  const existingDesc = document.getElementById('deskripsi')?.value;
  if (existingDesc) document.getElementById('preview-desc').textContent = existingDesc;

  updatePreview();
</script>
{% endblock %}