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

{% block title %}Update Application - {{ application.job.title }}{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-sm slide-up">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-edit me-2"></i>Update Application
                    </h4>
                    <p class="mb-0 mt-2 opacity-75">{{ application.job.title }} at {{ application.job.location }}</p>
                </div>
                
                <div class="card-body p-4">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        
                        <!-- Personal Information (Read-only) -->
                        <div class="mb-4">
                            <h6 class="text-muted mb-3">
                                <i class="fas fa-user me-2"></i>Personal Information
                                <small class="text-muted">(Cannot be modified)</small>
                            </h6>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label text-muted">
                                        <i class="fas fa-user me-1"></i>Full Name
                                    </label>
                                    <input type="text" 
                                           class="form-control bg-light text-muted" 
                                           value="{{ application.applicant_name }}" 
                                           readonly 
                                           style="cursor: not-allowed;">
                                    <input type="hidden" name="applicant_name" value="{{ application.applicant_name }}">
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label class="form-label text-muted">
                                        <i class="fas fa-envelope me-1"></i>Email Address
                                    </label>
                                    <input type="email" 
                                           class="form-control bg-light text-muted" 
                                           value="{{ application.applicant_email }}" 
                                           readonly 
                                           style="cursor: not-allowed;">
                                    <input type="hidden" name="applicant_email" value="{{ application.applicant_email }}">
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label text-muted">
                                        <i class="fas fa-phone me-1"></i>Phone Number
                                    </label>
                                    <input type="text" 
                                           class="form-control bg-light text-muted" 
                                           value="{{ application.applicant_phone }}" 
                                           readonly 
                                           style="cursor: not-allowed;">
                                    <input type="hidden" name="applicant_phone" value="{{ application.applicant_phone }}">
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label class="form-label text-muted">
                                        <i class="fas fa-id-card me-1"></i>ICTAZ Membership Number
                                    </label>
                                    <input type="text" 
                                           class="form-control bg-light text-muted" 
                                           value="{{ application.membership_number }}" 
                                           readonly 
                                           style="cursor: not-allowed;">
                                    <input type="hidden" name="membership_number" value="{{ application.membership_number }}">
                                </div>
                            </div>
                        </div>
                        
                        <hr class="my-4">
                        
                        <!-- Editable Application Content -->
                        <div class="mb-4">
                            <h6 class="text-primary mb-3">
                                <i class="fas fa-edit me-2"></i>Application Content
                                <small class="text-muted">(You can modify these)</small>
                            </h6>
                            
                            <div class="mb-4">
                                <label for="id_cover_letter" class="form-label">
                                    <i class="fas fa-file-alt me-1"></i>Cover Letter
                                </label>
                                <textarea name="cover_letter" 
                                          id="id_cover_letter"
                                          class="form-control"
                                          rows="6"
                                          placeholder="Tell us why you are the perfect fit for this position...">{{ application.cover_letter }}</textarea>
                            </div>
                        </div>
                        
                        <!-- Document Uploads -->
                        <div class="mb-4">
                            <h6 class="text-primary mb-3">
                                <i class="fas fa-upload me-2"></i>Documents
                                <small class="text-muted">(Upload new files to replace current ones)</small>
                            </h6>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="id_resume" class="form-label">
                                        <i class="fas fa-file-pdf me-1"></i>Resume
                                    </label>
                                    {% if application.resume %}
                                        <div class="mb-2 p-2 bg-light rounded">
                                            <small class="text-success">
                                                <i class="fas fa-check-circle me-1"></i>
                                                Current: {{ application.resume.name|slice:":30" }}{% if application.resume.name|length > 30 %}...{% endif %}
                                            </small>
                                        </div>
                                    {% endif %}
                                    <input type="file" 
                                           name="resume" 
                                           id="id_resume"
                                           class="form-control"
                                           accept=".pdf,.doc,.docx">
                                    <small class="form-text text-muted">Leave empty to keep current file</small>
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label for="id_ictaz_certificate" class="form-label">
                                        <i class="fas fa-certificate me-1"></i>ICTAZ Certificate
                                    </label>
                                    {% if application.ictaz_certificate %}
                                        <div class="mb-2 p-2 bg-light rounded">
                                            <small class="text-success">
                                                <i class="fas fa-check-circle me-1"></i>
                                                Current: {{ application.ictaz_certificate.name|slice:":30" }}{% if application.ictaz_certificate.name|length > 30 %}...{% endif %}
                                            </small>
                                        </div>
                                    {% endif %}
                                    <input type="file" 
                                           name="ictaz_certificate" 
                                           id="id_ictaz_certificate"
                                           class="form-control"
                                           accept=".pdf">
                                    <small class="form-text text-muted">Leave empty to keep current file</small>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="id_additional_documents" class="form-label">
                                    <i class="fas fa-paperclip me-1"></i>Additional Documents
                                </label>
                                {% if application.additional_documents %}
                                    <div class="mb-2 p-2 bg-light rounded">
                                        <small class="text-success">
                                            <i class="fas fa-check-circle me-1"></i>
                                            Current: {{ application.additional_documents.name|slice:":30" }}{% if application.additional_documents.name|length > 30 %}...{% endif %}
                                        </small>
                                    </div>
                                {% endif %}
                                <input type="file" 
                                       name="additional_documents" 
                                       id="id_additional_documents"
                                       class="form-control"
                                       accept=".pdf">
                                <small class="form-text text-muted">Upload additional documents (NRC, Degree Results, etc.) as a single PDF. Leave empty to keep current file.</small>
                            </div>
                        </div>
                        
                        <hr class="my-4">
                        
                        <div class="d-flex justify-content-between align-items-center">
                            <a href="{% url 'jobs:my_applications' %}" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left me-1"></i>Cancel
                            </a>
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-save me-1"></i>Update Application
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}