{% extends "base.html" %}

{% block title %}Edit Profile{% endblock %}

{% block content %}
<h2 class="mb-4">Complete Your Profile</h2>
<form method="POST" enctype="multipart/form-data" id="profileForm">
    <!-- Basic Info + Documents (2‑column) -->
    <div class="row g-4 mb-4">
        <!-- Left column: Basic Info -->
        <div class="col-12 col-md-6">
            <div class="card h-100">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-user"></i> Basic Information</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Phone Number</label>
                        <input type="text" name="phone" class="form-control" placeholder="+268 7612 3456" value="{{ profile.phone }}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Address</label>
                        <textarea name="address" class="form-control" rows="3" placeholder="Your full address">{{ profile.address }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right column: Documents (drag‑drop) -->
        <div class="col-12 col-md-6">
            <div class="card h-100">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-file-alt"></i> Documents (Drag & Drop or Click)</h5>
                </div>
                <div class="card-body">
                    <!-- CV -->
                    <div class="mb-4">
                        <label class="form-label fw-bold">CV / Resume</label>
                        <div class="dropzone border rounded p-3 text-center" data-target="cv">
                            <i class="fas fa-cloud-upload-alt fa-2x text-muted"></i>
                            <p class="mb-1">Drag & drop or click to upload</p>
                            <input type="file" name="cv" accept=".pdf,.doc,.docx" style="display:none;">
                        </div>
                        {% if profile.cv_path %}
                            <div class="mt-2 small">
                                <i class="fas fa-file-pdf text-danger"></i> 
                                <a href="{{ url_for('static', filename='uploads/'+profile.cv_path) }}" target="_blank">Current CV</a>
                            </div>
                        {% endif %}
                    </div>
                    <!-- Cover Letter -->
                    <div class="mb-4">
                        <label class="form-label fw-bold">Generic Cover Letter</label>
                        <div class="dropzone border rounded p-3 text-center" data-target="cover_letter">
                            <i class="fas fa-cloud-upload-alt fa-2x text-muted"></i>
                            <p class="mb-1">Drag & drop or click to upload</p>
                            <input type="file" name="cover_letter" accept=".pdf,.doc,.docx" style="display:none;">
                        </div>
                        {% if profile.cover_letter_path %}
                            <div class="mt-2 small">
                                <i class="fas fa-file-word text-primary"></i> 
                                <a href="{{ url_for('static', filename='uploads/'+profile.cover_letter_path) }}" target="_blank">Current Cover Letter</a>
                            </div>
                        {% endif %}
                    </div>
                    <!-- Certificates -->
                    <div class="mb-4">
                        <label class="form-label fw-bold">Certificates (optional)</label>
                        <div class="dropzone border rounded p-3 text-center" data-target="certificates">
                            <i class="fas fa-cloud-upload-alt fa-2x text-muted"></i>
                            <p class="mb-1">Drag & drop or click to upload</p>
                            <input type="file" name="certificates" accept=".pdf,.doc,.docx,.jpg,.png" style="display:none;">
                        </div>
                        {% if profile.certificates_path %}
                            <div class="mt-2 small">
                                <i class="fas fa-certificate text-info"></i> 
                                <a href="{{ url_for('static', filename='uploads/'+profile.certificates_path) }}" target="_blank">Current Certificate</a>
                            </div>
                        {% endif %}
                    </div>
                    <!-- Police Clearance -->
                    <div class="mb-3">
                        <label class="form-label fw-bold">Police Clearance (optional)</label>
                        <div class="dropzone border rounded p-3 text-center" data-target="police_clearance">
                            <i class="fas fa-cloud-upload-alt fa-2x text-muted"></i>
                            <p class="mb-1">Drag & drop or click to upload</p>
                            <input type="file" name="police_clearance" accept=".pdf,.doc,.docx,.jpg,.png" style="display:none;">
                        </div>
                        {% if profile.police_clearance_path %}
                            <div class="mt-2 small">
                                <i class="fas fa-shield-alt text-success"></i> 
                                <a href="{{ url_for('static', filename='uploads/'+profile.police_clearance_path) }}" target="_blank">Current Document</a>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Categories Card -->
    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0"><i class="fas fa-tags"></i> Job Categories (max 5)</h5>
        </div>
        <div class="card-body">
            <div class="row g-3">
                {% for cat in all_categories %}
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="categories" value="{{ cat.id }}" id="cat{{ cat.id }}" {% if cat.id in seeker_categories %}checked{% endif %}>
                        <label class="form-check-label" for="cat{{ cat.id }}">{{ cat.name }}</label>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Education Card (with "Currently studying" toggle) -->
    <div class="card mb-4">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center flex-wrap">
            <h5 class="mb-0"><i class="fas fa-graduation-cap"></i> Education</h5>
            <button type="button" class="btn btn-sm btn-light mt-2 mt-sm-0" id="addEducation">+ Add Education</button>
        </div>
        <div class="card-body">
            <div id="educationSection">
                {% for edu in education %}
                <div class="edu-entry card mb-3 p-2 bg-light">
                    <div class="row g-2">
                        <div class="col-12 col-md-6">
                            <input type="text" name="edu_institution[]" class="form-control" placeholder="Institution" value="{{ edu.institution }}">
                        </div>
                        <div class="col-12 col-md-4">
                            <input type="text" name="edu_degree[]" class="form-control" placeholder="Degree" value="{{ edu.degree }}">
                        </div>
                        <div class="col-12 col-md-2">
                            <input type="text" name="edu_field[]" class="form-control" placeholder="Field" value="{{ edu.field_of_study }}">
                        </div>
                        <div class="col-6 col-sm-4 col-md-3">
                            <input type="date" name="edu_start[]" class="form-control" placeholder="Start date" value="{{ edu.start_date.strftime('%Y-%m-%d') if edu.start_date else '' }}">
                        </div>
                        <div class="col-6 col-sm-4 col-md-3">
                            <input type="date" name="edu_end[]" class="form-control edu-end-date" placeholder="End date" value="{{ edu.end_date.strftime('%Y-%m-%d') if edu.end_date else '' }}" {% if edu.end_date is none %}disabled{% endif %}>
                        </div>
                        <div class="col-6 col-sm-4 col-md-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input current-edu-toggle" type="checkbox" {% if edu.end_date is none %}checked{% endif %}>
                                <label class="form-check-label">Currently studying</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <button type="button" class="btn btn-danger w-100 removeRow">Remove</button>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Work Experience Card (with "Currently working here" toggle) -->
    <div class="card mb-4">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center flex-wrap">
            <h5 class="mb-0"><i class="fas fa-briefcase"></i> Work Experience</h5>
            <button type="button" class="btn btn-sm btn-light mt-2 mt-sm-0" id="addWork">+ Add Experience</button>
        </div>
        <div class="card-body">
            <div id="workSection">
                {% for work in work_experience %}
                <div class="work-entry card mb-3 p-2 bg-light">
                    <div class="row g-2">
                        <div class="col-12 col-md-6">
                            <input type="text" name="work_company[]" class="form-control" placeholder="Company" value="{{ work.company_name }}">
                        </div>
                        <div class="col-12 col-md-6">
                            <input type="text" name="work_position[]" class="form-control" placeholder="Position" value="{{ work.position }}">
                        </div>
                        <div class="col-6 col-sm-4 col-md-3">
                            <input type="date" name="work_start[]" class="form-control" placeholder="From" value="{{ work.start_date.strftime('%Y-%m-%d') if work.start_date else '' }}">
                        </div>
                        <div class="col-6 col-sm-4 col-md-3">
                            <input type="date" name="work_end[]" class="form-control work-end-date" placeholder="To" value="{{ work.end_date.strftime('%Y-%m-%d') if work.end_date else '' }}" {% if work.end_date is none %}disabled{% endif %}>
                        </div>
                        <div class="col-6 col-sm-4 col-md-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input current-work-toggle" type="checkbox" {% if work.end_date is none %}checked{% endif %}>
                                <label class="form-check-label">Currently working here</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <textarea name="work_desc[]" class="form-control" rows="2" placeholder="Description (responsibilities, achievements)">{{ work.description }}</textarea>
                        </div>
                        <div class="col-12">
                            <button type="button" class="btn btn-danger w-100 removeRow">Remove</button>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- References Card -->
    <div class="card mb-4">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center flex-wrap">
            <h5 class="mb-0"><i class="fas fa-address-card"></i> References (at least 3)</h5>
            <button type="button" class="btn btn-sm btn-light mt-2 mt-sm-0" id="addRef">+ Add Reference</button>
        </div>
        <div class="card-body">
            <div id="refSection">
                {% for ref in references %}
                <div class="ref-entry card mb-3 p-2 bg-light">
                    <div class="row g-2">
                        <div class="col-12 col-md-6">
                            <input type="text" name="ref_name[]" class="form-control" placeholder="Full Name" value="{{ ref.name }}">
                        </div>
                        <div class="col-12 col-md-6">
                            <input type="text" name="ref_position[]" class="form-control" placeholder="Position/Title" value="{{ ref.position }}">
                        </div>
                        <div class="col-12 col-md-6">
                            <input type="text" name="ref_company[]" class="form-control" placeholder="Company" value="{{ ref.company }}">
                        </div>
                        <div class="col-12 col-md-6">
                            <input type="text" name="ref_phone[]" class="form-control" placeholder="Phone" value="{{ ref.phone }}">
                        </div>
                        <div class="col-12">
                            <input type="email" name="ref_email[]" class="form-control" placeholder="Email" value="{{ ref.email }}">
                        </div>
                        <div class="col-12">
                            <button type="button" class="btn btn-danger w-100 removeRow">Remove</button>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="d-grid gap-2 d-md-flex justify-content-md-end mb-5">
        <button type="submit" class="btn btn-primary btn-lg px-5">
            <i class="fas fa-save"></i> Save Profile
        </button>
        <a href="{{ url_for('job_seeker_dashboard') }}" class="btn btn-secondary btn-lg">Cancel</a>
    </div>
</form>

<style>
    .dropzone {
        transition: all 0.2s ease;
        min-height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        background-color: #f8f9fa;
    }
    .dropzone.drag-over {
        border-color: #0d6efd;
        background-color: rgba(13, 110, 253, 0.05);
    }
    @media (max-width: 576px) {
        .dropzone {
            min-height: 80px;
        }
        .dropzone i {
            font-size: 1.5rem;
        }
        .dropzone p {
            font-size: 0.8rem;
        }
        .removeRow {
            margin-top: 0.5rem;
        }
    }
    .form-control, .form-select, .btn {
        border-radius: 0.5rem;
    }
    .card-header {
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
    }
</style>

{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // --- Add Education Row ---
    $('#addEducation').click(function() {
        var html = `
            <div class="edu-entry card mb-3 p-2 bg-light">
                <div class="row g-2">
                    <div class="col-12 col-md-6"><input type="text" name="edu_institution[]" class="form-control" placeholder="Institution"></div>
                    <div class="col-12 col-md-4"><input type="text" name="edu_degree[]" class="form-control" placeholder="Degree"></div>
                    <div class="col-12 col-md-2"><input type="text" name="edu_field[]" class="form-control" placeholder="Field"></div>
                    <div class="col-6 col-sm-4 col-md-3"><input type="date" name="edu_start[]" class="form-control" placeholder="Start date"></div>
                    <div class="col-6 col-sm-4 col-md-3"><input type="date" name="edu_end[]" class="form-control edu-end-date" placeholder="End date"></div>
                    <div class="col-6 col-sm-4 col-md-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input current-edu-toggle" type="checkbox">
                            <label class="form-check-label">Currently studying</label>
                        </div>
                    </div>
                    <div class="col-12"><button type="button" class="btn btn-danger w-100 removeRow">Remove</button></div>
                </div>
            </div>`;
        $('#educationSection').append(html);
    });

    // --- Add Work Row ---
    $('#addWork').click(function() {
        var html = `
            <div class="work-entry card mb-3 p-2 bg-light">
                <div class="row g-2">
                    <div class="col-12 col-md-6"><input type="text" name="work_company[]" class="form-control" placeholder="Company"></div>
                    <div class="col-12 col-md-6"><input type="text" name="work_position[]" class="form-control" placeholder="Position"></div>
                    <div class="col-6 col-sm-4 col-md-3"><input type="date" name="work_start[]" class="form-control" placeholder="From"></div>
                    <div class="col-6 col-sm-4 col-md-3"><input type="date" name="work_end[]" class="form-control work-end-date" placeholder="To"></div>
                    <div class="col-6 col-sm-4 col-md-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input current-work-toggle" type="checkbox">
                            <label class="form-check-label">Currently working here</label>
                        </div>
                    </div>
                    <div class="col-12"><textarea name="work_desc[]" class="form-control" rows="2" placeholder="Description"></textarea></div>
                    <div class="col-12"><button type="button" class="btn btn-danger w-100 removeRow">Remove</button></div>
                </div>
            </div>`;
        $('#workSection').append(html);
    });

    // --- Add Reference Row ---
    $('#addRef').click(function() {
        var html = `
            <div class="ref-entry card mb-3 p-2 bg-light">
                <div class="row g-2">
                    <div class="col-12 col-md-6"><input type="text" name="ref_name[]" class="form-control" placeholder="Full Name"></div>
                    <div class="col-12 col-md-6"><input type="text" name="ref_position[]" class="form-control" placeholder="Position/Title"></div>
                    <div class="col-12 col-md-6"><input type="text" name="ref_company[]" class="form-control" placeholder="Company"></div>
                    <div class="col-12 col-md-6"><input type="text" name="ref_phone[]" class="form-control" placeholder="Phone"></div>
                    <div class="col-12"><input type="email" name="ref_email[]" class="form-control" placeholder="Email"></div>
                    <div class="col-12"><button type="button" class="btn btn-danger w-100 removeRow">Remove</button></div>
                </div>
            </div>`;
        $('#refSection').append(html);
    });

    // Remove row
    $(document).on('click', '.removeRow', function() {
        $(this).closest('.edu-entry, .work-entry, .ref-entry').remove();
    });

    // Toggle: Currently studying (Education)
    $(document).on('change', '.current-edu-toggle', function() {
        const endDateInput = $(this).closest('.row').find('.edu-end-date');
        if ($(this).is(':checked')) {
            endDateInput.prop('disabled', true).val('');
        } else {
            endDateInput.prop('disabled', false);
        }
    });

    // Toggle: Currently working here (Work)
    $(document).on('change', '.current-work-toggle', function() {
        const endDateInput = $(this).closest('.row').find('.work-end-date');
        if ($(this).is(':checked')) {
            endDateInput.prop('disabled', true).val('');
        } else {
            endDateInput.prop('disabled', false);
        }
    });

    // Drag & drop for all .dropzone elements
    function initDropzone(zone) {
        const input = zone.querySelector('input[type="file"]');
        if (!input) return;

        // Prevent duplicate event listeners
        if (zone.hasAttribute('data-initialized')) return;
        zone.setAttribute('data-initialized', 'true');

        zone.addEventListener('click', (e) => {
            e.stopPropagation();
            input.click();
        });
        zone.addEventListener('dragover', (e) => {
            e.preventDefault();
            zone.classList.add('drag-over');
        });
        zone.addEventListener('dragleave', () => {
            zone.classList.remove('drag-over');
        });
        zone.addEventListener('drop', (e) => {
            e.preventDefault();
            zone.classList.remove('drag-over');
            const files = e.dataTransfer.files;
            if (files.length) {
                input.files = files;
                const fileName = files[0].name;
                zone.innerHTML = `<i class="fas fa-file-alt fa-2x text-primary"></i>
                                  <p class="mb-1 mt-2"><strong>${fileName}</strong></p>
                                  <p class="small text-muted">Click or drag to replace</p>`;
                // Re‑attach the hidden input (the above innerHTML removed it)
                const newInput = zone.querySelector('input');
                if (newInput) newInput.style.display = 'none';
            }
        });
        input.addEventListener('change', () => {
            if (input.files.length) {
                const fileName = input.files[0].name;
                zone.innerHTML = `<i class="fas fa-file-alt fa-2x text-primary"></i>
                                  <p class="mb-1 mt-2"><strong>${fileName}</strong></p>
                                  <p class="small text-muted">Click or drag to replace</p>`;
                const newInput = zone.querySelector('input');
                if (newInput) newInput.style.display = 'none';
            }
        });
    }

    document.querySelectorAll('.dropzone').forEach(zone => initDropzone(zone));
});
</script>
{% endblock %}