@props([
    'modalId',
    'buttonId',
    'text',
    'model',
    'redirectUrl'
])

<div class="modal fade newDesignModal" id="{{ $modalId }}">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Удаление</h5>
                <button type="button" class="modal-close" data-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                {{ $text }}
                <!-- Вы действительно хотите удалить запись? -->
                <div id="{{ $buttonId }}" class="md-close delElement" data-model="{{ $model }}" 
                        data-el_id="" data-dismiss="modal" aria-label="Close">
                    Удалить
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    //Delete confirmation script
    $(document).ready(function() {
        $(document).on('click', '#{{ $buttonId }}', function (e) {
            e.preventDefault();
            var elId = $(this).data('el_id');
            var model = $(this).data('model');

            var data = {};
            data._token = "{{ csrf_token() }}";

            const routeDeleteTask = "{{ route('tasks.delete', ['task' => 'task_id']) }}";
            
            $.ajax({
                url: routeDeleteTask.replace('task_id', elId),
                type: 'delete',
                data: data,
                success: function (response) {
                    window.location.reload();
                },
                error: function (xhr, status, error) {
                    $('.modal-info').addClass('modal-info-active');
                    console.error(xhr.responseJSON);
                },
                complete: function () {
                    $(document).find("#delElement").modal('hide');
                }
            });
        });
    });
</script>