{% extends "base.html" %}
{% block title %}Upload Media{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">📤 Upload Foto / Video</h1>
    <p class="page-sub">Tambahkan media untuk kamar, fasilitas, atau trip wisata</p>
  </div>
  <a href="{{ url_for('daftar_media') }}" class="btn btn--outline">← Kembali</a>
</div>

<div style="display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start">
  <div class="card">
    <form method="POST" enctype="multipart/form-data" id="upload-form">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

      <!-- Tipe Media -->
      <div class="form-group">
        <label>Tipe Media <span class="required">*</span></label>
        <div style="display:flex;gap:12px;margin-top:4px">
          <label class="radio-card" id="lbl-foto">
            <input type="radio" name="tipe" value="foto" checked onchange="updateAccept()">
            <span>🖼️ Foto</span>
          </label>
          <label class="radio-card" id="lbl-video">
            <input type="radio" name="tipe" value="video" onchange="updateAccept()">
            <span>🎬 Video</span>
          </label>
        </div>
      </div>

      <!-- File Upload -->
      <div class="form-group">
        <label for="file">Pilih File <span class="required">*</span></label>
        <div class="upload-zone" id="upload-zone">
          <input type="file" id="file" name="file" class="upload-input"
                 accept="image/*" onchange="previewFile(this)" required>
          <div class="upload-placeholder" id="upload-ph">
            <div style="font-size:36px">📁</div>
            <div style="font-weight:600;margin-top:8px">Klik atau seret file ke sini</div>
            <div style="font-size:12px;color:#9CA3AF;margin-top:4px">
              Foto: JPG, PNG, WEBP · Video: MP4, MOV (maks 50MB)
            </div>
          </div>
          <div id="preview-wrap" style="display:none;text-align:center">
            <img id="img-preview" style="max-width:100%;max-height:200px;border-radius:8px;object-fit:contain">
            <video id="vid-preview" style="max-width:100%;max-height:200px;border-radius:8px;display:none" controls></video>
            <div id="preview-name" style="font-size:12px;color:#6B7280;margin-top:8px"></div>
          </div>
        </div>
      </div>

      <!-- Kategori -->
      <div class="form-group">
        <label for="kategori">Kategori <span class="required">*</span></label>
        <select id="kategori" name="kategori" class="form-control" onchange="updateRefId()">
          <option value="kamar">🛏️ Kamar</option>
          <option value="trip">🤿 Trip Snorkeling</option>
          <option value="fasilitas">🏖️ Fasilitas</option>
          <option value="galeri">📸 Galeri Umum</option>
          <option value="umum">🏝️ Foto Umum</option>
        </select>
      </div>

      <!-- Ref ID (dinamis) -->
      <div class="form-group" id="ref-kamar">
        <label for="ref-kamar-sel">Untuk Kamar</label>
        <select name="ref_id" id="ref-kamar-sel" class="form-control">
          <option value="">-- Semua Kamar --</option>
          {% for k in kamar_list %}
          <option value="{{ k.id }}">Kamar {{ k.nomor_kamar }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="form-group" id="ref-trip" style="display:none">
        <label>Untuk Paket Trip</label>
        <select name="ref_id" class="form-control">
          <option value="">-- Semua Trip --</option>
          {% for p in paket_list if p.kategori == 'trip_snorkeling' %}
          <option value="{{ p.id }}">{{ p.nama_paket }}</option>
          {% endfor %}
        </select>
      </div>

      <!-- Caption -->
      <div class="form-group">
        <label for="caption">Caption / Keterangan</label>
        <input type="text" id="caption" name="caption" class="form-control"
               placeholder="Contoh: Pemandangan dari Kamar 01">
      </div>

      <!-- Urutan -->
      <div class="form-group">
        <label for="urutan">Urutan Tampil</label>
        <input type="number" id="urutan" name="urutan" class="form-control" value="0" min="0">
        <div class="form-hint">Angka kecil = tampil lebih dulu</div>
      </div>

      <div class="form-actions">
        <a href="{{ url_for('daftar_media') }}" class="btn btn--outline">Batal</a>
        <button type="submit" class="btn btn--primary">📤 Upload Sekarang</button>
      </div>
    </form>
  </div>

  <!-- Tips -->
  <div class="card" style="position:sticky;top:20px">
    <h2 class="card__title">💡 Tips Upload</h2>
    <div style="display:flex;flex-direction:column;gap:12px;font-size:13px;color:#374151">
      <div>
        <strong>📸 Foto Kamar</strong><br>
        <span style="color:#6B7280">Pilih kategori "Kamar" dan pilih nomor kamar spesifik</span>
      </div>
      <div>
        <strong>🤿 Foto Trip</strong><br>
        <span style="color:#6B7280">Pilih kategori "Trip Snorkeling" untuk foto destinasi wisata</span>
      </div>
      <div>
        <strong>📸 Galeri Publik</strong><br>
        <span style="color:#6B7280">Pilih "Galeri Umum" agar foto tampil di galeri halaman tamu</span>
      </div>
      <div>
        <strong>🎬 Video</strong><br>
        <span style="color:#6B7280">Format MP4 disarankan, ukuran maks 50MB</span>
      </div>
      <div>
        <strong>📐 Ukuran Ideal</strong><br>
        <span style="color:#6B7280">Foto: min 800×600px · Rasio 4:3 atau 16:9</span>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function updateAccept() {
  const tipe = document.querySelector('input[name="tipe"]:checked').value;
  const input = document.getElementById('file');
  input.accept = tipe === 'video' ? 'video/*' : 'image/*';
  // Reset preview
  document.getElementById('preview-wrap').style.display = 'none';
  document.getElementById('upload-ph').style.display = 'block';
  input.value = '';
}

function updateRefId() {
  const kat = document.getElementById('kategori').value;
  document.getElementById('ref-kamar').style.display = kat === 'kamar' ? '' : 'none';
  document.getElementById('ref-trip').style.display  = kat === 'trip'  ? '' : 'none';
}

function previewFile(input) {
  if (!input.files || !input.files[0]) return;
  const file = input.files[0];
  const isVideo = file.type.startsWith('video/');
  document.getElementById('upload-ph').style.display   = 'none';
  document.getElementById('preview-wrap').style.display = 'block';
  document.getElementById('preview-name').textContent   = file.name;

  const img = document.getElementById('img-preview');
  const vid = document.getElementById('vid-preview');
  if (isVideo) {
    img.style.display = 'none'; vid.style.display = '';
    vid.src = URL.createObjectURL(file);
  } else {
    vid.style.display = 'none'; img.style.display = '';
    img.src = URL.createObjectURL(file);
  }
}

// Drag & drop
const zone = document.getElementById('upload-zone');
zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('upload-zone--drag'); });
zone.addEventListener('dragleave', () => zone.classList.remove('upload-zone--drag'));
zone.addEventListener('drop', e => {
  e.preventDefault(); zone.classList.remove('upload-zone--drag');
  const input = document.getElementById('file');
  input.files = e.dataTransfer.files;
  previewFile(input);
});
</script>
{% endblock %}