<div id="create{{ $compName }}Modal" title="{{ $title }}" style="display:none;">
    <div class="modal-body">
        <div class="form-group">
            {{-- {{ $slot }} --}}
            @include($fieldsLink)
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        const modalId = "#create{{ $compName }}Modal";
        const saveButtonId = "#save{{ $compName }}ModalButton";
        const openButtonId = "#open{{ $compName }}Modal";
        let selectId = null;
        
        $(modalId).dialog({
            autoOpen: false,
            modal: true,
            width: "auto",
            height: "auto",
            maxWidth: "90%",
            maxHeight: "90%",
            draggable: true,
            resizable: true,
            position: { my: "center", at: "center", of: window },
            show: { effect: "slide", duration: 500 },
            hide: { effect: "fold", duration: 500 },
            dialogClass: "rounded-dialog",
            buttons: [
                {
                    text: "{{ trans('global.save') }}",
                    class: "btn btn-primary",
                    id: "save{{ $compName }}ModalButton",
                    click: function () {
                        
                    }      
                },
                {
                    text: "{{ trans('global.close') }}",
                    class: "btn btn-secondary",
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            ]
        });


        $(document).on("click", openButtonId, function () {
            $(modalId).dialog("open");
            selectId = `#${$(this).data("select-id")}`;
        });

        $(document).on("click", saveButtonId, function () {
            const inputData = $(modalId).find("input").val();
            let currentSelectId = selectId;

            let dataToSend = {};
            // dataToSend[dynamicKey] = inputData;

            $.ajax({
                url: "{{ $route }}",
                type: "POST",
                headers: { 'x-csrf-token': _token },
                data: dataToSend,
                success: function (response) {
                    if (response.success) {
                        if (currentSelectId) {
                            const displayValue = response.data['name'] ?? response.data['title'];
                            const option = new Option(displayValue, response.data.id, true, true);
                            $(currentSelectId).append(option).trigger('change');
                        }

                        $.fn.dataTable.tables({ visible: true, api: true }).ajax.reload(null, false);
                        
                        Swal.fire({
                            title: '{{ trans('global.create_success')}}',
                            icon: 'success',
                            timer: 1500,
                            showConfirmButton: false
                        }).then(() => {
                            $(modalId).dialog("close");
                        });                            
                    }
                },
                error: function (xhr) {
                    const errorMessage = xhr.responseJSON?.message || "Error occurred!";
                    $(modalId).find(".invalid-feedback").text(errorMessage).show();
                },
            });
        });
    });
</script>

<style>
    .ui-dialog {
       border-radius: 15px;
       overflow: hidden;
       /* top: 10% !important; */
   }

   .ui-dialog-titlebar {
       border-top-left-radius: 15px;
       border-top-right-radius: 15px;
   }
   .swal2-popup {
           position: fixed;
           top: 10px;
           right: 10px;
           width: auto;
           max-width: 300px;
           padding: 10px;
           border-radius: 8px;
           box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
       }

       .swal2-title {
           font-size: 18px;
           font-weight: bold;
       }

       .swal2-content {
           font-size: 14px;
       }
</style>