@extends('layouts.app')

@section('content')

<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet">

<style>
    :root {
        --primary: #0ea5e9;
        --primary-dark: #0284c7;
        --primary-light: #e0f2fe;
        --accent: #f59e0b;
        --success: #10b981;
        --danger: #ef4444;
        --surface: #ffffff;
        --surface-2: #f8fafc;
        --border: #e2e8f0;
        --border-focus: #0ea5e9;
        --text: #0f172a;
        --text-muted: #64748b;
        --shadow: 0 4px 16px rgba(0,0,0,0.07);
        --radius: 12px;
        --radius-sm: 8px;
    }

    body { background: #f1f5f9; font-family: 'Nunito', sans-serif; }

    .ej-wrapper { padding: 28px 20px; max-width: 1200px; margin: 0 auto; }

    /* Page Header */
    .ej-page-header {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 28px; flex-wrap: wrap; gap: 12px;
    }
    .ej-page-title {
        font-size: 1.7rem; font-weight: 800; color: var(--text);
        letter-spacing: -0.5px; display: flex; align-items: center; gap: 10px;
    }

    /* Layout */
    .ej-layout { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }
    @media (max-width: 900px) { .ej-layout { grid-template-columns: 1fr; } }

    /* Cards */
    .ej-card {
        background: var(--surface); border-radius: var(--radius);
        box-shadow: var(--shadow); border: 1.5px solid var(--border);
        margin-bottom: 20px; overflow: hidden;
    }
    .ej-card-header {
        display: flex; align-items: center; gap: 10px;
        padding: 16px 22px; border-bottom: 1.5px solid var(--border);
        background: var(--surface-2);
    }
    .ej-card-header .header-icon {
        width: 32px; height: 32px; border-radius: 8px;
        display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
    }
    .ej-card-header h5 { font-size: 0.92rem; font-weight: 700; color: var(--text); margin: 0; }
    .ej-card-body { padding: 22px; }

    /* Form Elements */
    .ej-label {
        display: block; font-size: 0.8rem; font-weight: 700; color: var(--text-muted);
        margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.5px;
    }
    .ej-label .req { color: var(--danger); margin-left: 2px; }
    .ej-input, .ej-select {
        width: 100%; padding: 10px 14px; border: 1.5px solid var(--border);
        border-radius: var(--radius-sm); font-size: 0.92rem; color: var(--text);
        background: var(--surface); transition: border-color 0.2s, box-shadow 0.2s;
        outline: none; font-family: inherit; box-sizing: border-box;
    }
    .ej-input:focus, .ej-select:focus {
        border-color: var(--border-focus);
        box-shadow: 0 0 0 3px rgba(14,165,233,0.12);
    }
    .ej-input.is-invalid, .ej-select.is-invalid {
        border-color: var(--danger) !important;
        box-shadow: 0 0 0 3px rgba(239,68,68,0.10) !important;
    }
    .ej-error-msg {
        font-size: 0.78rem; color: var(--danger);
        margin-top: 5px; display: none; font-weight: 600;
    }
    .ej-mb { margin-bottom: 18px; }

    /* Quill */
    .ej-quill-wrap .ql-toolbar {
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        border-color: var(--border) !important;
        background: var(--surface-2);
    }
    .ej-quill-wrap .ql-container {
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        font-family: 'Nunito', sans-serif; font-size: 0.92rem;
        min-height: 130px; border-color: var(--border) !important;
    }
    .ej-quill-wrap.is-invalid .ql-toolbar,
    .ej-quill-wrap.is-invalid .ql-container {
        border-color: var(--danger) !important;
    }
    .ej-quill-wrap.is-invalid .ql-container {
        box-shadow: 0 0 0 3px rgba(239,68,68,0.10);
    }

    /* Grid helpers */
    .ej-row { display: grid; gap: 14px; }
    .ej-row-2 { grid-template-columns: 1fr 1fr; }
    .ej-row-3 { grid-template-columns: 1fr 1fr 1fr; }
    .ej-row-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
    @media (max-width: 640px) {
        .ej-row-2, .ej-row-3, .ej-row-4 { grid-template-columns: 1fr; }
    }

    /* Skills */
    #skillList .skill-badge {
        display: inline-flex; align-items: center; gap: 6px;
        background: var(--primary-light); color: var(--primary-dark);
        border: 1.5px solid #bae6fd; font-size: 0.8rem; font-weight: 700;
        padding: 4px 10px; border-radius: 20px;
    }
    #skillList .skill-badge button {
        background: none; border: none; color: var(--primary-dark);
        font-size: 1rem; padding: 0; line-height: 1; cursor: pointer; opacity: 0.7;
    }
    #skillList .skill-badge button:hover { opacity: 1; }

    /* Images */
    .img-thumb-wrap { position: relative; display: inline-block; }
    .img-thumb-wrap img {
        width: 100px; height: 100px; object-fit: cover;
        border-radius: var(--radius-sm); border: 2px solid var(--border);
    }

    /* Checkbox */
    .ej-check-label {
        display: flex; align-items: center; gap: 9px;
        font-size: 0.88rem; font-weight: 600; color: var(--text-muted); cursor: pointer;
    }
    .ej-check-label input { accent-color: var(--primary); width: 16px; height: 16px; }

    /* Status dot */
    .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
    .status-dot.draft     { background: var(--accent); }
    .status-dot.published { background: var(--success); }
    .status-dot.closed    { background: #94a3b8; }

    /* Submit btn */
    .ej-submit-btn {
        width: 100%; padding: 13px;
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        color: #fff; border: none; border-radius: var(--radius-sm);
        font-size: 1rem; font-weight: 800; cursor: pointer; transition: all 0.2s;
        box-shadow: 0 4px 15px rgba(14,165,233,0.35);
        display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .ej-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(14,165,233,0.45); }
    .ej-submit-btn:active { transform: translateY(0); }

    /* Alert */
    .ej-alert {
        background: #fef2f2; border: 1.5px solid #fecaca;
        border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 20px;
    }
    .ej-alert ul { margin: 0; padding-left: 18px; color: var(--danger); font-size: 0.88rem; font-weight: 600; }

    /* Icon colors */
    .icon-blue   { background: #dbeafe; color: #2563eb; }
    .icon-violet { background: #ede9fe; color: #7c3aed; }
    .icon-green  { background: #dcfce7; color: #16a34a; }
    .icon-amber  { background: #fef3c7; color: #d97706; }
    .icon-rose   { background: #ffe4e6; color: #e11d48; }
    .icon-sky    { background: #e0f2fe; color: #0284c7; }
    .icon-teal   { background: #ccfbf1; color: #0d9488; }
</style>

<div class="ej-wrapper">

    @if ($errors->any())
    <div class="ej-alert">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    {{-- Page Header --}}
    <div class="ej-page-header">
        <div class="ej-page-title">
            <i class="fas fa-plus-circle" style="color:var(--primary)"></i>
            Create New Job
        </div>
        <a href="{{ route('all.roles.jobs') }}" class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-arrow-left"></i> Back to Jobs
        </a>
    </div>

    <form action="{{ route('admin.store.job') }}" method="POST" id="JobForm" enctype="multipart/form-data">
        @csrf

        <div class="ej-layout">

            {{-- ===== LEFT COLUMN ===== --}}
            <div>

                {{-- BASIC INFO --}}
                <div class="ej-card">
                    <div class="ej-card-header">
                        <div class="header-icon icon-blue"><i class="fas fa-info-circle"></i></div>
                        <h5>Basic Information</h5>
                    </div>
                    <div class="ej-card-body">

                        <div class="ej-row ej-row-2 ej-mb">
                            <div>
                                <label class="ej-label">Job Title <span class="req">*</span></label>
                                <input type="text" class="ej-input" name="title" id="title"
                                    placeholder="e.g. Senior Lead Educator"
                                    value="{{ old('title') }}">
                                <div class="ej-error-msg" id="err-title">Job title is required.</div>
                            </div>
                            <div>
                                <label class="ej-label">Category</label>
                                <select class="ej-select" name="job_category">
                                    <option value="">Select category</option>
                                    @foreach([
                                        'Childcare Centre Manager',
                                        'Childcare Assistant Centre Manager',
                                        'Early Childhood Teacher',
                                        'Childcare Lead Educator',
                                        'Childcare Assistant Educator',
                                        'Childcare Cook',
                                    ] as $cat)
                                    <option value="{{ $cat }}" {{ old('job_category') == $cat ? 'selected' : '' }}>{{ $cat }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="ej-mb">
                            <label class="ej-label">Description <span class="req">*</span></label>
                            <div class="ej-quill-wrap" id="wrap-description">
                                <div id="editor-description"></div>
                            </div>
                            <input type="hidden" name="description" id="description1">
                            <div class="ej-error-msg" id="err-description">Description is required.</div>
                        </div>

                        <div class="ej-mb">
                            <label class="ej-label">Responsibilities</label>
                            <div class="ej-quill-wrap">
                                <div id="editor-responsibilities"></div>
                            </div>
                            <input type="hidden" name="responsibilities" id="responsibilities">
                        </div>

                        <div>
                            <label class="ej-label">Requirements</label>
                            <div class="ej-quill-wrap">
                                <div id="editor-requirements"></div>
                            </div>
                            <input type="hidden" name="requirements" id="requirements">
                        </div>

                    </div>
                </div>
                   
				   
				   {{-- PRINCIPAL SELECTOR --}}
		<div class="ej-mb">
			<label class="ej-label">Post on behalf of <span class="req">*</span></label>
			<select class="ej-select" name="principal_id" id="principal_id">
				<option value="">— Select Principal —</option>
				@foreach($principals as $principal)
					<option value="{{ $principal->id }}" {{ old('principal_id') == $principal->id ? 'selected' : '' }}>
						{{ $principal->name }} 
						@if($principal->email)
							({{ $principal->email }})
						@endif
					</option>
				@endforeach
			</select>
			<div class="ej-error-msg" id="err-principal_id">Please select a principal.</div>
		</div>


                {{-- JOB TYPE --}}
                <div class="ej-card">
                    <div class="ej-card-header">
                        <div class="header-icon icon-violet"><i class="fas fa-layer-group"></i></div>
                        <h5>Job Type & Work Mode</h5>
                    </div>
                    <div class="ej-card-body">
                        <div class="ej-row ej-row-4">
                            <div>
                                <label class="ej-label">Job Type <span class="req">*</span></label>
                                <select class="ej-select" id="job_type" name="job_type">
                                    <option value="full_time"  {{ old('job_type') == 'full_time'  ? 'selected' : '' }}>Full Time</option>
                                    <option value="part_time"  {{ old('job_type') == 'part_time'  ? 'selected' : '' }}>Part Time</option>
                                    <option value="contract"   {{ old('job_type') == 'contract'   ? 'selected' : '' }}>Contract</option>
                                    <option value="internship" {{ old('job_type') == 'internship' ? 'selected' : '' }}>Internship</option>
                                    <option value="freelance"  {{ old('job_type') == 'freelance'  ? 'selected' : '' }}>Freelance</option>
                                </select>
                                <div class="ej-error-msg" id="err-job_type">Required.</div>
                            </div>
                            <div>
                                <label class="ej-label">Work Mode <span class="req">*</span></label>
                                <select class="ej-select" id="work_mode" name="work_mode">
                                    <option value="remote" {{ old('work_mode') == 'remote' ? 'selected' : '' }}>Remote</option>
                                    <option value="onsite" {{ old('work_mode') == 'onsite' ? 'selected' : '' }}>Onsite</option>
                                    <option value="hybrid" {{ old('work_mode') == 'hybrid' ? 'selected' : '' }}>Hybrid</option>
                                </select>
                                <div class="ej-error-msg" id="err-work_mode">Required.</div>
                            </div>
                            <div>
                                <label class="ej-label">Exp. Min (yrs)</label>
                                <input type="number" class="ej-input" name="experience_min" value="{{ old('experience_min') }}" min="0" placeholder="0">
                            </div>
                            <div>
                                <label class="ej-label">Exp. Max (yrs)</label>
                                <input type="number" class="ej-input" name="experience_max" value="{{ old('experience_max') }}" min="0" placeholder="0">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- LOCATION --}}
                <div class="ej-card">
                    <div class="ej-card-header">
                        <div class="header-icon icon-green"><i class="fas fa-map-marker-alt"></i></div>
                        <h5>Location</h5>
                    </div>
                    <div class="ej-card-body">
                        <div class="ej-mb">
                            <label class="ej-label">Address</label>
                            <input type="text" class="ej-input" name="address" value="{{ old('address') }}" placeholder="Street address">
                        </div>
                        <div class="ej-row ej-row-3">
                            <div>
                                <label class="ej-label">City <span class="req">*</span></label>
                                <input type="text" class="ej-input" name="city" id="city" value="{{ old('city') }}" placeholder="City">
                                <div class="ej-error-msg" id="err-city">City is required.</div>
                            </div>
                            <div>
                                <label class="ej-label">State</label>
                                <input type="text" class="ej-input" name="state" value="{{ old('state') }}" placeholder="State">
                            </div>
                            <div>
                                <label class="ej-label">Country <span class="req">*</span></label>
                                <input type="text" class="ej-input" name="country" id="country" value="{{ old('country') }}" placeholder="Country">
                                <div class="ej-error-msg" id="err-country">Country is required.</div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- SALARY --}}
                <div class="ej-card">
                    <div class="ej-card-header">
                        <div class="header-icon icon-amber"><i class="fas fa-dollar-sign"></i></div>
                        <h5>Salary</h5>
                    </div>
                    <div class="ej-card-body">
                        <div class="ej-row ej-row-3 ej-mb">
                            <div>
                                <label class="ej-label">Min Salary</label>
                                <input type="number" class="ej-input" name="salary_min" value="{{ old('salary_min') }}" placeholder="0">
                            </div>
                            <div>
                                <label class="ej-label">Max Salary</label>
                                <input type="number" class="ej-input" name="salary_max" value="{{ old('salary_max') }}" placeholder="0">
                            </div>
                            <div>
                                <label class="ej-label">Salary Type</label>
                                <select class="ej-select" name="salary_type">
                                    @foreach(['hourly','weekly','monthly','yearly'] as $type)
                                    <option value="{{ $type }}" {{ old('salary_type') == $type ? 'selected' : '' }}>{{ ucfirst($type) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <label class="ej-check-label">
                            <input type="checkbox" name="salary_negotiable" {{ old('salary_negotiable') ? 'checked' : '' }}>
                            Salary is negotiable
                        </label>
                    </div>
                </div>

                {{-- APPLICATION --}}
                <div class="ej-card">
                    <div class="ej-card-header">
                        <div class="header-icon icon-sky"><i class="fas fa-paper-plane"></i></div>
                        <h5>Application Settings</h5>
                    </div>
                    <div class="ej-card-body">
                        <div class="ej-mb">
                            <label class="ej-label">Application Type <span class="req">*</span></label>
                            <select class="ej-select" name="apply_type" id="apply_type" onchange="toggleApplyUrl()">
                                <option value="internal" {{ old('apply_type') == 'internal' ? 'selected' : '' }}>Internal</option>
                                <option value="external" {{ old('apply_type') == 'external' ? 'selected' : '' }}>External</option>
                            </select>
                            <div class="ej-error-msg" id="err-apply_type">Required.</div>
                        </div>
                        <div class="ej-mb d-none" id="apply_url_field">
                            <label class="ej-label">Application URL</label>
                            <input type="url" class="ej-input" name="apply_url" id="apply_url" value="{{ old('apply_url') }}" placeholder="https://...">
                        </div>
                        <div>
                            <label class="ej-label">Application Deadline</label>
                            <input type="datetime-local" class="ej-input" name="expires_at" value="{{ old('expires_at') }}">
                        </div>
                    </div>
                </div>

            </div>{{-- end left --}}


            {{-- ===== RIGHT COLUMN ===== --}}
            <div>

                {{-- STATUS --}}
                <div class="ej-card">
                    <div class="ej-card-header">
                        <div class="header-icon icon-teal"><i class="fas fa-toggle-on"></i></div>
                        <h5>Status</h5>
                    </div>
                    <div class="ej-card-body">
                        <select class="ej-select" name="status" id="statusSelect" onchange="updateStatusDot()">
                            <option value="draft"      {{ old('status','draft') == 'draft'      ? 'selected' : '' }}>Draft</option>
                            <option value="published"  {{ old('status') == 'published'           ? 'selected' : '' }}>Published</option>
                            <option value="closed"     {{ old('status') == 'closed'              ? 'selected' : '' }}>Closed</option>
                        </select>
                        <div style="margin-top:10px; display:flex; align-items:center; gap:8px;">
                            <span class="status-dot draft" id="statusDot"></span>
                            <span style="font-size:0.8rem; font-weight:700; color:var(--text-muted)" id="statusText">Draft</span>
                        </div>
                    </div>
                </div>

                {{-- IMAGES --}}
                <div class="ej-card">
                    <div class="ej-card-header">
                        <div class="header-icon icon-rose"><i class="fas fa-images"></i></div>
                        <h5>Images</h5>
                    </div>
                    <div class="ej-card-body">
                        <input type="file" class="ej-input ej-mb" style="padding:8px 10px; font-size:0.85rem;"
                            multiple name="images[]" id="imgInput" accept="image/*">
                        <div id="imgPreview" class="d-flex flex-wrap gap-2"></div>
                    </div>
                </div>

                {{-- VIDEO --}}
                <div class="ej-card">
                    <div class="ej-card-header">
                        <div class="header-icon icon-violet"><i class="fas fa-video"></i></div>
                        <h5>Video Links</h5>
                    </div>
                    <div class="ej-card-body" id="videoFields">
                        <input type="url" name="videos" class="ej-input ej-mb" placeholder="https://youtube.com/...">
                       
                    </div>
                </div>

                {{-- SKILLS --}}
                <div class="ej-card">
                    <div class="ej-card-header">
                        <div class="header-icon icon-blue"><i class="fas fa-tags"></i></div>
                        <h5>Skills</h5>
                    </div>
                    <div class="ej-card-body">
                        <input type="text" class="ej-input ej-mb" id="skillInput" placeholder="Type skill & press Enter">
                        <div id="skillList" class="d-flex flex-wrap gap-2"></div>
                        <input type="hidden" name="skills" id="skillsInput">
                    </div>
                </div>

                {{-- SUBMIT --}}
                <button type="button" class="ej-submit-btn" onclick="handleSubmit()">
                    <i class="fas fa-plus-circle"></i> Create Job
                </button>

            </div>{{-- end right --}}

        </div>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>

<script>
/* ===================== QUILL EDITORS ===================== */
const quillConfig = {
    theme: 'snow',
    modules: {
        toolbar: [
            [{ 'header': [1, 2, 3, false] }],
            ['bold', 'italic', 'underline'],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            ['link'],
            ['clean']
        ]
    }
};

const quillDescription      = new Quill('#editor-description',      quillConfig);
const quillResponsibilities = new Quill('#editor-responsibilities',  quillConfig);
const quillRequirements     = new Quill('#editor-requirements',      quillConfig);

// Restore old() values on validation failure
quillDescription.root.innerHTML      = {!! json_encode(old('description', '')) !!};
quillResponsibilities.root.innerHTML = {!! json_encode(old('responsibilities', '')) !!};
quillRequirements.root.innerHTML     = {!! json_encode(old('requirements', '')) !!};


/* ===================== TOGGLE APPLY URL ===================== */
function toggleApplyUrl() {
    const type = document.getElementById('apply_type').value;
    document.getElementById('apply_url_field').classList.toggle('d-none', type !== 'external');
}
toggleApplyUrl();


/* ===================== STATUS DOT ===================== */
function updateStatusDot() {
    const val  = document.getElementById('statusSelect').value;
    const dot  = document.getElementById('statusDot');
    const text = document.getElementById('statusText');
    dot.className  = 'status-dot ' + val;
    text.textContent = val.charAt(0).toUpperCase() + val.slice(1);
}
updateStatusDot();





/* ===================== SKILLS ===================== */
document.addEventListener("DOMContentLoaded", function () {
    let skills = [];
    const input  = document.getElementById('skillInput');
    const list   = document.getElementById('skillList');
    const hidden = document.getElementById('skillsInput');

    // Restore old() skills on validation failure
    try {
        const oldSkills = {!! json_encode(old('skills', '')) !!};
        if (oldSkills) skills = JSON.parse(oldSkills);
        if (!Array.isArray(skills)) skills = [];
    } catch(e) { skills = []; }

    input.addEventListener('keydown', function (e) {
        if (e.key !== 'Enter') return;
        e.preventDefault();
        const val = this.value.trim();
        if (!val || skills.includes(val)) return;
        skills.push(val);
        this.value = '';
        renderSkills();
    });

    function renderSkills() {
        list.innerHTML = '';
        skills.forEach((skill, i) => {
            const span = document.createElement('span');
            span.className = 'skill-badge';
            span.innerHTML = `${skill} <button type="button" onclick="removeSkill(${i})" aria-label="Remove">×</button>`;
            list.appendChild(span);
        });
        hidden.value = JSON.stringify(skills);
    }

    window.removeSkill = function (i) {
        skills.splice(i, 1);
        renderSkills();
    };

    renderSkills();
});


/* ===================== IMAGE PREVIEW ===================== */
document.getElementById('imgInput').addEventListener('change', function () {
    const preview = document.getElementById('imgPreview');
    preview.innerHTML = '';
    Array.from(this.files).forEach(file => {
        if (!file.type.startsWith('image/')) return;
        const reader = new FileReader();
        reader.onload = e => {
            const wrap = document.createElement('div');
            wrap.className = 'img-thumb-wrap';
            wrap.innerHTML = `<img src="${e.target.result}" alt="preview">`;
            preview.appendChild(wrap);
        };
        reader.readAsDataURL(file);
    });
});


/* ===================== VALIDATION + SUBMIT ===================== */
function validateField(id, errId) {
    const el  = document.getElementById(id);
    const err = document.getElementById(errId);
    const val = el ? el.value.trim() : '';
    const invalid = !val;
    if (el) el.classList.toggle('is-invalid', invalid);
    if (err) err.style.display = invalid ? 'block' : 'none';
    return !invalid;
}

function validateQuill(quillInstance, wrapperId, errId) {
    const text    = quillInstance.getText().trim();
    const wrap    = document.getElementById(wrapperId);
    const err     = document.getElementById(errId);
    const invalid = !text;
    if (wrap) wrap.classList.toggle('is-invalid', invalid);
    if (err)  err.style.display = invalid ? 'block' : 'none';
    return !invalid;
}

// Live clear errors on input
['title', 'city', 'country'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.addEventListener('input', () => {
        el.classList.remove('is-invalid');
        const err = document.getElementById('err-' + id);
        if (err) err.style.display = 'none';
    });
});

function handleSubmit() {
    // Sync Quill content to hidden inputs
    document.getElementById('description1').value    = quillDescription.root.innerHTML;
    document.getElementById('responsibilities').value = quillResponsibilities.root.innerHTML;
    document.getElementById('requirements').value    = quillRequirements.root.innerHTML;

    const checks = [
        validateField('title',       'err-title'),
        validateQuill(quillDescription, 'wrap-description', 'err-description'),
        validateField('job_type',    'err-job_type'),
        validateField('work_mode',   'err-work_mode'),
        validateField('city',        'err-city'),
        validateField('country',     'err-country'),
        validateField('apply_type',  'err-apply_type'),
		validateField('principal_id', 'err-principal_id'),
    ];

    const allValid = checks.every(Boolean);

    if (!allValid) {
        const firstErr = document.querySelector('.is-invalid, .ej-quill-wrap.is-invalid');
        if (firstErr) firstErr.scrollIntoView({ behavior: 'smooth', block: 'center' });
        return;
    }

    document.getElementById('JobForm').submit();
}
</script>

@endsection