{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div class="row justify-content-center">
    <div class="col-md-10">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">{{ title }}</h4>
            </div>
            <div class="card-body">
                <form method="POST" enctype="multipart/form-data" id="jobForm" novalidate>
                    <div class="mb-3">
                        <label>Job Title</label>
                        <input type="text" name="title" class="form-control" value="{{ job.title if job else '' }}" required>
                    </div>
                    <div class="mb-3">
                        <label>Description</label>
                        <textarea name="description" id="description" rows="10" class="form-control">{{ job.description if job else '' }}</textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label>Category</label>
                            <select name="category_id" class="form-select" required>
                                {% for cat in categories %}
                                <option value="{{ cat.id }}" {% if job and job.category_id == cat.id %}selected{% endif %}>{{ cat.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>Status</label>
                            <select name="status" class="form-select">
                                <option value="Draft" {% if job and job.status == 'Draft' %}selected{% endif %}>Draft</option>
                                <option value="Active" {% if job and job.status == 'Active' %}selected{% endif %}>Active</option>
                                <option value="Closed" {% if job and job.status == 'Closed' %}selected{% endif %}>Closed</option>
                            </select>
                        </div>
<div class="row">
    <div class="col-md-6 mb-3">
        <label>Application Deadline (Optional)</label>
        <input type="date" name="deadline" class="form-control" value="{{ job.deadline if job and job.deadline else '' }}">
        <small class="text-muted">If not set, no deadline badge will be shown.</small>
    </div>
</div>
                        
                    </div>
                    {% if is_admin %}
                    <div class="mb-3">
                        <label>Link to existing company?</label>
                        <select id="linkChoice" class="form-select">
                            <option value="true" {% if job and job.is_linked %}selected{% endif %}>Yes, link to company</option>
                            <option value="false" {% if job and not job.is_linked %}selected{% endif %}>No, enter manually</option>
                        </select>
                    </div>
                    <div id="linkedCompanyDiv" {% if job and not job.is_linked %}style="display:none;"{% endif %}>
                        <label>Select Company</label>
                        <select name="company_id" class="form-select">
                            {% for comp in companies %}
                            <option value="{{ comp.id }}" {% if job and job.company_id == comp.id %}selected{% endif %}>{{ comp.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div id="manualCompanyDiv" {% if job and job.is_linked %}style="display:none;"{% endif %}>
                        <label>Company Name</label>
                        <input type="text" name="manual_company_name" class="form-control mb-2" value="{{ job.manual_company_name if job else '' }}">
                        <label>Company Address</label>
                        <textarea name="manual_company_address" class="form-control mb-2">{{ job.manual_company_address if job else '' }}</textarea>
                        <label>Logo (optional)</label>
                        <input type="file" name="manual_company_logo" class="form-control">
                        {% if job and job.manual_company_logo %}
                            <div class="mt-2">Current logo: <img src="{{ url_for('static', filename='uploads/'+job.manual_company_logo) }}" height="40"></div>
                        {% endif %}
                    </div>
                    <input type="hidden" name="is_linked" id="isLinked" value="{{ 'true' if job and job.is_linked else 'true' }}">
                    {% else %}
                        <input type="hidden" name="company_id" value="{{ company_id }}">
                    {% endif %}
                    <div class="mt-4">
                        <button type="submit" class="btn btn-primary" id="submitBtn">{% if job %}Update Job{% else %}Post Job{% endif %}</button>
                        <a href="{{ url_for('admin_dashboard' if is_admin else 'employer_dashboard') }}" class="btn btn-secondary">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div id="loadingOverlay" class="loading-overlay">
    <div class="spinner"></div>
    <p>Processing, please wait...</p>
</div>

<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script>
    let editor;

    // Initialize CKEditor
    ClassicEditor
        .create(document.querySelector('#description'), {
            toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'insertTable', 'undo', 'redo'],
            height: 400
        })
        .then(newEditor => {
            editor = newEditor;
            // Remove the required attribute from the hidden textarea to avoid validation error
            document.querySelector('#description').removeAttribute('required');
        })
        .catch(error => {
            console.error('CKEditor error:', error);
        });

    // Form submission: sync editor content and show spinner
    const form = document.getElementById('jobForm');
    const submitBtn = document.getElementById('submitBtn');
    const overlay = document.getElementById('loadingOverlay');

    form.addEventListener('submit', function(e) {
        if (editor) {
            // Update textarea with editor content
            document.querySelector('#description').value = editor.getData();
        }
        // Manually validate required fields
        const title = document.querySelector('input[name="title"]');
        const category = document.querySelector('select[name="category_id"]');
        if (!title.value.trim()) {
            alert('Job Title is required');
            e.preventDefault();
            return false;
        }
        if (!category.value) {
            alert('Category is required');
            e.preventDefault();
            return false;
        }
        overlay.style.display = 'flex';
        submitBtn.disabled = true;
    });

    {% if is_admin %}
    const linkChoice = document.getElementById('linkChoice');
    const linkedDiv = document.getElementById('linkedCompanyDiv');
    const manualDiv = document.getElementById('manualCompanyDiv');
    const isLinkedField = document.getElementById('isLinked');

    function toggleCompanyFields() {
        const isLinked = linkChoice.value === 'true';
        linkedDiv.style.display = isLinked ? 'block' : 'none';
        manualDiv.style.display = isLinked ? 'none' : 'block';
        isLinkedField.value = isLinked;
    }
    linkChoice.addEventListener('change', toggleCompanyFields);
    toggleCompanyFields();
    {% endif %}
</script>

<style>
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        display: none;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: white;
        z-index: 9999;
    }
    .loading-overlay .spinner {
        width: 50px;
        height: 50px;
        border: 5px solid rgba(255,255,255,0.3);
        border-radius: 50%;
        border-top-color: #fff;
        animation: spin 1s ease-in-out infinite;
        margin-bottom: 15px;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
</style>
{% endblock %}