@extends('layouts.app')
@section('content')
    <div class="container-fluid">
        <div class="inside-body-campus">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <form action="{{ route('principal.store.job') }}" method="POST" id="JobForm" enctype="multipart/form-data">
                @csrf
                <div class="row g-4">

                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2 py-3">
                                <h4 class="m-0">Create New Job</h4>
                                {{-- <div class="card-tools">
                        <a href="" class="btn btn-secondary btn-sm">
                            <i class="fas fa-arrow-left"></i> Back
                        </a>
                    </div> --}}
                            </div>
                        </div>
                    </div>
                    <!-- LEFT SIDE -->
                    <div class="col-lg-8">

                        <!-- BASIC INFO -->
                        <div class="card shadow-sm mb-3">
                            <div class="card-header fw-semibold">Basic Information</div>
                            <div class="card-body">

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Job Title *</label>
                                        <input type="text" class="form-control" name="title" id="title"
                                            placeholder="Senior Frontend Engineer">
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Category</label>
                                        <select class="form-select" name="job_category">
                                            <option>Select category</option>
                                            <option value="Childcare Centre Manager">Childcare Centre Manager</option>
                                            <option value="Childcare Assistant Centre Manager">Childcare Assistant Centre
                                                Manager</option>
                                            <option value="Early Childhood Teacher">Early Childhood Teacher</option>
                                            <option value="Childcare Lead Educator">Childcare Lead Educator</option>
                                            <option value="Childcare Assistant Educator">Childcare Assistant Educator
                                            </option>
                                            <option value="Childcare Cook">Childcare Cook</option>

                                        </select>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Description *</label>
                                    <textarea class="form-control" name="description" rows="4"></textarea>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Responsibilities</label>
                                    <textarea class="form-control" name="responsibilities" rows="3"></textarea>
                                </div>

                                <div>
                                    <label class="form-label">Requirements</label>
                                    <textarea class="form-control" name="requirements" rows="3"></textarea>
                                </div>

                            </div>
                        </div>

                        <!-- JOB TYPE -->
                        <div class="card shadow-sm mb-3">
                            <div class="card-header fw-semibold">Job Type & Work Mode</div>
                            <div class="card-body">

                                <div class="mb-3">
                                    <label class="form-label">Job Type *</label>
                                    <select class="form-select" id="job_type" name="job_type">
                                        <option value="full_time">Full Time</option>
                                        <option value="part_time">Part Time</option>
                                        <option value="contract">Contract</option>
                                        <option value="internship">Internship</option>
                                        <option value="freelance">Freelance</option>
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Work Mode *</label>
                                    <select class="form-select" id="work_mode" name="work_mode">
                                        <option value="remote">Remote</option>
                                        <option value="onsite">Onsite</option>
                                        <option value="hybrid">Hybrid</option>
                                    </select>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Experience Min</label>
                                        <input type="number" class="form-control" id="exp_min" name="experience_min">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Experience Max</label>
                                        <input type="number" class="form-control" id="exp_max" name="experience_max">
                                    </div>
                                </div>

                            </div>
                        </div>

                        <!-- LOCATION -->
                        <div class="card shadow-sm mb-3">
                            <div class="card-header fw-semibold">Location</div>
                            <div class="card-body">

                                <div class="mb-3">
                                    <label class="form-label">Address</label>
                                    <input type="text" class="form-control" name="address" id="address">
                                </div>

                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">City *</label>
                                        <input type="text" class="form-control" name="city" id="city">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">State</label>
                                        <input type="text" class="form-control" name="state" id="state">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">Country *</label>
                                        <input type="text" class="form-control" name="country" id="country">
                                    </div>
                                </div>

                            </div>
                        </div>

                        <!-- SALARY -->
                        <div class="card shadow-sm mb-3">
                            <div class="card-header fw-semibold">Salary</div>
                            <div class="card-body">

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Min Salary</label>
                                        <input type="number" name="salary_min" class="form-control" id="sal_min">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Max Salary</label>
                                        <input type="number" name="salary_max" class="form-control" id="sal_max">
                                    </div>
                                </div>

                                <div class="form-check">
                                    <input class="form-check-input" name="salary_negotiable" type="checkbox" id="sal_neg">
                                    <label class="form-check-label">Salary negotiable</label>
                                </div>

                            </div>
                        </div>

                        <!-- APPLICATION -->
                        <div class="card shadow-sm">
                            <div class="card-header fw-semibold">Application Settings</div>
                            <div class="card-body">

                                <div class="mb-3">
                                    <label class="form-label">Application Type *</label>
                                    <select class="form-select" name="apply_type" id="apply_type" onchange="toggleApplyUrl()">
                                        <option value="internal">Internal</option>
                                        <option value="external">External</option>
                                    </select>
                                </div>

                                <div class="mb-3 d-none" id="apply_url_field">
                                    <label class="form-label">Application URL</label>
                                    <input type="url" class="form-control" name="apply_url" id="apply_url">
                                </div>

                                <div>
                                    <label class="form-label">Deadline</label>
                                    <input type="datetime-local" name="expires_at" class="form-control" id="expires_at">
                                </div>

                            </div>
                        </div>

                    </div>

                    <!-- RIGHT SIDE -->
                    <div class="col-lg-4">

                        <!-- STATUS -->
                        <div class="card shadow-sm mb-3">
                            <div class="card-header fw-semibold">Status</div>
                            <div class="card-body">
                                <select class="form-select" name="status">
                                    <option value="draft">Draft</option>
                                    <option value="published">Published</option>
                                    <option value="closed">Closed</option>
                                </select>
                            </div>
                        </div>

                        <!-- IMAGE -->
                        <div class="card shadow-sm mb-3">
                            <div class="card-header fw-semibold">Images</div>
                            <div class="card-body">

                                <input type="file" class="form-control mb-2" multiple name="images[]" id="imgInput">

                                <div id="imgPreview" class="d-flex flex-wrap gap-2"></div>

                            </div>
                        </div>

                        <!-- VIDEO -->
                        <div class="card shadow-sm mb-3">
                            <div class="card-header fw-semibold">Video Links</div>
                            <div class="card-body" id="videoFields">

                                <input type="url" name="videos" class="form-control mb-2"
                                    placeholder="Video URL"
                                    >

                            </div>
                        </div>

                        <!-- SKILLS -->
                        <div class="card shadow-sm mb-3">
                            <div class="card-header fw-semibold">Skills</div>
                            <div class="card-body">

                                <input type="text" class="form-control" id="skillInput"
                                    placeholder="Press Enter to add skill">

                                <div id="skillList" class="mt-2 d-flex flex-wrap gap-2"></div>
                                <input type="hidden" name="skills" id="skillsInput">
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary w-100" onclick="handleSubmit()">Create Job</button>

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

    <script>
        function toggleApplyUrl() {
            let type = document.getElementById('apply_type').value;
            document.getElementById('apply_url_field').classList.toggle('d-none', type !== 'external');
        }

        /* Skills */
         const skills = [];
    const input = document.getElementById('skillInput');
    const list = document.getElementById('skillList');
    const hiddenInput = document.getElementById('skillsInput');

    input.addEventListener('keydown', function(e) {
        if (e.key !== 'Enter') return;
        e.preventDefault();

        let val = this.value.trim();
        if (!val || skills.includes(val)) return;

        skills.push(val);
        updateUI();

        this.value = '';
    });

    function updateUI() {
        list.innerHTML = '';

        skills.forEach((skill, index) => {
            let badge = document.createElement('span');
            badge.className = 'badge bg-primary d-flex align-items-center me-2';

            badge.innerHTML = `
                ${skill}
                <button type="button" class="btn-close btn-close-white ms-2"
                    onclick="removeSkill(${index})"></button>
            `;

            list.appendChild(badge);
        });

        // 🔥 Sync with hidden input
        hiddenInput.value = JSON.stringify(skills);
    }

    function removeSkill(index) {
        skills.splice(index, 1);
        updateUI();
    }

        // /* Videos */
        // function addVideoField(el) {
        //     if (el.value.trim() !== '') {
        //         let input = document.createElement('input');
        //         input.type = 'url';
        //         input.name = 'video[]';
        //         input.className = 'form-control mt-2';
        //         input.placeholder = 'Add another URL';
        //         input.onblur = () => addVideoField(input);
        //         document.getElementById('videoFields').appendChild(input);
        //     }
        // }

        /* Submit */
        function handleSubmit() {
            let title = document.getElementById('title').value;
            if (!title) {
                alert('Title is required');
                return;
            }

            // integrate with your AJAX here
            console.log('Submit job');
        }
    </script>
    <script>
        $(document).ready(function() {

            $('#imgInput').on('change', function() {
                let preview = $('#imgPreview');
                preview.html(''); // clear old previews

                let files = this.files;

                if (files) {
                    $.each(files, function(index, file) {

                        if (!file.type.startsWith('image/')) return;

                        let reader = new FileReader();

                        reader.onload = function(e) {
                            let img = `
                        <div class="position-relative">
                            <img src="${e.target.result}" 
                                 class="rounded border" 
                                 style="width:120px;height:120px;object-fit:cover;">
                        </div>
                    `;
                            preview.append(img);
                        };

                        reader.readAsDataURL(file);
                    });
                }
            });

        });


        
    </script>
@endsection