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

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

{% block extra_css %}
<style>
    .image-preview {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 8px;
        border: 2px solid #e5e7eb;
    }
    
    @media (min-width: 640px) {
        .image-preview {
            width: 80px;
            height: 80px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid px-2 sm:px-4 lg:px-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 sm:mb-6 gap-4">
        <div>
            <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-800 mb-1">
                {% if service %}
                    Edit Layanan: {{ service.title }}
                {% else %}
                    Tambah Layanan Baru
                {% endif %}
            </h1>
            <p class="text-sm sm:text-base text-gray-600">
                {% if service %}
                    Edit informasi layanan
                {% else %}
                    Buat layanan baru untuk HMI
                {% endif %}
            </p>
        </div>
        <div class="flex flex-col sm:flex-row gap-2">
            <a href="{% url 'admin_panel:layanan:admin_service_list' %}" class="bg-gray-500 hover:bg-gray-600 text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors">
                <i class="fas fa-arrow-left mr-1"></i>Kembali
            </a>
            {% if service %}
            <a href="{% url 'layanan_public:service_detail' service.slug %}" target="_blank" class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors">
                <i class="fas fa-eye mr-1"></i>Lihat
            </a>
            {% endif %}
        </div>
    </div>
    
    <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        
        <!-- Mobile Layout: 2 Rows, 2 Columns -->
        <div class="grid grid-cols-2 gap-3 sm:gap-4 lg:hidden">
            <!-- Row 1 -->
            <div class="col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">Judul Layanan *</label>
                <input type="text" name="title" value="{{ form.title.value|default:'' }}" class="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" required>
                {% if form.title.errors %}
                <div class="text-red-600 text-xs mt-1">{{ form.title.errors.0 }}</div>
                {% endif %}
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Kategori *</label>
                <select name="category" class="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" required>
                    <option value="">Pilih Kategori</option>
                    {% for category in form.category.field.queryset %}
                    <option value="{{ category.id }}" {% if form.category.value == category.id %}selected{% endif %}>{{ category.name }}</option>
                    {% endfor %}
                </select>
                {% if form.category.errors %}
                <div class="text-red-600 text-xs mt-1">{{ form.category.errors.0 }}</div>
                {% endif %}
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                <select name="status" class="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">
                    <option value="active" {% if form.status.value == 'active' %}selected{% endif %}>Aktif</option>
                    <option value="inactive" {% if form.status.value == 'inactive' %}selected{% endif %}>Tidak Aktif</option>
                    <option value="coming_soon" {% if form.status.value == 'coming_soon' %}selected{% endif %}>Segera Hadir</option>
                    <option value="maintenance" {% if form.status.value == 'maintenance' %}selected{% endif %}>Maintenance</option>
                </select>
                {% if form.status.errors %}
                <div class="text-red-600 text-xs mt-1">{{ form.status.errors.0 }}</div>
                {% endif %}
            </div>
            
            <!-- Row 2 -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Harga</label>
                <input type="number" name="price" value="{{ form.price.value|default:'' }}" class="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" step="0.01">
                {% if form.price.errors %}
                <div class="text-red-600 text-xs mt-1">{{ form.price.errors.0 }}</div>
                {% endif %}
            </div>
            
            <div class="flex items-center">
                <div class="flex items-center">
                    <input type="checkbox" name="is_free" {% if form.is_free.value %}checked{% endif %} class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
                    <span class="ml-2 text-sm text-gray-700">Gratis</span>
                </div>
                {% if form.is_free.errors %}
                <div class="text-red-600 text-xs mt-1">{{ form.is_free.errors.0 }}</div>
                {% endif %}
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Prioritas</label>
                <select name="priority" class="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">
                    <option value="low" {% if form.priority.value == 'low' %}selected{% endif %}>Low</option>
                    <option value="medium" {% if form.priority.value == 'medium' %}selected{% endif %}>Medium</option>
                    <option value="high" {% if form.priority.value == 'high' %}selected{% endif %}>High</option>
                    <option value="urgent" {% if form.priority.value == 'urgent' %}selected{% endif %}>Urgent</option>
                </select>
                {% if form.priority.errors %}
                <div class="text-red-600 text-xs mt-1">{{ form.priority.errors.0 }}</div>
                {% endif %}
            </div>
            
            <div class="flex items-center">
                <div class="flex items-center">
                    <input type="checkbox" name="is_active" {% if form.is_active.value %}checked{% endif %} class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
                    <span class="ml-2 text-sm text-gray-700">Aktif</span>
                </div>
                {% if form.is_active.errors %}
                <div class="text-red-600 text-xs mt-1">{{ form.is_active.errors.0 }}</div>
                {% endif %}
            </div>
        </div>
        
        <!-- Desktop Layout: 3 Columns -->
        <div class="hidden lg:grid lg:grid-cols-3 gap-6">
            <!-- Main Form -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Informasi Dasar -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
                        <i class="fas fa-info-circle mr-2 text-green-600"></i>Informasi Dasar
                    </h3>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Judul Layanan *</label>
                            <input type="text" name="title" value="{{ form.title.value|default:'' }}" class="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" required>
                        {% if form.title.errors %}
                            <div class="text-red-600 text-xs mt-1">{{ form.title.errors.0 }}</div>
                        {% endif %}
                    </div>
                    
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Deskripsi Singkat *</label>
                        {{ form.description }}
                        {% if form.description.errors %}
                            <div class="text-red-600 text-xs mt-1">{{ form.description.errors.0 }}</div>
                        {% endif %}
                    </div>
                    
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Konten Lengkap</label>
                        {{ form.content }}
                        {% if form.content.errors %}
                            <div class="text-red-600 text-xs mt-1">{{ form.content.errors.0 }}</div>
                        {% endif %}
                    </div>
                    
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Kategori *</label>
                                <select name="category" class="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" required>
                                    <option value="">Pilih Kategori</option>
                                    {% for category in form.category.field.queryset %}
                                    <option value="{{ category.id }}" {% if form.category.value == category.id %}selected{% endif %}>{{ category.name }}</option>
                                    {% endfor %}
                                </select>
                                {% if form.category.errors %}
                                <div class="text-red-600 text-xs mt-1">{{ form.category.errors.0 }}</div>
                                {% endif %}
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                                <select name="status" class="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">
                                    <option value="active" {% if form.status.value == 'active' %}selected{% endif %}>Aktif</option>
                                    <option value="inactive" {% if form.status.value == 'inactive' %}selected{% endif %}>Tidak Aktif</option>
                                    <option value="coming_soon" {% if form.status.value == 'coming_soon' %}selected{% endif %}>Segera Hadir</option>
                                    <option value="maintenance" {% if form.status.value == 'maintenance' %}selected{% endif %}>Maintenance</option>
                                </select>
                                {% if form.status.errors %}
                                <div class="text-red-600 text-xs mt-1">{{ form.status.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Visual & Media -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
                        <i class="fas fa-image mr-2 text-green-600"></i>Visual & Media
                    </h3>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Gambar Utama</label>
                            <input type="file" name="image" class="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" accept="image/*">
                        {% if form.image.errors %}
                            <div class="text-red-600 text-xs mt-1">{{ form.image.errors.0 }}</div>
                        {% endif %}
                        {% if service and service.image %}
                        <div class="mt-2">
                            <img src="{{ service.image.url }}" alt="Current image" class="image-preview">
                        </div>
                        {% endif %}
                    </div>
                    
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Icon FontAwesome</label>
                                <input type="text" name="icon" value="{{ form.icon.value|default:'' }}" class="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" placeholder="fas fa-graduation-cap">
                                {% if form.icon.errors %}
                                <div class="text-red-600 text-xs mt-1">{{ form.icon.errors.0 }}</div>
                                {% endif %}
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Icon Custom</label>
                                <input type="file" name="icon_image" class="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" accept="image/*">
                                {% if form.icon_image.errors %}
                                <div class="text-red-600 text-xs mt-1">{{ form.icon_image.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Kontak & Link -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
                        <i class="fas fa-phone mr-2 text-green-600"></i>Kontak & Link
                    </h3>
                    
                    <div class="space-y-4">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Penanggung Jawab</label>
                                <input type="text" name="contact_person" value="{{ form.contact_person.value|default:'' }}" class="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">
                                {% if form.contact_person.errors %}
                                <div class="text-red-600 text-xs mt-1">{{ form.contact_person.errors.0 }}</div>
                                {% endif %}
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Email Kontak</label>
                                <input type="email" name="contact_email" value="{{ form.contact_email.value|default:'' }}" class="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">
                                {% if form.contact_email.errors %}
                                <div class="text-red-600 text-xs mt-1">{{ form.contact_email.errors.0 }}</div>
                                {% endif %}
                        </div>
                    </div>
                    
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Nomor Telepon</label>
                                <input type="tel" name="contact_phone" value="{{ form.contact_phone.value|default:'' }}" class="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">
                                {% if form.contact_phone.errors %}
                                <div class="text-red-600 text-xs mt-1">{{ form.contact_phone.errors.0 }}</div>
                                {% endif %}
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">URL Pendaftaran</label>
                                <input type="url" name="registration_url" value="{{ form.registration_url.value|default:'' }}" class="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">
                                {% if form.registration_url.errors %}
                                <div class="text-red-600 text-xs mt-1">{{ form.registration_url.errors.0 }}</div>
                                {% endif %}
                        </div>
                    </div>
                    
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">URL Dokumentasi</label>
                            <input type="url" name="documentation_url" value="{{ form.documentation_url.value|default:'' }}" class="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">
                        {% if form.documentation_url.errors %}
                            <div class="text-red-600 text-xs mt-1">{{ form.documentation_url.errors.0 }}</div>
                        {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Sidebar -->
            <div class="lg:col-span-1 space-y-6">
                <!-- Status & Prioritas -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
                        <i class="fas fa-cog mr-2 text-green-600"></i>Status & Prioritas
                    </h3>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Prioritas</label>
                            <select name="priority" class="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">
                                <option value="low" {% if form.priority.value == 'low' %}selected{% endif %}>Low</option>
                                <option value="medium" {% if form.priority.value == 'medium' %}selected{% endif %}>Medium</option>
                                <option value="high" {% if form.priority.value == 'high' %}selected{% endif %}>High</option>
                                <option value="urgent" {% if form.priority.value == 'urgent' %}selected{% endif %}>Urgent</option>
                            </select>
                        {% if form.priority.errors %}
                            <div class="text-red-600 text-xs mt-1">{{ form.priority.errors.0 }}</div>
                        {% endif %}
                    </div>
                    
                        <div class="flex items-center">
                            <div class="flex items-center">
                                <input type="checkbox" name="is_active" {% if form.is_active.value %}checked{% endif %} class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
                                <span class="ml-2 text-sm text-gray-700">Ya, layanan ini aktif</span>
                        </div>
                        {% if form.is_active.errors %}
                            <div class="text-red-600 text-xs mt-1">{{ form.is_active.errors.0 }}</div>
                        {% endif %}
                        </div>
                    </div>
                </div>
                
                <!-- Pengaturan -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
                        <i class="fas fa-star mr-2 text-green-600"></i>Pengaturan
                    </h3>
                    
                    <div class="space-y-4">
                        <div class="flex items-center">
                            <div class="flex items-center">
                                <input type="checkbox" name="is_featured" {% if form.is_featured.value %}checked{% endif %} class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
                                <span class="ml-2 text-sm text-gray-700">Tampilkan di halaman utama</span>
                        </div>
                        {% if form.is_featured.errors %}
                            <div class="text-red-600 text-xs mt-1">{{ form.is_featured.errors.0 }}</div>
                        {% endif %}
                    </div>
                    
                        <div class="flex items-center">
                            <div class="flex items-center">
                                <input type="checkbox" name="is_popular" {% if form.is_popular.value %}checked{% endif %} class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
                                <span class="ml-2 text-sm text-gray-700">Tandai sebagai populer</span>
                        </div>
                        {% if form.is_popular.errors %}
                            <div class="text-red-600 text-xs mt-1">{{ form.is_popular.errors.0 }}</div>
                        {% endif %}
                    </div>
                    
                        <div class="flex items-center">
                            <div class="flex items-center">
                                <input type="checkbox" name="is_new" {% if form.is_new.value %}checked{% endif %} class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
                                <span class="ml-2 text-sm text-gray-700">Tandai sebagai baru</span>
                        </div>
                        {% if form.is_new.errors %}
                            <div class="text-red-600 text-xs mt-1">{{ form.is_new.errors.0 }}</div>
                        {% endif %}
                    </div>
                    
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Urutan Tampil</label>
                            <input type="number" name="order" value="{{ form.order.value|default:'0' }}" class="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">
                        {% if form.order.errors %}
                            <div class="text-red-600 text-xs mt-1">{{ form.order.errors.0 }}</div>
                        {% endif %}
                        </div>
                    </div>
                </div>
                
                <!-- Harga -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
                        <i class="fas fa-dollar-sign mr-2 text-green-600"></i>Harga
                    </h3>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Harga</label>
                            <input type="number" name="price" value="{{ form.price.value|default:'' }}" class="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" step="0.01">
                            {% if form.price.errors %}
                            <div class="text-red-600 text-xs mt-1">{{ form.price.errors.0 }}</div>
                        {% endif %}
                    </div>
                    
                        <div class="flex items-center">
                            <div class="flex items-center">
                                <input type="checkbox" name="is_free" {% if form.is_free.value %}checked{% endif %} class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
                                <span class="ml-2 text-sm text-gray-700">Ya, layanan ini gratis</span>
                    </div>
                            {% if form.is_free.errors %}
                            <div class="text-red-600 text-xs mt-1">{{ form.is_free.errors.0 }}</div>
                        {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Action Buttons -->
        <div class="flex flex-col sm:flex-row gap-3 justify-end mt-6 sm:mt-8">
            <a href="{% url 'admin_panel:layanan:admin_service_list' %}" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors text-center">
                <i class="fas fa-times mr-1"></i>Batal
            </a>
            <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                <i class="fas fa-save mr-1"></i>
                {% if service %}Update Layanan{% else %}Buat Layanan{% endif %}
            </button>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Auto-generate slug from title
    document.addEventListener('DOMContentLoaded', function() {
        const titleInput = document.querySelector('input[name="title"]');
        if (titleInput) {
            titleInput.addEventListener('input', function() {
                const slug = this.value
                    .toLowerCase()
                    .replace(/[^a-z0-9\s-]/g, '')
                    .replace(/\s+/g, '-')
                    .replace(/-+/g, '-')
                    .trim('-');
                // You can add slug field if needed
            });
        }
    });
    
    // Form validation
    document.querySelector('form').addEventListener('submit', function(e) {
        const requiredFields = document.querySelectorAll('input[required], select[required], textarea[required]');
        let isValid = true;
        
        requiredFields.forEach(field => {
            if (!field.value.trim()) {
                field.classList.add('border-red-500');
                field.classList.add('ring-2');
                field.classList.add('ring-red-200');
                isValid = false;
            } else {
                field.classList.remove('border-red-500');
                field.classList.remove('ring-2');
                field.classList.remove('ring-red-200');
            }
        });
        
        if (!isValid) {
            e.preventDefault();
            alert('Mohon lengkapi semua field yang wajib diisi!');
        }
    });
</script>
{% endblock %}