@extends('layouts.master')

@section('content')
    <div class="container-xxl">
        <x-breadcrumb listRoute="{{ route('admin.packages.index') }}" model="Package" 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">Package</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a type="button" class="nav-link disabled">Itinerary</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a type="button" class="nav-link disabled">Gallery</a>
                    </li>
                    {{-- <li class="nav-item" role="presentation">
                        <a type="button" class="nav-link disabled">Departure</a>
                    </li> --}}
                    {{-- <li class="nav-item" role="presentation">
                    <a type="button" class="nav-link disabled">Group Sizes</a>
                </li> --}}
                    {{-- <li class="nav-item" role="presentation">
                        <a type="button" class="nav-link disabled">Reviews</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a type="button" class="nav-link disabled">FAQs</a>
                    </li> --}}
                    <li class="nav-item" role="presentation">
                        <a type="button" class="nav-link disabled">SEO</a>
                    </li>
                </ul>


                <x-form.wrapper action="{{ route('admin.packages.store') }}" method="POST" enctype="multipart/form-data">
                    <x-form.row>
                        <x-form.input type="text" col="4" label="Title" :req="true" id="title"
                            name="title" value="{{ old('title') }}" />
                        <x-form.input type="text" col="4" label="Slug" :req="true" id="slug"
                            name="slug" value="{{ old('slug') }}" />


                        <x-form.input type="text" col="4" label="Country" :req="true" id="country"
                            name="country" value="{{ old('country') }}" />


                    </x-form.row>


                    <x-form.row>
                        <div class="col-lg-4">
                            <x-form.input type="file" label="Image" :req="true" id="image" name="image"
                                accept="image/*,video/*" onchange="previewThumb(this,'package-thumb')" />
                            <x-form.preview id="package-thumb" />
                        </div>
                        <div class="col-lg-4">
                            <x-form.input type="file" label="Cover Image" :req="true" id="cover" name="cover"
                                accept="image/*,video/*" onchange="previewThumb(this,'cover-thumb')" />
                            <x-form.preview id="cover-thumb" />
                        </div>

                        <div class="col-lg-4">
                            <x-form.input type="file" label="Route Map" id="cover" name="meta"
                                accept="image/*,video/*" onchange="previewThumb(this,'meta-thumb')" />
                            <x-form.preview id="meta-thumb" />
                        </div>
                    </x-form.row>
                    <br />
                    <x-form.row>
                        <x-form.input type="text" col="3" label="altitude" id="altitude" name="altitude"
                            value="{{ old('altitude') }}" />

                        <x-form.select label="Grade" col="3" :options="\App\Models\Package::getGradeList()" name="grade" :req="true">
                        </x-form.select>


                        <x-form.input type="text" col="3" label="seasons" :req="true" id="seasons"
                            name="seasons" value="{{ old('seasons') }}" />

                        {{--
                    <x-form.input type="text" col="3" label="Walking Per Day" :req="true" id="walk_time"
                        name="walk_time" value="{{ old('walk_time') }}" /> --}}

                        <x-form.input type="number" col="3" :req="true" label="Price" id="price"
                            name="price" value="{{ old('price') }}" />
                        {{--
                    <x-form.input type="text" col="3" label="Accomodation" :req="true" id="accomodation"
                        name="accomodation" value="{{ old('accomodation') }}" /> --}}
                        {{-- <x-form.input type="text" col="3" label="Group Size" :req="true" id="max_size"
                            name="max_size" value="{{ old('max_size') }}" /> --}}
                        <x-form.select label="Type" :req="true" col="3" :options="$types" name="type"
                            value="{{ old('type') }}"></x-form.select>

                        <x-form.input type="text" col="3" label="Package Days" :req="true"
                            id="days" name="days" value="{{ old('days') }}" />
                        <x-form.input type="number" col="3" label="Order No." :req="true" id="order"
                            name="order" value="{{ old('order') }}" />
                        {{-- <x-form.input type="text" col="3" label="Code" :req="true" id="code"
                            name="code" value="{{ old('code') }}" /> --}}
                        {{--
                    <x-form.input type="number" col="3" label="Discount (%)" min="0" id="discount" name="discount"
                        value="{{ old('discount') }}" /> --}}

                    </x-form.row>

                    <x-form.row>


                        {{-- <x-form.input type="text" col="6" label="Package Category " :req="true"
                            id="category" name="category" value="{{ old('category') }}"
                            placeholder="e.g. Hiking & Trekking" /> --}}
                    </x-form.row>


                    {{-- <x-form.row>
                    <x-form.input type="text" col="12" label="Gear list (URL)" id="gear_list_url" name="gear_list_url"
                        value="{{ old('gear_list_url') }}" />
                </x-form.row> --}}
                    <x-form.row>
                        <x-form.multiselect label="Activity/Destination/Pages" multiple="multiple" :option-display="false"
                            class="" col="12" :req="true" :options="$pages" :selected="$selectedPages"
                            name="pages">
                        </x-form.multiselect>
                    </x-form.row>




                    <x-form.textarea isEditor="true" label="Trip Highlights" isEditor="true" :req="true"
                        id="description" name="description" value="{!! old('description') !!}" rows="15"
                        cols="5" />

                    <x-form.textarea isEditor="true" label="Trip Overview" :req="true" id="overview"
                        name="overview" value="{!! old('overview') !!}" rows="15" cols="5" />

                    <x-form.row>
                        <x-form.textarea isEditor="true" col="6" isEditor="true" label="Includes"
                            :req="true" id="includes" name="includes" value="{!! old('includes') !!}"
                            rows="15" cols="5" />
                        <x-form.textarea isEditor="true" col="6" isEditor="true" label="Excludes"
                            :req="true" id="excludes" name="excludes" value="{!! old('excludes') !!}"
                            rows="15" cols="5" />
                    </x-form.row>

                    <br>
                    {{-- <div class="mb-4 ">
                    <x-dynamic-input req="true" name="includes" id="Includes" label="includes"
                        placeholder="Enter Includes here" button-text="+  Add Includes " />
                </div> --}}

                    {{-- <br>
                <div class="mb-4 ">
                    <x-dynamic-input req="true" name="excludes" id="excludes" label="excludes"
                        placeholder="Enter Excludes here" button-text="+  Add Excludes " />
                </div> --}}

                    <x-form.row>
                        <x-form.textarea isEditor="true" col="12" isEditor="true" label="Essential Info"
                            id="notes" name="trip_notes" value="{!! old('notes') !!}" rows="15"
                            cols="5" />
                    </x-form.row>

                    <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 Featued" id="is_featured"
                            name="is_featured" value="1" class="form-check-input" isEditMode="yes"
                            :isChecked="''" />

                        <x-form.checkbox col="2" isBreak='break' label="Is Popular" id="is_popular"
                            name="is_popular" value="1" class="form-check-input" isEditMode="yes"
                            :isChecked="''" />

                        <x-form.checkbox col="2" isBreak='break' label="Is In Footer" id="is_footer"
                            name="is_footer" value="1" class="form-check-input" isEditMode="yes"
                            :isChecked="''" />

                        <x-form.checkbox col="2" isBreak='break' label="Is Menu" id="is_menu" name="is_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' => 'meta'])
    @include('_helpers.ck_editor')
    @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