{% extends "admin/base.html" %}
{% load static %}

{% block title %}{% if is_edit %}Edit{% else %}Tambah{% endif %} Sejarah HMI{% endblock %}

{% block extra_css %}
{{ form.media.css }}
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 p-4 sm:p-6 lg:p-8">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
        <div class="mb-4 sm:mb-0">
            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">
                {% if is_edit %}Edit{% else %}Tambah{% endif %} Sejarah HMI
            </h1>
            <p class="text-gray-600 mt-1">
                {% if is_edit %}Perbarui informasi sejarah{% else %}Tambahkan sejarah baru{% endif %}
            </p>
        </div>
        <div>
            <a href="{% url 'admin_panel:tentang_hmi:sejarah_hmi' %}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>Kembali
            </a>
        </div>
    </div>

    <!-- Form -->
    <div class="max-w-4xl mx-auto">
        <div class="bg-white rounded-lg shadow-sm">
            <div class="px-4 sm:px-6 py-4 border-b border-gray-200">
                <h6 class="text-lg font-semibold text-gray-900">Informasi Sejarah</h6>
            </div>
            <div class="p-4 sm:p-6">
                <form method="post">
                    {% csrf_token %}
                    
                    <!-- Judul -->
                    <div class="mb-4">
                        <label for="{{ form.judul.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            {{ form.judul.label }} <span class="text-red-500">*</span>
                        </label>
                        {{ form.judul }}
                        {% if form.judul.errors %}
                        <p class="text-red-500 text-xs mt-1">{{ form.judul.errors.0 }}</p>
                        {% endif %}
                    </div>

                    <!-- Is Kategori -->
                    <div class="mb-4">
                        <div class="flex items-center mb-3">
                            {{ form.is_kategori }}
                            <label class="ml-2 text-sm font-medium text-gray-700" for="{{ form.is_kategori.id_for_label }}">
                                {{ form.is_kategori.label }}
                            </label>
                        </div>
                        <p class="text-sm text-gray-500 ml-6">Centang jika ini adalah kategori utama (seperti "Pengantar Ilmu Sejarah", "Misi Kelahiran Islam", dll)</p>
                        {% if form.is_kategori.errors %}
                        <p class="text-red-500 text-xs mt-1 ml-6">{{ form.is_kategori.errors.0 }}</p>
                        {% endif %}
                    </div>

                    <!-- Parent Field (Dropdown) -->
                    <div class="mb-4" id="parent-field">
                        <label for="{{ form.parent.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            {{ form.parent.label }}
                        </label>
                        {{ form.parent }}
                        <p class="text-sm text-gray-500 mt-1">Pilih kategori utama jika ini adalah sub-sejarah</p>
                        {% if form.parent.errors %}
                        <p class="text-red-500 text-xs mt-1">{{ form.parent.errors.0 }}</p>
                        {% endif %}
                    </div>

                    <!-- Create New Kategori Field -->
                    <div class="mb-4" id="new-kategori-field">
                        <label for="{{ form.new_kategori_judul.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            {{ form.new_kategori_judul.label }}
                        </label>
                        {{ form.new_kategori_judul }}
                        <p class="text-sm text-gray-500 mt-1">Atau buat kategori baru langsung dari sini (akan otomatis dibuat saat menyimpan)</p>
                        {% if form.new_kategori_judul.errors %}
                        <p class="text-red-500 text-xs mt-1">{{ form.new_kategori_judul.errors.0 }}</p>
                        {% endif %}
                    </div>

                    <!-- Tahun -->
                    <div class="mb-4">
                        <label for="{{ form.tahun.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            {{ form.tahun.label }}
                        </label>
                        {{ form.tahun }}
                        <p class="text-sm text-gray-500 mt-1">Tahun kejadian (opsional)</p>
                        {% if form.tahun.errors %}
                        <p class="text-red-500 text-xs mt-1">{{ form.tahun.errors.0 }}</p>
                        {% endif %}
                    </div>

                    <!-- Konten dengan Summernote -->
                    <div class="mb-4">
                        <label for="{{ form.konten.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            {{ form.konten.label }} <span class="text-red-500">*</span>
                        </label>
                        {{ form.konten }}
                        <p class="text-sm text-gray-500 mt-1">Deskripsikan peristiwa sejarah dengan detail</p>
                        {% if form.konten.errors %}
                        <p class="text-red-500 text-xs mt-1">{{ form.konten.errors.0 }}</p>
                        {% endif %}
                    </div>

                    <!-- Aktif -->
                    <div class="mb-6">
                        <div class="flex items-center">
                            {{ form.aktif }}
                            <label class="ml-2 text-sm text-gray-700" for="{{ form.aktif.id_for_label }}">
                                {{ form.aktif.label }}
                            </label>
                        </div>
                        {% if form.aktif.errors %}
                        <p class="text-red-500 text-xs mt-1">{{ form.aktif.errors.0 }}</p>
                        {% endif %}
                    </div>

                    <!-- Form Errors -->
                    {% if form.non_field_errors %}
                    <div class="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
                        {% for error in form.non_field_errors %}
                        <p class="text-red-600 text-sm">{{ error }}</p>
                        {% endfor %}
                    </div>
                    {% endif %}

                    <div class="flex flex-col sm:flex-row gap-3">
                        <button type="submit" class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                            <i class="fas fa-save mr-2"></i>
                            {% if is_edit %}Perbarui{% else %}Simpan{% endif %}
                        </button>
                        <a href="{% url 'admin_panel:tentang_hmi:sejarah_hmi' %}" class="inline-flex items-center justify-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
                            <i class="fas fa-times mr-2"></i>Batal
                        </a>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
{{ form.media.js }}
<script>
    function toggleParentField() {
        const isKategori = document.getElementById('{{ form.is_kategori.id_for_label }}');
        const parentField = document.getElementById('parent-field');
        const newKategoriField = document.getElementById('new-kategori-field');
        const parentSelect = document.getElementById('{{ form.parent.id_for_label }}');
        const newKategoriInput = document.getElementById('{{ form.new_kategori_judul.id_for_label }}');
        
        if (isKategori && isKategori.checked) {
            if (parentField) parentField.classList.add('hidden');
            if (newKategoriField) newKategoriField.classList.add('hidden');
            if (parentSelect) parentSelect.value = '';
            if (newKategoriInput) newKategoriInput.value = '';
        } else {
            if (parentField) parentField.classList.remove('hidden');
            if (newKategoriField) newKategoriField.classList.remove('hidden');
        }
    }
    
    // Initialize on page load
    document.addEventListener('DOMContentLoaded', function() {
        // Set initial state based on checkbox
        toggleParentField();
        
        // Add event listener to is_kategori checkbox
        const isKategoriCheckbox = document.getElementById('{{ form.is_kategori.id_for_label }}');
        if (isKategoriCheckbox) {
            isKategoriCheckbox.addEventListener('change', toggleParentField);
        }
        
        // Ensure Summernote is initialized properly
        if (typeof $ !== 'undefined' && $.fn.summernote) {
            // Wait a bit for summernote to be ready
            setTimeout(function() {
                const kontenField = document.getElementById('{{ form.konten.id_for_label }}');
                if (kontenField && !$(kontenField).next('.note-editor').length) {
                    // If summernote not initialized, try to initialize it
                    console.log('Summernote field found, waiting for initialization...');
                }
            }, 500);
        }
    });
</script>
{% endblock %}