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

{% block title %}{% trans "Create Applicant" %} - {{ 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 'person_list' %}" class="text-gray-500 hover:underline transition flex items-center gap-1">
                <i data-lucide="users" class="w-4 h-4"></i> {% trans "Applicants" %}
            </a></li>
            <li class="text-gray-400">/</li>
            <li class="font-semibold" style="color: #9d2235;">{% trans "Create Applicant" %}</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="user-plus" class="w-6 h-6" style="color: #9d2235;"></i>
            </div>
            {% trans "Create New Applicant" %}
        </h1>
        <a href="{% url 'person_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>
            {% trans "Back to List" %}
        </a>
    </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="user-plus" class="w-5 h-5" style="color: #9d2235;"></i>
                {% trans "Applicant 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="person-form" class="space-y-6">
                {% csrf_token %}

                <!-- Profile Image Section -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-3">{% trans "Profile Photo" %}</label>
                    <div class="flex items-center gap-4">
                        <div class="relative">
                            <div id="profile-image-preview" class="w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center border-2 border-dashed border-gray-300">
                                <i data-lucide="camera" class="w-8 h-8 text-gray-400"></i>
                            </div>
                        </div>
                        <div>
                            <input type="file" name="profile_image" id="id_profile_image"
                                   class="hidden" accept="image/*"
                                   onchange="previewImage(this)">
                            <button type="button" onclick="document.getElementById('id_profile_image').click()"
                                    class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium border-2 border-gray-300 text-gray-700 hover:bg-gray-50 transition-all duration-200">
                                <i data-lucide="upload" class="w-4 h-4"></i>
                                {% trans "Upload Photo" %}
                            </button>
                            <p class="text-xs text-gray-500 mt-2">{% trans "JPG, PNG or GIF. Max size 2MB." %}</p>
                        </div>
                    </div>
                </div>

                <!-- Personal Information -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label for="id_first_name" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "First Name" %} <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="first_name" id="id_first_name"
                               class="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"
                               placeholder="{% trans 'Enter first name' %}"
                               required>
                        {% if form.first_name.errors %}
                            <div class="text-red-600 text-sm mt-1">{{ form.first_name.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <div>
                        <label for="id_middle_name" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Middle Name" %}
                        </label>
                        <input type="text" name="middle_name" id="id_middle_name"
                               class="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"
                               placeholder="{% trans 'Enter middle name' %}">
                        {% if form.middle_name.errors %}
                            <div class="text-red-600 text-sm mt-1">{{ form.middle_name.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <div>
                        <label for="id_last_name" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Last Name" %} <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="last_name" id="id_last_name"
                               class="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"
                               placeholder="{% trans 'Enter last name' %}"
                               required>
                        {% if form.last_name.errors %}
                            <div class="text-red-600 text-sm mt-1">{{ form.last_name.errors.0 }}</div>
                        {% endif %}
                    </div>
                </div>

                <!-- Contact Information -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="id_email" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Email Address" %} <span class="text-red-500">*</span>
                        </label>
                        <input type="email" name="email" id="id_email"
                               class="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"
                               placeholder="{% trans 'Enter email address' %}"
                               required>
                        {% if form.email.errors %}
                            <div class="text-red-600 text-sm mt-1">{{ form.email.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <div>
                        <label for="id_phone" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Phone Number" %}
                        </label>
                        <input type="tel" name="phone" id="id_phone"
                               class="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"
                               placeholder="{% trans 'Enter phone number' %}">
                        {% if form.phone.errors %}
                            <div class="text-red-600 text-sm mt-1">{{ form.phone.errors.0 }}</div>
                        {% endif %}
                    </div>
                </div>

                <!-- Additional Information -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label for="id_date_of_birth" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Date of Birth" %}
                        </label>
                        <input type="date" name="date_of_birth" id="id_date_of_birth"
                               class="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">
                        {% if form.date_of_birth.errors %}
                            <div class="text-red-600 text-sm mt-1">{{ form.date_of_birth.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <div>
                        <label for="id_nationality" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Nationality" %}
                        </label>
                        <input type="text" name="nationality" id="id_nationality"
                               class="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"
                               placeholder="{% trans 'Enter nationality' %}">
                        {% if form.nationality.errors %}
                            <div class="text-red-600 text-sm mt-1">{{ form.nationality.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <div>
                        <label for="id_gender" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Gender" %}
                        </label>
                        <select name="gender" id="id_gender"
                                class="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">
                            <option value="">{% trans "Select Gender" %}</option>
                            <option value="M">{% trans "Male" %}</option>
                            <option value="F">{% trans "Female" %}</option>
                        </select>
                        {% if form.gender.errors %}
                            <div class="text-red-600 text-sm mt-1">{{ form.gender.errors.0 }}</div>
                        {% endif %}
                    </div>
                </div>

                <!-- Address -->
                <div>
                    <label for="id_address" class="block text-sm font-semibold text-gray-700 mb-2">
                        {% trans "Address" %}
                    </label>
                    <textarea name="address" id="id_address" rows="3"
                              class="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 resize-vertical"
                              placeholder="{% trans 'Enter address' %}"></textarea>
                    {% if form.address.errors %}
                        <div class="text-red-600 text-sm mt-1">{{ form.address.errors.0 }}</div>
                    {% endif %}
                </div>

                <!-- LinkedIn Profile -->
                <div>
                    <label for="id_linkedin_profile" class="block text-sm font-semibold text-gray-700 mb-2">
                        {% trans "LinkedIn Profile URL" %}
                    </label>
                    <input type="url" name="linkedin_profile" id="id_linkedin_profile"
                           class="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"
                           placeholder="https://linkedin.com/in/username">
                    {% if form.linkedin_profile.errors %}
                        <div class="text-red-600 text-sm mt-1">{{ form.linkedin_profile.errors.0 }}</div>
                    {% endif %}
                    <p class="text-xs text-gray-500 mt-1">{% trans "Optional: Add LinkedIn profile URL" %}</p>
                </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 'person_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 Applicant" %}
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>

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

    // Form validation
    const form = document.getElementById('person-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            const firstName = document.getElementById('id_first_name').value.trim();
            const lastName = document.getElementById('id_last_name').value.trim();
            const email = document.getElementById('id_email').value.trim();

            if (!firstName) {
                e.preventDefault();
                alert("{% trans 'Please enter a first name.' %}");
                document.getElementById('id_first_name').focus();
                return false;
            }

            if (!lastName) {
                e.preventDefault();
                alert("{% trans 'Please enter a last name.' %}");
                document.getElementById('id_last_name').focus();
                return false;
            }

            if (!email) {
                e.preventDefault();
                alert("{% trans 'Please enter an email address.' %}");
                document.getElementById('id_email').focus();
                return false;
            }

            if (!email.includes('@')) {
                e.preventDefault();
                alert("{% trans 'Please enter a valid email address.' %}");
                document.getElementById('id_email').focus();
                return false;
            }
        });
    }
});

// Image preview function
function previewImage(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const preview = document.getElementById('profile-image-preview');
            preview.innerHTML = `<img src="${e.target.result}" alt="Profile" class="w-full h-full rounded-full object-cover">`;
        }
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
{% endblock %}