{% extends "base.html" %}
{% load static i18n %}

{% block title %}{% trans "Create Application" %} - {{ block.super }}{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto py-6 px-4">
    
    <!-- Breadcrumb -->
    <nav class="mb-6" aria-label="breadcrumb">
        <ol class="flex items-center gap-2 text-sm flex-wrap">
            <li><a href="{% url 'application_list' %}" class="text-gray-500 hover:underline transition flex items-center gap-1">
                <i data-lucide="file-text" class="w-4 h-4"></i> {% trans "Applications" %}
            </a></li>
            <li class="text-gray-400">/</li>
            <li class="font-semibold" style="color: #9d2235;">{% trans "Create Application" %}</li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
        <h1 class="text-2xl sm:text-3xl font-bold flex items-center gap-3">
            <div class="w-12 h-12 rounded-xl flex items-center justify-center" style="background-color: rgba(157, 34, 53, 0.1);">
                <i data-lucide="file-plus" class="w-6 h-6" style="color: #9d2235;"></i>
            </div>
            {% trans "Create New Application" %}
        </h1>
        <div class="flex gap-2">
            <button type="button" id="openPersonModal"
                    class="inline-flex items-center gap-2 px-4 py-3 rounded-lg font-medium border-2 text-white transition-all duration-200"
                    style="background-color: #9d2235;"
                    onmouseover="this.style.backgroundColor='#7a1a29'"
                    onmouseout="this.style.backgroundColor='#9d2235'">
                <i data-lucide="user-plus" class="w-4 h-4"></i>
                <span class="hidden sm:inline">{% trans "Create New Applicant" %}</span>
            </button>
            <a href="{% url 'application_list' %}" 
               class="inline-flex items-center gap-2 px-6 py-3 rounded-lg font-medium border-2 border-gray-200 text-gray-700 hover:bg-gray-50 transition-all duration-200">
                <i data-lucide="arrow-left" class="w-4 h-4"></i>
                <span class="hidden sm:inline">{% trans "Back to List" %}</span>
            </a>
        </div>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-100" style="background-color: #f8f9fa;">
            <h2 class="text-lg font-bold flex items-center gap-2">
                <i data-lucide="file-text" class="w-5 h-5" style="color: #9d2235;"></i>
                {% trans "Application Information" %}
            </h2>
        </div>
        
        <div class="p-6">
            {% if form.non_field_errors %}
                <div class="mb-6 p-4 rounded-lg bg-red-50 border border-red-200" role="alert">
                    <div class="flex items-start gap-3">
                        <i data-lucide="alert-triangle" class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"></i>
                        <div>
                            <h5 class="font-semibold text-red-800 mb-1">{% trans "Error" %}</h5>
                            {% for error in form.non_field_errors %}
                                <p class="text-red-700 mb-0">{{ error }}</p>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endif %}

            <form method="post" enctype="multipart/form-data" id="application-form" class="space-y-6">
                {% csrf_token %}

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {% for field in form %}
                        {% if field.name != 'person' %}
                            <div>
                                <label for="{{ field.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                    {{ field.label }}
                                    {% if field.field.required %}<span class="text-red-500">*</span>{% endif %}
                                </label>
                                {{ field }}
                                {% if field.help_text %}
                                    <p class="text-xs text-gray-500 mt-1">{{ field.help_text }}</p>
                                {% endif %}
                                {% for error in field.errors %}
                                    <div class="text-red-600 text-sm mt-1">{{ error }}</div>
                                {% endfor %}
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>

                <!-- Person Selection -->
                <div>
                    <label for="{{ form.person.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                        {{ form.person.label }} <span class="text-red-500">*</span>
                    </label>
                    <div class="flex gap-2">
                        <select name="person" id="{{ form.person.id_for_label }}"
                                class="flex-1 px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition bg-white">
                            <option value="">{% trans "Select Applicant" %}</option>
                            {% for choice in form.person.field.queryset %}
                                <option value="{{ choice.pk }}">{{ choice.get_full_name|default:choice.email }}</option>
                            {% endfor %}
                        </select>
                        <button type="button" id="openPersonModal"
                                class="inline-flex items-center justify-center px-4 py-3 rounded-xl border-2 text-white transition-all duration-200 whitespace-nowrap"
                                style="background-color: #9d2235;"
                                onmouseover="this.style.backgroundColor='#7a1a29'"
                                onmouseout="this.style.backgroundColor='#9d2235'">
                            <i data-lucide="user-plus" class="w-4 h-4 mr-2"></i>
                            {% trans "New" %}
                        </button>
                    </div>
                    {% for error in form.person.errors %}
                        <div class="text-red-600 text-sm mt-1">{{ error }}</div>
                    {% endfor %}
                </div>

                <!-- Form Actions -->
                <div class="flex flex-col sm:flex-row justify-between items-center gap-4 pt-4 border-t border-gray-200">
                    <a href="{% url 'application_list' %}" 
                       class="inline-flex items-center gap-2 px-6 py-3 rounded-lg font-medium border-2 border-gray-200 text-gray-700 hover:bg-gray-50 transition-all duration-200">
                        <i data-lucide="x" class="w-4 h-4"></i>
                        {% trans "Cancel" %}
                    </a>
                    <button type="submit"
                            class="inline-flex items-center gap-2 px-8 py-3 rounded-lg font-medium text-white transition-all duration-200"
                            style="background-color: #9d2235;"
                            onmouseover="this.style.backgroundColor='#7a1a29'"
                            onmouseout="this.style.backgroundColor='#9d2235'">
                        <i data-lucide="save" class="w-4 h-4"></i>
                        {% trans "Create Application" %}
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>

<!-- Person Modal -->
<div class="hidden fixed inset-0 z-50 overflow-y-auto" id="personModal" role="dialog" aria-labelledby="personModalLabel">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-black/50 transition-opacity" aria-hidden="true"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen sm:align-middle" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full">
            <div class="px-6 py-4 border-b border-gray-100" style="background-color: #f8f9fa;">
                <h3 class="text-lg font-bold flex items-center gap-2" id="personModalLabel">
                    <i data-lucide="user-plus" class="w-5 h-5" style="color: #9d2235;"></i>
                    {% trans "Create New Applicant" %}
                </h3>
            </div>
            <div class="p-6">
                <form id="person_form" hx-post="{% url 'person_create' %}" hx-vals='{"view":"job"}' hx-target="#div_id_person" hx-select="#div_id_person" hx-swap="outerHTML">
                    {% csrf_token %}
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label for="{{ person_form.first_name.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ person_form.first_name.label }}
                            </label>
                            {{ person_form.first_name }}
                            {% for error in person_form.first_name.errors %}
                                <div class="text-red-600 text-sm mt-1">{{ error }}</div>
                            {% endfor %}
                        </div>
                        <div>
                            <label for="{{ person_form.middle_name.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ person_form.middle_name.label }}
                            </label>
                            {{ person_form.middle_name }}
                            {% for error in person_form.middle_name.errors %}
                                <div class="text-red-600 text-sm mt-1">{{ error }}</div>
                            {% endfor %}
                        </div>
                        <div>
                            <label for="{{ person_form.last_name.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ person_form.last_name.label }}
                            </label>
                            {{ person_form.last_name }}
                            {% for error in person_form.last_name.errors %}
                                <div class="text-red-600 text-sm mt-1">{{ error }}</div>
                            {% endfor %}
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                        <div>
                            <label for="{{ person_form.email.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ person_form.email.label }}
                            </label>
                            {{ person_form.email }}
                            {% for error in person_form.email.errors %}
                                <div class="text-red-600 text-sm mt-1">{{ error }}</div>
                            {% endfor %}
                        </div>
                        <div>
                            <label for="{{ person_form.phone.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ person_form.phone.label }}
                            </label>
                            {{ person_form.phone }}
                            {% for error in person_form.phone.errors %}
                                <div class="text-red-600 text-sm mt-1">{{ error }}</div>
                            {% endfor %}
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                        <div>
                            <label for="{{ person_form.gpa.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ person_form.gpa.label }}
                            </label>
                            {{ person_form.gpa }}
                            {% for error in person_form.gpa.errors %}
                                <div class="text-red-600 text-sm mt-1">{{ error }}</div>
                            {% endfor %}
                        </div>
                        <div>
                            <label for="{{ person_form.national_id.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ person_form.national_id.label }}
                            </label>
                            {{ person_form.national_id }}
                            {% for error in person_form.national_id.errors %}
                                <div class="text-red-600 text-sm mt-1">{{ error }}</div>
                            {% endfor %}
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                        <div>
                            <label for="{{ person_form.date_of_birth.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ person_form.date_of_birth.label }}
                            </label>
                            {{ person_form.date_of_birth }}
                            {% for error in person_form.date_of_birth.errors %}
                                <div class="text-red-600 text-sm mt-1">{{ error }}</div>
                            {% endfor %}
                        </div>
                        <div>
                            <label for="{{ person_form.nationality.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ person_form.nationality.label }}
                            </label>
                            {{ person_form.nationality }}
                            {% for error in person_form.nationality.errors %}
                                <div class="text-red-600 text-sm mt-1">{{ error }}</div>
                            {% endfor %}
                        </div>
                    </div>

                    <div class="mt-4">
                        <label for="{{ person_form.address.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {{ person_form.address.label }}
                        </label>
                        {{ person_form.address }}
                        {% for error in person_form.address.errors %}
                            <div class="text-red-600 text-sm mt-1">{{ error }}</div>
                        {% endfor %}
                    </div>
                </form>
            </div>
            <div class="px-6 py-4 border-t border-gray-100" style="background-color: #f8f9fa;">
                <div class="flex flex-col sm:flex-row justify-end gap-3">
                    <button type="button" id="closePersonModal"
                            class="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-medium border-2 border-gray-200 text-gray-700 hover:bg-gray-50 transition-all duration-200">
                        <i data-lucide="x" class="w-4 h-4"></i>
                        {% trans "Cancel" %}
                    </button>
                    <button type="submit" form="person_form"
                            class="inline-flex items-center justify-center gap-2 px-8 py-3 rounded-lg font-medium text-white transition-all duration-200"
                            style="background-color: #9d2235;"
                            onmouseover="this.style.backgroundColor='#7a1a29'"
                            onmouseout="this.style.backgroundColor='#9d2235'">
                        <i data-lucide="save" class="w-4 h-4"></i>
                        {% trans "Create Applicant" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Lucide icons
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }

    // Apply consistent form styling
    const formInputs = document.querySelectorAll('#application-form input, #application-form select, #application-form textarea, #person_form input, #person_form select, #person_form textarea');
    formInputs.forEach(input => {
        if (!input.classList.contains('hidden')) {
            input.classList.add('w-full', 'px-4', 'py-3', 'border', 'border-gray-200', 'rounded-xl', 'text-sm', 'focus:ring-2', 'focus:ring-temple-red/20', 'focus:border-temple-red', 'outline-none', 'transition', 'bg-white');
        }
    });

    // Modal functionality
    const modal = document.getElementById('personModal');
    const openBtns = document.querySelectorAll('#openPersonModal');
    const closeBtns = document.querySelectorAll('#closePersonModal');
    let isModalOpen = false;

    // Open modal
    openBtns.forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            if (modal) {
                modal.classList.remove('hidden');
                document.body.style.overflow = 'hidden';
                isModalOpen = true;
            }
        });
    });

    // Close modal
    closeBtns.forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            if (modal && isModalOpen) {
                modal.classList.add('hidden');
                document.body.style.overflow = '';
                isModalOpen = false;
            }
        });
    });

    // Close modal when clicking outside
    if (modal) {
        modal.addEventListener('click', function(e) {
            if (e.target === modal && isModalOpen) {
                modal.classList.add('hidden');
                document.body.style.overflow = '';
                isModalOpen = false;
            }
        });
    }

    // Close modal on escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && modal && isModalOpen) {
            modal.classList.add('hidden');
            document.body.style.overflow = '';
            isModalOpen = false;
        }
    });

    // Form validation
    const form = document.getElementById('application-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            const personSelect = document.getElementById('id_person');
            if (!personSelect.value) {
                e.preventDefault();
                alert("{% trans 'Please select an applicant.' %}");
                personSelect.focus();
                return false;
            }
        });
    }

    // Reinitialize Lucide icons after HTMX updates
    document.body.addEventListener('htmx:afterSwap', function(evt) {
        lucide.createIcons();
        
        // Re-apply form styling to new elements
        const newFormInputs = document.querySelectorAll('#person_form input, #person_form select, #person_form textarea');
        newFormInputs.forEach(input => {
            if (!input.classList.contains('hidden')) {
                input.classList.add('w-full', 'px-4', 'py-3', 'border', 'border-gray-200', 'rounded-xl', 'text-sm', 'focus:ring-2', 'focus:ring-temple-red/20', 'focus:border-temple-red', 'outline-none', 'transition', 'bg-white');
            }
        });
    });
});
</script>
{% endblock %}