@extends('vendor.dashboards.layouts.master')

@push('css')
    <style>
        .img-wrap .remove {
            position: absolute;
            top: 2px;
            left: 20px;
            z-index: 100;
        }

        .image-div{
            position: relative;
        }

        .file-image{
            width: 100%;
            height: auto;
            clear: both;
            display: block;
            padding: 2px;
            border: 1px solid #ddd;
            margin-bottom: 10px;
        }

        .language-selector {
            direction:ltr;
        }

        .language-selector .btn-lang-selector {
            border: 1px solid #e0e0e0;
            background-color: #f8f9fa;
            color: #000; /* Black text for unselected buttons */
            border-radius: 30px;
            padding: 5px 15px;
            font-size: 12px;
            font-weight: 600;
            margin: 0 5px;
            transition: all 0.3s ease-in-out;
        }

        .language-selector .btn-lang-selector.active {
            background-color: #007bff; /* Blue background for selected button */
            color: #fff; /* White text for selected button */
            border-color: #007bff;
        }

        .language-selector .btn-lang-selector:hover {
            background-color: #0056b3; /* Hover background color */
            color: #fff; /* White text on hover */
            transform: scale(1.1);
        }

        .language-selector {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }

        .language-selector .btn-lang-selector span {
            color: #000; /* Black text for unselected buttons */
        }

        .language-selector .btn-lang-selector.active span{
            color: #fff; /* White text on hover */
        }

        select optgroup {
            background-color: #f0f0f0; /* Light gray */
            color: #333; /* Text color */
            font-weight: bold;
        }
    </style>
@endpush

@section('content')
    <div class="row mt-4">
        <div class="col-lg-12 col-12 mx-auto position-relative">
            <div class="card">
                <div class="card-header p-3 pt-2 p-0 position-relative mt-n4">
                    <div class="float-start w-20">
                        <div class="icon icon-lg icon-shape bg-gradient-dark shadow text-center border-radius-xl mt-n4 me-3 float-start">
                            <i class="material-icons opacity-10">shopping_bag</i>
                        </div>
                        <h6 class="mb-5">{{ !isset($package) ? __('general.add_new') : __('general.edit') }} {{ __('voyager::seeders.data_types.package.singular') }}</h6>
                    </div>

                    <div class="float-end">
                        @if (isset($isModelTranslatable) && $isModelTranslatable)
                            <div class="language-selector">
                                <div class="btn-group btn-group-sm" role="group" data-toggle="buttons">
                                    @foreach(config('voyager.multilingual.locales') as $lang)
                                        <label class="btn btn-lang-selector{{ ($lang === config('voyager.multilingual.default')) ? " active" : "" }}">
                                            <input type="radio" name="i18n_selector" id="{{$lang}}" autocomplete="off"{{ ($lang === config('voyager.multilingual.default')) ? ' checked="checked"' : '' }}> <span>{{ strtoupper($lang) }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <form class="form-edit-add" action="{{ isset($package) ? route('packages.update',$package->id) : route('packages.store') }}" method="post" enctype="multipart/form-data" autocomplete="off">
                    <!-- PUT Method if we are editing -->
                    @if(isset($package))
                        {{ method_field("PUT") }}
                    @endif
                    {{ csrf_field() }}

                    <div class="card-body pt-2">
                        <div class="input-group input-group-dynamic {{ isset($package) ? 'is-filled' : '' }}">
                            <label for="cover_image" class="form-label">{{ __('voyager::seeders.data_rows.cover_image') }}</label>

                            @if(isset($package->cover_image))
                                <img src="{{ filter_var($package->cover_image, FILTER_VALIDATE_URL) ? $package->cover_image : Voyager::image( $package->cover_image ) }}" style="width:200px; height:auto; clear:both; display:block; padding:2px; border:1px solid #ddd; margin-bottom:10px;" />
                            @endif

                            <input type="file" data-name="cover_image" name="cover_image">

                            @error('cover_image')
                            <div class="text-danger error-massage">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="input-group input-group-static mt-3" >
                            <label>{{ __('voyager::generic.name') }}</label>

                            @include('voyager::multilingual.input-hidden', [
                                    'isModelTranslatable' => true,
                                    '_field_name'  => 'name',
                                    '_field_trans' => get_field_translations($dataTypeContent, 'name')
                                ])

                            <input type="text" onfocus="focused(this)" onfocusout="defocused(this)" class="form-control" id="name" name="name" placeholder="{{ __('voyager::generic.name') }}" value="{{ old('name', $package->name ?? '') }}">
                            @error('name')
                            <div class="text-danger error-massage">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="input-group input-group-static mt-3">
                            <label for="description">{{ __('voyager::seeders.data_rows.description') }}</label>

                            @include('voyager::multilingual.input-hidden', [
                                    'isModelTranslatable' => true,
                                    '_field_name'  => 'description',
                                    '_field_trans' => get_field_translations($dataTypeContent, 'description')
                                ])

                            <textarea name="description" id="description" rows="5" spellcheck="false" class="form-control">{{ old('description', $package->description ?? '') }}</textarea>
                            @error('description')
                            <div class="text-danger error-massage">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="input-group input-group-static mt-3" >
                            <label>{{ __('voyager::seeders.data_rows.price_per_person') }}</label>
                            <input type="text" class="form-control" id="price_per_person" name="price_per_person" value="{{ old('price_per_person', $package->price_per_person ?? '') }}">
                            @error('price_per_person')
                            <div class="text-danger error-massage">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="input-group input-group-static mt-3" >
                            <label>{{ __('voyager::seeders.data_rows.code') }}</label>
                            <input type="text" class="form-control" id="code" name="code" value="{{ old('code', $package->code ?? '') }}">
                            @error('code')
                            <div class="text-danger error-massage">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="input-group input-group-static mt-3" >
                            <label>{{ __('voyager::seeders.data_rows.destination') }}</label>

                            @include('voyager::multilingual.input-hidden', [
                                    'isModelTranslatable' => true,
                                    '_field_name'  => 'destination',
                                    '_field_trans' => get_field_translations($dataTypeContent, 'destination')
                                ])

                            <input type="text" class="form-control" id="destination" name="destination" value="{{ old('destination', $package->destination ?? '') }}">
                            @error('destination')
                            <div class="text-danger error-massage">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="input-group input-group-static mt-3" >
                            <label>{{ __('voyager::seeders.data_rows.date') }}</label>
                            <input type="text" class="form-control datepicker" id="date" name="date" value="{{ old('date', $package->date ?? '') }}">
                            @error('date')
                            <div class="text-danger error-massage">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="input-group input-group-static mt-3">
                            <label for="cancellation_policy">{{ __('voyager::seeders.data_rows.cancellation_policy') }}</label>

                            @include('voyager::multilingual.input-hidden', [
                                    'isModelTranslatable' => true,
                                    '_field_name'  => 'cancellation_policy',
                                    '_field_trans' => get_field_translations($dataTypeContent, 'cancellation_policy')
                                ])

                            <textarea name="cancellation_policy" id="cancellation_policy" rows="5" spellcheck="false" class="form-control">{{ old('cancellation_policy', $package->cancellation_policy ?? '') }}</textarea>
                            @error('cancellation_policy')
                            <div class="text-danger error-massage">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="input-group input-group-static mt-3" >
                            <label>{{ __('voyager::seeders.data_rows.region') }}</label>

                            <select class="form-control select2" id="regions" name="regions[]" multiple>
                                @foreach(\App\Models\Region::all() as $region)
                                    <option value="{{ $region->id }}" @if(in_array($region->id, old('regions', $dataTypeContent->regions->pluck('id')->toArray()))) selected @endif>{{ $region->title }}</option>
                                @endforeach
                            </select>

                            @error('regions')
                            <div class="text-danger error-massage">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="input-group input-group-static mt-3" >
                            <label>{{ __('voyager::seeders.data_rows.country_id') }}</label>

                            <select class="form-control select2" id="countries" name="countries[]" multiple>

                            </select>

                            @error('countries')
                            <div class="text-danger error-massage">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="input-group input-group-static mt-3" >
                            <label>{{ __('voyager::seeders.data_rows.addons') }}</label>


                            {{-- choose addons --}}
                            <select name="addons[]" multiple="multiple" class="form-control select2">
                                @foreach(\App\Models\AddOn::getTree() as $option)
                                    @if($option->top())
                                        <optgroup label="{{ $option->name  }}">
                                        @foreach($option->children as $child)
                                            @if($child->hasParentAndChildren())
                                                <optgroup label="--{{ $child->name  }}">
                                                    @foreach($child->children as $subChild)
                                                        <option value="{{ $subChild->id }}" {{  ( old('addons') && in_array($subChild->id,old('addons')) ) || (isset($package->packageAddOns) && in_array($subChild->id , $package->packageAddOns()->pluck('addons.id')->toArray())) ?'selected':''}}>---{{ $subChild->name }}</option>
                                                    @endforeach
                                                </optgroup>
                                            @else
                                                <option value="{{ $child->id }}" {{  ( old('addons') && in_array($child->id,old('addons')) ) || (isset($package->packageAddOns) && in_array($child->id , $package->packageAddOns()->pluck('addons.id')->toArray())) ?'selected':''}}>--{{ $child->name }}</option>
                                            @endif
                                        @endforeach
                                        </optgroup>
                                    @endif
                                @endforeach
                            </select>

                            @error('addons')
                            <div class="text-danger error-massage">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="input-group input-group-static mt-3" >
                            <label>{{ __('voyager::seeders.data_rows.highlights') }}</label>

                            {{-- choose highlights --}}
                            <select class="form-control select2 @error('highlights') is-invalid @enderror" name="highlights[]" multiple="multiple">
                                @foreach(\App\Models\Highlight::all() as $key => $highlight)
                                    <option value="{{ $highlight->id }}" {{  ( old('highlights') && in_array($highlight->id,old('highlights')) ) || (isset($package->packageHighlights) && in_array($highlight->id , $package->packageHighlights()->pluck('highlights.id')->toArray())) ?'selected':''}}>{{ $highlight->name }}</option>
                                @endforeach
                            </select>

                            @error('highlights')
                            <div class="text-danger error-massage">{{ $message }}</div>
                            @enderror
                        </div>

                        <hr>
                        <h2 id="sizing">{!! __('voyager::generic.files') !!}</h2>

                        <div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">

                            <div class="input-group input-group-lg my-3">
                                <label class="form-label mb-3">{{ __('voyager::generic.files') }}</label>
                                <div class="img-wrap row">
                                    @php
                                        $package_files = isset($package) ? $package->files()->where('name','packages')->get() : null;
                                    @endphp

                                    @if($package_files)
                                        @foreach($package_files as $key => $package_file)
                                            <div class="col-md-6 image-div">
                                                @if($package_file->type == "application/pdf")
                                                    <object style="max-height: 260px;" data="{{Storage::url($package_file->url)}}" type="application/pdf" width="100%" height="500px">
                                                        <p>Unable to display PDF file. <a href="{{Storage::url($package_file->url)}}">Download</a> instead.</p>
                                                    </object>
                                                @else
                                                    <img class="file-image" src="{{ filter_var($package_file->url, FILTER_VALIDATE_URL) ? $package_file->url : Voyager::image( $package_file->url ) }}"  />
                                                @endif
                                                <button type="button" class="btn btn-circle btn-danger remove" data-image="{{ $package_file->id }}">
                                                    <i class="material-icons btn-icon-only">delete</i>
                                                </button>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>

                                <input type="file" id="files" class="form-control-file @error('files') is-invalid @enderror" name="files[]" multiple>

                                @error('files')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror                            </div>

                        </div>

                        <div class="d-flex justify-content-end mt-4">
                            <a href="{{ url()->previous() }}" name="button" class="btn btn-dark m-1">{{ __('voyager::generic.cancel') }}</a>
                            <button type="submit" name="button" class="btn btn-behance m-0 ms-2">{{ __('voyager::generic.save') }}</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>


@endsection

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.0/moment-with-locales.min.js" integrity="sha512-qB9nAp+tJcrJoNOCpuBdcui0HfhQG8ocM65fw2UwXoDUE3j99LfVt/FU12IQuWQtyKH5PuJ8xDNRBA4LR24ztQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap4-datetimepicker@5.2.3/build/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap4-datetimepicker@5.2.3/build/js/bootstrap-datetimepicker.min.js"></script>

    <script>
        $('.datepicker').datetimepicker({
            format: 'YYYY-MM-DD',
            icons: {
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-arrow-up",
                down: "fa fa-arrow-down",
                previous: "fa fa-chevron-left",
                next: "fa fa-chevron-right",
                today: "fa fa-clock-o",
                clear: "fa fa-trash-o"
            }
        });
    </script>

    <script src="{{ asset('js') }}/multilingual.js"></script>

    <script>
        $(document).ready(function(){
            @if ($isModelTranslatable)
            $('.container-fluid').multilingual({"editing": true});
            // Add click event listener to the language selector labels
            $('.btn-lang-selector').on('click', function () {
                // Remove active class from all labels
                $('.btn-lang-selector').removeClass('active');

                // Add active class to the clicked label
                $(this).addClass('active');
            });

            @endif

            $(document).on('click','.remove',function(){

                var image_source = $(this).data('image');
                var type = 'packages';

                var var_this = $(this);

                $.ajax({
                    url: "{{ route('packages.remove_image.ajax') }}",
                    data: {
                        "image_source": image_source,
                        "type": type
                    },
                    type: "GET",
                    success: function(response)
                    {
                        toastr.success(response.success+'!');
                        $(var_this).closest('.image-div').remove();
                    },
                    error: function(xhr) {

                    }
                });

            });
        });
    </script>

    <script>
        $(document).ready(function () {
            // Fetch countries for preselected regions on page load
            let selectedRegions = $('#regions').val();
            let selectedCountries = @json(old('countries', $dataTypeContent->countries->pluck('id')->toArray()));

            if (selectedRegions && selectedRegions.length > 0) {
                fetchCountries(selectedRegions, true); // Fetch preselected countries
            }

            // Fetch countries dynamically when regions are changed
            $('#regions').on('change', function () {
                fetchCountries($(this).val(), false); // Fetch for new selection
            });

            function fetchCountries(regions, isPreload = false) {
                arr = {
                    regions: regions,
                };
                if (regions.length > 0) {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    $.ajax({
                        url: "{{route('voyager.fetch.countries.ajax')}}",
                        type: 'POST',
                        data: arr,
                        success: function (response) {
                            let countriesSelect = $('#countries');
                            if (!isPreload) countriesSelect.empty(); // Clear for new selections only

                            if (response.length > 0) {
                                $.each(response, function (index, country) {
                                    let selected = isPreload && (selectedCountries.includes(country.id) || selectedCountries.includes(`${country.id}`)) ? 'selected' : '';
                                    countriesSelect.append(
                                        `<option value="${country.id}" ${selected}>${country.name}</option>`
                                    );
                                });
                            } else {
                                countriesSelect.append('<option disabled>No countries available</option>');
                            }

                            countriesSelect.trigger('change');
                        },
                        error: function () {
                            alert('Failed to fetch countries. Please try again.');
                        }
                    });
                } else {
                    $('#countries').empty().append('<option disabled>Select regions first</option>');
                }
            }
        });
    </script>
@endpush