@php use App\Models\SeoPage\SeoPage; @endphp
@php use App\Helpers\ShopHelper; @endphp
@php /** @var SeoPage $seoPage */  @endphp

<div class="card">
    <div class="card-body">
        <label>
            General information
        </label>
        <hr>
        <form method="post"
              action="{{ isset($seoPage) ? route('admin.seo-page.update', ['seoPage' => $seoPage]) : route('admin.seo-page.store') }}"
              enctype="multipart/form-data"
        >
            @csrf

            @method(isset($seoPage) ? 'PUT' : 'POST')

            <input type="hidden" name="shop_id"
                   value="{{ isset($seoPage) ? $seoPage->shop_id : ShopHelper::shop()->id }}">

            @include('admin::pages.components.form.tabs')

            <div class="tab-content">
                @foreach(LaravelLocalization::getSupportedLocales() as $iso => $locale)
                    <div class="tab-pane {{ $loop->first ? 'active' : '' }}" id="tab-{{ $iso }}">

                        <div class="form-row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="title-{{ $iso }}">
                                        Title: {{ strtoupper($iso) }}
                                    </label>
                                    <input type="text"
                                           class="form-control sluggable"
                                           data-slug-target="#slug_{{ $iso }}"
                                           id="title-{{ $iso }}"
                                           name="title[{{ $iso }}]"
                                           placeholder="Title"
                                           value="{{ old('title.' . $iso, isset($seoPage) ? $seoPage->getTranslation('title', $iso) : '') }}"
                                    >
                                </div>
                            </div><!-- Title -->

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="title-{{ $iso }}">
                                        Slug: {{ strtoupper($iso) }}
                                    </label>
                                    <input type="text"
                                           class="form-control"
                                           id="slug_{{ $iso }}"
                                           name="slug[{{ $iso }}]"
                                           placeholder="Slug"
                                           value="{{ old('slug.' . $iso, isset($seoPage) ? $seoPage->getTranslation('slug', $iso) : '') }}"
                                    >
                                </div>
                            </div><!-- Slug -->

                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="short_description_{{ $iso }}">
                                        Short Description: {{ strtoupper($iso) }}
                                    </label>
                                    <textarea class="form-control"
                                              name="short_description[{{ $iso }}]"
                                              id="short_description_{{ $iso }}"
                                              placeholder="Meta description in {{ $locale['name'] }}."
                                              rows="5"
                                    >{{ old('short_description.' . $iso, isset($seoPage) ? $seoPage->getTranslation('short_description', $iso) : '') }}</textarea>
                                </div>
                            </div><!-- Meta description -->

                            @if(isset($seoPage))
                                @include('admin::pages.components.form.meta-tags', ['iso' => $iso, 'locale' => $locale, 'model' => $seoPage])
                            @endif
                        </div>

                        @if(isset($seoPage))
                            <label>Banners</label>
                            <hr>

                            <div class="form-row">

                                @foreach (['one', 'two', 'three'] as $count)

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="link-{{ $iso }}">
                                                Title: {{ strtoupper($iso) }}
                                            </label>
                                            <input type="text"
                                                   class="form-control"
                                                   id="{{'banner_'. $count .'_title'}}-{{ $iso }}"
                                                   name="{{'banner_'. $count .'_title'}}[{{ $iso }}]"
                                                   placeholder="Title"
                                                   value="{{ isset($seoPage) ? $seoPage->getTranslation('banner_'. $count .'_title', $iso) : '' }}"
                                            >
                                        </div>

                                        <div class="form-row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="link-{{ $iso }}">
                                                        Link: {{ strtoupper($iso) }}
                                                    </label>
                                                    <input type="text"
                                                           class="form-control"
                                                           id="{{'banner_'. $count .'_link'}}-{{ $iso }}"
                                                           name="{{'banner_'. $count .'_link'}}[{{ $iso }}]"
                                                           placeholder="Link"
                                                           value="{{ isset($seoPage) ?$seoPage->getTranslation('banner_'. $count .'_link', $iso) : '' }}"
                                                    >
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="{{'banner_'. $count .'_is_active'}}-{{ $iso }}">
                                                        Is active
                                                    </label>
                                                    <select class="form-control"
                                                            id="{{'banner_'. $count .'_is_active'}}-{{ $iso }}"
                                                            name="{{'banner_'. $count .'_is_active'}}[{{ $iso }}]">
                                                        <option value="1" {{ old('banner_'. $count .'_is_active', isset($seoPage) && $seoPage->{'banner_'. $count .'_is_active'}) == 1 ? 'selected' : '' }}>
                                                            Active
                                                        </option>
                                                        <option value="0" {{ old('banner_'. $count .'_is_active', isset($seoPage) && $seoPage->{'banner_'. $count .'_is_active'}) == 0 ? 'selected' : '' }}>
                                                            Inactive
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            @include('admin::pages.components.upload.single', [
                                             'modelInstance'     => SeoPage::class,
                                             'modelID'           => $seoPage->id,
                                             'attachmentKey'     => 'seo_page_banner_' . $count . '_' . $iso
                                          ])
                                        </div>
                                    </div>
                                @endforeach

                            </div>
                        @endif
                    </div>
                @endforeach
            </div>

            <div class="form-row">

                @if(isset($seoPage))
                    <div class="col-12 mb-2">
                        <label for="properties">
                            Category(-ies)
                        </label>
                        <select name="categories[]" class="form-control" id="categories"  multiple="multiple">
                            @foreach($seoPage->categories as $category)
                                <option value="{{ $category->id }}" selected>
                                    {{ $category->title }}
                                </option>
                            @endforeach
                        </select>
                        <div class="font-13 text-muted">
                            Here, you can select categories(-ies) that will be displayed on the
                            catalog page.
                        </div>
                    </div>
                @endif

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="position-{{ $iso }}">
                            Position
                        </label>
                        <input type="number"
                               class="form-control"
                               id="position"
                               name="position"
                               placeholder="Position"
                               value="{{ isset($seoPage) ? $seoPage->position : '' }}"
                        >
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="is_active">Is Active</label>
                        <select class="form-control" id="is_active" name="is_active">
                            <option value="1" {{ old('is_active', isset($seoPage) && $seoPage->is_active) == 1 ? 'selected' : '' }}>
                                Active
                            </option>
                            <option value="0" {{ old('is_active', isset($seoPage) && $seoPage->is_active) == 0 ? 'selected' : '' }}>
                                Inactive
                            </option>
                        </select>
                        <span class="font-13 text-muted">
                            When the "<b>Is Active</b>" option is enabled, the page will be available on the site.
                        </span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="display_in_header">Display in Navigation</label>
                        <select class="form-control" id="display_in_header" name="display_in_header">
                            <option value="1" {{ old('display_in_header', isset($seoPage) && $seoPage->display_in_header) == 0 ? 'selected' : '' }}>
                                Active
                            </option>
                            <option value="0" {{ old('display_in_header', isset($seoPage) && $seoPage->display_in_header) == 0 ? 'selected' : '' }}>
                                Inactive
                            </option>
                        </select>
                        <span class="font-13 text-muted">
                            When the "<b>Display in Navigation</b>" option is enabled, the page will appear in the site's navigation menu.
                        </span>
                    </div>
                </div>
            </div>

            @include('admin::pages.components.flash-messages')

            <div class="row mt-2">
                <div class="col">
                    <div class="text-left">
                        <button type="submit" class="btn btn-sm btn-primary">Save</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

@push('script')
    <script>
        $(function () {
            var $input = $("#categories");

            $input.select2({
                placeholder: '',
                allowClear: true,
                ajax: {
                    url: '{{ route('admin.api.search.select2') }}',
                    type: 'GET',
                    dataType: 'json',
                    data: function (params) {
                        return {
                            modelPath: 'Category',
                            modelName: 'Category',
                            search: params.term,
                            searchFields: ['code', 'title'],
                            searchType: 'like',
                            selectedFields: ['id', 'title', 'code'],
                            limit: 1000
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data.map(function (item) {
                                return {
                                    id: item.id,
                                    text: item.title.lv
                                };
                            })
                        };
                    },
                    cache: false
                }
            });

            // Function to make the selected items sortable
            function makeSortable() {
                $("ul.select2-selection__rendered").sortable({
                    containment: 'parent',
                    update: function () {
                        reorderSelectedValues();
                    }
                });
            }

            // Function to reorder the actual select options
            function reorderSelectedValues() {
                var selectedValues = [];
                $("ul.select2-selection__rendered li").each(function () {
                    var text = $(this).attr('title');
                    var option = $("#categories option").filter(function () {
                        return $(this).text() === text;
                    });
                    selectedValues.push(option.val());
                });

                // Reorder select options based on sorted values
                var $select = $input;
                selectedValues.forEach(function (val) {
                    var option = $select.find("option[value='" + val + "']");
                    option.detach().appendTo($select);
                });

                // Update the select2 instance with the new order
                $input.val(selectedValues).trigger('change');
            }

            makeSortable();
        });

    </script>
@endpush