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

{% block title %}{% if form.instance.pk %}Edit{% else %}Tambah{% endif %} Kondisi - Inventaris HMI{% endblock %}
{% block page_title %}{% if form.instance.pk %}Edit{% else %}Tambah{% endif %} Kondisi{% endblock %}
{% block page_subtitle %}{% if form.instance.pk %}Perbarui kondisi barang{% else %}Tambahkan kondisi 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 Kondisi
                    {% else %}
                        <i class="fas fa-check-circle text-green-600 mr-1.5 sm:mr-2 lg:mr-3"></i>Tambah Kondisi 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 kondisi "{{ form.instance.nama }}"
                    {% else %}
                        Buat kondisi baru untuk status barang inventaris
                    {% endif %}
                </p>
            </div>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-3">
                <a href="{% url 'inventaris:kondisi_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-green-50 to-green-100">
            <h3 class="text-base sm:text-lg font-semibold text-gray-900">
                <i class="fas fa-check-circle text-green-600 mr-2"></i>
                Informasi Kondisi
            </h3>
            <p class="text-xs sm:text-sm text-gray-600 mt-1">Lengkapi informasi kondisi 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 %}

            <!-- Nama Kondisi -->
            <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-green-600 mr-1"></i>
                    Nama Kondisi <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 kondisi yang jelas dan mudah dipahami (contoh: Baru, Baik, Rusak Ringan)
                </div>
            </div>

            <!-- Kondisi Type -->
            <div>
                <label for="{{ form.kondisi.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-list text-green-600 mr-1"></i>
                    Tipe Kondisi <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                    {{ form.kondisi }}
                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                        <i class="fas fa-chevron-down text-gray-400 text-sm"></i>
                    </div>
                </div>
                {% if form.kondisi.errors %}
                    <p class="mt-2 text-sm text-red-600 flex items-center">
                        <i class="fas fa-exclamation-circle mr-1"></i>
                        {{ form.kondisi.errors.0 }}
                    </p>
                {% endif %}
                <div class="mt-2 text-xs text-gray-500">
                    <i class="fas fa-info-circle mr-1"></i>
                    Pilih tipe kondisi dari daftar yang tersedia
                </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-green-600 mr-1"></i>
                    Deskripsi Kondisi
                </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 detail kondisi untuk memudahkan identifikasi
                </div>
            </div>

            <!-- Warna -->
            <div>
                <label for="{{ form.warna.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-palette text-green-600 mr-1"></i>
                    Warna Indikator
                </label>
                <div class="relative">
                    {{ form.warna }}
                </div>
                {% if form.warna.errors %}
                    <p class="mt-2 text-sm text-red-600 flex items-center">
                        <i class="fas fa-exclamation-circle mr-1"></i>
                        {{ form.warna.errors.0 }}
                    </p>
                {% endif %}
                <div class="mt-2 text-xs text-gray-500">
                    <i class="fas fa-info-circle mr-1"></i>
                    Pilih warna untuk indikator visual kondisi barang
                </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 Kondisi
                </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 rounded-lg flex items-center justify-center" id="preview-color" style="background-color: {{ form.warna.value|default:'#10b981' }};">
                            <i class="fas fa-check-circle text-white text-xl"></i>
                        </div>
                        <div>
                            <h5 class="font-semibold text-gray-900" id="preview-nama">{{ form.nama.value|default:"[Nama Kondisi]" }}</h5>
                            <p class="text-sm text-gray-500" id="preview-kondisi">{{ form.kondisi.value|default:"[Tipe Kondisi]" }}</p>
                            <p class="text-xs text-gray-400 mt-1" id="preview-deskripsi">{{ form.deskripsi.value|default:"[Deskripsi kondisi 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:kondisi_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 %} Kondisi
                </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 Kondisi:</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">Nama & Tipe Kondisi:</h5>
                        <ul class="list-disc list-inside space-y-1">
                            <li>Nama harus unik dan mudah diingat</li>
                            <li>Pilih tipe kondisi yang sesuai</li>
                            <li>Contoh: Baru, Baik, Rusak Ringan</li>
                        </ul>
                    </div>
                    <div>
                        <h5 class="font-semibold mb-2">Deskripsi & Warna:</h5>
                        <ul class="list-disc list-inside space-y-1">
                            <li>Deskripsi membantu identifikasi kondisi</li>
                            <li>Warna untuk indikator visual</li>
                            <li>Konsisten dengan standar organisasi</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Update preview
function updatePreview() {
    const nama = document.getElementById('{{ form.nama.id_for_label }}').value || '[Nama Kondisi]';
    const kondisi = document.getElementById('{{ form.kondisi.id_for_label }}');
    const kondisiText = kondisi.options[kondisi.selectedIndex] ? kondisi.options[kondisi.selectedIndex].text : '[Tipe Kondisi]';
    const deskripsi = document.getElementById('{{ form.deskripsi.id_for_label }}').value || '[Deskripsi kondisi akan muncul di sini]';
    const warna = document.getElementById('{{ form.warna.id_for_label }}').value || '#10b981';
    
    document.getElementById('preview-nama').textContent = nama;
    document.getElementById('preview-kondisi').textContent = kondisiText;
    document.getElementById('preview-deskripsi').textContent = deskripsi;
    document.getElementById('preview-color').style.backgroundColor = warna;
}

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