{% extends 'portal/admin/base_admin.html' %}

{% block title %}
  {% if action == 'create' %}Tambah Solusi Baru{% else %}Edit Solusi: {{ app.title }}{% endif %} — {{ brand.name }} CMS
{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto space-y-6">

  <!-- Breadcrumb & Back -->
  <div class="flex items-center justify-between">
    <a href="{% url 'portal:dashboard' %}" class="inline-flex items-center gap-1.5 text-xs font-semibold text-slate-500 hover:text-slate-800 transition-colors">
      <span class="material-symbols-outlined text-[16px]">arrow_back</span>
      <span>Kembali ke Dashboard</span>
    </a>
    <span class="text-xs font-mono text-slate-400">
      {% if action == 'create' %}TAMBAH PORTOFOLIO BARU{% else %}EDIT PORTOFOLIO: {{ app.key }}{% endif %}
    </span>
  </div>

  <!-- Main Form Card -->
  <div class="bg-white border border-slate-200 rounded-3xl p-6 sm:p-10 shadow-sm">
    
    <div class="border-b border-slate-100 pb-6 mb-8">
      <h1 class="font-display font-extrabold text-2xl text-slate-900 tracking-tight">
        {% if action == 'create' %}Tambah Solusi Portofolio Baru{% else %}Perbarui Portofolio &amp; Banner Thumbnail{% endif %}
      </h1>
      <p class="text-xs sm:text-sm text-slate-500 mt-1">
        Lengkapi parameter solusi, unggah banner thumbnail browser, atur persona, dan sesuaikan tautan live sandbox.
      </p>
    </div>

    <form method="POST" enctype="multipart/form-data" class="space-y-8">
      {% csrf_token %}

      <!-- SECTION 1: BANNER THUMBNAIL & BROWSER MOCKUP (Crucial User Requirement) -->
      <div class="p-6 rounded-2xl bg-gradient-to-br from-slate-50 to-orange-50/20 border border-slate-200 space-y-5">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-2">
            <span class="material-symbols-outlined text-[20px] text-brand-orange">image</span>
            <h3 class="font-display font-bold text-sm sm:text-base text-slate-900">
              Banner Thumbnail &amp; Browser Frame
            </h3>
          </div>
          <span class="text-[11px] font-mono font-medium text-slate-500 bg-white px-2.5 py-1 rounded-md border border-slate-200">
            Preview Interaktif
          </span>
        </div>

        <p class="text-xs text-slate-500">
          Banner ini tampil di dalam bingkai browser kartu portofolio pada halaman frontend. Anda dapat mengunggah berkas gambar langsung atau memasukkan URL gambar web.
        </p>

        <!-- Live Browser Frame Preview -->
        <div class="rounded-2xl overflow-hidden border border-slate-300 bg-white shadow-md max-w-xl mx-auto">
          <div class="px-4 py-2 bg-slate-100 border-b border-slate-200 flex items-center justify-between text-xs">
            <div class="flex items-center gap-1.5">
              <span class="w-2.5 h-2.5 rounded-full bg-rose-400"></span>
              <span class="w-2.5 h-2.5 rounded-full bg-amber-400"></span>
              <span class="w-2.5 h-2.5 rounded-full bg-emerald-400"></span>
              <span id="preview-subdomain" class="ml-2 font-mono text-[11px] text-slate-600 font-medium">
                {{ app.subdomain|default:"demo-sistem.khansia.co.id" }}
              </span>
            </div>
            <span id="preview-tech" class="font-mono text-[11px] font-semibold text-blue-700 bg-blue-50 px-2 py-0.5 rounded border border-blue-200">
              {{ app.tech_stack|default:"Tech Stack Tags" }}
            </span>
          </div>
          <div class="relative h-56 w-full overflow-hidden bg-slate-100 flex items-center justify-center">
            <img 
              id="banner-preview-img" 
              src="{{ app.mockup_url|default:'' }}" 
              alt="Banner Preview" 
              class="w-full h-full object-cover object-top {% if not app.mockup_url %}hidden{% endif %}"
            />
            <div id="banner-placeholder" class="{% if app.mockup_url %}hidden{% endif %} flex flex-col items-center justify-center text-slate-400 p-4 text-center">
              <span class="material-symbols-outlined text-[40px] mb-1">wallpaper</span>
              <span class="text-xs font-medium">Preview banner akan muncul di sini</span>
            </div>
          </div>
        </div>

        <!-- Banner Upload & URL Controls -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
          
          <!-- File Upload Option -->
          <div class="space-y-1.5">
            <label class="block text-xs font-semibold text-slate-700 font-mono uppercase">
              1. Unggah Berkas Banner (PNG / JPG / WebP)
            </label>
            <input 
              type="file" 
              name="thumbnail_file" 
              id="thumbnail-file-input"
              accept="image/*"
              class="block w-full text-xs text-slate-500 file:mr-3 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-semibold file:bg-orange-50 file:text-brand-orange hover:file:bg-orange-100 border border-slate-200 rounded-xl bg-white p-1"
            />
            <span class="text-[11px] text-slate-400 block">Unggahan akan disimpan otomatis ke server media.</span>
          </div>

          <!-- Direct URL Option -->
          <div class="space-y-1.5">
            <label class="block text-xs font-semibold text-slate-700 font-mono uppercase">
              2. Atau Masukkan URL Gambar Banner
            </label>
            <input 
              type="url" 
              name="mockup_url" 
              id="mockup-url-input"
              value="{{ app.mockup_url|default:'' }}" 
              placeholder="https://images.unsplash.com/... atau link gambar"
              class="w-full px-3.5 py-2 text-xs rounded-xl border border-slate-200 focus:border-brand-orange focus:ring-2 focus:ring-orange-500/20 text-slate-800"
            />
            <span class="text-[11px] text-slate-400 block">Dapat menggunakan link hosting gambar publik.</span>
          </div>

        </div>

        <!-- Browser Header Parameters -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2">
          <div>
            <label class="block text-xs font-semibold text-slate-700 font-mono uppercase mb-1">
              Label Subdomain Browser Frame
            </label>
            <input 
              type="text" 
              name="subdomain" 
              id="subdomain-input"
              value="{{ app.subdomain|default:'' }}" 
              required
              placeholder="contoh: kiera-portal.khansia.co.id"
              class="w-full px-3.5 py-2 text-xs rounded-xl border border-slate-200 focus:border-brand-orange focus:ring-2 focus:ring-orange-500/20 font-mono text-slate-800"
            />
          </div>
          <div>
            <label class="block text-xs font-semibold text-slate-700 font-mono uppercase mb-1">
              Tech Stack Tags (Pemisah Bullet •)
            </label>
            <input 
              type="text" 
              name="tech_stack" 
              id="tech-stack-input"
              value="{{ app.tech_stack|default:'' }}" 
              required
              placeholder="contoh: Go • PostgreSQL • React"
              class="w-full px-3.5 py-2 text-xs rounded-xl border border-slate-200 focus:border-brand-orange focus:ring-2 focus:ring-orange-500/20 font-mono text-slate-800"
            />
          </div>
        </div>

      </div>

      <!-- SECTION 2: BASIC INFORMATION -->
      <div class="space-y-4">
        <h3 class="font-display font-bold text-base text-slate-900 border-b border-slate-100 pb-2">
          Informasi Utama Solusi
        </h3>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="sm:col-span-2">
            <label class="block text-xs font-semibold text-slate-700 font-mono uppercase mb-1">
              Judul Solusi / Aplikasi *
            </label>
            <input 
              type="text" 
              name="title" 
              value="{{ app.title|default:'' }}" 
              required
              placeholder="contoh: KIERA — Khansia Enterprise Resource Planning"
              class="w-full px-3.5 py-2.5 text-sm rounded-xl border border-slate-200 focus:border-brand-orange focus:ring-2 focus:ring-orange-500/20 text-slate-800"
            />
          </div>

          <div>
            <label class="block text-xs font-semibold text-slate-700 font-mono uppercase mb-1">
              Kategori Filter *
            </label>
            <select 
              name="category_id" 
              class="w-full px-3.5 py-2.5 text-xs rounded-xl border border-slate-200 focus:border-brand-orange text-slate-800"
            >
              <option value="erp" {% if app.category_id == 'erp' %}selected{% endif %}>ERP Enterprise (erp)</option>
              <option value="healthcare" {% if app.category_id == 'healthcare' %}selected{% endif %}>Healthcare & App (healthcare)</option>
              <option value="facility" {% if app.category_id == 'facility' %}selected{% endif %}>Smart Facility (facility)</option>
              <option value="cybersecurity" {% if app.category_id == 'cybersecurity' %}selected{% endif %}>Cybersecurity & SOC (cybersecurity)</option>
            </select>
          </div>

          <div>
            <label class="block text-xs font-semibold text-slate-700 font-mono uppercase mb-1">
              Badge Label Kategori
            </label>
            <input 
              type="text" 
              name="category_badge" 
              value="{{ app.category_badge|default:'' }}" 
              placeholder="contoh: ERP & MANAJEMEN BISNIS"
              class="w-full px-3.5 py-2.5 text-xs rounded-xl border border-slate-200 focus:border-brand-orange text-slate-800 font-mono uppercase"
            />
          </div>

          <div>
            <label class="block text-xs font-semibold text-slate-700 font-mono uppercase mb-1">
              Tema Warna Aksen
            </label>
            <select 
              name="category_color" 
              class="w-full px-3.5 py-2.5 text-xs rounded-xl border border-slate-200 focus:border-brand-orange text-slate-800"
            >
              <option value="orange" {% if app.category_color == 'orange' %}selected{% endif %}>Oranye Kinetik (Brand Orange)</option>
              <option value="blue" {% if app.category_color == 'blue' %}selected{% endif %}>Biru Teknologi (Tech Blue)</option>
            </select>
          </div>

          <div>
            <label class="block text-xs font-semibold text-slate-700 font-mono uppercase mb-1">
              Icon Google Material Symbols
            </label>
            <input 
              type="text" 
              name="icon" 
              value="{{ app.icon|default:'widgets' }}" 
              placeholder="corporate_fare / medical_services / storefront / shield_lock"
              class="w-full px-3.5 py-2.5 text-xs rounded-xl border border-slate-200 focus:border-brand-orange text-slate-800 font-mono"
            />
          </div>

          <div>
            <label class="block text-xs font-semibold text-slate-700 font-mono uppercase mb-1">
              Label Klien (Kiri)
            </label>
            <input 
              type="text" 
              name="client_label" 
              value="{{ app.client_label|default:'Klien Produksi:' }}" 
              class="w-full px-3.5 py-2.5 text-xs rounded-xl border border-slate-200 text-slate-800"
            />
          </div>

          <div>
            <label class="block text-xs font-semibold text-slate-700 font-mono uppercase mb-1">
              Nama Instansi / Klien Pengadopsi
            </label>
            <input 
              type="text" 
              name="client_name" 
              value="{{ app.client_name|default:'' }}" 
              placeholder="contoh: PT Khatulistiwa Nusantara Indonesia"
              class="w-full px-3.5 py-2.5 text-xs rounded-xl border border-slate-200 text-slate-800"
            />
          </div>

          <div>
            <label class="block text-xs font-semibold text-slate-700 font-mono uppercase mb-1">
              Status Sandbox
            </label>
            <input 
              type="text" 
              name="status_badge" 
              value="{{ app.status_badge|default:'Live Sandbox Online' }}" 
              class="w-full px-3.5 py-2.5 text-xs rounded-xl border border-slate-200 text-slate-800"
            />
          </div>

          <div>
            <label class="block text-xs font-semibold text-slate-700 font-mono uppercase mb-1">
              Versi Rilis / Tag
            </label>
            <input 
              type="text" 
              name="version_badge" 
              value="{{ app.version_badge|default:'v1.0 Production' }}" 
              class="w-full px-3.5 py-2.5 text-xs rounded-xl border border-slate-200 text-slate-800 font-mono"
            />
          </div>

          <div class="sm:col-span-2">
            <label class="block text-xs font-semibold text-slate-700 font-mono uppercase mb-1">
              Deskripsi Solusi (Nilai Bisnis) *
            </label>
            <textarea 
              name="description" 
              rows="3" 
              required
              placeholder="Ringkasan kapabilitas dan nilai bisnis yang diberikan oleh sistem kepada korporat..."
              class="w-full px-3.5 py-2.5 text-xs sm:text-sm rounded-xl border border-slate-200 focus:border-brand-orange text-slate-800 leading-relaxed"
            >{{ app.description|default:'' }}</textarea>
          </div>
        </div>
      </div>

      <!-- SECTION 3: USER PERSONAS (Dynamic Rows) -->
      <div class="space-y-4">
        <div class="flex items-center justify-between border-b border-slate-100 pb-2">
          <div>
            <h3 class="font-display font-bold text-base text-slate-900">
              Profil Target Persona Pengguna
            </h3>
            <p class="text-xs text-slate-500">Peran pengguna yang menggunakan modul sistem ini.</p>
          </div>
          <button 
            type="button" 
            onclick="addPersonaRow()" 
            class="inline-flex items-center gap-1 px-3 py-1.5 rounded-xl text-xs font-semibold text-brand-orange bg-orange-50 hover:bg-orange-100 border border-orange-200 transition-all"
          >
            <span class="material-symbols-outlined text-[16px]">add</span>
            <span>Tambah Persona</span>
          </button>
        </div>

        <div id="personas-container" class="space-y-3">
          {% for p in app.personas %}
          <div class="persona-row p-3.5 rounded-xl bg-slate-50 border border-slate-200 flex flex-col sm:flex-row items-center gap-3">
            <div class="w-full sm:w-1/4">
              <label class="block text-[10px] font-mono text-slate-500 uppercase mb-0.5">Peran / Role</label>
              <input type="text" name="persona_role[]" value="{{ p.role }}" placeholder="Role pengguna" class="w-full px-3 py-1.5 text-xs rounded-lg border border-slate-200 bg-white"/>
            </div>
            <div class="w-full sm:w-2/4">
              <label class="block text-[10px] font-mono text-slate-500 uppercase mb-0.5">Manfaat Operasional</label>
              <input type="text" name="persona_benefit[]" value="{{ p.benefit }}" placeholder="Manfaat untuk role ini" class="w-full px-3 py-1.5 text-xs rounded-lg border border-slate-200 bg-white"/>
            </div>
            <div class="w-full sm:w-1/4 flex items-end gap-2">
              <div class="flex-1">
                <label class="block text-[10px] font-mono text-slate-500 uppercase mb-0.5">Icon Material</label>
                <input type="text" name="persona_icon[]" value="{{ p.icon }}" placeholder="person / domain" class="w-full px-3 py-1.5 text-xs rounded-lg border border-slate-200 bg-white font-mono"/>
              </div>
              <button type="button" onclick="this.closest('.persona-row').remove()" class="p-1.5 text-rose-500 hover:bg-rose-50 rounded-lg" title="Hapus persona">
                <span class="material-symbols-outlined text-[18px]">delete</span>
              </button>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>

      <!-- SECTION 4: FEATURES CHECKLIST & BACKEND ARCHITECTURE -->
      <div class="space-y-4">
        <h3 class="font-display font-bold text-base text-slate-900 border-b border-slate-100 pb-2">
          Fitur Siap Uji &amp; Spesifikasi Teknis
        </h3>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <label class="block text-xs font-semibold text-slate-700 font-mono uppercase mb-1">
              Fitur Siap Uji di Sandbox (1 Baris = 1 Fitur)
            </label>
            <textarea 
              name="features_raw" 
              rows="5" 
              placeholder="Multi-Warehouse Inventory Control&#10;Automated Financial Ledger&#10;Vendor Lifecycle Portal"
              class="w-full px-3.5 py-2.5 text-xs rounded-xl border border-slate-200 focus:border-brand-orange text-slate-800 leading-relaxed font-mono"
            >{{ features_raw|default:'' }}</textarea>
            <span class="text-[11px] text-slate-400">Tiap baris akan ditampilkan sebagai checklist dengan ikon centang.</span>
          </div>

          <div>
            <label class="block text-xs font-semibold text-slate-700 font-mono uppercase mb-1">
              Arsitektur &amp; Spesifikasi Backend (Untuk Modal)
            </label>
            <textarea 
              name="architecture" 
              rows="5" 
              placeholder="Arsitektur Microservices terdistribusi dengan Golang REST/gRPC backend, PostgreSQL database cluster..."
              class="w-full px-3.5 py-2.5 text-xs rounded-xl border border-slate-200 focus:border-brand-orange text-slate-800 leading-relaxed"
            >{{ app.architecture|default:'' }}</textarea>
            <span class="text-[11px] text-slate-400">Rincian teknis backend yang tampil di modal spesifikasi.</span>
          </div>
        </div>
      </div>

      <!-- SECTION 5: DEMO BUTTON & LINK TRIGGER -->
      <div class="space-y-4">
        <h3 class="font-display font-bold text-base text-slate-900 border-b border-slate-100 pb-2">
          Tautan Live Demo Sandbox
        </h3>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <label class="block text-xs font-semibold text-slate-700 font-mono uppercase mb-1">
              Teks Tombol Aksi
            </label>
            <input 
              type="text" 
              name="button_demo_text" 
              value="{{ app.button_demo_text|default:'Coba Demo Aplikasi' }}" 
              class="w-full px-3.5 py-2.5 text-xs rounded-xl border border-slate-200 text-slate-800"
            />
          </div>

          <div>
            <label class="block text-xs font-semibold text-slate-700 font-mono uppercase mb-1">
              URL Live Sandbox (Outbound Link) *
            </label>
            <input 
              type="url" 
              name="demo_url" 
              value="{{ app.demo_url|default:'https://demo.khansia.co.id' }}" 
              required
              placeholder="https://demo-kiera.khansia.co.id"
              class="w-full px-3.5 py-2.5 text-xs rounded-xl border border-slate-200 focus:border-brand-orange text-slate-800 font-mono"
            />
          </div>

          <div class="sm:col-span-2">
            <label class="block text-xs font-semibold text-slate-700 font-mono uppercase mb-1">
              Kata Kunci Pencarian (Search Keywords)
            </label>
            <input 
              type="text" 
              name="search_keywords" 
              value="{{ app.search_keywords|default:'' }}" 
              placeholder="kiera erp warehouse inventory accounting bumn"
              class="w-full px-3.5 py-2 text-xs rounded-xl border border-slate-200 text-slate-800 font-mono"
            />
            <span class="text-[11px] text-slate-400">Kata kunci untuk pencarian live ⌘K pada frontend.</span>
          </div>
        </div>
      </div>

      <!-- Form Actions -->
      <div class="pt-6 border-t border-slate-200 flex items-center justify-end gap-3">
        <a href="{% url 'portal:dashboard' %}" class="px-5 py-2.5 rounded-xl text-xs sm:text-sm font-semibold text-slate-600 hover:bg-slate-100 border border-slate-200 transition-all">
          Batal
        </a>
        <button 
          type="submit" 
          class="px-7 py-2.5 rounded-xl text-xs sm:text-sm font-display font-bold text-white bg-gradient-to-r from-orange-600 via-brand-orange to-amber-500 hover:from-orange-500 hover:to-amber-400 shadow-md shadow-orange-500/25 hover:shadow-lg transition-all active:scale-95 flex items-center gap-2"
        >
          <span class="material-symbols-outlined text-[18px]">save</span>
          <span>{% if action == 'create' %}Simpan Solusi Portofolio{% else %}Perbarui Perubahan{% endif %}</span>
        </button>
      </div>

    </form>

  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  // Dynamic Live Preview for Banner Thumbnail
  const fileInput = document.getElementById('thumbnail-file-input');
  const urlInput = document.getElementById('mockup-url-input');
  const previewImg = document.getElementById('banner-preview-img');
  const placeholder = document.getElementById('banner-placeholder');
  const subdomainInput = document.getElementById('subdomain-input');
  const techInput = document.getElementById('tech-stack-input');
  const previewSubdomain = document.getElementById('preview-subdomain');
  const previewTech = document.getElementById('preview-tech');

  // Preview local file when uploaded
  fileInput.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = function(evt) {
        previewImg.src = evt.target.result;
        previewImg.classList.remove('hidden');
        placeholder.classList.add('hidden');
      };
      reader.readAsDataURL(file);
    }
  });

  // Preview direct URL when typed
  urlInput.addEventListener('input', function(e) {
    const url = e.target.value.trim();
    if (url) {
      previewImg.src = url;
      previewImg.classList.remove('hidden');
      placeholder.classList.add('hidden');
    }
  });

  // Subdomain & Tech live sync in preview frame
  subdomainInput.addEventListener('input', function(e) {
    previewSubdomain.textContent = e.target.value.trim() || 'demo-sistem.khansia.co.id';
  });

  techInput.addEventListener('input', function(e) {
    previewTech.textContent = e.target.value.trim() || 'Tech Stack Tags';
  });

  // Add Dynamic Persona Row
  function addPersonaRow() {
    const container = document.getElementById('personas-container');
    const div = document.createElement('div');
    div.className = 'persona-row p-3.5 rounded-xl bg-slate-50 border border-slate-200 flex flex-col sm:flex-row items-center gap-3';
    div.innerHTML = `
      <div class="w-full sm:w-1/4">
        <label class="block text-[10px] font-mono text-slate-500 uppercase mb-0.5">Peran / Role</label>
        <input type="text" name="persona_role[]" placeholder="Role pengguna" class="w-full px-3 py-1.5 text-xs rounded-lg border border-slate-200 bg-white"/>
      </div>
      <div class="w-full sm:w-2/4">
        <label class="block text-[10px] font-mono text-slate-500 uppercase mb-0.5">Manfaat Operasional</label>
        <input type="text" name="persona_benefit[]" placeholder="Manfaat untuk role ini" class="w-full px-3 py-1.5 text-xs rounded-lg border border-slate-200 bg-white"/>
      </div>
      <div class="w-full sm:w-1/4 flex items-end gap-2">
        <div class="flex-1">
          <label class="block text-[10px] font-mono text-slate-500 uppercase mb-0.5">Icon Material</label>
          <input type="text" name="persona_icon[]" value="account_circle" class="w-full px-3 py-1.5 text-xs rounded-lg border border-slate-200 bg-white font-mono"/>
        </div>
        <button type="button" onclick="this.closest('.persona-row').remove()" class="p-1.5 text-rose-500 hover:bg-rose-50 rounded-lg" title="Hapus persona">
          <span class="material-symbols-outlined text-[18px]">delete</span>
        </button>
      </div>
    `;
    container.appendChild(div);
  }
</script>
{% endblock %}