{% extends 'base.html' %}
{% load static %}

{% block title %}Apply for {{ job.title }} - ICTAZ Jobs Portal{% endblock %}

{% block content %}
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Job Summary Card -->
            <div class="card mb-4 slide-up">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h4 class="mb-2">{{ job.title }}</h4>
                            <div class="job-meta text-muted">
                                <span class="me-3">
                                    <i class="fas fa-building me-1"></i>{{ job.posted_by.organization|default:"ICTAZ" }}
                                </span>
                                <span class="me-3">
                                    <i class="fas fa-map-marker-alt me-1"></i>{{ job.location }}
                                </span>
                                <span>
                                    <i class="fas fa-calendar-alt me-1"></i>Deadline: {{ job.application_deadline|date:"M d, Y" }}
                                </span>
                            </div>
                        </div>
                        <div class="col-md-4 text-md-end">
                            <span class="badge bg-success fs-6">
                                <i class="fas fa-clock me-1"></i>{{ job.application_deadline|timeuntil }} left
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Application Form -->
            <div class="card slide-up">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-paper-plane me-2"></i>Submit Your Application
                    </h5>
                </div>
                <div class="card-body">
                    {% load crispy_forms_tags %}
                    <form method="post" enctype="multipart/form-data" id="applicationForm">
                        {% csrf_token %}
                        {% crispy form %}
                    </form>
                </div>
            </div>

            <!-- Application Tips -->
            <div class="card mt-4 slide-up alert">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-lightbulb me-2"></i>Application Tips
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <h6 class="text-primary">
                                    <i class="fas fa-file-alt me-2"></i>Cover Letter
                                </h6>
                                <ul class="small text-muted mb-0">
                                    <li>Highlight relevant experience</li>
                                    <li>Show enthusiasm for the role</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <h6 class="text-primary">
                                    <i class="fas fa-file-pdf me-2"></i>Resume Requirements
                                </h6>
                                <ul class="small text-muted mb-0">
                                    <li>PDF format only (max 10MB)</li>
                                    <li>Include contact information</li>
                                    <li>List relevant skills and experience</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Back Button -->
            <div class="mt-4">
                <a href="{% url 'jobs:job_detail' job.pk %}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Back to Job Details
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('applicationForm');
        const submitBtn = form.querySelector('input[type="submit"]');
        
        // File validation
        const resumeInput = document.getElementById('id_resume');
        const docsInput = document.getElementById('id_additional_documents');
        
        function validateFile(input, maxSize = 10 * 1024 * 1024) {
            if (input.files.length > 0) {
                const file = input.files[0];
                
                // Check file size
                if (file.size > maxSize) {
                    alert('File size cannot exceed 10MB');
                    input.value = '';
                    return false;
                }
                
                // Check file type
                if (!file.name.toLowerCase().endsWith('.pdf')) {
                    alert('Only PDF files are allowed');
                    input.value = '';
                    return false;
                }
            }
            return true;
        }
        
        if (resumeInput) {
            resumeInput.addEventListener('change', function() {
                validateFile(this);
            });
        }
        
        if (docsInput) {
            docsInput.addEventListener('change', function() {
                validateFile(this);
            });
        }
        
        // Form submission with loading state
        form.addEventListener('submit', function() {
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Submitting...';
        });
    });
</script>
{% endblock %}