@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.update.job',$job->id) }}" 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">Edit Job</h4>
                                <div class="card-tools">
                                    <a href="{{ route('principal.my.jobs') }}" 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" value="{{ old('title', $job->title) }}">
                                    </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" {{ $job->job_category == 'Childcare Centre Manager' ? 'selected' : '' }}>Childcare Centre Manager</option>

                                            <option value="Childcare Assistant Centre Manager" {{ $job->job_category == 'Childcare Assistant Centre Manager' ? 'selected' : '' }}>Childcare Assistant Centre
                                                Manager</option>

                                            <option value="Early Childhood Teacher" {{ $job->job_category == 'Early Childhood Teacher' ? 'selected' : '' }}>Early Childhood Teacher</option>

                                            <option value="Childcare Lead Educator" {{ $job->job_category == 'Childcare Lead Educator' ? 'selected' : '' }}>Childcare Lead Educator</option>

                                            <option value="Childcare Assistant Educator" {{ $job->job_category == 'Childcare Assistant Educator' ? 'selected' : '' }}>Childcare Assistant Educator
                                            </option>

                                            <option value="Childcare Cook" {{ $job->job_category == 'Childcare Cook' ? 'selected' : '' }}>Childcare Cook</option>

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

                                <div class="mb-3">
                                    <label class="form-label">Description *</label>
                                    <textarea class="form-control" name="description" rows="4">{{ old('description', $job->description) }}</textarea>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Responsibilities</label>
                                    <textarea class="form-control" name="responsibilities" rows="3">{{ old('responsibilities', $job->responsibilities) }}</textarea>
                                </div>

                                <div>
                                    <label class="form-label">Requirements</label>
                                    <textarea class="form-control" name="requirements" rows="3">{{ old('requirements', $job->requirements) }}</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="row">
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Job Type *</label>
                                        <select class="form-select" id="job_type" name="job_type">
                                            <option value="full_time" {{ $job->job_type == 'full_time' ? 'selected' : '' }}>Full Time</option>
                                            <option value="part_time" {{ $job->job_type == 'part_time' ? 'selected' : '' }}>Part Time</option>
                                            <option value="contract" {{ $job->job_type == 'contract' ? 'selected' : '' }}>Contract</option>
                                            <option value="internship" {{ $job->job_type == 'internship' ? 'selected' : '' }}>Internship</option>
                                            <option value="freelance" {{ $job->job_type == 'freelance' ? 'selected' : '' }}>Freelance</option>
                                        </select>
                                    </div>

                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Work Mode *</label>
                                        <select class="form-select" id="work_mode" name="work_mode">
                                            <option value="remote" {{ $job->work_mode == 'remote' ? 'selected' : '' }}>Remote</option>
                                            <option value="onsite" {{ $job->work_mode == 'onsite' ? 'selected' : '' }}>Onsite</option>
                                            <option value="hybrid" {{ $job->work_mode == 'hybrid' ? 'selected' : '' }}>Hybrid</option>
                                        </select>
                                    </div>

                                
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Experience Min</label>
                                        <input type="number" class="form-control" id="exp_min" name="experience_min" value="{{ $job->experience_min }}">
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Experience Max</label>
                                        <input type="number" class="form-control" id="exp_max" name="experience_max" value="{{ $job->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" value="{{ $job->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" value="{{ $job->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" value="{{ $job->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" value="{{ $job->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-4 mb-3">
                                        <label class="form-label">Min Salary</label>
                                        <input type="number" name="salary_min" class="form-control" id="sal_min" value="{{ $job->salary_min }}">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">Max Salary</label>
                                        <input type="number" name="salary_max" class="form-control" id="sal_max" value="{{ $job->salary_max }}">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">Salary Type </label>
                                        <select class="form-select" name="salary_type" id="salary_type">
                                            <option value="hourly" {{ $job->salary_type == 'hourly' ? 'selected' : '' }}>Hourly</option>
                                            <option value="weekly" {{ $job->salary_type == 'weekly' ? 'selected' : '' }}>Weekly</option>
                                            <option value="monthly"{{ $job->salary_type == 'monthly' ? 'selected' : '' }}>Monthly</option>
                                            <option value="yearly" {{ $job->salary_type == 'yearly' ? 'selected' : '' }}>Yearly</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-check">
                                    <input class="form-check-input" name="salary_negotiable" type="checkbox" id="sal_neg" {{ $job->salary_negotiable ? 'checked' : '' }}>
                                    <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" {{ $job->apply_type == 'internal' ? 'selected' : '' }}>Internal</option>
                                        <option value="external" {{ $job->apply_type == 'external' ? 'selected' : '' }}>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" value="{{ $job->apply_url }}">
                                </div>

                                <div>
                                    <label class="form-label">Deadline</label>
                                    <input type="datetime-local" name="expires_at" class="form-control" id="expires_at" value="{{ $job->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" {{ $job->status == 'draft' ? 'selected' : '' }}>Draft</option>
                                    <option value="published" {{ $job->status == 'published' ? 'selected' : '' }}>Published</option>
                                    <option value="closed" {{ $job->status == 'closed' ? 'selected' : '' }}>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">

                                @foreach($job->media->where('type','image') as $media)
                                    <div class="position-relative" id="image-{{ $media->id }}">
                                        <img src="{{ asset('storage/'.$media->file_path) }}" 
                                            style="width:120px;height:120px;object-fit:cover;" 
                                            class="rounded border">

                                        <!-- Delete Button -->
                                        <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0"
                                             onclick="deleteImage({{ $media->id }})">
                                            ×
                                        </button>

                                        <input type="hidden" name="existing_images[]" value="{{ $media->id }}">
                                    </div>
                                @endforeach

                                </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">

                                    @foreach($job->media->where('type','video') as $video)
                                        <input type="url" name="videos" 
                                            value="{{ $video->video_url }}" 
                                            class="form-control mb-2">
                                    @endforeach

                                </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()">Update 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 */

document.addEventListener("DOMContentLoaded", function () {

    let skills = [];

    try {
        let raw = @json($job->skills);

        // ✅ FIX: parse twice if needed
        if (typeof raw === "string") {
            skills = JSON.parse(raw);
        } else {
            skills = raw;
        }

        if (!Array.isArray(skills)) skills = [];

    } catch (e) {
        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);
        this.value = '';

        updateUI();
    });

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

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

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

            badge.querySelector('button').addEventListener('click', function () {
                removeSkill(index);
            });

            list.appendChild(badge);
        });

        hiddenInput.value = JSON.stringify(skills);
    }

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

    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);
                    });
                }
            });

        });


function deleteImage(id) {

    Swal.fire({
        title: 'Are you sure?',
        text: "Do you want to delete this image?",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, delete it!'
    }).then((result) => {

        if (result.isConfirmed) {

            $.ajax({
                url: '/public/childcare/centre/director/job-media/' + id,
                type: 'post',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (res) {

                    if (res.status) {

                        // Remove from UI
                        $('#image-' + id).remove();

                        Swal.fire(
                            'Deleted!',
                            res.message,
                            'success'
                        );

                    } else {
                        Swal.fire('Error', res.message, 'error');
                    }
                },
                error: function (xhr) {
                    Swal.fire('Error', 'Something went wrong', 'error');
                }
            });

        }
    });
}
        
    </script>
@endsection