@extends('voyager::master')

@section('page_title', __('voyager::generic.'.(isset($dataTypeContent->id) ? 'edit' : 'add')).' '.$dataType->getTranslatedAttribute('display_name_singular'))

@section('css')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        .error {
            color: red;
            font-size: 1rem;
            display: block;
            margin-top: 5px;
        }
    </style>
    <style>
        .panel .mce-panel {
            border-left-color: #fff;
            border-right-color: #fff;
        }

        .panel .mce-toolbar,
        .panel .mce-statusbar {
            padding-left: 20px;
        }

        .panel .mce-edit-area,
        .panel .mce-edit-area iframe,
        .panel .mce-edit-area iframe html {
            padding: 0 10px;
            min-height: 350px;
        }

        .mce-content-body {
            color: #555;
            font-size: 14px;
        }

        .panel.is-fullscreen .mce-statusbar {
            position: absolute;
            bottom: 0;
            width: 100%;
            z-index: 200000;
        }

        .panel.is-fullscreen .mce-tinymce {
            height: 100%;
        }

        .panel.is-fullscreen .mce-edit-area,
        .panel.is-fullscreen .mce-edit-area iframe,
        .panel.is-fullscreen .mce-edit-area iframe html {
            height: 100%;
            position: absolute;
            width: 99%;
            overflow-y: scroll;
            overflow-x: hidden;
            min-height: 100%;
        }

        .error {
            color: red;
            font-size: 1rem;
            display: block;
            margin-top: 5px;
        }

        .img-wrap {
            position: relative;
        }

        .image-div {
            position: relative;
        }
        .img-wrap .remove {
            position: absolute;
            top: 2px;
            left: 20px;
            z-index: 100;
        }

        .select2-results__group {
            background-color: #f0f0f0; /* Light gray background */
            color: #333; /* Dark text color */
            font-weight: bold;
            padding: 5px;
        }
    </style>
@stop

@section('page_header')
    <h1 class="page-title">
        <i class="{{ $dataType->icon }}"></i>
        {{ __('voyager::generic.'.(isset($dataTypeContent->id) ? 'edit' : 'add')).' '.$dataType->getTranslatedAttribute('display_name_singular') }}
    </h1>
    @include('voyager::multilingual.language-selector')
@stop

@section('content')
    <div class="page-content container-fluid">
        <form class="form-edit-add" role="form"
              action="@if(!is_null($dataTypeContent->getKey())){{ route('voyager.'.$dataType->slug.'.update', $dataTypeContent->getKey()) }}@else{{ route('voyager.'.$dataType->slug.'.store') }}@endif"
              method="POST" enctype="multipart/form-data" autocomplete="off">
            <!-- PUT Method if we are editing -->
            @if(isset($dataTypeContent->id))
                {{ method_field("PUT") }}
            @endif
            {{ csrf_field() }}

            <div class="row">
                <div class="col-md-8">
                    <div class="panel panel-bordered">
                    {{-- <div class="panel"> --}}
                        @if (count($errors) > 0)
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $key => $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div class="panel-body">
                            <div class="form-group">
                                <label for="agency_id">{{ __('voyager::seeders.data_rows.agency') }}</label>
                                <select class="form-control select2" name="agency_id" required>
                                    @foreach(\App\Models\Agency::get() as $agency)
                                        <option value="{{ $agency->id }}" @if(old('agency_id', $dataTypeContent->agency_id) == $agency->id) selected="selected" @endif>{{ $agency->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="name">{{ __('voyager::seeders.data_rows.name') }}</label>

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

                                <input type="text" class="form-control" id="name" name="name" placeholder="{{ __('voyager::seeders.data_rows.name') }}"
                                       value="{{ old('name', $dataTypeContent->name ?? '') }}">

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

                            <div class="form-group">
                                <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 class="form-control" name="description" id="description">{{ old('description', $dataTypeContent->description ?? '') }}</textarea>

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

                            <div class="form-group">
                                <label for="price_per_person">{{ __('voyager::seeders.data_rows.price_per_person') }}</label>
                                <input type="text" class="form-control" id="price_per_person" name="price_per_person" placeholder="{{ __('voyager::seeders.data_rows.price_per_person') }}"
                                       value="{{ old('price_per_person', $dataTypeContent->price_per_person ?? '') }}">

                                @error('price_per_person')
                                <div class="text-danger error-massage">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="destination">{{ __('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" placeholder="{{ __('voyager::seeders.data_rows.destination') }}"
                                       value="{{ old('destination', $dataTypeContent->destination ?? '') }}">

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

                            <div class="form-group">
                                <label for="date">{{ __('voyager::seeders.data_rows.date') }}</label>
                                <input type="date" class="form-control" id="date" name="date" placeholder="{{ __('voyager::seeders.data_rows.date') }}"
                                       value="{{ old('date', $dataTypeContent->date ?? '') }}">

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

                            <div class="form-group">
                                <label for="status">{{ __('voyager::seeders.data_rows.status') }}</label>
                                <select class="form-control @error('status') is-invalid @enderror" name="status" id="status_select">
                                    <option selected disabled>{{ __('voyager::seeders.data_rows.choose_status') }}</option>
                                    <option value="DRAFT" {{ 'DRAFT' == old('status') || 'DRAFT' == $dataTypeContent->status ? 'selected':'' }}>{{ __('voyager::post.status_draft') }}</option>
                                    <option value="PUBLISHED" {{ 'PUBLISHED' == old('status') || 'PUBLISHED' == $dataTypeContent->status ? 'selected':'' }}>{{ __('voyager::post.status_published') }}</option>
                                    <option value="PENDING" {{ 'PENDING' == old('status') || 'PENDING' == $dataTypeContent->status ? 'selected':'' }}>{{ __('voyager::post.status_pending') }}</option>
                                </select>

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

                            <div class="form-group">
                                <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 class="form-control" id="cancellation_policy" name="cancellation_policy">{{ old('cancellation_policy', $dataTypeContent->cancellation_policy ?? '') }}</textarea>

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

                            <div class="form-group">
                                <label for="region">{{ __('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>
                            </div>

                            <div class="form-group">
                                <label for="country_id">{{ __('voyager::seeders.data_rows.country_id') }}</label>

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

                                </select>
                            </div>

                        </div>
                    </div>

                    <div class="panel panel-bordered">
                        <div class="panel-heading">
                            <h3 class="panel-title">{!! __('voyager::generic.additional_information') !!}</h3>
                            <div class="panel-actions">
                                <a class="panel-action voyager-angle-down" data-toggle="panel-collapse" aria-hidden="true"></a>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="form-group">
                                <label for="full_accommodation">{{ __('voyager::seeders.data_rows.full_accommodation') }}</label>

                                <select name="full_accommodation" id="full_accommodation" class="form-control">
                                    <option value="1" {{ old('full_accommodation') == '1' || $dataTypeContent->full_accommodation == '1' ? 'selected' : '' }}>{{ __('voyager::generic.yes') }}</option>
                                    <option value="0" {{ old('full_accommodation') == '0' || $dataTypeContent->full_accommodation == '0' ? 'selected' : '' }}>{{ __('voyager::generic.no') }}</option>
                                </select>

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

                            <div class="form-group">
                                <label for="nights_number">{{ __('voyager::seeders.data_rows.nights_number') }}</label>
                                <input type="number" min="0" class="form-control" id="nights_number" name="nights_number" placeholder="{{ __('voyager::seeders.data_rows.nights_number') }}"
                                       value="{{ old('nights_number', $dataTypeContent->nights_number ?? '') }}">

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

                            <div class="form-group">
                                <label for="addons">{{ __('voyager::seeders.data_rows.addons') }}
                                    <small class="text-danger">*</small>
                                </label>

                                {{-- choose addons --}}
                                <select id="addonsSelect" 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 data-icon="{{ Voyager::image( $subChild->icon ) }}" value="{{ $subChild->id }}" {{  ( old('addons') && in_array($subChild->id,old('addons')) ) || (isset($dataTypeContent->packageAddOns) && in_array($subChild->id , $dataTypeContent->packageAddOns()->pluck('addons.id')->toArray())) ?'selected':''}}>---{{ $subChild->name }}</option>
                                                        @endforeach
                                                    </optgroup>
                                                @else
                                                    <option data-icon="{{ Voyager::image( $child->icon ) }}" value="{{ $child->id }}" {{  ( old('addons') && in_array($child->id,old('addons')) ) || (isset($dataTypeContent->packageAddOns) && in_array($child->id , $dataTypeContent->packageAddOns()->pluck('addons.id')->toArray())) ?'selected':''}}>--{{ $child->name }}</option>
                                                @endif
                                            @endforeach
                                            </optgroup>
                                        @endif
                                    @endforeach
                                </select>

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

                            <div>
                                <div id="addon-prices-container" class="mt-3">
                                    {{-- Javascript Code --}}
                                </div>
                            </div>
                        </div>

                        <div class="panel-body">
                            <div class="form-group">
                                <label for="highlights">{{ __('voyager::seeders.data_rows.highlights') }}
                                    <small class="text-danger">*</small>
                                </label>

                                @php
                                    $highlightGroups = \App\Models\Highlight::groupedByCategory();
                                     $selectedHighlights = $dataTypeContent->packageHighlights->groupBy('category')->map(function ($items) {
                                        return $items->first(); // لأنك بتختار واحد فقط من كل مجموعة
                                    });
                                @endphp

                                @foreach($highlightGroups as $category => $highlights)
                                    <div class="form-group">
                                        <label for="highlight_{{ Str::slug($category) }}">{{ $category }}</label>
                                        <select name="highlights[{{ $category }}]" class="form-control select2">
                                            <option selected value="">{{ __('voyager::generic.select_list') }}</option>
                                            @foreach($highlights as $highlight)
                                                <option value="{{ $highlight->id }}"
                                                        @if(
                                                            old("highlights.$category") == $highlight->id ||
                                                            (isset($selectedHighlights[$category]) && $selectedHighlights[$category]->id == $highlight->id)
                                                        )
                                                            selected
                                                    @endif
                                                >
                                                    ({{ $category }}) - {{ $highlight->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                @endforeach


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

                            <div class="form-group" id="hotel-name-wrapper" style="display: none;">
                                <label for="hotel_name">{{ __('voyager::seeders.data_rows.hotel_name') }}</label>
                                <input type="text" name="hotel_name" id="hotel_name" class="form-control" value="{{ old('hotel_name', $dataTypeContent->hotel_name ?? '') }}">

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

                    <!-- ### files ### -->
                    <div class="panel panel-bordered" >
                        <div class="panel-heading">
                            <h3 class="panel-title">{!! __('voyager::generic.files') !!}</h3>
                            <div class="panel-actions">
                                <a class="panel-action voyager-angle-down" data-toggle="panel-collapse" aria-hidden="true"></a>
                            </div>
                        </div>

                        <div class="panel-body">

                            {{-- files --}}
                            <div class="form-group col-md-12">
                                <label for="url_video">{{ __('voyager::generic.files') }}</label>
                                <div class="img-wrap row">
                                    @php
                                        $package_files = $dataTypeContent->files()->where('name','packages')->get();
                                    @endphp

                                    @if($package_files)
                                        @foreach($package_files as $key => $package_file)
                                            <div class="col-md-3 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 src="{{ filter_var($package_file->url, FILTER_VALIDATE_URL) ? $package_file->url : Voyager::image( $package_file->url ) }}" style="width:200px; height:auto; clear:both; display:block; padding:2px; border:1px solid #ddd; margin-bottom:10px;" />
                                                @endif
                                                <button type="button" class="btn btn-circle btn-danger remove" data-image="{{ $package_file->id }}">
                                                    <i class="voyager-trash"></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>

                </div>

                <div class="col-md-4">
                    <div class="panel panel panel-bordered panel-warning">
                        <div class="panel-body">
                            <div class="form-group">
                                @if(isset($dataTypeContent->cover_image))
                                    <img src="{{ filter_var($dataTypeContent->cover_image, FILTER_VALIDATE_URL) ? $dataTypeContent->cover_image : Voyager::image( $dataTypeContent->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">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary pull-right save">
                {{ __('voyager::generic.save') }}
            </button>
        </form>
        <div style="display:none">
            <input type="hidden" id="upload_url" value="{{ route('voyager.upload') }}">
            <input type="hidden" id="upload_type_slug" value="{{ $dataType->slug }}">
        </div>
    </div>
@stop

@section('javascript')
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

    <script>
        @php
            $oldAddonsPrices = old('addons_prices') ?? optional($dataTypeContent)->packageAddOns?->pluck('pivot.price', 'id')->toArray() ?? [];
        @endphp

        $(document).ready(function () {
            const addonsSelect = $('#addonsSelect');
            const pricesContainer = $('#addon-prices-container');

            function renderPriceInputs() {
                pricesContainer.empty();

                addonsSelect.find('option:selected').each(function () {
                    const addonId = $(this).val();
                    const addonName = $(this).text().replace(/^-+/, '').trim();

                    const oldValue = @json($oldAddonsPrices??'{}');
                    const oldPrices = oldValue;
                    const inputValue = oldPrices[addonId] ?? 0;

                    const input = `
                        <div class="form-group">
                            <label> {{ __('voyager::generic.extra_price') }} <b>(${addonName})</b> {{ __('voyager::generic.optional') }}</label>
                            <input type="number" min="0" step="0.01" name="addons_prices[${addonId}]" class="form-control" placeholder="أدخل السعر إذا وُجد" value="${inputValue}">
                        </div>
                    `;
                    pricesContainer.append(input);
                });
            }

            // تشغيل عند التغيير
            addonsSelect.on('change', renderPriceInputs);

            // تشغيل مبدئيًا لعرض القيم القديمة
            renderPriceInputs();
        });
    </script>

    <script>
        $(document).ready(function () {
            // نحدد السلكت الخاص بمجموعة الفنادق
            const $hotelSelect = $('select[name="highlights[Hotel]"]');
            const $hotelInputWrapper = $('#hotel-name-wrapper');

            function toggleHotelInput() {
                const value = $hotelSelect.val();
                if (value && value !== "") {
                    $hotelInputWrapper.show();
                } else {
                    $hotelInputWrapper.hide();
                }
            }

            // أول تحميل للصفحة
            toggleHotelInput();

            // تشغيل التحقق عند تغيير القيمة، سواءً كانت Select2 أو عادية
            $hotelSelect.on('change', function () {
                toggleHotelInput();
            });
        });
    </script>

    <script>
        $(document).ready(function () {
            $('#addonsSelect').select2({
                templateResult: formatIconOption,
                templateSelection: formatIconOption
            });

            function formatIconOption (state) {
                if (!state.id) return state.text;
                var iconUrl = $(state.element).data('icon');
                return $(`<span><img src="${iconUrl}" style="width:20px; margin-right:5px;" /> ${state.text}</span>`);
            }
        });
    </script>

    <script>
        $(document).ready(function(){
            @if ($isModelTranslatable)
            $('.side-body').multilingual({"editing": true});
            $(document).on('click','.language-selector',function (){
                // reinitSelectize('#input-tags3');
            })
            @endif

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

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

                var var_this = $(this);

                $.ajax({
                    url: "{{ route('voyager.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>
@stop