{% extends 'inventaris/base.html' %}
{% load static %}

{% block title %}{% if form.instance.pk %}Edit{% else %}Tambah{% endif %} Kategori - Inventaris HMI{% endblock %}
{% block page_title %}{% if form.instance.pk %}Edit{% else %}Tambah{% endif %} Kategori{% endblock %}
{% block page_subtitle %}{% if form.instance.pk %}Perbarui kategori barang{% else %}Tambahkan kategori barang baru{% endif %}{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto px-2 sm:px-4 lg:px-8">
    <!-- Header -->
    <div class="mb-3 sm:mb-4 lg:mb-8">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-2 sm:gap-3 lg:gap-4">
            <div class="flex-1">
                <h1 class="text-lg sm:text-xl lg:text-2xl xl:text-3xl font-bold text-gray-900">
                    {% if form.instance.pk %}
                        <i class="fas fa-edit text-warning-600 mr-1.5 sm:mr-2 lg:mr-3"></i>Edit Kategori
                    {% else %}
                        <i class="fas fa-folder-plus text-inventory-600 mr-1.5 sm:mr-2 lg:mr-3"></i>Tambah Kategori Baru
                    {% endif %}
                </h1>
                <p class="mt-1 sm:mt-2 text-xs sm:text-sm lg:text-base text-gray-600">
                    {% if form.instance.pk %}
                        Perbarui informasi kategori "{{ form.instance.nama }}"
                    {% else %}
                        Buat kategori baru untuk mengklasifikasikan barang inventaris
                    {% endif %}
                </p>
            </div>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-3">
                <a href="{% url 'inventaris:kategori_list' %}" class="btn-secondary text-center">
                    <i class="fas fa-arrow-left mr-2"></i>Kembali
                </a>
            </div>
        </div>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="px-3 sm:px-4 lg:px-6 xl:px-8 py-3 sm:py-4 lg:py-6 border-b border-gray-200 bg-gradient-to-r from-inventory-50 to-inventory-100">
            <h3 class="text-base sm:text-lg font-semibold text-gray-900">
                <i class="fas fa-folder text-inventory-600 mr-2"></i>
                Informasi Kategori
            </h3>
            <p class="text-xs sm:text-sm text-gray-600 mt-1">Lengkapi informasi kategori dengan teliti</p>
        </div>

        <form method="post" class="px-3 sm:px-4 lg:px-6 xl:px-8 py-3 sm:py-4 lg:py-6 space-y-3 sm:space-y-4 lg:space-y-6">
            {% csrf_token %}

            <!-- Kode Kategori -->
            <div>
                <label for="{{ form.kode.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-hashtag text-inventory-600 mr-1"></i>
                    Kode Kategori <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                    {{ form.kode }}
                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                        <button type="button" onclick="generateKodeKategori()" class="text-inventory-600 hover:text-inventory-800 pointer-events-auto" title="Generate Kode Otomatis">
                            <i class="fas fa-magic"></i>
                        </button>
                    </div>
                </div>
                {% if form.kode.errors %}
                    <p class="mt-2 text-sm text-red-600 flex items-center">
                        <i class="fas fa-exclamation-circle mr-1"></i>
                        {{ form.kode.errors.0 }}
                    </p>
                {% endif %}
                <div class="mt-2 text-xs text-gray-500">
                    <i class="fas fa-lightbulb mr-1"></i>
                    Format: 3-4 huruf kapital (contoh: ELK, FRN, BKS)
                </div>
            </div>

            <!-- Nama Kategori -->
            <div>
                <label for="{{ form.nama.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-tag text-inventory-600 mr-1"></i>
                    Nama Kategori <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                    {{ form.nama }}
                </div>
                {% if form.nama.errors %}
                    <p class="mt-2 text-sm text-red-600 flex items-center">
                        <i class="fas fa-exclamation-circle mr-1"></i>
                        {{ form.nama.errors.0 }}
                    </p>
                {% endif %}
                <div class="mt-2 text-xs text-gray-500">
                    <i class="fas fa-info-circle mr-1"></i>
                    Nama kategori yang jelas dan mudah dipahami
                </div>
            </div>

            <!-- Deskripsi -->
            <div>
                <label for="{{ form.deskripsi.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-align-left text-inventory-600 mr-1"></i>
                    Deskripsi Kategori
                </label>
                <div class="relative">
                    {{ form.deskripsi }}
                </div>
                {% if form.deskripsi.errors %}
                    <p class="mt-2 text-sm text-red-600 flex items-center">
                        <i class="fas fa-exclamation-circle mr-1"></i>
                        {{ form.deskripsi.errors.0 }}
                    </p>
                {% endif %}
                <div class="mt-2 text-xs text-gray-500">
                    <i class="fas fa-info-circle mr-1"></i>
                    Jelaskan jenis barang yang termasuk dalam kategori ini
                </div>
            </div>

            <!-- Preview Section -->
            <div class="bg-gray-50 rounded-lg p-3 sm:p-4 lg:p-6 border border-gray-200">
                <h4 class="text-md font-semibold text-gray-900 mb-4">
                    <i class="fas fa-eye text-purple-600 mr-2"></i>
                    Preview Kategori
                </h4>
                <div class="bg-white rounded-lg p-4 border border-gray-200">
                    <div class="flex items-center space-x-4">
                        <div class="w-12 h-12 bg-inventory-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-folder text-inventory-600 text-xl"></i>
                        </div>
                        <div>
                            <h5 class="font-semibold text-gray-900" id="preview-nama">{{ form.nama.value|default:"[Nama Kategori]" }}</h5>
                            <p class="text-sm text-gray-500" id="preview-kode">{{ form.kode.value|default:"[KODE]" }}</p>
                            <p class="text-xs text-gray-400 mt-1" id="preview-deskripsi">{{ form.deskripsi.value|default:"[Deskripsi kategori akan muncul di sini]" }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form Errors -->
            {% if form.non_field_errors %}
                <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-circle text-red-400"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-red-800">Terjadi kesalahan:</h3>
                            <div class="mt-2 text-sm text-red-700">
                                {{ form.non_field_errors.0 }}
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

            <!-- Form Actions -->
            <div class="flex flex-col sm:flex-row items-center justify-end space-y-2 sm:space-y-0 sm:space-x-4 pt-4 sm:pt-6 border-t border-gray-200">
                <a href="{% url 'inventaris:kategori_list' %}" class="btn-secondary w-full sm:w-auto text-center">
                    <i class="fas fa-times mr-2"></i>Batal
                </a>
                <button type="submit" class="btn-primary w-full sm:w-auto text-center">
                    <i class="fas fa-save mr-2"></i>
                    {% if form.instance.pk %}Perbarui{% else %}Simpan{% endif %} Kategori
                </button>
            </div>
        </form>
    </div>

    <!-- Help Section -->
    <div class="mt-8 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-xl p-6">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-lightbulb text-blue-600 text-xl"></i>
            </div>
            <div class="ml-4">
                <h4 class="text-lg font-semibold text-blue-800 mb-3">Tips Membuat Kategori:</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-blue-700">
                    <div>
                        <h5 class="font-semibold mb-2">Kode Kategori:</h5>
                        <ul class="list-disc list-inside space-y-1">
                            <li>Gunakan 3-4 huruf kapital</li>
                            <li>Singkatan yang mudah diingat</li>
                            <li>Contoh: ELK (Elektronik), FRN (Furniture)</li>
                        </ul>
                    </div>
                    <div>
                        <h5 class="font-semibold mb-2">Nama & Deskripsi:</h5>
                        <ul class="list-disc list-inside space-y-1">
                            <li>Nama yang jelas dan deskriptif</li>
                            <li>Deskripsi membantu klasifikasi barang</li>
                            <li>Konsisten dengan standar organisasi</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Generate kode kategori otomatis
function generateKodeKategori() {
    const namaInput = document.getElementById('{{ form.nama.id_for_label }}');
    const kodeInput = document.getElementById('{{ form.kode.id_for_label }}');
    
    const nama = namaInput.value.trim();
    if (!nama) {
        showWarning('Nama Kategori Kosong', 'Isi nama kategori terlebih dahulu');
        namaInput.focus();
        return;
    }

    // Generate kode dari nama
    const words = nama.split(' ');
    let kode = '';
    
    if (words.length === 1) {
        kode = words[0].substring(0, 3).toUpperCase();
    } else {
        kode = words.map(word => word.charAt(0)).join('').toUpperCase().substring(0, 4);
    }
    
    kodeInput.value = kode;
    updatePreview();
    
    // Visual feedback
    kodeInput.classList.add('border-green-300', 'bg-green-50');
    setTimeout(() => {
        kodeInput.classList.remove('border-green-300', 'bg-green-50');
    }, 2000);
}

// Update preview
function updatePreview() {
    const kode = document.getElementById('{{ form.kode.id_for_label }}').value || '[KODE]';
    const nama = document.getElementById('{{ form.nama.id_for_label }}').value || '[Nama Kategori]';
    const deskripsi = document.getElementById('{{ form.deskripsi.id_for_label }}').value || '[Deskripsi kategori akan muncul di sini]';
    
    document.getElementById('preview-kode').textContent = kode;
    document.getElementById('preview-nama').textContent = nama;
    document.getElementById('preview-deskripsi').textContent = deskripsi;
}

// Real-time preview updates
document.addEventListener('DOMContentLoaded', function() {
    const inputs = ['{{ form.kode.id_for_label }}', '{{ form.nama.id_for_label }}', '{{ form.deskripsi.id_for_label }}'];
    
    inputs.forEach(inputId => {
        const input = document.getElementById(inputId);
        if (input) {
            input.addEventListener('input', updatePreview);
        }
    });
    
    // Initial preview
    updatePreview();
});
</script>
{% endblock %}