@extends('layouts.master')

@section('content')
    <div class="container-xxl">

        <x-breadcrumb listRoute="{{ route('admin.destinations.index') }}" model="Destination" item="Create"></x-breadcrumb>

        <div class="card">
            <div class="card-body">
                <ul class="nav nav-tabs nav-pills" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="product-detail-tab" data-bs-toggle="tab"
                            data-bs-target="#createTabContent" type="button" role="tab" aria-controls="product-detail"
                            aria-selected="true">Destination</button>
                    </li>
                    {{-- <li class="nav-item" role="presentation">
                    <a data-bs-toggle="tab" data-bs-target="#product-variation" type="button" role="tab" aria-controls="product-variation" aria-selected="true" class="nav-link disabled" id="product-seo-gallery">Gallery</a>
                </li> --}}
                    <li class="nav-item" role="presentation">
                        <a data-bs-toggle="tab" data-bs-target="#product-variation" type="button" role="tab"
                            aria-controls="product-variation" aria-selected="true" class="nav-link disabled"
                            id="product-seo-tab">SEO</a>
                    </li>
                </ul>
                <x-form.wrapper action="{{ route('admin.destinations.store') }}" method="POST"
                    enctype="multipart/form-data">
                    <x-form.row>
                        <x-form.input type="text" col="6" label="Title" :req="true" id="title"
                            name="title" value="{{ old('title') }}" />
                        <x-form.input type="text" col="6" label="Slug" :req="true" id="slug"
                            name="slug" value="{{ old('slug') }}" />
                    </x-form.row>
                    <x-form.row>
                        <div class="col-lg-6">
                            <x-form.input type="file" label="Image" :req="true" id="image" name="image"
                                accept="image/*,video/*" onchange="previewThumb(this,'destination-thumb')" />
                            <x-form.preview id="destination-thumb" />
                        </div>
                        <div class="col-lg-6">
                            <x-form.input type="file" label="Cover" :req="true" id="cover" name="cover"
                                accept="image/*,video/*" onchange="previewThumb(this,'cover-thumb')" />
                            <x-form.preview id="cover-thumb" />
                        </div>
                    </x-form.row>
                    <x-form.row>
                        <x-form.input type="text" col="6" label="Short Title" id="short_title" name="short_title"
                            value="{{ old('short_title') }}" />
                        <x-form.input type="number" :req="true" col="6" label="Order No." id="order"
                            name="order" />
                    </x-form.row>

                    {{-- <x-form.row>
                    <x-form.input type="text" col="12" label="Secondary Title" id="secondary_title" name="secondary_title" value="{{old('secondary_title')}}" />
                </x-form.row> --}}

                    <x-form.textarea type="text" col="12" label="Short Description" id="short_description"
                        name="short_description" value="{{ old('short_description') }}" />

                    <x-form.select label="Continent" col="4" :req="true" :options="\App\Models\Page::getContinentList()" name="continent"
                        value="{{ old('continent') }}">
                    </x-form.select>
                    
                    <x-form.textarea isEditor="true" label="Description" :req="true" id="description"
                        name="description" value="{!! old('description') !!}" rows="15" cols="5" />
                    <x-form.row>
                        <x-form.checkbox col="2" isBreak='break' label="Status" id="status" name="status"
                            value="1" class="form-check-input" />
                        <x-form.checkbox col="2" isBreak='break' label="Is Featured" id="is_featured"
                            name="is_featured" value="1" class="form-check-input" isEditMode="yes" />
                        <x-form.checkbox col="2" isBreak='break' label="Is Dropdown" id="isonmenu"
                            name="is_menu" value="1" class="form-check-input" isEditMode="yes" />
                        {{-- <x-form.checkbox col="2" isBreak='break' label="Is On Footer" id="isonmenu" name="is_footer_menu" value="1" class="form-check-input" isEditMode="yes" :isChecked="''" /> --}}
                    </x-form.row>
                    <x-form.button class="btn btn-sm btn-dark" type="submit" id="submit"><i
                            class='bx bx-save bx-xs'></i> Save</x-form.button>
                </x-form.wrapper>

            </div>
        </div>
    </div>
@endsection

@push('custom_js')
    @include('_helpers.slugify', ['title' => 'title'])
    @include('_helpers.image_preview', ['name' => 'image'])
    @include('_helpers.image_preview', ['name' => 'cover'])
    @include('_helpers.ck_editor', ['textarea_id' => 'description'])
    @include('_helpers.ajax_form')
    <script>
        const button = document.getElementById('submit');

        button.addEventListener('click', function(event) {
            setTimeout(function() {
                event.target.disabled = true;
                event.target.innerText = 'loading...';
            }, 0);

            setTimeout(function() {
                event.target.disabled = false;
                event.target.innerHTML = '';
                const icon = document.createElement('i');
                icon.className = 'bx bx-save bx-xs';
                event.target.appendChild(icon);
                event.target.insertAdjacentText('beforeend', ' Save');
                event.target.form.submit();
            }, 500);
        });
    </script>
@endpush