@push('custom-styles')
<style>
    .ck-editor {
        width: 100% !important;
        overflow: hidden;
    }
</style>
@endpush
<div class="" x-data="{ showForm: @entangle('showForm') }">
    {{-- <x-loader /> --}}
    @section('title')
    {{ $title }}
    @endsection
    <x-alert class="mt-5">
        Total Jobs: {{ App\Models\Job::totalJobs() }}
    <br>
    Active Jobs: {{ App\Models\Job::activeJobs() }}
    <br>
    Expired Jobs: {{ App\Models\Job::expiredJobs() }}
    <br>
    Jobs Expiring in next week: {{ App\Models\Job::jobsExpiringInNextWeek() }}
    </x-alert>

    {{--
    <x-errors /> --}}
    <div x-show="showForm" x-trap="showForm" x-cloak x-transition x-data="{ showMailForm: @entangle('showMailForm') }">
        <div class="flex justify-end mb-5 mt-3">
            <x-button green sm x-on:click="showForm = ! showForm" class="disabled:bg-slate-800"
                wire:loading.attr="disabled">Show Jobs</x-button>
        </div>
        <div x-show="!showMailForm" class="grid grid-cols-1 md:grid-cols-2 gap-5 $showForm ? 'hidden' : ''">
            <div>
                <h3 class="text-2xl text-center dark:text-slate-300">Job Information</h3>
                <hr class="my-5 dark:opacity-30">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5 bg-white dark:bg-opacity-5 shadow-md rounded-lg p-10">
                    <div class="col-span-full -mb-3 text-negative-600">
                        Only red fields are mandatory
                    </div>
                    <div class=" flex justify-start items-center col-span-full">
                        <x-label class="mr-3">Vacacncy For</x-label>
                        <x-radio name="vacancy_for" id="vacancy_for_1" value="Employer" wire:model.live='job.vacancy_for'
                            label='Employer' checked />
                        <x-radio name="vacancy_for" id="vacancy_for_2" value="Institute" wire:model.live='job.vacancy_for'
                            label='Institute' class='ml-5' />
                        <x-radio name="vacancy_for" id="vacancy_for_3" value="Internal" wire:model.live='job.vacancy_for'
                            label='Internal' class='ml-5' />
                    </div>
                    <div class="">
                        <x-label class="text-negative-600 dark:text-negative-600 mb-1">Admin Email (BCc)</x-label>
                        <x-input label="" type="email" wire:model.live.debounce.150ms='job.admin_email' required />
                    </div>
                    <div class="">
                        <x-label class="text-negative-600 dark:text-negative-600 mb-1">Organization Name</x-label>
                        <x-input label="" wire:model.live.debounce='job.company_name' class="text-negative-600"
                            required />
                    </div>
                    <div class="">
                        <x-label class="text-negative-600 dark:text-negative-600 mb-1">Organization Email</x-label>
                        <x-input label="" type="email" wire:model.live.live.debounce='job.company_email' required />

                    </div>
                    <div class="col-span-full">
                        <x-label class="text-negative-600 dark:text-negative-600 mb-1">Job Title</x-label>
                        <x-input label="" wire:model.live.debounce.150ms="job.title" required />
                    </div>
                    <div class="col-span-full jobDescription" wire:ignore>
                        <x-label class="text-negative-600 dark:text-negative-600 mb-1">Job Description</x-label>
                        <x-textarea label="" wire:model.live.debounce.150ms="job.description" id="description" required>
                        </x-textarea>
                    </div>
                    @error('job.description')
                    <p class="mt-2 text-sm text-negative-600">
                        The description is required.
                    </p>
                    @enderror
                    <div class="col-span-1 block">
                        <x-label class="text-negative-600 dark:text-negative-600 mb-1">Industry</x-label>
                        <x-select label="" placeholder="Select one" :options="$industries"
                            wire:model.live.debounce="job.industry_id" option-label="name" option-value="id"
                            wire:key="'industries'.$keyCounter" />
                    </div>
                    <div class="col-span-1">
                        <x-input label="Designation" wire:model.live.debounce.150ms="job.designation" />
                    </div>
                    <div class="grid grid-cols-2 gap-5">
                        <x-select label="Experience (Min)" placeholder="Select one" :options="$jobExperiences"
                            wire:model.live.debounce="job.experience_min" option-label="job_experience"
                            option-value="year" />
                        <x-select label="Experience (Max)" placeholder="Select one" :options="$jobExperiences"
                            wire:model.live.debounce="job.experience_max" option-label="job_experience"
                            option-value="year" />
                    </div>
                    <div class="grid grid-cols-2 gap-5">
                        <div wire:ignore>
                            <x-select label="Job Type" placeholder="Select one" :options="$jobTypes"
                                wire:model.live="job.job_type_id" option-label="job_type" option-value="id"
                                :wire.key="'job_type'.$keyCounter" />
                        </div>
                        <div>
                            <div wire:ignore>
                                <x-select label="Gender" placeholder="No Preference" wire:model.live="job.gender"
                                    :options="['Male', 'Female', 'Any']" searchable="0">
                                </x-select>
                            </div>
                        </div>
                    </div>
                    <div class="">
                        <x-input label="Salary" description="Leave empty for undisclosed" placeholder="20000-30000"
                            wire:model.live.debounce.150ms="job.salary_from" />
                    </div>
                    <x-datetime-picker label="Expiry Date" display-format="YYYY-MM-DD" wire:model="job.expiry_at"
                        without-time />
                    <div class="">
                        <x-label class="text-negative-600 dark:text-negative-600 mb-1">State</x-label>
                        <x-select label="" placeholder="Select one" :options="$states"
                            wire:model.live.debounce="job.state" :wire.key="'state'.$keyCounter" clearable="0" />
                    </div>
                    <div class="">
                        <x-label class="text-negative-600 dark:text-negative-600 mb-1">City</x-label>
                        <x-select label="" placeholder="Select one" :options="$cities"
                            wire:model.live.debounce="job.city" empty-message="Select state first"
                            :wire.key="'city'.$keyCounter" clearable=false />

                    </div>
                    <div class="">
                        <x-label class="inline-block mr-3">Vacancy Status</x-label>
                        <div class=" flex justify-start items-center">
                            <x-radio name="is_active" id="is_active_1" label="Open" wire:model='job.is_active'
                                value='1' />
                            <x-radio name="is_active" id="is_active_2" label="Filled" wire:model='job.is_active'
                                value='0' class='ml-5' />
                        </div>
                    </div>
                    <div class="">
                        <x-label class="inline-block mr-3">Do you allow employees to work from home?</x-label>
                        <div class=" flex justify-start items-center">
                            <x-radio name="work_from_home" id="work_from_home_1" label="Yes"
                                wire:model.live='job.work_from_home' value='1' />
                            <x-radio name="work_from_home" id="work_from_home_2" label="No"
                                wire:model.live='job.work_from_home' value='0' class='ml-5' />
                        </div>
                    </div>
                    <div class="">
                        <x-label class="inline-block mr-3">Show On Home Page</x-label>
                        <div class=" flex justify-start items-center">
                            <x-radio name="is_show_on_home_page" id="is_show_on_home_page_1" label="Yes"
                                wire:model='job.is_show_on_home_page' value='1' />
                            <x-radio name="is_show_on_home_page" id="is_show_on_home_page_2" label="No"
                                wire:model='job.is_show_on_home_page' value='0' class='ml-5' />
                        </div>
                    </div>
                    {{-- <div class="col-span-full flex justify-center mt-5">
                        <div wire:loading>
                            <x-spinner class="w-5 mr-5" />
                        </div>
                    </div> --}}
                    <div class="col-span-full text-center mt-3 space-x-3">
                        <x-button info spinner class="disabled:bg-slate-800" wire:loading.attr="disabled" wire:click="save">
                            Submit
                        </x-button>
                        <x-button gray x-on:click="showForm = !showForm">Cancel</x-button>
                    </div>
                </div>
            </div>
            <div id="livePreview" class="dark:text-slate-300">
                <h3 class="text-2xl text-center dark:text-slate-300">Live Preview</h3>
                <hr class="my-5 dark:opacity-30">
                <h3 class="text-3xl text-color2-400 text-center mb-5">{{ $job->title }}</h3>

                <div class="bg-white dark:bg-opacity-5 shadow-md rounded-lg p-10 mb-10">
                    <div class="grid grid-cols-3 gap-5">
                        <div>
                            <p><strong>Location:</strong><br>{{ $job->city }}, {{ $job->state }}</p>
                        </div>
                        <div>
                            <p><strong>Company:</strong><br>{{ $job->company_name }}</p>
                        </div>
                        <div>
                            <p><strong>Salary: </strong><br>Rs. {{ $job->salary_from }}</p>
                        </div>
                        <div>
                            <strong>Industry:</strong> {{ getIndustryByIndustryId($job->industry_id) }}
                        </div>
                        <div>
                            <strong>Designation:</strong> {{ $job->designation }}
                        </div>
                        <div>
                            <strong>Experience:</strong> {{ $job->experience_min }} - {{ $job->experience_max }} Year
                        </div>
                        <div>
                            <strong>Job Type:</strong> {{ getJobTypeByJobTypeId($job->job_type_id) }}
                        </div>
                        <div>
                            <strong>Gender:</strong> {{ $job->gender }}
                        </div>
                        @if ($job->work_from_home)
                        <div>
                            <strong>Work From Home:</strong> {{ $job->work_from_home ? 'Allowed' : '' }}
                        </div>
                        @endif
                        <div class="">
                            <strong>Posted On:</strong> {{ Carbon::parse($job->created_at)->format('d-M-Y') }}
                        </div>
                    </div>
                    <div class="flex justify-end items-center gap-5">
                        <button><i class="fas fa-heart text-slate-300 fa-xl mr-1"></i></button>
                        <x-button-green class=""><i class="fas fa-envelope mr-1"></i>Apply</x-button-green>
                    </div>
                </div>
                <div class="bg-white dark:bg-opacity-5 shadow-md rounded-lg p-10 jobDescription">
                    <h4 class="text-2xl mb-5">Job Description</h4>
                    <hr class="my-5 dark:opacity-30">
                    {!! $job->description !!}

                </div>
            </div>
        </div>
    </div>
    <div x-show="!showForm" x-trap="!showForm" x-cloak x-transition
        class="bg-white dark:bg-opacity-5 shadow-md rounded-md mt-10 p-10">
        <div class="flex justify-end mb-5 mt-3">
            <x-button green sm icon="plus" wire:click='postNewJob' class="disabled:bg-slate-600" wire:loading.attr="disabled">Post
                New Job</x-button>
        </div>
        <livewire:admin.jobs-by-admin-table />
    </div>

</div>
@assets
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js" defer></script>
@endassets
@script
<script>
    let editor;
            ClassicEditor
                .create(document.querySelector('#description'),{
                    toolbar: [ 'undo', 'redo', 'bold', 'italic', 'numberedList', 'bulletedList' ]
                })
                .then(newEditor => {
                    editor = newEditor;
                    // editor.model.document.on('change:data', () => {
                    //     @this.set('job.description', editor.getData());
                    // })
                    // editor.setData('Explain the tasks, duties, function or responsibilities of a position');
                    editor.setData('');
                    editor.model.document.on('change', () => {
                        @this.set('job.description', editor.getData());
                    })
                })
                .catch(error => {
                    console.error(error);
                });
                $wire.on('setDescription', (event) => {
                        editor.setData($wire.job.description);
                        });
                $wire.on('setDescriptionEmpty', (event) => {
                        // editor.setData('Explain the tasks, duties, function or responsibilities of a position');
                        editor.setData('');
                        });

</script>
@endscript