<div id="{{ $modalId }}" title="{{ $title }}" style="display:none;">
    <div class="modal-body">
        <div class="form-group">
            <label class="required" for="field_{{ $modalId }}">{{ $label }}</label>
            <input class="form-control" 
                   type="text" 
                   name="{{ $fieldName }}" 
                   id="field_{{ $modalId }}" 
                   value="">
            <span class="invalid-feedback" style="display: none;"></span>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        const modalId = "#{{ $modalId }}";
        const saveButtonId = "#save{{ ucfirst($modalId) }}";
        const openButtonClass = ".modal-update";
        
        $(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 },
            buttons: [
                {
                    text: "{{ trans('global.save') }}",
                    class: "btn btn-primary",
                    id: saveButtonId.substring(1),
                    click: function () {
                        const inputData = $(modalId).find("input").val();
                        const recordId = $(modalId).data("record-id");

                        let dataToSend = {
                            "_method": "PUT",
                        };
                        
                        dataToSend["{{ $fieldName }}"] = inputData;

                        $.ajax({
                            url: `{{ $route }}/${recordId}`,
                            type: "PUT",
                            headers: { 'x-csrf-token': '{{ csrf_token() }}' },
                            data: dataToSend,
                            success: function (response) {
                                if (response.success) {
                                    $.fn.dataTable.tables({ visible: true, api: true }).ajax.reload(null, false);

                                    Swal.fire({
                                        title: '{{ trans('global.update_success') }}',
                                        icon: 'success',
                                        timer: 1500,
                                        showConfirmButton: false
                                    }).then(() => {
                                        $(modalId).find(".invalid-feedback").text("").hide();
                                        $(modalId).dialog("close");
                                    });
                                }
                            },
                            error: function (xhr) {
                                const errorMessage = xhr.responseJSON?.message || "Error occurred!";
                                $(modalId).find(".invalid-feedback").text(errorMessage).show();
                            },
                        });
                    }
                },
                {
                    text: "{{ trans('global.close') }}",
                    class: "btn btn-secondary",
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            ]
        });

        $(document).on("click", openButtonClass, function () {
            const recordId = $(this).data("record-id");
            const recordData = $(this).data("record-data");
            
            $(modalId).data("record-id", recordId);
            $(modalId).find("input").val(recordData);
            $(modalId).dialog("open");
        });
    });
</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>