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

{% block title %}{% if registration %}Edit{% else %}Tambah{% endif %} Pendaftaran - {{ block.super }}{% 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 registration %}Edit{% else %}Tambah{% endif %} Pendaftaran
            </h1>
            <p class="text-sm sm:text-base text-gray-600">Kelola status dan informasi pendaftaran</p>
        </div>
        <div>
            <a href="{% url 'admin_panel:layanan:admin_registration_list' %}" class="bg-gray-600 hover:bg-gray-700 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>
        </div>
    </div>
    
    <!-- Form -->
    <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">Form Pendaftaran</h6>
        </div>
        <div class="p-4 sm:p-6">
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                
                <div class="space-y-6">
                    <!-- Informasi Dasar -->
                    <div>
                        <h3 class="text-md font-semibold text-gray-900 mb-4">Informasi Dasar</h3>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label for="{{ form.service.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                    {{ form.service.label }} <span class="text-red-500">*</span>
                                </label>
                                {{ form.service }}
                                {% if form.service.errors %}
                                    <p class="mt-1 text-sm text-red-600">{{ form.service.errors.0 }}</p>
                                {% endif %}
                            </div>
                            <div>
                                <label for="{{ form.full_name.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                    {{ form.full_name.label }} <span class="text-red-500">*</span>
                                </label>
                                {{ form.full_name }}
                                {% if form.full_name.errors %}
                                    <p class="mt-1 text-sm text-red-600">{{ form.full_name.errors.0 }}</p>
                                {% endif %}
                            </div>
                            <div>
                                <label for="{{ form.email.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                    {{ form.email.label }} <span class="text-red-500">*</span>
                                </label>
                                {{ form.email }}
                                {% if form.email.errors %}
                                    <p class="mt-1 text-sm text-red-600">{{ form.email.errors.0 }}</p>
                                {% endif %}
                            </div>
                            <div>
                                <label for="{{ form.phone.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                    {{ form.phone.label }} <span class="text-red-500">*</span>
                                </label>
                                {{ form.phone }}
                                {% if form.phone.errors %}
                                    <p class="mt-1 text-sm text-red-600">{{ form.phone.errors.0 }}</p>
                                {% endif %}
                            </div>
                            <div>
                                <label for="{{ form.nim.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                    {{ form.nim.label }}
                                </label>
                                {{ form.nim }}
                                {% if form.nim.errors %}
                                    <p class="mt-1 text-sm text-red-600">{{ form.nim.errors.0 }}</p>
                                {% endif %}
                            </div>
                            <div>
                                <label for="{{ form.status.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                    {{ form.status.label }} <span class="text-red-500">*</span>
                                </label>
                                {{ form.status }}
                                {% if form.status.errors %}
                                    <p class="mt-1 text-sm text-red-600">{{ form.status.errors.0 }}</p>
                                {% endif %}
                            </div>
                        </div>
                        <div class="mt-4">
                            <label for="{{ form.address.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                {{ form.address.label }}
                            </label>
                            {{ form.address }}
                            {% if form.address.errors %}
                                <p class="mt-1 text-sm text-red-600">{{ form.address.errors.0 }}</p>
                            {% endif %}
                        </div>
                    </div>
                    
                    <!-- Informasi Tambahan -->
                    <div>
                        <h3 class="text-md font-semibold text-gray-900 mb-4">Informasi Tambahan</h3>
                        <div class="space-y-4">
                            <div>
                                <label for="{{ form.motivation.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                    {{ form.motivation.label }}
                                </label>
                                {{ form.motivation }}
                                {% if form.motivation.errors %}
                                    <p class="mt-1 text-sm text-red-600">{{ form.motivation.errors.0 }}</p>
                                {% endif %}
                            </div>
                            <div>
                                <label for="{{ form.experience.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                    {{ form.experience.label }}
                                </label>
                                {{ form.experience }}
                                {% if form.experience.errors %}
                                    <p class="mt-1 text-sm text-red-600">{{ form.experience.errors.0 }}</p>
                                {% endif %}
                            </div>
                            <div>
                                <label for="{{ form.additional_info.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                    {{ form.additional_info.label }}
                                </label>
                                {{ form.additional_info }}
                                {% if form.additional_info.errors %}
                                    <p class="mt-1 text-sm text-red-600">{{ form.additional_info.errors.0 }}</p>
                                {% endif %}
                            </div>
                            <div>
                                <label for="{{ form.document.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                    {{ form.document.label }}
                                </label>
                                {{ form.document }}
                                {% if form.document.errors %}
                                    <p class="mt-1 text-sm text-red-600">{{ form.document.errors.0 }}</p>
                                {% endif %}
                                {% if registration and registration.document %}
                                <p class="mt-2 text-sm text-gray-600">
                                    Dokumen saat ini: <a href="{{ registration.document.url }}" target="_blank" class="text-blue-600 hover:underline">{{ registration.document.name }}</a>
                                </p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <!-- Admin Notes -->
                    <div>
                        <h3 class="text-md font-semibold text-gray-900 mb-4">Catatan Admin</h3>
                        <div class="space-y-4">
                            <div>
                                <label for="{{ form.notes.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                    {{ form.notes.label }}
                                </label>
                                {{ form.notes }}
                                {% if form.notes.errors %}
                                    <p class="mt-1 text-sm text-red-600">{{ form.notes.errors.0 }}</p>
                                {% endif %}
                            </div>
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div>
                                    <label for="{{ form.approved_by.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                        {{ form.approved_by.label }}
                                    </label>
                                    {{ form.approved_by }}
                                    {% if form.approved_by.errors %}
                                        <p class="mt-1 text-sm text-red-600">{{ form.approved_by.errors.0 }}</p>
                                    {% endif %}
                                </div>
                                <div>
                                    <label for="{{ form.approved_at.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                        {{ form.approved_at.label }}
                                    </label>
                                    {{ form.approved_at }}
                                    {% if form.approved_at.errors %}
                                        <p class="mt-1 text-sm text-red-600">{{ form.approved_at.errors.0 }}</p>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Action Buttons -->
                <div class="mt-6 flex flex-col sm:flex-row sm:justify-end gap-3">
                    <a href="{% url 'admin_panel:layanan:admin_registration_list' %}" 
                       class="w-full sm:w-auto 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>
                    <button type="submit" 
                            class="w-full sm:w-auto 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>Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}