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

{% block title %}{{ person.get_full_name }} - {{ block.super }}{% endblock %}

{% block customCSS %}
<style>
    /* UI Variables for the KAAT-S Theme */
    :root {
        --kaauh-teal: #00636e;
        --kaauh-teal-dark: #004a53;
        --kaauh-border: #eaeff3;
        --kaauh-gray-light: #f8f9fa;
    }

    /* Profile Header Styling */
    .profile-header {
        background: linear-gradient(135deg, var(--kaauh-teal) 0%, var(--kaauh-teal-dark) 100%);
        color: white;
        border-radius: 0.75rem;
        padding: 2rem;
        margin-bottom: 2rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .profile-image-large {
        width: 150px;
        height: 150px;
        object-fit: cover;
        border-radius: 50%;
        border: 4px solid white;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    /* Card Styling */
    .card {
        border: 1px solid var(--kaauh-border);
        border-radius: 0.75rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
        transition: transform 0.2s, box-shadow 0.2s;
        background-color: white;
    }

    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    }

    /* Main Action Button Style */
    .btn-main-action {
        background-color: var(--kaauh-teal);
        border-color: var(--kaauh-teal);
        color: white;
        font-weight: 600;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.5rem 1rem;
    }

    .btn-main-action:hover {
        background-color: var(--kaauh-teal-dark);
        border-color: var(--kaauh-teal-dark);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    /* Secondary Button Style */
    .btn-outline-secondary {
        color: var(--kaauh-teal-dark);
        border-color: var(--kaauh-teal);
    }
    .btn-outline-secondary:hover {
        background-color: var(--kaauh-teal-dark);
        color: white;
        border-color: var(--kaauh-teal-dark);
    }

    /* Info Section Styling */
    .info-section {
        margin-bottom: 1.5rem;
    }

    .info-section h5 {
        color: var(--kaauh-teal-dark);
        border-bottom: 2px solid var(--kaauh-teal);
        padding-bottom: 0.5rem;
        margin-bottom: 1rem;
        font-weight: 600;
    }

    .info-item {
        display: flex;
        align-items: center;
        margin-bottom: 0.75rem;
        padding: 0.5rem;
        border-radius: 0.25rem;
        transition: background-color 0.2s;
    }

    .info-item:hover {
        background-color: var(--kaauh-gray-light);
    }

    .info-item i {
        color: var(--kaauh-teal);
        width: 20px;
        margin-right: 1rem;
        font-size: 1.1rem;
    }

    .info-label {
        font-weight: 600;
        color: var(--kaauh-teal-dark);
        min-width: 120px;
    }

    .info-value {
        color: #495057;
        flex-grow: 1;
    }

    /* Badge Styling */
    .badge {
        font-weight: 600;
        padding: 0.4em 0.7em;
        border-radius: 0.3rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Related Items Styling */
    .related-item {
        border-left: 3px solid var(--kaauh-teal);
        padding-left: 1rem;
        margin-bottom: 1rem;
        transition: all 0.2s;
    }

    .related-item:hover {
        border-left-color: var(--kaauh-teal-dark);
        background-color: var(--kaauh-gray-light);
        border-radius: 0.25rem;
    }

   
    /* Empty State Styling */
    .empty-state {
        text-align: center;
        padding: 2rem;
        color: #6c757d;
    }

    .empty-state i {
        font-size: 3rem;
        color: var(--kaauh-teal);
        opacity: 0.5;
        margin-bottom: 1rem;
    }

    /* Status Indicator */
    .status-indicator {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 0.5rem;
    }

    .status-active {
        background-color: #28a745;
    }

    .status-inactive {
        background-color: #dc3545;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .profile-header {
            text-align: center;
        }

        .profile-image-large {
            margin: 0 auto 1rem;
        }

        .info-item {
            flex-direction: column;
            align-items: flex-start;
        }

        .info-label {
            min-width: auto;
            margin-bottom: 0.25rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Breadcrumb Navigation -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{% url 'person_list' %}" class="text-secondary text-decoration-none">
                    <i class="fas fa-user-friends me-1"></i> {% trans "Applicants" %}
                </a>
            </li>
            <li class="breadcrumb-item active" aria-current="page"
             style=" color: #F43B5E; /* Rosy Accent Color */
                            font-weight: 600;
                        ">{{ person.full_name|title }}</li>
        </ol>
    </nav>

    <!-- Profile Header -->
    <div class="profile-header">
        <div class="row align-items-center">
            <div class="col-md-3 text-center">
                {% if person.profile_image %}
                    <img src="{{ person.profile_image.url }}" alt="{{ person.get_full_name }}"
                         class="profile-image-large">
                {% else %}
                    <div class="profile-image-large d-flex align-items-center justify-content-center bg-white">
                        <i class="fas fa-user text-muted fa-3x"></i>
                    </div>
                {% endif %}
            </div>
            <div class="col-md-9">
                <h1 class="display-5 fw-bold mb-2">{{ person.get_full_name }}</h1>
                {% if person.email %}
                    <p class="lead mb-3 ">
                        <i class="fas fa-envelope me-2"></i>{{ person.email }}
                    </p>
                {% endif %}
                <div class="d-flex flex-wrap gap-2 mb-3">
                    {% if person.nationality %}
                        <span class="badge bg-light text-dark">
                            <i class="fas fa-globe me-1"></i>{{ person.nationality }}
                        </span>
                    {% endif %}
                    {% if person.gender %}
                        <span class="badge bg-info">
                            {% if person.gender == 'M' %}{% trans "Male" %}{% else %}{% trans "Female" %}{% endif %}
                        </span>
                    {% endif %}
                    {% if person.user %}
                        <span class="badge bg-success">
                            <i class="fas fa-user-check me-1"></i>{% trans "User Account" %}
                        </span>
                    {% endif %}
                </div>
                {% if user.is_staff %}
                    <div class="d-flex gap-2">
                        <a href="{% url 'person_update' person.slug %}" class="btn btn-light">
                            <i class="fas fa-edit me-1"></i> {% trans "Edit Person" %}
                        </a>
                        <button type="button" class="btn btn-outline-light"
                                data-bs-toggle="modal" data-bs-target="#deleteModal"
                                data-delete-url="{% url 'person_delete' person.slug %}"
                                data-item-name="{{ person.get_full_name }}">
                            <i class="fas fa-trash-alt me-1"></i> {% trans "Delete" %}
                        </button>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Personal Information Column -->
        <div class="col-lg-6 mb-4">
            <div class="card h-100">
                <div class="card-body">
                    <div class="info-section">
                        <h5><i class="fas fa-user me-2"></i>{% trans "Personal Information" %}</h5>

                        <div class="info-item">
                            <i class="fas fa-signature"></i>
                            <span class="info-label">{% trans "Full Name" %}:</span>
                            <span class="info-value">{{ person.full_name|title }}</span>
                        </div>

                        {% if person.first_name %}
                            <div class="info-item">
                                <i class="fas fa-user"></i>
                                <span class="info-label">{% trans "First Name" %}:</span>
                                <span class="info-value">{{ person.first_name }}</span>
                            </div>
                        {% endif %}

                        {% if person.middle_name %}
                            <div class="info-item">
                                <i class="fas fa-user"></i>
                                <span class="info-label">{% trans "Middle Name" %}:</span>
                                <span class="info-value">{{ person.middle_name }}</span>
                            </div>
                        {% endif %}

                        {% if person.last_name %}
                            <div class="info-item">
                                <i class="fas fa-user"></i>
                                <span class="info-label">{% trans "Last Name" %}:</span>
                                <span class="info-value">{{ person.last_name }}</span>
                            </div>
                        {% endif %}

                        {% if person.date_of_birth %}
                            <div class="info-item">
                                <i class="fas fa-birthday-cake"></i>
                                <span class="info-label">{% trans "Date of Birth" %}:</span>
                                <span class="info-value">{{ person.date_of_birth }}</span>
                            </div>
                        {% endif %}

                        {% if person.gender %}
                            <div class="info-item">
                                <i class="fas fa-venus-mars"></i>
                                <span class="info-label">{% trans "Gender" %}:</span>
                                <span class="info-value">
                                    {% if person.gender == 'M' %}{% trans "Male" %}{% else %}{% trans "Female" %}{% endif %}
                                </span>
                            </div>
                        {% endif %}

                        {% if person.nationality %}
                            <div class="info-item">
                                <i class="fas fa-globe"></i>
                                <span class="info-label">{% trans "Nationality" %}:</span>
                                <span class="info-value">{{ person.nationality }}</span>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Contact Information Column -->
        <div class="col-lg-6 mb-4">
            <div class="card h-100">
                <div class="card-body">
                    <div class="info-section">
                        <h5><i class="fas fa-address-book me-2"></i>{% trans "Contact Information" %}</h5>

                        {% if person.email %}
                            <div class="info-item">
                                <i class="fas fa-envelope"></i>
                                <span class="info-label">{% trans "Email" %}:</span>
                                <span class="info-value">
                                    <a href="mailto:{{ person.email }}" class="text-decoration-none text-secondary">
                                        {{ person.email }}
                                    </a>
                                </span>
                            </div>
                        {% endif %}

                        {% if person.phone %}
                            <div class="info-item">
                                <i class="fas fa-phone"></i>
                                <span class="info-label">{% trans "Phone" %}:</span>
                                <span class="info-value">
                                    <a href="tel:{{ person.phone }}" class="text-decoration-none text-secondary">
                                        {{ person.phone }}
                                    </a>
                                </span>
                            </div>
                        {% endif %}

                        {% if person.address %}
                            <div class="info-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span class="info-label">{% trans "Address" %}:</span>
                                <span class="info-value">{{ person.address|linebreaksbr }}</span>
                            </div>
                        {% endif %}

                        {% if person.linkedin_profile %}
                            <div class="info-item">
                                <i class="fab fa-linkedin"></i>
                                <span class="info-label">{% trans "LinkedIn" %}:</span>
                                <span class="info-value">
                                    <a href="{{ person.linkedin_profile }}" target="_blank"
                                       class="text-decoration-none">
                                        {% trans "View Profile" %}
                                        <i class="fas fa-external-link-alt ms-1"></i>
                                    </a>
                                </span>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Related Information -->
    <div class="row">
        <!-- Applications -->
        <div class="col-lg-6 mb-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-primary-theme">
                        <i class="fas fa-briefcase me-2"></i>{% trans "Applications" %}
                        <span class="badge bg-primary-theme ms-2">{{ person.applications.count }}</span>
                    </h5>

                    {% if person.applications %}
                        {% for application in person.applications.all %}
                            <div class="related-item">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h6 class="mb-1">
                                            <a href="{% url 'candidate_detail' application.slug %}"
                                               class="text-decoration-none text-secondary">
                                                {{ application.job.title }}
                                            </a>
                                        </h6>
                                        <small class="text-muted">
                                            {% trans "Applied" %}: {{ application.created_at|date:"d M Y" }}
                                        </small>
                                    </div>
                                    <span class="badge bg-primary-theme">{{ application.stage }}</span>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="empty-state">
                            <i class="fas fa-briefcase"></i>
                            <p>{% trans "No applications found" %}</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Documents -->
        <div class="col-lg-6 mb-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-primary-theme">
                        <i class="fas fa-file-alt me-2"></i>{% trans "Documents" %}
                        <span class="badge bg-primary-theme ms-2">{{ person.documents.count }}</span>
                    </h5>

                    {% if person.documents %}
                        {% for document in person.documents %}
                            <div class="related-item">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="mb-1">
                                            <a href="{{ document.file.url }}" target="_blank"
                                               class="text-decoration-none">
                                                {{ document.filename }}
                                            </a>
                                        </h6>
                                        <small class="text-muted">
                                            {{ document.file_size|filesizeformat }} •
                                            {{ document.uploaded_at|date:"d M Y" }}
                                        </small>
                                    </div>
                                    <a href="{{ document.file.url }}" download="{{ document.filename }}"
                                       class="btn btn-sm btn-outline-secondary">
                                        <i class="fas fa-download"></i>
                                    </a>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="empty-state">
                            <i class="fas fa-file-alt"></i>
                            <p>{% trans "No documents found" %}</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- System Information -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-primary-theme">
                        <i class="fas fa-info-circle me-2"></i>{% trans "System Information" %}
                    </h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-item">
                                <i class="fas fa-calendar-plus"></i>
                                <span class="info-label">{% trans "Created" %}:</span>
                                <span class="info-value">{{ person.created_at|date:"d M Y H:i" }}</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <i class="fas fa-edit"></i>
                                <span class="info-label">{% trans "Last Updated" %}:</span>
                                <span class="info-value">{{ person.updated_at|date:"d M Y H:i" }}</span>
                            </div>
                        </div>
                        {% if person.user.last_login %}
                        <div class="col-md-6">
                            <div class="info-item">
                                <i class="fas fa-clock"></i>
                                <span class="info-label">{% trans "Last Login" %}:</span>
                                <span class="info-value">{{ person.user.last_login|date:"d M Y H:i" }}</span>
                            </div>
                        </div>
                        {% endif %}
                        {% if person.user %}
                            <div class="col-md-6">
                                <div class="info-item ">
                                    <i class="fas fa-user-shield"></i>
                                    <span class="info-label">{% trans "User Account" %}:</span>
                                    <span class="info-value">
                                        <a href="{% url 'user_detail' person.user.pk %}"
                                           class="text-decoration-none text-secondary">
                                            {{ person.user.username }}
                                        </a>
                                    </span>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <a href="{% url 'person_list' %}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-1"></i> {% trans "Back to People" %}
                </a>
                {% if user.is_staff %}
                    <div class="d-flex gap-2">
                        <a href="{% url 'person_update' person.slug %}" class="btn btn-main-action">
                            <i class="fas fa-edit me-1"></i> {% trans "Edit Person" %}
                        </a>
                        <button type="button" class="btn btn-outline-danger"
                                data-bs-toggle="modal" data-bs-target="#deleteModal"
                                data-delete-url="{% url 'person_delete' person.slug %}"
                                data-item-name="{{ person.get_full_name }}">
                            <i class="fas fa-trash-alt me-1"></i> {% trans "Delete" %}
                        </button>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block customJS %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add smooth scrolling for internal links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });

    // Add copy to clipboard functionality for email and phone
    const copyElements = document.querySelectorAll('[data-copy]');
    copyElements.forEach(element => {
        element.addEventListener('click', function() {
            const textToCopy = this.getAttribute('data-copy');
            navigator.clipboard.writeText(textToCopy).then(() => {
                // Show temporary feedback
                const originalText = this.innerHTML;
                this.innerHTML = '<i class="fas fa-check me-1"></i>Copied!';
                this.classList.add('text-success');

                setTimeout(() => {
                    this.innerHTML = originalText;
                    this.classList.remove('text-success');
                }, 2000);
            });
        });
    });

    // Add hover effects for cards
    const cards = document.querySelectorAll('.card');
    cards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-2px)';
        });

        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });
});
</script>
{% endblock %}
