@props(['catalog'])

<div id="addCatalogBtn" class="service-main_button" data-toggle="modal" data-target="#addCatalog">
    {{ $catalog ? 'Редактировать каталог' : 'Добавить каталог' }}
</div>
<div class="modal fade newDesignModal cur_modal" id="addCatalog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ $catalog ? 'Редактировать каталог' : 'Добавить каталог' }}</h5>
                <button type="button" class="modal-close" data-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <form id="catalog-form" class="service-form"
                        action="{{ $catalog ? route('catalogs.update', $catalog->id) : route('catalogs.store') }}"
                        method="{{ $catalog ? '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="{{ $catalog ? $catalog->name : ''}}" maxlength="225">
                        <div class="field__error">Пожалуйста, заполните поле.</div>
                    </div>

                    <input type="submit" form="catalog-form" value="Сохранить">
                </form>
                @if($catalog)
                    <div id="deleteCatalogStartBtn" class="service-form__delete_link" data-el_id="{{$catalog->id}}" 
                    data-toggle="modal" data-dismiss="modal" data-target="#delCatalogModal"
                    >
                        Удалить каталог
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@php 
    $redirectUrl = route('index');
@endphp

<x-delete-confirmation 
    :modalId="'delCatalogModal'" 
    :buttonId="'delCatalogButton'" 
    :text="'Вы дествительно хотите удалить каталог?'"
    :model="'catalogs'"
    :redirectUrl="$redirectUrl"
/>  
<script>
    $(document).ready(function() {
        $(document).on('click', '#addCatalogBtn', function (e) {                    
            var targetModal = $(this).data('target');
            $(targetModal).modal('show');
        });

        $(document).on('submit', '#catalog-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 false;
        });

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