<div id="create{{ $compName }}Modal" title="{{ $title }}" style="display:none;">
    <div class="modal-body">
        <div class="form-group">
            <label class="required" for="{{ $name }}">{{ $label }}</label>
            <input class="form-control" type="text" name="{{ $name }}" id="name{{ $compName }}" value="">
            <span class="invalid-feedback" style="display: none;"></span>
        </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: "30%",
            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");
                    }
                }
            ],
            close: function() {
                $(modalId).find("input").val('');
                $(modalId).find(".invalid-feedback").hide();
            }
        }).prev(".ui-dialog-titlebar").css("background","white");;

        $(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 dynamicKey = "{{ $name }}";
            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 }}"];
                            const option = new Option(displayValue, response.data.id, true, true);
                            $(currentSelectId).append(option).trigger('change');
                            $(document).trigger('newOptionAdded', [option]);
                        }

                        $.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-titlebar-close {
        /* padding:0 !important; */
    }

    .ui-dialog-titlebar-close:after {
        content: 'X';
        width: 20px;
        height: 20px;
        display: inline-block;
        /* background-position: -96px -128px; */
        background-repeat: no-repeat;
    }
    .ui-dialog {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .ui-dialog-titlebar {
        background-color: #f8f9fa!important;
        color: #333;
        border: none;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom: 0;
    }

    .ui-dialog-titlebar-close {
        background: none !important;
        border: none !important;
        color: inherit;
        font-size: 1.2em;
        opacity: 1;
        text-shadow: none;
        padding: 0;
        margin: 0;
        line-height: 1;
        top: 50%;
        transform: translateY(-50%);
        right: 0.5em;
        position: absolute;
    }

    .ui-dialog-titlebar-close:hover {
        color: #000;
        text-decoration: none;
        opacity: 0.8;
    }  

    .ui-dialog-title {
        font-size: 16px;
        font-weight: bold;
    }

    .ui-dialog-content {
        background-color: #f8f9fa;
    }

    .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>