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

{% block title %}
    {% if object %}Edit Kategori Layanan{% else %}Tambah Kategori Layanan{% endif %} - {{ block.super }}
{% endblock %}

{% block extra_css %}
<style>
    .form-input {
        @apply w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent;
    }
    
    .form-textarea {
        @apply form-input resize-y min-h-[100px];
    }
    
    .form-checkbox input {
        @apply w-4 h-4 text-green-600 focus:ring-green-500 border-gray-300 rounded;
    }
    
    .icon-preview {
        @apply flex items-center gap-2 mt-2 p-3 bg-gray-50 rounded-lg border border-gray-200;
    }
    
    .icon-preview i {
        @apply text-xl text-green-600;
    }
    
    .help-text {
        @apply text-xs text-gray-500 mt-1;
    }
    
    .error-message {
        @apply text-xs text-red-600 mt-1;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid px-4 py-6">
    <!-- Header -->
    <div class="mb-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-gray-800">
                    {% if object %}
                        <i class="fas fa-edit text-blue-600 mr-2"></i>Edit Kategori Layanan
                    {% else %}
                        <i class="fas fa-plus text-green-600 mr-2"></i>Tambah Kategori Layanan
                    {% endif %}
                </h1>
                <p class="text-gray-600 mt-1">
                    {% if object %}
                        Perbarui informasi kategori layanan
                    {% else %}
                        Buat kategori layanan baru untuk mengorganisir layanan
                    {% endif %}
                </p>
            </div>
            <a href="{% url 'admin_panel:layanan:admin_service_category_list' %}" 
               class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i>Kembali
            </a>
        </div>
    </div>

    <!-- Form -->
    <div class="max-w-2xl mx-auto">
        <form method="post" class="bg-white rounded-xl shadow-sm overflow-hidden">
            {% csrf_token %}
            
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-800">
                    <i class="fas fa-info-circle text-blue-600 mr-2"></i>Informasi Kategori
                </h2>
                <p class="text-sm text-gray-600 mt-1">Isi informasi dasar kategori layanan</p>
            </div>
            
            <div class="px-6 py-6 space-y-6">
                <!-- Nama Kategori -->
                <div>
                    <label for="{{ form.name.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        Nama Kategori <span class="text-red-500">*</span>
                    </label>
                    {{ form.name }}
                    {% if form.name.errors %}
                        <div class="error-message">{{ form.name.errors.0 }}</div>
                    {% endif %}
                    <div class="help-text">Masukkan nama kategori yang jelas dan mudah dipahami</div>
                </div>

                <!-- Deskripsi -->
                <div>
                    <label for="{{ form.description.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        Deskripsi
                    </label>
                    {{ form.description }}
                    {% if form.description.errors %}
                        <div class="error-message">{{ form.description.errors.0 }}</div>
                    {% endif %}
                    <div class="help-text">Jelaskan fungsi dan tujuan kategori ini (opsional)</div>
                </div>

                <!-- Icon dan Urutan -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="{{ form.icon.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            Icon FontAwesome
                        </label>
                        {{ form.icon }}
                        {% if form.icon.errors %}
                            <div class="error-message">{{ form.icon.errors.0 }}</div>
                        {% endif %}
                        <div class="help-text">Contoh: fas fa-graduation-cap</div>
                        
                        <!-- Icon Preview -->
                        <div id="iconPreview" class="icon-preview" style="display: none;">
                            <i id="previewIcon"></i>
                            <span id="previewText">Preview Icon</span>
                        </div>
                    </div>

                    <div>
                        <label for="{{ form.order.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            Urutan Tampil
                        </label>
                        {{ form.order }}
                        {% if form.order.errors %}
                            <div class="error-message">{{ form.order.errors.0 }}</div>
                        {% endif %}
                        <div class="help-text">Angka kecil akan ditampilkan lebih dulu</div>
                    </div>
                </div>

                <!-- Warna -->
                <div>
                    <label for="{{ form.color.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        Warna Kategori
                    </label>
                    <div class="flex items-center gap-3">
                        {{ form.color }}
                        <div id="colorPreview" class="w-8 h-8 rounded border" style="background-color: {{ form.color.value|default:'#3b82f6' }};"></div>
                    </div>
                    {% if form.color.errors %}
                        <div class="error-message">{{ form.color.errors.0 }}</div>
                    {% endif %}
                    <div class="help-text">Pilih warna untuk kategori (format hex: #3b82f6)</div>
                </div>

                <!-- Status Aktif -->
                <div>
                    <div class="flex items-center gap-2">
                        {{ form.is_active }}
                        <label for="{{ form.is_active.id_for_label }}" class="text-sm font-medium text-gray-700">
                            Kategori Aktif
                        </label>
                    </div>
                    {% if form.is_active.errors %}
                        <div class="error-message">{{ form.is_active.errors.0 }}</div>
                    {% endif %}
                    <div class="help-text">Kategori yang tidak aktif tidak akan ditampilkan di halaman publik</div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex flex-col sm:flex-row gap-3 justify-end">
                <a href="{% url 'admin_panel:layanan:admin_service_category_list' %}" 
                   class="inline-flex items-center justify-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg text-sm font-medium transition-colors">
                    <i class="fas fa-times mr-2"></i>Batal
                </a>
                <button type="submit" class="inline-flex items-center justify-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg text-sm font-medium transition-colors">
                    <i class="fas fa-save mr-2"></i>
                    {% if object %}Update Kategori{% else %}Simpan Kategori{% endif %}
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Icon preview functionality
    const iconInput = document.getElementById('{{ form.icon.id_for_label }}');
    const iconPreview = document.getElementById('iconPreview');
    const previewIcon = document.getElementById('previewIcon');
    const previewText = document.getElementById('previewText');
    
    function updateIconPreview() {
        const iconClass = iconInput.value.trim();
        if (iconClass) {
            previewIcon.className = iconClass;
            previewText.textContent = iconClass;
            iconPreview.style.display = 'flex';
        } else {
            iconPreview.style.display = 'none';
        }
    }
    
    iconInput.addEventListener('input', updateIconPreview);
    
    // Initialize preview if there's already a value
    if (iconInput.value) {
        updateIconPreview();
    }
    
    // Color preview functionality
    const colorInput = document.getElementById('{{ form.color.id_for_label }}');
    const colorPreview = document.getElementById('colorPreview');
    
    function updateColorPreview() {
        const color = colorInput.value || '#3b82f6';
        colorPreview.style.backgroundColor = color;
    }
    
    colorInput.addEventListener('input', updateColorPreview);
    
    // Initialize color preview
    updateColorPreview();
    
    // Form validation
    const form = document.querySelector('form');
    form.addEventListener('submit', function(e) {
        const nameInput = document.getElementById('{{ form.name.id_for_label }}');
        if (!nameInput.value.trim()) {
            e.preventDefault();
            alert('Nama kategori harus diisi!');
            nameInput.focus();
            return false;
        }
    });
    
    // Auto-focus on name field
    document.getElementById('{{ form.name.id_for_label }}').focus();
});
</script>
{% endblock %}