{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Pengurusan Tentatif" %} — {{ bengkel.title }}{% endblock %}
{% block breadcrumb %}
  <a href="{% url 'bengkel:list' %}" class="text-blue-600 hover:underline text-xs font-bold">Pustaka Bengkel</a> <span class="mx-2 text-slate-400">/</span>
  <a href="{{ back_url }}" class="text-blue-600 hover:underline text-xs font-bold">{{ bengkel.title|truncatechars:30 }}</a> <span class="mx-2 text-slate-400">/</span>
  <span class="text-slate-500 font-medium text-xs">Jadual Tentatif</span>
{% 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-label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 6px; }
    .input-field { width: 100%; padding: 0.75rem 1rem; border-radius: 0.75rem; border: 1px solid #e2e8f0; background-color: #f8fafc; font-size: 0.875rem; font-weight: 500; 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; }
</style>

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

    <div class="bg-gradient-to-br from-slate-900 via-indigo-900 to-slate-900 rounded-3xl p-8 mb-8 shadow-sm border border-slate-800 flex flex-col md:flex-row md:items-center justify-between gap-6 relative overflow-hidden">
        <div class="absolute right-0 top-0 opacity-10 transform translate-x-1/4 -translate-y-1/4 pointer-events-none">
            <i class="fas fa-clock text-[200px] text-indigo-400"></i>
        </div>
        
        <div class="relative z-10 flex items-center gap-5">
            <div class="w-14 h-14 rounded-2xl bg-indigo-500/20 backdrop-blur-sm border border-indigo-400/30 flex items-center justify-center text-3xl text-indigo-300 shadow-inner shrink-0">
                <i class="fas fa-list-ol"></i>
            </div>
            <div>
                <div class="inline-flex items-center gap-2 px-3 py-1 bg-indigo-500/20 border border-indigo-400/30 text-indigo-200 text-[10px] font-black uppercase tracking-widest rounded-full mb-1">
                    Atur Cara Program
                </div>
                <h1 class="text-2xl md:text-3xl font-black text-white leading-tight tracking-tight">{{ bengkel.title|truncatechars:40 }}</h1>
            </div>
        </div>

        <div class="relative z-10 shrink-0">
            <a href="{{ back_url }}" class="flex items-center justify-center gap-2 bg-white/10 hover:bg-white/20 border border-white/20 text-white px-6 py-3.5 rounded-xl font-bold shadow-sm backdrop-blur-sm transition-all active:scale-[0.98]">
                <i class="fas fa-arrow-left"></i> Kembali ke Panel Bengkel
            </a>
        </div>
    </div>

    {% if messages %}
        <div class="mb-8 space-y-2">
            {% for m in messages %}
            <div class="flex items-start gap-3 px-5 py-4 rounded-2xl text-sm font-bold shadow-sm border 
                {% if m.tags == 'success' %}bg-emerald-50 text-emerald-700 border-emerald-200
                {% else %}bg-rose-50 text-rose-700 border-rose-200{% endif %}">
                <i class="fas {% if m.tags == 'success' %}fa-check-circle text-emerald-500{% else %}fa-times-circle text-rose-500{% endif %} mt-0.5"></i>
                <div class="break-all">{{ m }}</div>
            </div>
            {% endfor %}
        </div>
    {% endif %}

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">

        <div class="lg:col-span-4 sticky top-24">
            <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-6 md:p-8">
                <h2 class="text-lg font-black text-slate-800 mb-1 flex items-center gap-2"><i class="fas fa-plus-circle text-blue-600"></i> Tambah Aktiviti</h2>
                <p class="text-xs text-slate-500 font-medium mb-6">Masukkan butiran aktiviti baharu ke dalam atur cara program.</p>
                
                <form method="post" id="add-tentative-form" class="space-y-5">
                    {% csrf_token %}
                    
                    <div>
                        <label class="input-label">Slot Masa <span class="text-rose-500">*</span></label>
                        <div class="flex items-center gap-3">
                            <input type="time" id="masa-mula" required class="input-field px-3" />
                            <span class="text-slate-400 font-black text-xs shrink-0">HINGGA</span>
                            <input type="time" id="masa-tamat" class="input-field px-3" />
                        </div>
                        <input type="hidden" name="masa" id="masa-hidden">
                    </div>
                    
                    <div>
                        <label class="input-label">Tajuk Aktiviti <span class="text-rose-500">*</span></label>
                        <input type="text" name="aktiviti" placeholder="Cth: Pendaftaran Peserta" required class="input-field" />
                    </div>
                    
                    <div>
                        <label class="input-label">Penerangan Tambahan (Pilihan)</label>
                        <textarea name="penerangan" rows="2" placeholder="Butiran lanjut seperti tempat atau VIP terlibat..." class="input-field resize-none"></textarea>
                    </div>
                    
                    <div>
                        <label class="input-label">No. Urutan</label>
                        <input type="number" name="urutan" value="0" min="0" class="input-field w-1/2" title="Gunakan nombor untuk menyusun turutan (0, 1, 2...)" />
                        <p class="text-[10px] text-slate-400 font-semibold mt-1">Item dengan nombor kecil akan dipaparkan di atas.</p>
                    </div>
                    
                    <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-black py-3.5 rounded-xl shadow-lg shadow-blue-500/30 transition-all flex items-center justify-center gap-2 active:scale-[0.98] mt-2">
                        <i class="fas fa-save"></i> <span>Simpan Aktiviti</span>
                    </button>
                </form>
            </div>
        </div>

        <div class="lg:col-span-8">
            <h2 class="text-xs font-black uppercase tracking-widest text-slate-400 mb-6 flex items-center gap-2"><i class="fas fa-stream"></i> Garis Masa Keseluruhan</h2>
            
            {% if items %}
                <div class="relative border-l-2 border-indigo-100 ml-3 md:ml-4 space-y-6 pb-6">
                    {% for item in items %}
                    <div class="relative pl-6 md:pl-8 group">
                        
                        <div class="absolute -left-[11px] top-5 w-5 h-5 rounded-full bg-indigo-500 border-4 border-white shadow-sm group-hover:bg-blue-500 transition-colors"></div>
                        
                        <div id="view-{{ item.pk }}" class="bg-white rounded-2xl border border-slate-200 shadow-sm p-5 hover:border-indigo-300 transition-all relative overflow-hidden">
                            <div class="absolute top-0 left-0 w-1.5 h-full bg-gradient-to-b from-indigo-500 to-blue-500"></div>
                            
                            <div class="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
                                <div class="flex-1 min-w-0">
                                    <div class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-indigo-50 text-indigo-600 border border-indigo-100 rounded-md text-[10px] font-black uppercase tracking-widest mb-2">
                                        <i class="far fa-clock"></i> {{ item.masa }}
                                    </div>
                                    <h3 class="font-black text-slate-800 text-base md:text-lg leading-snug mb-1">{{ item.aktiviti }}</h3>
                                    {% if item.penerangan %}
                                        <p class="text-xs text-slate-500 font-medium leading-relaxed mt-2 bg-slate-50 p-3 rounded-lg border border-slate-100">{{ item.penerangan }}</p>
                                    {% endif %}
                                </div>
                                
                                <div class="flex items-center gap-2 shrink-0 border-t sm:border-t-0 border-slate-100 pt-3 sm:pt-0">
                                    <button type="button" onclick="toggleEdit({{ item.pk }})" class="w-8 h-8 rounded-lg bg-slate-50 border border-slate-200 text-slate-500 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-200 flex items-center justify-center transition-colors shadow-sm" title="Kemaskini">
                                        <i class="fas fa-edit text-xs"></i>
                                    </button>
                                    <form method="post" action="{% url 'bengkel:tentative_delete' bengkel.pk item.pk %}" onsubmit="return confirm('{% trans 'AMARAN: Anda pasti mahu memadam aktiviti ini dari atur cara?' %}')" class="inline">
                                        {% csrf_token %}
                                        <button type="submit" class="w-8 h-8 rounded-lg bg-slate-50 border border-slate-200 text-slate-500 hover:bg-rose-50 hover:text-rose-600 hover:border-rose-200 flex items-center justify-center transition-colors shadow-sm" title="Padam">
                                            <i class="fas fa-trash-alt text-xs"></i>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div id="edit-{{ item.pk }}" style="display:none;" class="bg-slate-50 rounded-2xl border-2 border-dashed border-blue-200 p-5 mt-2 shadow-inner">
                            <h4 class="text-[10px] font-black uppercase tracking-widest text-blue-500 mb-4"><i class="fas fa-pen"></i> Mod Kemaskini</h4>
                            <form method="post" action="{% url 'bengkel:tentative_edit' bengkel.pk item.pk %}" class="edit-form space-y-4" data-id="{{ item.pk }}">
                                {% csrf_token %}
                                
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="input-label">Masa</label>
                                        <div class="flex items-center gap-2">
                                            <input type="time" class="edit-masa-mula input-field px-2 py-2 text-xs" value="{{ item.masa|slice:':5' }}">
                                            <span class="text-slate-400 font-bold">-</span>
                                            <input type="time" class="edit-masa-tamat input-field px-2 py-2 text-xs" value="{{ item.masa|slice:'8:13' }}">
                                        </div>
                                        <input type="hidden" name="masa" class="edit-masa-hidden" value="{{ item.masa }}">
                                    </div>
                                    <div>
                                        <label class="input-label">Tajuk Aktiviti</label>
                                        <input type="text" name="aktiviti" value="{{ item.aktiviti }}" required class="input-field py-2 text-xs">
                                    </div>
                                </div>
                                
                                <div>
                                    <label class="input-label">Penerangan</label>
                                    <input type="text" name="penerangan" value="{{ item.penerangan }}" class="input-field py-2 text-xs" placeholder="Penerangan...">
                                </div>
                                
                                <div class="flex items-center justify-end gap-3 pt-2">
                                    <button type="button" onclick="toggleEdit({{ item.pk }})" class="px-5 py-2.5 rounded-xl text-xs font-bold text-slate-600 bg-white border border-slate-200 hover:bg-slate-100 transition-colors">Batal</button>
                                    <button type="submit" class="px-6 py-2.5 rounded-xl text-xs font-bold text-white bg-blue-600 hover:bg-blue-700 transition-colors shadow-sm flex items-center gap-2"><i class="fas fa-check"></i> Simpan Perubahan</button>
                                </div>
                            </form>
                        </div>

                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="bg-white rounded-3xl border-2 border-dashed border-slate-200 p-12 text-center shadow-sm">
                    <div class="w-20 h-20 bg-slate-50 border border-slate-100 rounded-full flex items-center justify-center text-3xl text-slate-300 mx-auto mb-4"><i class="fas fa-clipboard-list"></i></div>
                    <h3 class="text-lg font-black text-slate-700 mb-1">Garis Masa Kosong</h3>
                    <p class="text-sm text-slate-500 font-medium">Belum ada sebarang aktiviti dimasukkan.<br>Sila gunakan borang di sebelah untuk membina jadual bengkel.</p>
                </div>
            {% endif %}
        </div>

    </div>
</div>

<script>
    // Logik Borang Tambah
    function updateAddMasa() {
        var mula = document.getElementById('masa-mula').value;
        var tamat = document.getElementById('masa-tamat').value;
        // Gabungkan masa jika kedua-dua diisi, jika tidak ambil salah satu
        document.getElementById('masa-hidden').value = mula && tamat ? mula + ' - ' + tamat : (mula || tamat || '');
    }
    
    document.getElementById('masa-mula').addEventListener('change', updateAddMasa);
    document.getElementById('masa-tamat').addEventListener('change', updateAddMasa);
    document.getElementById('add-tentative-form').addEventListener('submit', updateAddMasa);

    // Logik Papar/Sembunyi Mod Kemaskini (Dengan Transisi Halus)
    function toggleEdit(id) {
        var view = document.getElementById('view-' + id);
        var edit = document.getElementById('edit-' + id);
        
        if (edit.style.display === 'none' || edit.style.display === '') {
            // Tunjuk Edit
            edit.style.display = 'block';
            view.style.opacity = '0.5';
            view.classList.remove('border-indigo-300');
            view.classList.add('border-slate-200');
        } else {
            // Sorok Edit
            edit.style.display = 'none';
            view.style.opacity = '1';
        }
    }

    // Logik Borang Kemaskini (Loop semua form edit)
    document.querySelectorAll('.edit-form').forEach(function(form) {
        var mulaEl = form.querySelector('.edit-masa-mula');
        var tamatEl = form.querySelector('.edit-masa-tamat');
        var hidden = form.querySelector('.edit-masa-hidden');
        
        function updateEdit() {
            hidden.value = mulaEl.value && tamatEl.value ? mulaEl.value + ' - ' + tamatEl.value : (mulaEl.value || tamatEl.value || hidden.value);
        }
        
        mulaEl.addEventListener('change', updateEdit);
        tamatEl.addEventListener('change', updateEdit);
        form.addEventListener('submit', updateEdit);
    });
</script>
{% endblock %}