@props([
    'label' => '',
    'btn' => 'danger',
    'icon' => 'trash',
    'url' => '',
    'triggerClickId' => '',
])

@php
    $unique_id = uniqid();
@endphp

<a href="#modal-{{ $unique_id }}-open" class="btn btn-outline-{{ $btn }} waves-effect waves-light btn-sm"
    data-toggle="modal">
    {{ $label }}
    <i class="fas fa-{{ $icon }} fa fa-fw"></i>
</a>

<!-- Modal -->
<div class="modal fade " id="modal-{{ $unique_id }}-open" tabindex="-1" role="dialog"
    aria-labelledby="modal-title-{{ $unique_id }}" data-backdrop="static" aria-hidden="true">
    <div class="modal-dialog dialog" role="document">
        <div class="modal-content">
            <div class="modal-header m-0">
                <h5 class="modal-title" id="modal-title-{{ $unique_id }}"></h5>
                <button type="button" class="close go-off" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>


            <div class="m-2">
                <form method="POST" id="model-form-{{ $unique_id }}" action="{{ $url }}"
                    class="form-horizontal parsley" novalidate>
                    @csrf
                    @method('PUT')

                    {{ $slot }}
                    
                    <div class="row justify-content-center pt-4" style="gap: 10px">
                        <button type="button" class="btn btn-secondary go-off" data-dismiss="modal">
                            {{ __('admin.cancel') }}
                        </button>
                        <button type="submit" class="btn btn-{{ $btn }}">
                            {{ __('admin.confirm') }}
                        </button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>




<script>
    $(document).ready(function() {

        $('.parsley').parsley();

        unique = @json($unique_id);
        formId = `#model-form-${unique}`;
        triggerClickId = @json($triggerClickId);
        $(formId).on('submit', function(e) {

            e.preventDefault();

            const formEl = this; // Native DOM form element

            if (!formEl.checkValidity()) {
                formEl.reportValidity();
                return;
            }

            Swal.fire({
                title: '<i class="fa fa-spinner fa-spin"></i>',
                text: '{{ __('admin.loading') }}',
                allowOutsideClick: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            const form = $(this);
            const url = form.attr('action');
            const method = form.find('input[name="_method"]').val() || form.attr('method');
            const data = form.serialize();

            $.ajax({
                url: url,
                type: method,
                data: data,
                success: function(response) {
                    Swal.close();
                    Swal.fire({
                        icon: 'success',
                        title: '{{ __('admin.update_successfully') }}',
                        showConfirmButton: false,
                        timer: 1500
                    });

                    if (triggerClickId) {
                        $(`#${triggerClickId}`).click()
                    }

                    $('.modal').modal('hide');
                    $('.modal-backdrop').removeClass("show");

                    // Optionally reload data or UI here
                },
                error: function(xhr) {
                    Swal.close();
                    message = Object.values(xhr.responseJSON.errors)[0]?.[0] || xhr
                        .responseJSON?.message || '{{ __('admin.error') }}';
                    Swal.fire({
                        icon: 'error',
                        title: '{{ __('admin.error') }}',
                        text: message
                    });
                }
            });
        });



        $(".go-off").on('click', function(e) {
            if (triggerClickId) {
                $(`#${triggerClickId}`).click()
            }
        })

    });
</script>