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

{% block title %}{{ job.title }} - University ATS{% endblock %}

{% block customCSS %}
<style>
    /* Custom styles for the Job Detail Page (using variables from base.html) */
    :root {
        --kaauh-teal: #00636e;
        --kaauh-teal-dark: #004a53;
        --kaauh-border: #eaeff3;
        --kaauh-primary-text: #343a40;
    }

    /* Header styling */
    .job-header-card {
        background: linear-gradient(135deg, var(--kaauh-teal), #004d57);
        color: white;
        border-radius: 0.75rem 0.75rem 0 0;
        padding: 1.5rem;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }

    .job-header-card h2 {
        font-weight: 700;
        margin: 0;
        font-size: 1.8rem;
    }

    /* Status badge */
    .status-badge {
        font-size: 0.9rem;
        padding: 0.4em 0.8em;
        border-radius: 0.4rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.7px;
        display: inline-flex;
        align-items: center;
    }

    /* Mapped color classes for status badges */
    .bg-success { background-color: var(--kaauh-teal) !important; }
    .bg-warning { background-color: #ffc107 !important; }
    .bg-secondary { background-color: #6c757d !important; }
    .bg-danger { background-color: #dc3545 !important; }

    /* Fix for active tab text visibility */
    .nav-tabs .nav-link.active,
    .right-column-tabs .nav-link.active {
        color: var(--kaauh-teal-dark) !important;
        background-color: white !important;
        border-bottom: 3px solid var(--kaauh-teal) !important;
        font-weight: 600;
        z-index: 2;
    }
    /* Card enhancements */
    .card {
        border: 1px solid var(--kaauh-border);
        border-radius: 0.75rem;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
        transition: transform 0.2s;
        background-color: white;
    }
    .card:not(.no-hover):hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    }

    /* Standard Card Header (used for single cards or fallback) */
    .card-header {
        font-weight: 600;
        padding: 1rem 1.25rem;
        background-color: #f8f9fa; /* Light background */
        border-bottom: 1px solid var(--kaauh-border);
    }
    .card-header h5 {
        font-weight: 600;
        color: var(--kaauh-primary-text);
    }

    .card-footer {
        padding: 1rem 1.25rem;
        background-color: #f8f9fa;
        border-top: 1px solid var(--kaauh-border);
    }

    /* Left Column Tabs Theming (main details) */
    .nav-tabs {
        border-bottom: 1px solid var(--kaauh-border);
        background-color: #f8f9fa;
        padding: 0 1.25rem;
    }
    .nav-tabs .nav-link {
        border: none;
        border-bottom: 3px solid transparent;
        color: var(--kaauh-primary-text);
        font-weight: 500;
        padding: 0.75rem 1rem;
        margin-right: 0.5rem;
        transition: all 0.2s;
    }
    .nav-tabs .nav-link:hover {
        color: var(--kaauh-teal);
        border-color: #e9ecef;
        background-color: #fff;
    }
    .nav-tabs .nav-link.active {
        color: var(--kaauh-teal-dark);
        background-color: white;
        border-bottom: 3px solid var(--kaauh-teal);
        font-weight: 600;
    }

    /* ==================================== */
    /* RIGHT COLUMN TABS STYLING (IMPROVED) */
    /* ==================================== */

    .right-column-tabs {
        padding: 0;
        margin-bottom: 0;
        border-bottom: 1px solid var(--kaauh-border);
    }
    .right-column-tabs .nav-tabs {
        padding: 0;
        margin-bottom: 0;
        border-bottom: none;
        background-color: transparent;
        display: flex;
    }
    .right-column-tabs .nav-item {
        flex-grow: 1;
        text-align: center;
    }
    .right-column-tabs .nav-link {
        padding: 0.9rem 1rem;
        font-size: 0.95rem; 
        font-weight: 600;
        color: var(--kaauh-primary-text);
        border-radius: 0;
        border-right: 1px solid var(--kaauh-border);
        border-bottom: 1px solid var(--kaauh-border);
        background-color: #f8f9fa;
    }
    .right-column-tabs .nav-item:last-child .nav-link {
        border-right: none;
    }
    .right-column-tabs .nav-link.active {
        background-color: white;
        color: var(--kaauh-teal-dark);
        border-bottom: 3px solid var(--kaauh-teal);
        border-right-color: transparent;
        margin-bottom: -1px;
    }
    .right-column-tabs .nav-link:not(.active):hover {
        background-color: #f0f4f7;
        color: var(--kaauh-teal);
    }
    .right-column-tabs .tab-content {
        padding: 1.5rem 1.25rem;
        background-color: white;
    }

    /* Section styling */
    .job-section h5 {
        color: var(--kaauh-teal);
        font-weight: 700;
        margin-bottom: 0.75rem;
        font-size: 1.25rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--kaauh-border);
    }

    /* Applicant stats */
    .applicant-stats .stat-item {
        padding: 0.75rem;
        text-align: center;
        border-radius: 0.5rem;
        background-color: #f8f9fa;
        border: 1px solid var(--kaauh-border);
    }
    .applicant-stats .stat-item div:first-child {
        font-size: 1.6rem;
        font-weight: 700;
    }
    .applicant-stats .stat-item small {
        font-size: 0.8rem;
    }

    /* Primary Color Overrides */
    .text-primary { color: var(--kaauh-teal) !important; }
    .text-info { color: #17a2b8 !important; }
    .text-success { color: #28a745 !important; }
    .text-secondary { color: #6c757d !important; }

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

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

    /* Secondary outline button (for forms/back links) */
    .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);
    }

    /* Specific styling for the deadline box */
    .deadline-box {
        padding: 0.75rem;
        border-radius: 0.5rem;
        border: 1px solid;
    }

    /* Table styling for the Applicant preview */
    .table-applicants tbody tr:hover {
        background-color: #f3f9f9;
    }
    .table-applicants td {
        border-top: 1px solid var(--kaauh-border);
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row g-4">

        {# LEFT COLUMN: JOB DETAILS WITH TABS #}
        <div class="col-lg-8">
            <div class="card shadow-sm no-hover">

                {# HEADER SECTION #}
                <div class="job-header-card d-flex justify-content-between align-items-center flex-wrap">
                    <div>
                        <h2 class="mb-1">{{ job.title }}</h2>
                        <small class="text-light">{% trans "JOB ID: "%}{{ job.internal_job_id }}</small>
                    </div>

                    <div class="d-flex align-items-center gap-2">
                        <span class="badge status-badge">
                            {% if job.status == "ACTIVE" %}
                                <span class="badge bg-success status-badge">
                            {% elif job.status == "DRAFT" %}
                                <span class="badge bg-secondary status-badge">
                            {% elif job.status == "CLOSED" %}
                                <span class="badge bg-warning status-badge">
                            {% elif job.status == "CANCELLED" %}
                                <span class="badge bg-danger status-badge">
                            {% elif job.status == "ARCHIVED" %}
                                <span class="badge bg-secondary status-badge">
                            {% else %}
                                <span class="badge bg-secondary status-badge">
                            {% endif %}
                            {{ job.get_status_display }}
                            <button type="button" class="btn btn-outline-light btn-sm ms-2" data-bs-toggle="modal" data-bs-target="#editStatusModal">
                                <i class="fas fa-edit text-primary"></i>
                            </button>
                        </span>
                    </div>
                </div>

                {# LEFT TABS NAVIGATION #}
                <ul class="nav nav-tabs" id="jobTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab" aria-controls="details" aria-selected="true">
                            <i class="fas fa-info-circle me-1"></i> {% trans "Core Details" %}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab" aria-controls="description" aria-selected="false">
                            <i class="fas fa-file-alt me-1"></i> {% trans "Description & Requirements" %}
                        </button>
                    </li>
                    {% if job.application_instructions %}
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="instructions-tab" data-bs-toggle="tab" data-bs-target="#instructions" type="button" role="tab" aria-controls="instructions" aria-selected="false">
                            <i class="fas fa-paper-plane me-1"></i> {% trans "Application" %}
                        </button>
                    </li>
                    {% endif %}
                </ul>

                <div class="card-body">
                    <div class="tab-content" id="jobTabsContent">

                        {# TAB 1 CONTENT: CORE DETAILS #}
                        <div class="tab-pane fade show active" id="details" role="tabpanel" aria-labelledby="details-tab">
                            <h5 class="text-muted mb-3">{% trans "Administrative & Location" %}</h5>
                            <div class="row g-3 mb-4 border-bottom pb-3 small text-secondary">
                                <div class="col-md-6">
                                    <i class="fas fa-building me-2 text-primary"></i> <strong>{% trans "Department:" %}</strong> {{ job.department|default:"N/A" }}
                                </div>
                                <div class="col-md-6">
                                    <i class="fas fa-hashtag me-2 text-primary"></i> <strong>{% trans "Position No:" %}</strong> {{ job.position_number|default:"N/A" }}
                                </div>
                                <div class="col-md-6">
                                    <i class="fas fa-briefcase me-2 text-primary"></i> <strong>{% trans "Job Type:" %}</strong> {{ job.get_job_type_display }}
                                </div>
                                <div class="col-md-6">
                                    <i class="fas fa-map-pin me-2 text-primary"></i> <strong>{% trans "Workplace:" %}</strong> {{ job.get_workplace_type_display }}
                                </div>
                                <div class="col-md-6">
                                    <i class="fas fa-globe me-2 text-primary"></i> <strong>{% trans "Location:" %}</strong> {{ job.get_location_display }}
                                </div>
                                <div class="col-md-6">
                                    <i class="fas fa-user-tie me-2 text-primary"></i> <strong>{% trans "Created By:" %}</strong> {{ job.created_by|default:"N/A" }}
                                </div>
                                 <div class="col-md-6">
                                    <i class="fas fa-plus me-2 text-primary"></i> <strong>{% trans "Created At:" %}</strong> {{ job.created_at|default:"N/A" }}
                                </div>
                                 <div class="col-md-6">
                                    <i class="fas fa-edit me-2 text-primary"></i> <strong>{% trans "Updated At:" %}</strong> {{ job.updated_at|default:"N/A" }}
                                </div>
                            </div>
                            <h5 class="text-muted mb-3">{% trans "Financial & Timeline" %}</h5>
                            <div class="row g-3">
                                {% if job.salary_range %}
                                <div class="col-md-4">
                                    <div class="deadline-box border-success">
                                        <i class="fas fa-money-bill-wave me-2 text-success"></i>
                                        <strong class="text-success">{% trans "Salary:" %}</strong> <span class="text-dark">{{ job.salary_range }}</span>
                                    </div>
                                </div>
                                {% endif %}
                                {% if job.start_date %}
                                <div class="col-md-4">
                                    <div class="deadline-box border-info">
                                        <i class="far fa-calendar-alt me-2 text-info"></i>
                                        <strong class="text-info">{% trans "Start Date:" %}</strong> <span class="text-dark">{{ job.start_date }}</span>
                                    </div>
                                </div>
                                {% endif %}
                                {% if job.application_deadline %}
                                <div class="col-md-4">
                                    <div class="deadline-box border-{% if job.is_expired %}danger{% else %}primary{% endif %} text-{% if job.is_expired %}danger{% else %}primary{% endif %}">
                                        <i class="fas fa-calendar-times me-2"></i>
                                        <strong>{% trans "Deadline:" %}</strong> <span class="text-dark">{{ job.application_deadline }}</span>
                                        {% if job.is_expired %}
                                            <span class="badge bg-danger ms-1">{% trans "EXPIRED" %}</span>
                                        {% endif %}
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        </div>

                        {# TAB 2 CONTENT: DESCRIPTION & REQUIREMENTS #}
                        <div class="tab-pane fade" id="description" role="tabpanel" aria-labelledby="description-tab">
                            {% if job.description %}
                            <div class="mb-4">
                                <h5>{% trans "Job Description" %}</h5>
                                <div class="text-secondary">{{ job.description|safe }}</div>
                            </div>
                            {% endif %}
                            {% if job.qualifications %}
                            <div class="mb-4">
                                <h5>{% trans "Required Qualifications" %}</h5>
                                <div class="text-secondary">{{ job.qualifications|safe }}</div>
                            </div>
                            {% endif %}
                            {% if job.benefits %}
                            <div class="mb-4">
                                <h5>{% trans "Benefits" %}</h5>
                                <div class="text-secondary">{{ job.benefits|safe}}</div>
                            </div>
                            {% endif %}
                        </div>

                        {# TAB 3 CONTENT: APPLICATION INSTRUCTIONS #}
                        {% if job.application_instructions %}
                        <div class="tab-pane fade" id="instructions" role="tabpanel" aria-labelledby="instructions-tab">
                            <div class="mb-4">
                                <h5>{% trans "Application Instructions" %}</h5>
                                <div class="text-secondary">{{ job.application_instructions|safe }}</div>
                            </div>
                        </div>
                        {% endif %}

                    </div>
                </div>

                {# FOOTER ACTIONS #}
                <div class="card-footer d-flex flex-wrap gap-2">
                     <a href="{% url 'job_update' job.slug %}" class="btn btn-main-action">
                        <i class="fas fa-edit"></i> {% trans "Edit Job" %}
                    </a>

                    {% if job.application_url %}
                    <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#myModalForm">
                        <i class="fas fa-image me-1"></i> {% trans "Upload Image for Post" %}
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>

        {# RIGHT COLUMN: TABBED CARDS #}
        <div class="col-lg-4">
            <div class="card shadow-sm no-hover">

                {# RIGHT TABS NAVIGATION #}
                <ul class="nav nav-tabs right-column-tabs" id="rightJobTabs" role="tablist">
                    <li class="nav-item flex-fill" role="presentation">
                        <button class="nav-link active" id="applicants-tab" data-bs-toggle="tab" data-bs-target="#applicants-pane" type="button" role="tab" aria-controls="applicants-pane" aria-selected="true">
                            <i class="fas fa-users me-1 text-primary"></i> {% trans "Applicants" %}
                        </button>
                    </li>
                    <li class="nav-item flex-fill" role="presentation">
                        <button class="nav-link" id="manage-tab" data-bs-toggle="tab" data-bs-target="#manage-pane" type="button" role="tab" aria-controls="manage-pane" aria-selected="false">
                            <i class="fas fa-cogs me-1 text-secondary"></i> {% trans "Manage" %}
                        </button>
                    </li>
                    <li class="nav-item flex-fill" role="presentation">
                        <button class="nav-link" id="internal-tab" data-bs-toggle="tab" data-bs-target="#internal-pane" type="button" role="tab" aria-controls="internal-pane" aria-selected="false">
                            <i class="fas fa-info me-1 text-muted"></i> {% trans "Linkedin" %}
                        </button>
                    </li>
                </ul>

                <div class="tab-content mx-2 my-3" id="rightJobTabsContent">

                    {# TAB 1: APPLICANTS CONTENT #}
                    <div class="tab-pane fade show active" id="applicants-pane" role="tabpanel" aria-labelledby="applicants-tab">
                        <h5 class="mb-3">{% trans "Candidates" %} (<span id="total_candidates">{{ total_candidates }}</span>)</h5>
                        {% if total_candidates > 0 %}
                            <div class="row mb-4 applicant-stats">
                                <div class="col-4">
                                    <div class="stat-item">
                                        <div class="text-primary">{{ applied_count }}</div>
                                        <small class="text-muted">{% trans "Applied" %}</small>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="stat-item">
                                        <div class="text-info">{{ interview_count }}</div>
                                        <small class="text-muted">{% trans "Interview" %}</small>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="stat-item">
                                        <div class="text-success">{{ offer_count }}</div>
                                        <small class="text-muted">{% trans "Offer" %}</small>
                                    </div>
                                </div>
                            </div>
                                <div class="col-12 mb-2">
                                    <a href="{% url 'job_candidates_list' job.slug %}" class="btn  btn-outline-secondary w-100">
                                        {% trans "View All Applicants" %} ({{ total_candidates }})
                                    </a>
                                </div>
        
                        {% endif %}
                        
                         <div class="d-grid gap-2">
                                <a href="{% url 'candidate_create_for_job' job.slug %}" class="btn btn-main-action">
                                    <i class="fas fa-user-plus"></i> {% trans "Create Candidate" %}
                            </a>
                        </div>
                    </div>

                    {# TAB 2: MANAGEMENT (LinkedIn & Forms) CONTENT #}
                    <div class="tab-pane fade" id="manage-pane" role="tabpanel" aria-labelledby="manage-tab">

                        {# LinkedIn Integration (Content from old card) #}
                        

                        {# Applicant Form Management (Content from old card) #}
                        <h5 class="mb-3"><i class="fas fa-clipboard-list me-2 text-primary"></i>{% trans "Form Management" %}</h5>
                        <div class="d-grid gap-2">
                            <p class="text-muted small mb-3">
                                {% trans "Manage the custom application forms associated with this job posting." %}
                            </p>
                            
                            {% if not job.form_template %}
                            <a href="{% url 'create_form_template' %}" class="btn btn-main-action">
                                <i class="fas fa-plus-circle me-2"></i> {% trans "Create New Form Template" %}
                            </a>
                            {% else %}
                            <a href="{% url 'form_wizard' job.form_template.pk %}" class="btn btn-outline-secondary">
                                <i class="fas fa-list-alt me-1"></i> {% trans "View Form Template" %}
                            </a>
                            {% endif %}

                           
                        </div>
                    </div>

                    {# TAB 3: INTERNAL INFO CONTENT #}
                    <div class="tab-pane fade" id="internal-pane" role="tabpanel" aria-labelledby="internal-tab">
                        <h5 class="mb-3"><i class="fab fa-linkedin me-2 text-info"></i>{% trans "LinkedIn Integration" %}</h5>
                        <div class="mb-4">
                            {% if job.posted_to_linkedin %}
                                <div class="alert alert-success p-2 mb-3 small">
                                    <i class="fas fa-check-circle me-1"></i> {% trans "Posted successfully!" %}
                                </div>
                                {% if job.linkedin_post_url %}
                                    <a href="{{ job.linkedin_post_url }}" target="_blank" class="btn btn-main-action w-100 mb-2">
                                        <i class="fab fa-linkedin me-1"></i> {% trans "View on LinkedIn" %}
                                    </a>
                                {% endif %}
                                <small class="text-muted d-block text-center mb-3">
                                    {% trans "Posted on:" %} {{ job.linkedin_posted_at|date:"M d, Y" }}
                                </small>
                            {% else %}
                                <p class="text-muted small mb-3">{% trans "This job has not been posted to LinkedIn yet." %}</p>
                            {% endif %}

                            <form method="post" action="{% url 'post_to_linkedin' job.slug %}" class="mt-2">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-main-action w-100"
                                        {% if not request.session.linkedin_authenticated %}disabled{% endif %}>
                                    <i class="fab fa-linkedin me-1"></i>
                                    {% if job.posted_to_linkedin %}{% trans "Re-post to LinkedIn" %}{% else %}{% trans "Post to LinkedIn" %}{% endif %}
                                </button>
                            </form>

                            {% if not request.session.linkedin_authenticated %}
                                <small class="text-muted d-block mt-2 text-center">
                                    {% trans "You need to" %} <a href="{% url 'linkedin_login' %}">{% trans "authenticate with LinkedIn" %}</a> {% trans "first." %}
                                </small>
                            {% endif %}

                            {% if job.linkedin_post_status and 'ERROR' in job.linkedin_post_status %}
                                <div class="alert alert-danger mt-3 p-2 small">
                                    <i class="fas fa-exclamation-triangle me-1"></i>
                                    <small>{% trans "Error:" %} {{ job.linkedin_post_status }}</small>
                                </div>
                            {% endif %}
                        </div>
                        <div class="mt-4">
                            <a href="{% url 'job_list' %}" class="btn btn-outline-secondary w-100">
                                <i class="fas fa-arrow-left"></i> {% trans "Back to Jobs" %}
                            </a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!--image modal class-->
{% include "jobs/partials/image_upload.html" %}

<!-- JOB STATUS MODAL-->
<div class="modal fade" id="editStatusModal" tabindex="-1" aria-labelledby="editStatusModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post" action="{% url 'job_detail' slug=job.slug %}">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title" id="editStatusModalLabel">{% trans "Edit Job Status" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        {% if status_form %}
                            <label for="{{ status_form.status.id_for_label }}" class="form-label">{% trans "Select New Status" %}</label>
                            {{ status_form.status }}
                            {% if status_form.status.errors %}
                                <div class="text-danger small mt-1">{{ status_form.status.errors }}</div>
                            {% endif %}
                        {% else %}
                            <div class="text-danger">{% trans "Status form not available. Please check your view." %}</div>
                        {% endif %}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                    <button type="submit" class="btn btn-main-action">{% trans "Save Changes" %}</button>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}