{% extends 'portal_base.html' %}
{% load static i18n mytags crispy_forms_tags %}

{% block title %}{% trans "My Dashboard" %} - ATS{% endblock %}

{% block customCSS %}
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
    body { font-family: 'Inter', sans-serif; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">

    {# Header #}
    <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
        <h1 class="text-2xl md:text-3xl font-bold text-gray-900 mb-3 md:mb-0">
            {% trans "Dashboard" %}
        </h1>
    </div>

    {# Applicant Quick Overview Card #}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
        <div class="flex flex-col sm:flex-row items-center text-center sm:text-start gap-4">
            <img src="{% if applicant.user.profile_image %}{{ applicant.user.profile_image.url }}{% else %}{% static 'image/default_avatar.png' %}{% endif %}"
                 alt="{% trans 'Profile Picture' %}"
                 class="w-20 h-20 rounded-full border-4 border-kaauh-blue/20 object-cover shadow-lg">
            <div class="flex-1">
                <h3 class="text-lg font-bold text-gray-900 mb-1">{{ applicant.full_name|default:"Applicant Name" }}</h3>
                <p class="text-sm text-gray-600">{{ applicant.email }}</p>
            </div>
        </div>
    </div>

    {# MAIN TABBED INTERFACE #}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">

        {# Tab Navigation #}
        <div class="border-b border-gray-200 overflow-x-auto">
            <div class="flex min-w-max px-4 pt-4 gap-2">
                <button class="tab-btn px-4 py-2 text-sm font-medium rounded-t-lg border-b-2 border-transparent hover:bg-gray-50 transition"
                        onclick="showTab('profile-details')"
                        data-tab="profile-details">
                    <i data-lucide="user-circle" class="w-4 h-4 mr-2 inline"></i>
                    {% trans "Profile Details" %}
                </button>
                <button class="tab-btn px-4 py-2 text-sm font-medium rounded-t-lg border-b-2 border-transparent hover:bg-gray-50 transition"
                        onclick="showTab('applications-history')"
                        data-tab="applications-history">
                    <i data-lucide="list-alt" class="w-4 h-4 mr-2 inline"></i>
                    {% trans "My Applications" %}
                </button>
                <button class="tab-btn px-4 py-2 text-sm font-medium rounded-t-lg border-b-2 border-transparent hover:bg-gray-50 transition"
                        onclick="showTab('document-management')"
                        data-tab="document-management">
                    <i data-lucide="file-upload" class="w-4 h-4 mr-2 inline"></i>
                    {% trans "Documents" %}
                </button>
            </div>
        </div>

        {# Tab Content #}
        <div class="p-4 md:p-6">

            {# Profile Details Tab #}
            <div id="profile-details" class="tab-content">
                
                <!-- Basic Information Section -->
                <div class="mb-8">
                    <h4 class="mb-4 font-bold text-gray-900 flex items-center gap-2">
                        <i data-lucide="user" class="w-5 h-5 text-kaauh-blue"></i>
                        {% trans "Basic Information" %}
                    </h4>
                    <div class="bg-gray-50 rounded-xl p-4 space-y-3">
                        <div class="flex justify-between items-start pb-3 border-b border-gray-200 last:border-0 last:pb-0">
                            <div class="flex items-center gap-2 text-gray-600">
                                <i data-lucide="badge" class="w-4 h-4 text-kaauh-blue"></i>
                                <span class="font-semibold text-gray-700">{% trans "First Name" %}</span>
                            </div>
                            <span class="text-gray-900 font-medium">{{ applicant.first_name|default:"" }}</span>
                        </div>
                        <div class="flex justify-between items-start pb-3 border-b border-gray-200 last:border-0 last:pb-0">
                            <div class="flex items-center gap-2 text-gray-600">
                                <i data-lucide="badge" class="w-4 h-4 text-kaauh-blue"></i>
                                <span class="font-semibold text-gray-700">{% trans "Last Name" %}</span>
                            </div>
                            <span class="text-gray-900 font-medium">{{ applicant.last_name|default:"" }}</span>
                        </div>
                        {% if applicant.middle_name %}
                        <div class="flex justify-between items-start pb-3 border-b border-gray-200 last:border-0 last:pb-0">
                            <div class="flex items-center gap-2 text-gray-600">
                                <i data-lucide="badge" class="w-4 h-4 text-kaauh-blue"></i>
                                <span class="font-semibold text-gray-700">{% trans "Middle Name" %}</span>
                            </div>
                            <span class="text-gray-900 font-medium">{{ applicant.middle_name }}</span>
                        </div>
                        {% endif %}
                        <div class="flex justify-between items-start pb-3 border-b border-gray-200 last:border-0 last:pb-0">
                            <div class="flex items-center gap-2 text-gray-600">
                                <i data-lucide="mail" class="w-4 h-4 text-kaauh-blue"></i>
                                <span class="font-semibold text-gray-700">{% trans "Email" %}</span>
                            </div>
                            <span class="text-gray-900 font-medium">{{ applicant.email|default:"" }}</span>
                        </div>
                    </div>
                </div>

                <!-- Contact Information Section -->
                <div class="mb-8">
                    <h4 class="mb-4 font-bold text-gray-900 flex items-center gap-2">
                        <i data-lucide="address-book" class="w-5 h-5 text-kaauh-blue"></i>
                        {% trans "Contact Information" %}
                    </h4>
                    <div class="bg-gray-50 rounded-xl p-4 space-y-3">
                        <div class="flex justify-between items-start pb-3 border-b border-gray-200 last:border-0 last:pb-0">
                            <div class="flex items-center gap-2 text-gray-600">
                                <i data-lucide="phone" class="w-4 h-4 text-kaauh-blue"></i>
                                <span class="font-semibold text-gray-700">{% trans "Phone" %}</span>
                            </div>
                            <span class="text-gray-900 font-medium">{{ applicant.phone|default:"" }}</span>
                        </div>
                        {% if applicant.address %}
                        <div class="flex justify-between items-start pb-3 border-b border-gray-200 last:border-0 last:pb-0">
                            <div class="flex items-center gap-2 text-gray-600">
                                <i data-lucide="map-pin" class="w-4 h-4 text-kaauh-blue"></i>
                                <span class="font-semibold text-gray-700">{% trans "Address" %}</span>
                            </div>
                            <span class="text-gray-900 font-medium text-right max-w-xs">{{ applicant.address|linebreaksbr }}</span>
                        </div>
                        {% endif %}
                        {% if applicant.linkedin_profile %}
                        <div class="flex justify-between items-start pb-3 border-b border-gray-200 last:border-0 last:pb-0">
                            <div class="flex items-center gap-2 text-gray-600">
                                <i data-lucide="linkedin" class="w-4 h-4 text-kaauh-blue"></i>
                                <span class="font-semibold text-gray-700">{% trans "LinkedIn Profile" %}</span>
                            </div>
                            <a href="{{ applicant.linkedin_profile }}" target="_blank" class="text-kaauh-blue hover:text-kaauh-blue/80 font-medium flex items-center gap-1">
                                {% trans "View Profile" %} <i data-lucide="external-link" class="w-3 h-3"></i>
                            </a>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Personal Details Section -->
                <div class="mb-8">
                    <h4 class="mb-4 font-bold text-gray-900 flex items-center gap-2">
                        <i data-lucide="user-circle" class="w-5 h-5 text-kaauh-blue"></i>
                        {% trans "Personal Details" %}
                    </h4>
                    <div class="bg-gray-50 rounded-xl p-4 space-y-3">
                        <div class="flex justify-between items-start pb-3 border-b border-gray-200 last:border-0 last:pb-0">
                            <div class="flex items-center gap-2 text-gray-600">
                                <i data-lucide="calendar" class="w-4 h-4 text-kaauh-blue"></i>
                                <span class="font-semibold text-gray-700">{% trans "Date of Birth" %}</span>
                            </div>
                            <span class="text-gray-900 font-medium">{{ applicant.date_of_birth|date:"M d, Y"|default:"" }}</span>
                        </div>
                        <div class="flex justify-between items-start pb-3 border-b border-gray-200 last:border-0 last:pb-0">
                            <div class="flex items-center gap-2 text-gray-600">
                                <i data-lucide="venus-mars" class="w-4 h-4 text-kaauh-blue"></i>
                                <span class="font-semibold text-gray-700">{% trans "Gender" %}</span>
                            </div>
                            <span class="text-gray-900 font-medium">{{ applicant.get_gender_display|default:"" }}</span>
                        </div>
                        <div class="flex justify-between items-start pb-3 border-b border-gray-200 last:border-0 last:pb-0">
                            <div class="flex items-center gap-2 text-gray-600">
                                <i data-lucide="globe" class="w-4 h-4 text-kaauh-blue"></i>
                                <span class="font-semibold text-gray-700">{% trans "Nationality" %}</span>
                            </div>
                            <span class="text-gray-900 font-medium">{{ applicant.get_nationality_display|default:"" }}</span>
                        </div>
                    </div>
                </div>

                <!-- Professional Information Section -->
                <div class="mb-8">
                    <h4 class="mb-4 font-bold text-gray-900 flex items-center gap-2">
                        <i data-lucide="briefcase" class="w-5 h-5 text-kaauh-blue"></i>
                        {% trans "Professional Information" %}
                    </h4>
                    <div class="bg-gray-50 rounded-xl p-4 space-y-3">
                        {% if applicant.user.designation %}
                        <div class="flex justify-between items-start pb-3 border-b border-gray-200 last:border-0 last:pb-0">
                            <div class="flex items-center gap-2 text-gray-600">
                                <i data-lucide="user-tie" class="w-4 h-4 text-kaauh-blue"></i>
                                <span class="font-semibold text-gray-700">{% trans "Designation" %}</span>
                            </div>
                            <span class="text-gray-900 font-medium">{{ applicant.user.designation }}</span>
                        </div>
                        {% endif %}
                        {% if applicant.gpa %}
                        <div class="flex justify-between items-start pb-3 border-b border-gray-200 last:border-0 last:pb-0">
                            <div class="flex items-center gap-2 text-gray-600">
                                <i data-lucide="graduation-cap" class="w-4 h-4 text-kaauh-blue"></i>
                                <span class="font-semibold text-gray-700">{% trans "GPA" %}</span>
                            </div>
                            <span class="text-gray-900 font-medium">{{ applicant.gpa }}</span>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            {# Applications History Tab #}
            <div id="applications-history" class="tab-content hidden">
                <h4 class="mb-4 font-bold text-gray-900 flex items-center gap-2">
                    <i data-lucide="list-checks" class="w-5 h-5 text-kaauh-blue"></i>
                    {% trans "Application Tracking" %}
                </h4>

                {% if applications %}
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        {% for application in applications %}
                        <div class="bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md hover:border-kaauh-blue/30 transition-all duration-300">
                            <div class="p-5 flex flex-col h-full">
                                <!-- Job Title -->
                                <div class="mb-3">
                                    <h5 class="font-bold text-gray-900 mb-2">
                                        <a href="{% url 'applicant_application_detail' application.slug %}"
                                           class="text-kaauh-blue hover:text-kaauh-blue/80 transition">
                                            {{ application.job.title }}
                                        </a>
                                    </h5>
                                    <p class="text-xs text-gray-500 flex items-center gap-1">
                                        <i data-lucide="calendar" class="w-3 h-3"></i>
                                        {% trans "Applied" %}: {{ application.created_at|date:"d M Y" }}
                                    </p>
                                </div>

                                <!-- Application Details -->
                                <div class="space-y-2 mb-4">
                                    <div class="flex justify-between items-center">
                                        <span class="text-xs text-gray-600 font-medium">{% trans "Current Stage" %}</span>
                                        <span class="text-xs font-bold px-2 py-1 rounded-full bg-kaauh-blue text-white">
                                            {{ application.stage }}
                                        </span>
                                    </div>
                                    <div class="flex justify-between items-center">
                                        <span class="text-xs text-gray-600 font-medium">{% trans "Status" %}</span>
                                        {% if application.is_active %}
                                            <span class="text-xs font-bold px-2 py-1 rounded-full bg-emerald-500 text-white">{% trans "Active" %}</span>
                                        {% else %}
                                            <span class="text-xs font-bold px-2 py-1 rounded-full bg-red-500 text-white">{% trans "Closed" %}</span>
                                        {% endif %}
                                    </div>
                                </div>

                                <!-- Action Button -->
                                <div class="mt-auto">
                                    <a href="{% url 'applicant_application_detail' application.slug %}"
                                       class="inline-flex items-center justify-center gap-2 w-full bg-kaauh-blue hover:bg-[#004f57] text-white font-medium py-2.5 rounded-xl text-sm transition shadow-sm hover:shadow-md">
                                        <i data-lucide="eye" class="w-4 h-4"></i>
                                        {% trans "View Details" %}
                                    </a>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="bg-kaauh-blue/5 border-2 border-dashed border-kaauh-blue/30 rounded-2xl p-8 text-center">
                        <i data-lucide="info" class="w-12 h-12 text-kaauh-blue mx-auto mb-4"></i>
                        <h5 class="mb-3 font-bold text-gray-900">{% trans "You haven't submitted any applications yet." %}</h5>
                        <a href="{% url 'kaauh_career' %}" class="inline-flex items-center gap-2 bg-kaauh-blue hover:bg-[#004f57] text-white font-medium px-6 py-2.5 rounded-xl text-sm transition shadow-sm hover:shadow-md">
                            {% trans "View Available Jobs" %} <i data-lucide="arrow-right" class="w-4 h-4"></i>
                        </a>
                    </div>
                {% endif %}
            </div>

            {# Document Management Tab #}
            <div id="document-management" class="tab-content hidden">
                <h4 class="mb-4 font-bold text-gray-900 flex items-center gap-2">
                    <i data-lucide="file-text" class="w-5 h-5 text-kaauh-blue"></i>
                    {% trans "My Uploaded Documents" %}
                </h4>

                <p class="text-sm text-gray-600 mb-6">
                    {% trans "You can upload and manage your resume, certificates, and professional documents here. These documents will be attached to your applications." %}
                </p>

                <button type="button" class="inline-flex items-center gap-2 bg-kaauh-blue hover:bg-[#004f57] text-white font-medium px-4 py-2.5 rounded-xl text-sm transition shadow-sm hover:shadow-md mb-6"
                        onclick="document.getElementById('documentUploadModal').classList.remove('hidden')">
                    <i data-lucide="upload-cloud" class="w-4 h-4"></i>
                    {% trans "Upload New Document" %}
                </button>

                <div class="border-t border-gray-200"></div>

                {# Document List #}
                <div class="space-y-3 mt-6">
                    {% for document in documents %}
                    <div class="bg-gray-50 rounded-xl p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3"
                        id="document-{{ document.id }}">
                        <div class="flex-1">
                            <div class="flex items-center gap-2 font-semibold text-gray-900">
                                <i data-lucide="file" class="w-4 h-4 text-kaauh-blue"></i>
                                <span>{{ document.document_type|title }}</span>
                            </div>
                            <span class="text-xs text-gray-500">({{ document.file.name|split:"/"|last }})</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <span class="text-xs text-gray-500">{% trans "Uploaded:" %} {{ document.uploaded_at|date:"d M Y" }}</span>
                            <a href="{{ document.file.url }}" target="_blank" class="text-gray-600 hover:text-kaauh-blue transition">
                                <i data-lucide="eye" class="w-4 h-4"></i>
                            </a>
                            <button hx-post="{% url 'document_delete' document.pk %}"
                                    hx-target="#document-{{ document.id }}"
                                    hx-swap="outerHTML"
                                    hx-confirm="{% trans 'Are you sure you want to delete this file?' %}"
                                    class="text-red-500 hover:text-red-600 transition">
                                <i data-lucide="trash-2" class="w-4 h-4"></i>
                            </button>
                        </div>
                    </div>
                    {% empty %}
                    <div class="bg-gray-50 rounded-xl p-8 text-center">
                        <i data-lucide="folder-open" class="w-12 h-12 text-gray-300 mx-auto mb-4"></i>
                        <p class="text-gray-500">{% trans "No documents uploaded yet." %}</p>
                    </div>
                    {% endfor %}
                </div>
            </div>

        </div>
    </div>

</div>

{# Modals with modern styling #}
<div id="documentUploadModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
        <div class="flex items-center justify-between p-6 border-b border-gray-200">
            <h5 class="text-lg font-bold text-gray-900">{% trans "Upload Document" %}</h5>
            <button onclick="document.getElementById('documentUploadModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600 transition">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>
        <div class="p-6">
            {% include "forms/document_form.html" with slug=applicant.slug %}
        </div>
    </div>
</div>

<script>
    lucide.createIcons();
    
    // Tab switching functionality
    function showTab(tabId) {
        // Hide all tab contents
        document.querySelectorAll('.tab-content').forEach(content => {
            content.classList.add('hidden');
        });
        
        // Remove active state from all tabs
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.remove('border-kaauh-blue', 'text-kaauh-blue', 'bg-kaauh-blue/5');
            btn.classList.add('border-transparent', 'text-gray-600');
        });
        
        // Show selected tab content
        document.getElementById(tabId).classList.remove('hidden');
        
        // Add active state to selected tab
        const activeBtn = document.querySelector(`[data-tab="${tabId}"]`);
        activeBtn.classList.add('border-kaauh-blue', 'text-kaauh-blue', 'bg-kaauh-blue/5');
        activeBtn.classList.remove('border-transparent', 'text-gray-600');
    }
    
    // Initialize first tab as active
    showTab('profile-details');
</script>

{% endblock %}