@php use App\Models\Slider\Slider; @endphp
@php /** @var Slider $slider */  @endphp

@extends('admin::layout.main')

@section('title', $slider->title)

@push('css')
    <style>
        .select2 {
            width: 100% !important;
        }
    </style>
@endpush

@section('content-wrapper')

    @include('admin::pages.components.breadcrumb', [
          'current_route_title'   => $slider->title,
          'previous_route_title'  => trans('admin-sidebar.Sliders'),
          'previous_route_url'    => route('admin.sliders.index', ['shop'=> $shop])
    ])

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <label>General information</label>
                    <hr>
                    <form method="post" action="{{ route('admin.sliders.update', ['slider' => $slider]) }}">

                        @csrf

                        @method('PUT')

                        @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-3">
                                            <div class="form-group">
                                                <label for="title-{{ $iso }}">
                                                    Title: {{ strtoupper($iso) }}
                                                </label>
                                                <input type="text"
                                                       class="form-control"
                                                       id="title-{{ $iso }}"
                                                       name="title[{{ $iso }}]"
                                                       placeholder="Title"
                                                       value="{{ $slider->getTranslation('title', $iso) }}"
                                                >
                                            </div>
                                        </div><!-- Title -->
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="sub_title-{{ $iso }}">
                                                    Slug: {{ strtoupper($iso) }}
                                                </label>
                                                <input type="text"
                                                       class="form-control"
                                                       id="sub_title-{{ $iso }}"
                                                       name="sub_title[{{ $iso }}]"
                                                       placeholder="Sub title"
                                                       value="{{ $slider->getTranslation('sub_title', $iso) }}"
                                                >
                                            </div>
                                        </div><!-- Slug -->
                                    </div>
                                </div>

                            @endforeach
                        </div>
                        <div class="row mt-4">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="is_active">Active</label>
                                    <select class="form-control" id="is_active" name="is_active">
                                        <option value="0" {{ !$slider->is_active ? 'selected' : '' }}>
                                            Inactive
                                        </option>
                                        <option value="1" {{ $slider->is_active ? 'selected' : '' }}>
                                            Active
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="sliderItemCountInput"
                                           data-toggle="tooltip"
                                           title="Items that will be displayed in the slider"
                                    >
                                        Number of displayed items:
                                    </label>
                                    <input type="number"
                                           class="form-control"
                                           id="count_show_items"
                                           name="count_show_items"
                                           value="{{ $slider->count_show_items }}"
                                    >
                                </div>
                            </div>
                            @if($slider->is_popular || $slider->is_new)
                                <div class="col-lg-12">
                                    <label for="products" class="col-form-label">
                                        Product list
                                    </label>
                                    <select name="products[]" id="products" multiple="multiple">
                                        @foreach($products as $product)
                                            <option value="{{ $product->id }}" selected>
                                                {{ $product->code }}, {{$product->title}}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                            @endif
                        </div>
                        <div class="row mt-2">
                            <div class="col-lg-4">
                                <button id="save-button" type="submit" class="btn btn-primary">Save</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection


@push('script')

    <script>

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

        {{--$(function () {--}}
        {{--    var $input = $("#products");--}}
        {{--    var selectedProducts = @json($products);--}}
        {{--    $input.select2({--}}
        {{--        ajax: {--}}
        {{--            url:            "{{ route('api.search.products') }}",--}}
        {{--            data:           function (params) {--}}
        {{--                return {--}}
        {{--                    query: params.term--}}
        {{--                };--}}
        {{--            },--}}
        {{--            delay:          800,--}}
        {{--            processResults: function (data) {--}}
        {{--                return {--}}
        {{--                    results: $.map(data.collection.data.products, function (item) {--}}
        {{--                        return {--}}
        {{--                            text: item.code + ', ' + item.title,--}}
        {{--                            id:   item.id--}}
        {{--                        }--}}
        {{--                    })--}}
        {{--                };--}}
        {{--            }--}}
        {{--        }--}}
        {{--    }).on('select2:select', function (e) {--}}
        {{--        selectedProducts.push(e.params.data.id);--}}
        {{--    }).on('select2:unselect', function (e) {--}}
        {{--        var index = selectedProducts.indexOf(parseInt(e.params.data.id));--}}
        {{--        if (index > -1) {--}}
        {{--            selectedProducts.splice(index, 1);--}}
        {{--        }--}}
        {{--    }).on('change', function (e) {--}}
        {{--        console.log(e);--}}
        {{--    });--}}

        {{--    $("ul.select2-selection__rendered").sortable({--}}
        {{--        containment: 'parent',--}}
        {{--        update:      function () {--}}
        {{--            orderSortedValues();--}}
        {{--            selectedProducts = $("select").val();--}}
        {{--        }--}}
        {{--    });--}}

        {{--    orderSortedValues = function () {--}}
        {{--        var value = '';--}}
        {{--        $("ul.select2-selection__rendered").children("li[title]").each(function (i, obj) {--}}
        {{--            var element = $("select").children('option').filter(function () {--}}
        {{--                return $(this).html() == obj.title;--}}
        {{--            });--}}
        {{--            moveElementToEndOfParent(element);--}}
        {{--        });--}}
        {{--    };--}}

        {{--    moveElementToEndOfParent = function (element) {--}}
        {{--        var parent = element.parent();--}}
        {{--        element.detach();--}}
        {{--        parent.append(element);--}}
        {{--    };--}}

        {{--    // let title = {--}}
        {{--    //     "lv": $('#title-lv').val(),--}}
        {{--    //     "en":$('#title-en').val()--}}
        {{--    // };--}}
        {{--    // let sub_title = {--}}
        {{--    //     "lv": $('#sub_title-lv').val(),--}}
        {{--    //     "en":$('#sub_title-en').val()--}}
        {{--    // };--}}
        {{--    // console.log(title);--}}

        {{--    $('#save-button').on('click', function () {--}}
        {{--        axios.put('/admin/api/sliders/' + '{{ $slider->id }}', {--}}
        {{--            'products':         $("#products").val(),--}}
        {{--            'is_active':        $('#is_active').find(":selected").val(),--}}
        {{--            'manual_selection': $('#manual_selection').prop('checked') ? 1 : 0,--}}
        {{--            'count_show_items': $('#count_show_items').val(),--}}
        {{--            // 'title': title,--}}
        {{--            // 'sub_title': sub_title,--}}
        {{--        })--}}
        {{--            .then(function (response) {--}}
        {{--                window.toastr.success(response.data.message);--}}
        {{--            })--}}
        {{--            .catch(function (error) {--}}
        {{--                window.toastr.warning(error.response.data.message);--}}
        {{--            });--}}
        {{--    });--}}

        {{--    $('[data-toggle="tooltip"]').tooltip();--}}
        {{--});--}}

    </script>

@endpush