{% extends "base.html" %}
{% load i18n %}
{% block title %}{% if mode == 'edit' %}{% trans "Edit" %} — {{ bengkel.title }}{% else %}{% trans "Cipta Bengkel Baharu" %}{% endif %} — IPES{% endblock %}
{% block breadcrumb %}
  <a href="{% url 'bengkel:list' %}" class="text-blue-600 hover:underline text-[11px] font-bold">Pustaka Bengkel</a> <span class="mx-2 text-slate-400">/</span>
  {% if mode == 'edit' %}
    <a href="{% url 'bengkel:detail' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-[11px] font-bold">{{ bengkel.title|truncatechars:30 }}</a> <span class="mx-2 text-slate-400">/</span> <span class="text-slate-500 font-medium">Edit</span>
  {% else %}
    <span class="text-slate-500 font-medium">Bengkel Baharu</span>
  {% endif %}
{% endblock %}

{% block content %}
<style>
    @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
    .animate-fade-up { animation: fadeUp 0.5s ease-out forwards; }
    
    .input-group { margin-bottom: 1.25rem; }
    .input-label { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 6px; }
    .input-field { width: 100%; padding: 0.875rem 1rem; border-radius: 0.75rem; border: 1px solid #e2e8f0; background-color: #f8fafc; font-size: 0.875rem; color: #1e293b; transition: all 0.2s; outline: none; }
    .input-field:focus { border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); background-color: #ffffff; }
    
    .section-header { display: flex; items-center; gap: 12px; padding: 12px 20px; border-radius: 12px 12px 0 0; color: white; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; }
    .section-body { background: white; border: 1px solid #e2e8f0; border-top: none; border-radius: 0 0 12px 12px; padding: 24px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
</style>

<div class="animate-fade-up max-w-[1000px] mx-auto pb-12">

  <div class="rounded-3xl p-8 mb-8 relative overflow-hidden shadow-sm" style="background: linear-gradient(135deg, #0f172a 0%, #1e40af 100%);">
    <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(rgba(255,255,255,.3) 1px,transparent 1px);background-size:20px 20px;"></div>
    <div class="relative z-10 flex items-center gap-5">
        <div class="w-14 h-14 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20 flex items-center justify-center text-2xl text-blue-300 shadow-inner">
            <i class="fas {% if mode == 'edit' %}fa-edit{% else %}fa-magic{% endif %}"></i>
        </div>
        <div>
            <div class="text-[10px] text-blue-300 font-black uppercase tracking-widest mb-1">Borang Tetapan Sistem</div>
            <h1 class="text-white text-3xl font-black tracking-tight">{% if mode == 'edit' %}Kemaskini Acara{% else %}Cipta Acara Baharu{% endif %}</h1>
        </div>
    </div>
  </div>

  {% if errors %}
  <div class="bg-rose-50 border border-rose-200 text-rose-700 px-5 py-4 rounded-2xl mb-8 text-sm font-bold flex items-start gap-3 shadow-sm">
      <i class="fas fa-exclamation-triangle mt-0.5 text-rose-500"></i>
      <span>Pendaftaran gagal. Sila semak dan betulkan ruangan yang bertanda merah di bawah.</span>
  </div>
  {% endif %}

  <form method="post" class="space-y-6">
    {% csrf_token %}

    <div>
        <div class="section-header bg-gradient-to-r from-slate-800 to-slate-700"><i class="fas fa-info-circle text-slate-300"></i> Seksyen A — Maklumat Asas Program</div>
        <div class="section-body">
            <div class="input-group">
                <label class="input-label">Nama / Tajuk Acara <span class="text-rose-500">*</span></label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"><i class="fas fa-heading text-slate-400"></i></div>
                    <input type="text" name="title" required maxlength="255" value="{{ form_data.title|default:'' }}" placeholder="Cth: Persidangan Kesihatan Digital KKM 2026" class="input-field !pl-11 {% if errors.title %}border-rose-400 bg-rose-50{% endif %}" />
                </div>
                {% if errors.title %}<p class="text-[10px] font-bold text-rose-500 mt-1.5">{{ errors.title }}</p>{% endif %}
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5">
                <div>
                    <label class="input-label">Jenis Acara <span class="text-rose-500">*</span></label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"><i class="fas fa-tags text-slate-400"></i></div>
                        <select name="jenis_acara" class="input-field !pl-11 appearance-none cursor-pointer">
                            <option value="Bengkel" {% if form_data.jenis_acara == 'Bengkel' %}selected{% endif %}>Bengkel (Workshop)</option>
                            <option value="Persidangan" {% if form_data.jenis_acara == 'Persidangan' %}selected{% endif %}>Persidangan (Conference)</option>
                            <option value="Simposium" {% if form_data.jenis_acara == 'Simposium' %}selected{% endif %}>Simposium</option>
                            <option value="Townhall" {% if form_data.jenis_acara == 'Townhall' %}selected{% endif %}>Sesi Libat Urus (Townhall)</option>
                            <option value="Latihan" {% if form_data.jenis_acara == 'Latihan' %}selected{% endif %}>Latihan / Kursus</option>
                            <option value="Mesyuarat" {% if form_data.jenis_acara == 'Mesyuarat' %}selected{% endif %}>Mesyuarat Strategik</option>
                            <option value="Lain-lain" {% if form_data.jenis_acara == 'Lain-lain' %}selected{% endif %}>Lain-lain</option>
                        </select>
                        <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none"><i class="fas fa-chevron-down text-slate-400 text-xs"></i></div>
                    </div>
                </div>

                <div>
                    <label class="input-label">Tetapan Privasi Acara <span class="text-rose-500">*</span></label>
                    <div class="grid grid-cols-2 gap-3 mt-1.5">
                        <label class="relative cursor-pointer">
                            <input type="radio" name="privasi" value="Tertutup" class="peer sr-only" {% if form_data.privasi == 'Tertutup' or not form_data.privasi %}checked{% endif %}>
                            <div class="flex items-center justify-center gap-2 px-3 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs font-bold text-slate-500 hover:bg-slate-100 transition-all peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 peer-focus:ring-2 peer-focus:ring-blue-200 shadow-sm">
                                <i class="fas fa-lock"></i> Tertutup (Jemputan)
                            </div>
                        </label>
                        <label class="relative cursor-pointer">
                            <input type="radio" name="privasi" value="Terbuka" class="peer sr-only" {% if form_data.privasi == 'Terbuka' %}checked{% endif %}>
                            <div class="flex items-center justify-center gap-2 px-3 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs font-bold text-slate-500 hover:bg-slate-100 transition-all peer-checked:border-emerald-500 peer-checked:bg-emerald-50 peer-checked:text-emerald-700 peer-focus:ring-2 peer-focus:ring-emerald-200 shadow-sm">
                                <i class="fas fa-globe"></i> Terbuka (Public)
                            </div>
                        </label>
                    </div>
                    <p class="text-[9px] text-slate-400 mt-2 font-medium">Acara Terbuka akan diiklankan di Laman Utama IPES.</p>
                </div>
            </div>

            <div class="input-group">
                <label class="input-label">Objektif & Penerangan Ringkas</label>
                <textarea name="description" rows="3" placeholder="Gambarkan matlamat utama bengkel ini..." class="input-field resize-none">{{ form_data.description|default:'' }}</textarea>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div class="input-group !mb-0">
                    <label class="input-label">Jadual Bermula <span class="text-rose-500">*</span></label>
                    <input type="datetime-local" name="tarikh" required value="{{ form_data.tarikh|default:'' }}" class="input-field {% if errors.tarikh %}border-rose-400 bg-rose-50{% endif %}" />
                    {% if errors.tarikh %}<p class="text-[10px] font-bold text-rose-500 mt-1.5">{{ errors.tarikh }}</p>{% endif %}
                </div>
                <div class="input-group !mb-0">
                    <label class="input-label">Jadual Tamat</label>
                    <input type="datetime-local" name="tarikh_tamat" value="{{ form_data.tarikh_tamat|default:'' }}" class="input-field" />
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mt-5">
                <div class="input-group !mb-0">
                    <label class="input-label">Kapasiti / Had Peserta <span class="text-slate-400 font-medium">(Letak 0 untuk tiada had)</span></label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"><i class="fas fa-users text-slate-400"></i></div>
                        <input type="number" name="had_peserta" min="0" value="{{ form_data.had_peserta|default:'0' }}" class="input-field !pl-11" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div>
        <div class="section-header bg-gradient-to-r from-teal-800 to-emerald-700"><i class="fas fa-map-marked-alt text-emerald-300"></i> Seksyen B — Penempatan Lokasi</div>
        <div class="section-body">
            <div class="input-group">
                <label class="input-label">Nama Dewan / Bangunan <span class="text-rose-500">*</span></label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"><i class="fas fa-building text-slate-400"></i></div>
                    <input type="text" name="lokasi_nama" required maxlength="300" value="{{ form_data.lokasi_nama|default:'' }}" placeholder="Cth: Dewan Serbaguna, Aras 4" class="input-field !pl-11 {% if errors.lokasi_nama %}border-rose-400 bg-rose-50{% endif %}" />
                </div>
                {% if errors.lokasi_nama %}<p class="text-[10px] font-bold text-rose-500 mt-1.5">{{ errors.lokasi_nama }}</p>{% endif %}
            </div>
            <div class="input-group !mb-0">
                <label class="input-label">Alamat Penuh</label>
                <textarea name="lokasi_alamat" rows="2" placeholder="Sila masukkan alamat yang tepat untuk rujukan GPS peserta..." class="input-field resize-none">{{ form_data.lokasi_alamat|default:'' }}</textarea>
            </div>
        </div>
    </div>

    <div>
        <div class="section-header bg-gradient-to-r from-amber-800 to-orange-600"><i class="fas fa-id-badge text-amber-300"></i> Seksyen C — Pengurusan & Penganjur</div>
        <div class="section-body">
            <div class="input-group">
                <label class="input-label">Entiti Penganjur Utama <span class="text-rose-500">*</span></label>
                <input type="text" name="organizer_nama" required maxlength="200" value="{{ form_data.organizer_nama|default:'' }}" placeholder="Cth: Bahagian Pembangunan Kesihatan Digital" class="input-field {% if errors.organizer_nama %}border-rose-400 bg-rose-50{% endif %}" />
                {% if errors.organizer_nama %}<p class="text-[10px] font-bold text-rose-500 mt-1.5">{{ errors.organizer_nama }}</p>{% endif %}
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div class="input-group !mb-0">
                    <label class="input-label">E-mel Rasmi Pertanyaan</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"><i class="fas fa-envelope text-slate-400"></i></div>
                        <input type="email" name="organizer_email" value="{{ form_data.organizer_email|default:'' }}" placeholder="ndhb@moh.gov.my" class="input-field !pl-11" />
                    </div>
                </div>
                <div class="input-group !mb-0">
                    <label class="input-label">Talian Utama Penganjur</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"><i class="fas fa-phone-alt text-slate-400"></i></div>
                        <input type="tel" name="organizer_telefon" value="{{ form_data.organizer_telefon|default:'' }}" placeholder="03-8883 0000" class="input-field !pl-11" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div>
        <div class="section-header bg-gradient-to-r from-purple-900 to-violet-700"><i class="fab fa-youtube text-violet-300"></i> Seksyen D — Integrasi Media Video (Pilihan)</div>
        <div class="section-body">
            <div class="input-group">
                <label class="input-label">Pautan Video Pengenalan (YouTube)</label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"><i class="fas fa-link text-slate-400"></i></div>
                    <input type="url" name="video_ucapan_url" value="{{ form_data.video_ucapan_url|default:'' }}" placeholder="https://www.youtube.com/watch?v=..." class="input-field !pl-11" />
                </div>
                <p class="text-[9px] font-bold text-slate-400 mt-1.5 uppercase">Sistem menyokong format standard atau youtu.be</p>
            </div>
            <div class="input-group !mb-0">
                <label class="input-label">Pautan Video Arah Laluan (YouTube)</label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"><i class="fas fa-route text-slate-400"></i></div>
                    <input type="url" name="video_arah_url" value="{{ form_data.video_arah_url|default:'' }}" placeholder="https://www.youtube.com/watch?v=..." class="input-field !pl-11" />
                </div>
            </div>
        </div>
    </div>

    <div>
        <div class="section-header bg-gradient-to-r from-blue-900 to-cyan-700"><i class="fas fa-list-ol text-cyan-300"></i> Seksyen E — Penjadualan Aturcara (Tentative)</div>
        <div class="section-body">
            <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-5 flex items-start gap-3">
                <i class="fas fa-info-circle text-blue-500 mt-0.5"></i>
                <p class="text-xs font-medium text-blue-800">Susun aturcara program di sini. Ia akan dipaparkan secara langsung di portal pendaftaran dan dashboard peserta. Anda boleh menambahnya kemudian.</p>
            </div>

            <div id="tentative-rows" class="space-y-3 mb-5">
                {% if tentative_items %}
                    {% for item in tentative_items %}
                    <div class="tentative-row flex flex-col md:flex-row gap-3 items-start md:items-center p-4 rounded-xl border border-slate-200 bg-slate-50 group hover:border-cyan-300 transition-colors">
                        <div class="hidden md:flex shrink-0 w-6 h-6 items-center justify-center text-slate-300 cursor-grab"><i class="fas fa-grip-vertical"></i></div>
                        
                        <div class="w-full md:w-auto shrink-0 flex items-center gap-2">
                            <input type="time" class="masa-mula w-full md:w-[110px] px-3 py-2 rounded-lg border border-slate-200 text-xs font-bold text-slate-700 focus:outline-none focus:border-cyan-400" value="{{ item.masa|slice:':5' }}">
                            <span class="text-slate-400 font-bold">-</span>
                            <input type="time" class="masa-tamat w-full md:w-[110px] px-3 py-2 rounded-lg border border-slate-200 text-xs font-bold text-slate-700 focus:outline-none focus:border-cyan-400" value="{{ item.masa|slice:'8:13' }}">
                            <input type="hidden" name="tentative_masa" value="{{ item.masa }}">
                        </div>
                        
                        <div class="w-full md:flex-1">
                            <input type="text" name="tentative_aktiviti" value="{{ item.aktiviti }}" placeholder="Tajuk Aktiviti (Cth: Sesi Pembukaan)" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-xs font-bold text-slate-700 focus:outline-none focus:border-cyan-400 mb-2 md:mb-0" />
                        </div>
                        
                        <div class="w-full md:flex-1">
                            <input type="text" name="tentative_penerangan" value="{{ item.penerangan }}" placeholder="Penerangan ringkas (Pilihan)" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-xs text-slate-600 focus:outline-none focus:border-cyan-400" />
                        </div>
                        
                        <button type="button" onclick="this.closest('.tentative-row').remove()" class="w-full md:w-auto shrink-0 mt-2 md:mt-0 px-3 py-2 rounded-lg bg-white border border-rose-200 text-rose-500 hover:bg-rose-500 hover:text-white font-bold text-xs transition-colors">
                            <i class="fas fa-trash-alt"></i> <span class="md:hidden">Padam Baris Ini</span>
                        </button>
                    </div>
                    {% endfor %}
                {% endif %}
            </div>

            <div class="flex flex-col sm:flex-row gap-3 mt-4">
                <button type="button" id="add-tentative-row" class="w-full sm:w-auto flex items-center justify-center gap-2 px-5 py-3 rounded-xl border-2 border-dashed border-cyan-300 text-cyan-700 font-bold text-xs hover:bg-cyan-50 transition-colors">
                    <i class="fas fa-plus"></i> Tambah Manual
                </button>
                
                <div class="relative w-full sm:w-auto">
                    <input type="file" id="fail-tentatif" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" accept=".pdf,.doc,.docx,.txt" onchange="muatNaikTentatifAI(this)" title="Muat Naik Fail Jadual (PDF/Word)">
                    <button type="button" id="btn-ai-tentatif" class="w-full flex items-center justify-center gap-2 px-5 py-3 rounded-xl bg-purple-50 text-purple-600 border border-purple-200 font-bold text-xs hover:bg-purple-100 transition-colors shadow-sm relative z-0">
                        <i class="fas fa-robot text-purple-500"></i> <span id="teks-ai-tentatif">Auto-Jana (Upload Fail AI)</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="flex flex-col-reverse sm:flex-row items-center justify-end gap-4 pt-6 mt-8 border-t border-slate-200">
        <a href="{% if mode == 'edit' %}{% url 'bengkel:detail' pk=bengkel.pk %}{% else %}{% url 'bengkel:list' %}{% endif %}" class="w-full sm:w-auto text-center px-6 py-3.5 rounded-xl border border-slate-300 text-sm font-bold text-slate-600 hover:bg-slate-100 transition-colors">
            Batal
        </a>
        <button type="submit" class="w-full sm:w-auto flex items-center justify-center gap-2 px-8 py-3.5 rounded-xl font-bold text-sm text-white bg-blue-600 hover:bg-blue-700 shadow-lg shadow-blue-600/30 transition-all active:scale-[0.98]">
            <i class="fas fa-save"></i> {% if mode == 'edit' %}Simpan Kemaskini{% else %}Cipta Acara Sekarang{% endif %}
        </button>
    </div>
  </form>
</div>

<script>
document.getElementById('add-tentative-row').addEventListener('click', function() {
    var row = document.createElement('div');
    row.className = 'tentative-row flex flex-col md:flex-row gap-3 items-start md:items-center p-4 rounded-xl border border-slate-200 bg-slate-50 group hover:border-cyan-300 transition-colors';
    row.innerHTML = `
        <div class="hidden md:flex shrink-0 w-6 h-6 items-center justify-center text-slate-300 cursor-grab"><i class="fas fa-grip-vertical"></i></div>
        <div class="w-full md:w-auto shrink-0 flex items-center gap-2">
            <input type="time" class="masa-mula w-full md:w-[110px] px-3 py-2 rounded-lg border border-slate-200 text-xs font-bold text-slate-700 focus:outline-none focus:border-cyan-400">
            <span class="text-slate-400 font-bold">-</span>
            <input type="time" class="masa-tamat w-full md:w-[110px] px-3 py-2 rounded-lg border border-slate-200 text-xs font-bold text-slate-700 focus:outline-none focus:border-cyan-400">
            <input type="hidden" name="tentative_masa" value="">
        </div>
        <div class="w-full md:flex-1">
            <input type="text" name="tentative_aktiviti" placeholder="Tajuk Aktiviti (Cth: Sesi Pembukaan)" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-xs font-bold text-slate-700 focus:outline-none focus:border-cyan-400 mb-2 md:mb-0" />
        </div>
        <div class="w-full md:flex-1">
            <input type="text" name="tentative_penerangan" placeholder="Penerangan ringkas (Pilihan)" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-xs text-slate-600 focus:outline-none focus:border-cyan-400" />
        </div>
        <button type="button" onclick="this.closest('.tentative-row').remove()" class="w-full md:w-auto shrink-0 mt-2 md:mt-0 px-3 py-2 rounded-lg bg-white border border-rose-200 text-rose-500 hover:bg-rose-500 hover:text-white font-bold text-xs transition-colors">
            <i class="fas fa-trash-alt"></i> <span class="md:hidden">Padam Baris Ini</span>
        </button>
    `;
    document.getElementById('tentative-rows').appendChild(row);
    row.querySelector('.masa-mula').focus();
});

document.querySelector('form').addEventListener('submit', function() {
    document.querySelectorAll('.tentative-row').forEach(function(row) {
        var mula = row.querySelector('.masa-mula').value;
        var tamat = row.querySelector('.masa-tamat').value;
        var hidden = row.querySelector('input[name="tentative_masa"]');
        if (hidden) {
            // Logik gabungan masa untuk backend Django Rahman
            hidden.value = mula && tamat ? mula + ' - ' + tamat : (mula || tamat || '');
        }
    });
});

// FUNGSI AUTO-JANA AI (MEMBACA FAIL & MELUKIS HTML)
function muatNaikTentatifAI(input) {
    if (!input.files || input.files.length === 0) return;
    
    var fail = input.files[0];
    var formData = new FormData();
    formData.append('dokumen', fail);
    
    var btn = document.getElementById('btn-ai-tentatif');
    var teks = document.getElementById('teks-ai-tentatif');
    var asalHtml = btn.innerHTML;
    
    // UI Animasi Loading
    btn.classList.add('opacity-70', 'cursor-not-allowed', 'animate-pulse');
    teks.innerHTML = 'AI Sedang Membaca... <i class="fas fa-spinner fa-spin ml-1"></i>';
    
    fetch('/bengkel/api/jana-tentatif-ai/', {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        if(data.success) {
            // Lukis setiap baris yang berjaya diekstrak
            data.data.forEach(item => {
                var row = document.createElement('div');
                row.className = 'tentative-row flex flex-col md:flex-row gap-3 items-start md:items-center p-4 rounded-xl border border-slate-200 bg-emerald-50 group hover:border-emerald-300 transition-colors animate-fade-up';
                row.innerHTML = `
                    <div class="hidden md:flex shrink-0 w-6 h-6 items-center justify-center text-slate-300 cursor-grab"><i class="fas fa-grip-vertical"></i></div>
                    <div class="w-full md:w-auto shrink-0 flex items-center gap-2">
                        <input type="time" class="masa-mula w-full md:w-[110px] px-3 py-2 rounded-lg border border-emerald-200 text-xs font-bold text-slate-700 focus:outline-none focus:border-emerald-400" value="${item.masa_mula || ''}">
                        <span class="text-slate-400 font-bold">-</span>
                        <input type="time" class="masa-tamat w-full md:w-[110px] px-3 py-2 rounded-lg border border-emerald-200 text-xs font-bold text-slate-700 focus:outline-none focus:border-emerald-400" value="${item.masa_tamat || ''}">
                        <input type="hidden" name="tentative_masa" value="${(item.masa_mula || '') + ' - ' + (item.masa_tamat || '')}">
                    </div>
                    <div class="w-full md:flex-1">
                        <input type="text" name="tentative_aktiviti" value="${item.aktiviti || ''}" placeholder="Tajuk Aktiviti" class="w-full px-3 py-2 rounded-lg border border-emerald-200 text-xs font-bold text-slate-700 focus:outline-none focus:border-emerald-400 mb-2 md:mb-0" />
                    </div>
                    <div class="w-full md:flex-1">
                        <input type="text" name="tentative_penerangan" value="${item.penerangan || ''}" placeholder="Penerangan ringkas" class="w-full px-3 py-2 rounded-lg border border-emerald-200 text-xs text-slate-600 focus:outline-none focus:border-emerald-400" />
                    </div>
                    <button type="button" onclick="this.closest('.tentative-row').remove()" class="w-full md:w-auto shrink-0 mt-2 md:mt-0 px-3 py-2 rounded-lg bg-white border border-rose-200 text-rose-500 hover:bg-rose-500 hover:text-white font-bold text-xs transition-colors">
                        <i class="fas fa-trash-alt"></i> <span class="md:hidden">Padam Baris Ini</span>
                    </button>
                `;
                document.getElementById('tentative-rows').appendChild(row);
            });
        } else {
            alert('{% trans "Ralat AI:" %} ' + data.error);
        }
    })
    .catch(err => {
        alert('{% trans "Ralat sambungan:" %} ' + err);
    })
    .finally(() => {
        // Reset UI
        btn.classList.remove('opacity-70', 'cursor-not-allowed', 'animate-pulse');
        btn.innerHTML = asalHtml;
        input.value = ''; 
    });
}
</script>
{% endblock %}