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

{% block title %}{% trans "Update" %} {{ person.get_full_name }} - {{ 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><a href="{% url 'person_detail' person.slug %}" class="text-gray-500 hover:underline transition">
                {{ person.full_name }}
            </a></li>
            <li class="text-gray-400">/</li>
            <li class="font-semibold" style="color: #9d2235;">{% trans "Update" %}</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-edit" class="w-6 h-6" style="color: #9d2235;"></i>
            </div>
            {% trans "Update Applicant" %}
        </h1>
        <div class="flex flex-wrap gap-2">
            <a href="{% url 'person_detail' person.slug %}" 
               class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium border-2 border-gray-200 text-gray-700 hover:bg-gray-50 transition-all duration-200">
                <i data-lucide="eye" class="w-4 h-4"></i> {% trans "View Details" %}
            </a>
            <a href="{% url 'person_delete' person.slug %}" 
               class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium text-white bg-red-600 hover:bg-red-700 transition-all duration-200">
                <i data-lucide="trash-2" class="w-4 h-4"></i> {% trans "Delete" %}
            </a>
            <a href="{% url 'person_list' %}" 
               class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm 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>
    </div>

    <!-- Current Profile Info -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-6">
        <div class="px-6 py-4" style="background-color: #f8f9fa;">
            <h2 class="text-lg font-bold flex items-center gap-2">
                <i data-lucide="info" class="w-5 h-5" style="color: #9d2235;"></i>
                {% trans "Currently Editing" %}
            </h2>
        </div>
        <div class="p-6">
            <div class="flex items-center gap-4">
                {% if person.profile_image %}
                    <img src="{{ person.profile_image.url }}" alt="{{ person.get_full_name }}"
                         class="w-24 h-24 rounded-full border-3 border-gray-200 object-cover">
                {% else %}
                    <div class="w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center border-3 border-gray-200">
                        <i data-lucide="user" class="w-12 h-12 text-gray-400"></i>
                    </div>
                {% endif %}
                <div>
                    <h5 class="text-xl font-bold text-gray-900 mb-1">{{ person.get_full_name }}</h5>
                    {% if person.email %}
                        <p class="text-gray-600 mb-1">{{ person.email }}</p>
                    {% endif %}
                    <small class="text-gray-500">
                        {% trans "Created" %}: {{ person.created_at|date:"d M Y" }} •
                        {% trans "Last Updated" %}: {{ person.updated_at|date:"d M Y" }}
                    </small>
                </div>
            </div>
        </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="edit-2" class="w-5 h-5" style="color: #9d2235;"></i>
                {% trans "Edit 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 %}

            {% if messages %}
                {% for message in messages %}
                    <div class="mb-6 p-4 rounded-lg {% if message.tags == 'error' %}bg-red-50 border border-red-200{% elif message.tags == 'success' %}bg-green-50 border border-green-200{% else %}bg-blue-50 border border-blue-200{% endif %}" role="alert">
                        <div class="flex items-start gap-3">
                            {% if message.tags == 'error' %}
                                <i data-lucide="alert-triangle" class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"></i>
                            {% elif message.tags == 'success' %}
                                <i data-lucide="check-circle" class="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5"></i>
                            {% else %}
                                <i data-lucide="info" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"></i>
                            {% endif %}
                            <div>
                                <p class="mb-0 text-gray-800">{{ message }}</p>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% endif %}

            <form method="post" action="{% url 'person_update' person.slug %}" 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-start gap-4">
                        <div id="image-preview-container" class="flex-shrink-0">
                            {% if person.profile_image %}
                                <img src="{{ person.profile_image.url }}" alt="{{ person.get_full_name }}"
                                     class="w-24 h-24 rounded-full border-3 border-gray-200 object-cover">
                            {% else %}
                                <div class="w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center border-3 border-gray-200">
                                    <i data-lucide="user" class="w-12 h-12 text-gray-400"></i>
                                </div>
                            {% endif %}
                        </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.5 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 "Change 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-2 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' %}"
                               value="{{ form.first_name.value|default:person.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' %}"
                               value="{{ form.middle_name.value|default:person.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' %}"
                               value="{{ form.last_name.value|default:person.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>
                        <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' %}"
                               value="{{ form.email.value|default:person.email }}"
                               required>
                        {% if form.email.errors %}
                            <div class="text-red-600 text-sm mt-1">{{ form.email.errors.0 }}</div>
                        {% endif %}
                    </div>
                </div>

                <!-- Additional Information -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <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' %}"
                               value="{{ form.phone.value|default:person.phone }}">
                        {% if form.phone.errors %}
                            <div class="text-red-600 text-sm mt-1">{{ form.phone.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <div>
                        <label for="id_national_id" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "National ID" %}
                        </label>
                        <input type="text" name="national_id" id="id_national_id"
                               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 national ID' %}"
                               value="{{ form.national_id.value|default:person.national_id }}">
                        {% if form.national_id.errors %}
                            <div class="text-red-600 text-sm mt-1">{{ form.national_id.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <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"
                               value="{{ form.date_of_birth.value|default:person.date_of_birth|date:'Y-m-d' }}">
                        {% 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' %}"
                               value="{{ form.nationality.value|default:person.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" {% if person.gender == 'M' %}selected{% endif %}>{% trans "Male" %}</option>
                            <option value="F" {% if person.gender == 'F' %}selected{% endif %}>{% 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>
                        <label for="id_gpa" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "GPA" %}
                        </label>
                        <input type="number" step="0.01" name="gpa" id="id_gpa"
                               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 GPA' %}"
                               value="{{ form.gpa.value|default:person.gpa }}">
                        {% if form.gpa.errors %}
                            <div class="text-red-600 text-sm mt-1">{{ form.gpa.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' %}">{{ form.address.value|default:person.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"
                           value="{{ form.linkedin_profile.value|default:person.linkedin_profile }}">
                    {% 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_detail' person.slug %}" 
                       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 "Update Applicant" %}
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>

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

    // Profile Image Preview
    const profileImageInput = document.getElementById('id_profile_image');
    const imagePreviewContainer = document.getElementById('image-preview-container');
    const originalImage = imagePreviewContainer.innerHTML;

    profileImageInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function(e) {
                imagePreviewContainer.innerHTML = `
                    <img src="${e.target.result}" alt="Profile Preview" class="w-24 h-24 rounded-full border-3 border-gray-200 object-cover">
                    <p class="text-xs text-gray-500 mt-2">${file.name}</p>
                `;
            };
            reader.readAsDataURL(file);
        } else if (!file) {
            imagePreviewContainer.innerHTML = originalImage;
        }
    });

    // Form Validation
    const form = document.getElementById('person-form');
    form.addEventListener('submit', function(e) {
        const submitBtn = form.querySelector('button[type="submit"]');
        submitBtn.disabled = true;
        submitBtn.classList.add('opacity-75', 'cursor-not-allowed');

        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 || !lastName) {
            e.preventDefault();
            submitBtn.disabled = false;
            submitBtn.classList.remove('opacity-75', 'cursor-not-allowed');
            alert('{% trans "First name and last name are required." %}');
            return;
        }

        if (!email) {
            e.preventDefault();
            submitBtn.disabled = false;
            submitBtn.classList.remove('opacity-75', 'cursor-not-allowed');
            alert('{% trans "Email address is required." %}');
            return;
        }

        if (!email.includes('@')) {
            e.preventDefault();
            submitBtn.disabled = false;
            submitBtn.classList.remove('opacity-75', 'cursor-not-allowed');
            alert('{% trans "Please enter a valid email address." %}');
            return;
        }
    });

    // Email validation
    function isValidEmail(email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }

    // LinkedIn URL validation
    const linkedinInput = document.getElementById('id_linkedin_profile');
    linkedinInput.addEventListener('blur', function() {
        const value = this.value.trim();
        if (value && !isValidLinkedInURL(value)) {
            this.classList.add('border-red-500');
            if (!this.nextElementSibling || !this.nextElementSibling.classList.contains('text-red-600')) {
                const feedback = document.createElement('p');
                feedback.className = 'text-red-600 text-sm mt-1';
                feedback.textContent = '{% trans "Please enter a valid LinkedIn URL" %}';
                this.parentNode.appendChild(feedback);
            }
        } else {
            this.classList.remove('border-red-500');
            const feedback = this.parentNode.querySelector('.text-red-600');
            if (feedback && feedback.textContent.includes('LinkedIn')) feedback.remove();
        }
    });

    function isValidLinkedInURL(url) {
        const linkedinRegex = /^https?:\/\/(www\.)?linkedin\.com\/.+/i;
        return linkedinRegex.test(url);
    }

    // Warn before leaving if changes are made
    let formChanged = false;
    const formInputs = form.querySelectorAll('input, select, textarea');

    formInputs.forEach(input => {
        input.addEventListener('change', function() {
            formChanged = true;
        });
    });

    window.addEventListener('beforeunload', function(e) {
        if (formChanged) {
            e.preventDefault();
            e.returnValue = '{% trans "You have unsaved changes. Are you sure you want to leave?" %}';
            return e.returnValue;
        }
    });

    form.addEventListener('submit', function() {
        formChanged = false;
    });
});

function previewImage(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const preview = document.getElementById('image-preview-container');
            preview.innerHTML = `
                <img src="${e.target.result}" alt="Profile Preview" class="w-24 h-24 rounded-full border-3 border-gray-200 object-cover">
                <p class="text-xs text-gray-500 mt-2">${input.files[0].name}</p>
            `;
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
{% endblock %}