@props(['wishlist', 'catalog_id', 'catalogs'])

<div id="addWishlistBtn" class="service-main_button" data-toggle="modal" data-target="#addWishlist">
    {{ $wishlist ? 'Редактировать вишлист' : 'Добавить вишлист' }}
</div>
<div class="modal fade newDesignModal cur_modal" id="addWishlist">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ $wishlist ? 'Редактировать вишлист' : 'Добавить вишлист' }}</h5>
                <button type="button" class="modal-close" data-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <form id="wishlist-form" class="service-form" action="{{ $wishlist ? route('wishlists.update', $wishlist->id) : route('wishlists.store') }}" 
                        method="{{ $wishlist ? 'put' : 'post'}}" enctype="multipart/form-data" name="service-form"
                >
                    @csrf
                    <div class="field req">
                        <label for="name">Наименование</label>
                        <input type="text" name="name" class="service-form__input" value="{{ $wishlist ? $wishlist->name : ''}}" maxlength="225">
                        <div class="field__error">Пожалуйста, заполните поле.</div>
                    </div>

                    <div class="field req">
                        <label for="catalog">Каталог</label>
                        <select name="catalog_id" id="catalog" data-select2-id="catalog" class="service-form__select select2-hidden-accessible" tabindex="-1" aria-hidden="true">
                            <option value="0">Не выбрано</option>
                            @foreach($catalogs as $catalog)
                                <option value="{{ $catalog->id }}" @if($wishlist?->catalog_id === $catalog->id || $catalog_id === $catalog->id) selected @endif>{{ $catalog->name }}</option>
                            @endforeach
                        </select>
                        <div class="field__error">Пожалуйста, заполните поле.</div>
                        <script>
                            $(document).ready(function() {
                                $('#catalog').select2({
                                    placeholder: "Выберите каталог",
                                    tags: true,
                                    width: '100%',
                                    minimumResultsForSearch: -1
                                });
                            });
                        </script>
                    </div>

                    <input type="submit" form="wishlist-form" value="Сохранить">
                </form>
                @if($wishlist)
                    <div id="deleteWishlistStartBtn" class="service-form__delete_link" data-el_id="{{$wishlist->id}}" 
                        data-toggle="modal" data-dismiss="modal" data-target="#delWishlistModal"
                    >
                        Удалить вишлист
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@php 
    $redirectUrl = $catalog_id ? 
        route('catalogs.show', ['catalog' => $catalog_id]) : route('index');
@endphp
<x-delete-confirmation 
    :modalId="'delWishlistModal'" 
    :buttonId="'delWishlistButton'" 
    :text="'Вы дествительно хотите удалить вишлист?'"
    :model="'wishlists'"
    :redirectUrl="$redirectUrl"
/>  
<script>
    $(document).ready(function() {
        $(document).on('click', '#addWishlistBtn', function (e) {                    
            var targetModal = $(this).data('target');
            $(targetModal).modal('show');
        });

        $(document).on('submit', '#wishlist-form', function (event) {

            const formData = new FormData(this);
            formData.append('_token', "{{ csrf_token() }}");
            
            submitModal(event, this, formData, function(xhr, form) {
                if (xhr.responseJSON.errors.name) {
                    form.find('input[name=name]').siblings().find('.field__error').html(xhr.responseJSON.errors.name[0]);
                    form.find('input[name=name]').parent().addClass('error');
                }
            });

            return;
        });

        $(document).on('click', '#deleteWishlistStartBtn', function (e) {
            if ($(this).attr('disabled')) {
                return;
            }
            var el_id = $(this).data('el_id');
            $(document).find('#delWishlistButton').data('el_id', el_id);
            $(document).find("#delWishlistModal").modal('show');
        });
    });
</script>