@extends('layouts.master')

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

            <x-breadcrumb listRoute="{{ route('admin.packages.index') }}" model="Package" item="Edit"></x-breadcrumb>

            <div class="card">
                @if (Session::has('success'))
                    <p>Seeion here</p>
                @endif
                <div class="card-body">
                    <ul class="nav nav-tabs nav-pills" id="myTab" role="tablist">
                        @include('layouts._includes._package-navigation', ['active' => 'package'])
                    </ul>
                    <x-form.wrapper action="{{ route('admin.packages.update', $package->id) }}" method="POST"
                        enctype="multipart/form-data">
                        @method('PATCH')
                        <x-form.row>
                            <x-form.input type="text" col="4" label="Title" :req="true" id="title"
                                name="title" value="{{ old('title', $package->title) }}" />
                            <x-form.input type="text" col="4" label="Slug" :req="true" id="slug"
                                name="slug" value="{{ old('slug', $package->slug) }}" />
                            {{-- @php
                        // Get the country name from one of the pages (e.g., first one)
                        $country = $package->pages->first()?->parentPage?->parentPage?->title ?? '';
                        @endphp

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

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

                        </x-form.row>
                        <x-form.row>
                            {{-- @dd($package->pages) --}}
                            {{-- @foreach ($package->pages as $page)
                        {{ $page->parentPage?->parentPage?->title ?? '' }}
                        @endforeach --}}


                            <div class="col-lg-4">
                                <x-form.input type="file" label="Image" :req="true" id="image" name="image"
                                    accept="image/*,video/*" onchange="previewThumb(this,'image-thumb')" />
                                <x-form.preview id="image-thumb" url="{{ $package->feature_image->getPath() }}" />
                            </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" url="{{ $package->cover_image->getPath() }}" />
                            </div>

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

                            <x-form.select label="Grade" col="3" :options="\App\Models\Package::getGradeList()" name="grade" :req="true"
                                value="{{ old('grade', $package->grade) }}">
                            </x-form.select>

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

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

                            <x-form.input type="number" col="3" :req="true" label="Price" id="price"
                                name="price" value="{{ old('price', $package->price) }}" />

                            {{--
                        <x-form.input type="text" col="3" label="Accomodation" :req="true" id="accomodation"
                            name="accomodation" value="{!! old('accomodation', $package->accomodation) !!}" /> --}}

                            {{-- <x-form.input type="text" col="3" label="Group Size" :req="true" id="max_size"
                                name="max_size" value="{{ old('max_size', $package->max_size) }}" /> --}}

                            <x-form.select label="Type" :req="true" col="3" :options="$types" name="type"
                                value="{{ old('type', $package->type) }}"></x-form.select>

                            <x-form.input type="text" col="3" label="Package Days" :req="true"
                                id="days" name="days" value="{{ old('days', $package->days) }}" />

                            <x-form.input type="number" col="3" label="Order No." :req="true" id="order"
                                name="order" value="{{ old('order', $package->order) }}" />


                            {{-- <x-form.input type="text" col="3" label="Code" :req="true" id="code" name="code"
                            value="{{ old('code', $package->code) }}" /> --}}
                            {{--
                        <x-form.input type="number" col="3" label="Discount (%)" min="0" id="discount" name="discount"
                            value="{{ old('discount',$package->discount) }}" /> --}}
                            {{--
                        <x-form.input type="number" col="3" label="Discount (%)" min="0" max="100" step="0.01" id="discount"
                            name="discount" value="{{ old('discount', $package->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', $package->category) !!}"
                                placeholder="e.g. Hiking & Trekking" /> --}}

                            {{-- <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', $package->gear_list_url) }}" />
                        </x-form.row> --}}
                        </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 Overview" :req="true" id="overview"
                            name="overview" value="{!! old('overview', $package->overview) !!}" rows="15" cols="5" />

                        <x-form.textarea isEditor="true" label="Trip Description" :req="true" id="description"
                            name="description" value="{!! old('description', $package->description) !!}" 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', $package->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', $package->excludes) !!}"
                                rows="15" cols="5" />
                        </x-form.row>


                        {{-- <br>
                    <div class="mb-4 ">
                        <x-dynamic-input req="true" name="includes" id="Includes" label="includes"
                            :value="json_decode($package->includes, true)" 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"
                            :value="json_decode($package->excludes, true)" 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('trip_notes', $package->trip_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" :isChecked="$package->status ? 'checked' : ''" />
                            <x-form.checkbox col="2" isBreak='break' label="Is Featured" id="is_featured"
                                name="is_featured" value="1" class="form-check-input" isEditMode="yes"
                                :isChecked="$package->is_featured ? 'checked' : ''" />

                            <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="$package->is_popular ? 'checked' : ''" />

                            <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="$package->is_footer ? 'checked' : ''" />

                            <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="$package->is_menu ? 'checked' : ''" />

                        </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')
        @include('_helpers.ajax_form')
        <script>
            function resetImage(id) {
                document.getElementById(id).style.display = 'none';
                document.getElementById('remove_' + id).value = '1';
                // Also clear the file input if it exists
                let fileInput = document.querySelector('input[name="' + id.replace('-thumb', '') + '"]');
                if (fileInput) {
                    fileInput.value = '';
                }
            }
        </script>
    @endpush