@props(['url'])
@push('custom-styles')
<style>
    .ck-editor {
        width: 100% !important;
        overflow: hidden;
    }
</style>
@endpush
<div x-data="{ showForm: @entangle('showForm') }">
    <h1 class="text-4xl text-color2-400 mb-5 -mt-10 relative text-center">
        {{ $pageTitle }}
    </h1>
    {{-- @if(isset($activeSubscription))
    {!! alert("You can't post new job. Your subscription has expired. Please buy a <a href='employer/subscription' class='text-blue-500' wire:navigate>subscription</a>.") !!} --}}
    {{-- <x-link label="Buy Now" href="{{ URL::route('employer.subscription') }}" wire:navigate /> --}}
    {{--
    <livewire:employer.subscription /> --}}
    {{-- @include('user.employer.subscriptionDetails') --}}
    {{-- <livewire:employer.jobs-table /> --}}

    {{-- @else --}}

    {{-- <div>
        <x-errors />
        @include('errors.response')
    </div> --}}
    <div x-show.important="!showForm" x-transition>
        <div class="bg-white dark:bg-opacity-5 shadow-md rounded-lg p-10 {{ $showForm ? 'hidden' : '' }}">
            <div class="flex justify-end mb-5">
                <x-button-blue wire:click="showNewJob" class="disabled:bg-slate-600" wire:loading.attr="disabled">Post
                    New Job</x-button-blue>
            </div>
            <livewire:employer.jobs-table />
        </div>
    </div>
    {{-- <form wire:submit.prevent="jobPost">
        @csrf --}}
        {{-- @if ($showForm)
        @endif --}}
        <div x-show="showForm" x-transition>
            <div class="flex justify-end mb-3">
                <x-button-blue wire:click="cancel" class="disabled:bg-slate-600" wire:loading.attr="disabled">Show My
                    Jobs</x-button-blue>

                {{--
                <x-mini-button dark icon="arrow-circle-left" wire:click="cancel" title="Back" /> --}}

            </div>
            {{-- {{ $counter }} --}}
            <div class="grid grid-cols-1 md:grid-cols-3 gap-5 $showForm ? 'hidden' : ''">
                <div>
                    <h3 class="text-2xl mb-5 pb-3 text-center">Job Information</h3>
                    <hr class="mb-5 -mt-5 dark:opacity-30">
                    <div class="bg-white dark:bg-opacity-5 shadow-md rounded-lg p-10">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            @if (!Auth::user()->employer)
                            <div class="col-span-full -mb-3 text-red-500">
                                Please complete your profile before posting job
                                <a href="{{ strtolower(Auth::user()->role) }}" class="text-blue-500">Update Profile</a>
                            </div>
                            @endif
                            <div class="col-span-full -mb-3 text-negative-600">
                                Only red fields are mandatory
                            </div>
                            <div class="col-span-full">
                                <x-label
                                    class="block text-sm font-medium text-negative-600 dark:text-negative-600 mb-1">Job
                                    Title</x-label>
                                <x-input label="" placeholder="e.g Marketing manager for real estate"
                                    wire:model.live="job.title" :wire:key="'title'.$counter"></x-input>
                            </div>
                            <div>
                                {{-- <div wire:ignore> --}}
                                    <x-label
                                        class="block text-sm font-medium text-negative-600 dark:text-negative-600 mb-1">
                                        Job Industry</x-label>
                                    <x-select placeholder="Select one" :options="$industries"
                                        wire:model.live="job.industry_id" option-label="name" option-value="id"
                                        :wire:key="'industries'.$counter" />
                                    {{--
                                </div> --}}
                                {{-- @error('job.industry_id')
                                <p class="mt-2 text-sm text-negative-600 dark:text-negative-600">
                                    The sector is required.
                                </p>
                                @enderror --}}
                            </div>
                            <x-input label="Designation" placeholder="e.g Marketing Manager"
                                wire:model.live="job.designation" :wire:key="'designation'.$counter" />
                            <div>
                                <x-label
                                    class="block text-sm font-medium text-negative-600 dark:text-negative-600 mb-1">
                                    State</x-label>
                                <x-select placeholder="Select one" :options="$states" wire:model.live="job.state"
                                    :wire.key="'state'.$counter" clearable="0" />
                            </div>
                            <div>
                                <x-label
                                    class="block text-sm font-medium text-negative-600 dark:text-negative-600 mb-1">City
                                </x-label>
                                <x-select placeholder="Select one" :options="$cities" wire:model.live="job.city"
                                    empty-message="Select state first" :wire.key="'city'.$counter" clearable=false />
                            </div>

                            <div wire:ignore>
                                <x-select label="Experience Min." placeholder="Select one" :options="$jobExperiences"
                                    wire:model.live="job.experience_min" option-label="job_experience"
                                    option-value="year" :wire:key="'experience_min'.$counter" />
                            </div>
                            <div wire:ignore>
                                <x-select label="Experience Max." placeholder="Select one" :options="$jobExperiences"
                                    wire:model.live="job.experience_max" option-label="job_experience"
                                    option-value="year" :wire:key="'experience_max'.$counter" />
                            </div>
                            <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'.$counter" />
                            </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 class="col-span-full">
                                <x-input label="Salary Range (Rs.)" description="Leave empty for undisclosed"
                                    placeholder="5000 - 10000" wire:model.live="job.salary_from"></x-input>
                            </div>
                            <div class="col-span-full">
                                <x-label
                                    class="block text-sm font-medium text-negative-600 dark:text-negative-600 mb-1"></x-label>
                                <div wire:ignore class="jobDescription">
                                    <x-textarea label="Job Description" id="description" class="" wire:key="description"
                                        wire:model.defer="job.description" description="" placeholder="Explain the tasks, duties, function or responsibilities of a position"></x-textarea>
                                </div>
                                @error('job.description')
                                <p class="mt-2 text-sm text-negative-600">
                                    The description is required.
                                </p>
                                @enderror
                            </div>

                            <div class="flex flex-row items-center col-span-full gap-x-3">
                                <x-label class="inline-block">Do you allow employees to work from home?</x-label>
                                <x-radio id="work_from_home_1" label="Yes" wire:model.live="job.work_from_home"
                                    value=1 />
                                <x-radio id="work_from_home_2" label="No" wire:model.live="job.work_from_home"
                                    value=0 />
                                @error('job.work_from_home')
                                <span class="ml-2 text-sm text-negative-600">
                                    Required.
                                </span>
                                @enderror
                                {{-- <x-label for="work_from_home_1" class="mr-5">
                                    <input type="radio" name="work_from_home" id="work_from_home_1" value="1"
                                        wire:model.live="job.work_from_home" :wire.key="'work_from_home_1'.$counter" />
                                    Yes
                                </x-label>
                                <x-label for="work_from_home_2">
                                    <input type="radio" name="work_from_home" id="work_from_home_2" value="0"
                                        wire:model.live="job.work_from_home" :wire.key="'work_from_home_2'.$counter" />
                                    No
                                </x-label> --}}
                            </div>
                            <div class="flex flex-row items-center col-span-full gap-x-3">
                                <x-label class="inline-block mr-3">Vacancy Status</x-label>
                                {{-- <x-label for="is_active_1" class="mr-5">
                                    <input type="radio" name="is_active" id="is_active_1" value="1" {{
                                        (trim($job->is_active) == 1) ? 'checked' : '' }}>
                                    Open
                                </x-label>
                                <x-label for="is_active_2">
                                    <input type="radio" name="is_active" id="is_active_2" value="0" {{
                                        (trim($job->is_active) == 0) ? 'checked' : '' }}>
                                    Close
                                </x-label> --}}
                                {{-- <x-label for="is_active_1" class="mr-5">
                                    <input type="radio" name="is_active" id="is_active_1" value="1"
                                        wire:model.live="job.is_active" :wire.key="'is_active_1'.$counter" />
                                    Open
                                </x-label>
                                <x-label for="is_active_2">
                                    <input type="radio" name="is_active" id="is_active_2" value="0"
                                        wire:model.live="job.is_active" :wire.key="'is_active_2'.$counter" />
                                    Filled
                                </x-label> --}}
                                <x-radio id="is_active_1" label="Open" wire:model.live="job.is_active" value=1 />
                                <x-radio id="is_active_2" label="Filled" wire:model.live="job.is_active" value=0 />
                                @error('job.is_active')
                                <span class="ml-2 text-sm text-negative-600">
                                    Required.
                                </span>
                                @enderror

                            </div>
                            {{--
                            <x-radio name="is_active" id="is_active_1" label="Open" wire:model.live="job.is_active" />
                            <x-radio name="is_active" id="is_active_2" label="Close" wire:model.live="job.is_active" />
                            --}}
                            <div class="col-span-full text-center">
                                {{-- <div class="flex justify-center mb-3">
                                    <div wire:loading class="">
                                        <svg aria-hidden="true"
                                            class="w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
                                            viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
                                                fill="currentColor" />
                                            <path
                                                d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
                                                fill="currentFill" />
                                        </svg>
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </div> --}}
                                <x-button info spinner='jobPost' class="disabled:bg-slate-600"
                                    wire:loading.attr="disabled" wire:click="jobPost">
                                    Post Job
                                </x-button>
                                <x-button gray class="bg-slate-500" wire:click="cancel">Cancel</x-button>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="livePreview" class="col-span-2">
                    {{-- {{ $job }} --}}
                    <h3 class="text-2xl mb-3 pb-3 text-center">Live Preview</h3>
                    <hr class="mb-5 -mt-3 dark:opacity-30">
                    <h3 class="text-3xl text-color2-400 text-center mb-5">{{ $this->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>{{ $this->job->city }}, {{ $this->job->state }}</p>
                            </div>
                            <div>
                                <p><strong>Company:</strong><br>{{ Auth::user()->employer ?
                                    Auth::user()->employer->organization_name : '' }}</p>
                            </div>
                            <div>
                                <p><strong>Salary: </strong><br>Rs. {{ $this->job->salary_from }}</p>
                            </div>
                            <div>
                                <strong>Industry:</strong> {{ getIndustryByIndustryId($this->job->industry_id) }}
                            </div>
                            <div>
                                <strong>Designation:</strong> {{ $this->job->designation }}
                            </div>
                            <div>
                                <strong>Experience:</strong> {{ $this->job->experience_min }} - {{
                                $this->job->experience_max }} Year
                            </div>
                            <div>
                                <strong>Job Type:</strong> {{ getJobTypeByJobTypeId($this->job->job_type_id) }}
                            </div>
                            <div>
                                <strong>Gender:</strong> {{ $this->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($this->job->created_at)->format('d-M-Y') }}
                            </div>
                        </div>
                        <div class="flex justify-end items-center gap-5">
                            <button onclick="javascript:alert('This is just for preview')"><i
                                    class="fas fa-heart text-slate-300 fa-xl mr-1"></i></button>
                            <x-button-green onclick="javascript:alert('This is just for preview')" 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">
                        {!! $this->job->description !!}

                    </div>

                </div>
            </div>
        </div>
        {{--
    </form> --}}
    <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.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');
                        });

        </script>
        @endscript

    </div>
    {{-- @endif --}}
</div>