<div id="update{{ $compName }}Modal" title="{{ $title }}" style="display:none;">
    <div class="modal-body">
        <div class="form-group">
            <input type="hidden" name="_method" value="PUT">
            @include($fieldsLink)
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        const modalId = "#update{{ $compName }}Modal";
        const saveButtonId = "#saveUpdate{{ $compName }}ModalButton";
        const openButtonClass = ".modal-update";
        let selectId = null;
        let updateButton;

        $(modalId).dialog({
            autoOpen: false,
            modal: true,
            width: 800,
            height: 600,
            maxWidth: 1200,
            maxHeight: 800,
            draggable: true,
            resizable: true,
            containment: "window",
            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: "saveUpdate{{ $compName }}ModalButton",
                    click: function() {

                    }
                },
                {
                    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");

            const parsedRecordData = typeof recordData === "string" ? JSON.parse(recordData) : recordData;
            updateButton = $(this);
    
            for (const key in parsedRecordData) {
                const field = $(modalId).find(`[name="${key}[]"], [name="${key}"]`);
                if (Array.isArray(parsedRecordData[key])) {
                    if (field.is("select")) {
                        const ids = parsedRecordData[key].map(item => item.id);

                        if (field.hasClass('select2')) {
                            setTimeout(() => {
                                field.val(ids).trigger('change');
                            }, 400);
                        } else {
                            field.val(ids).trigger('change');
                        }
                    }
                }
                else if (parsedRecordData[key] && typeof parsedRecordData[key] === "object") {
                    if (field.is("select")) {
                        const fieldValue = parsedRecordData[key]?.id;
                        field.val(fieldValue).trigger('change');
                    }
                }
                else if (field.is(":checkbox")) {
                    field.prop("checked", parsedRecordData[key]);
                }
                else if (field.is(":radio")) {
                    $(`${modalId} [name="${key}"][value="${parsedRecordData[key]}"]`).prop("checked", true);
                }
                else if (field.is("select")) {
                    field.val(parsedRecordData[key]).trigger('change');
                }
                else {
                    field.val(parsedRecordData[key]);
                }
            }
           
            // Open the modal
            $(modalId).dialog("open");
        });


        $(document).on("click", saveButtonId, function() {
            const updateUrl = updateButton.data("update-url");

            const formData = $(modalId).find(":input").serialize();
            const recordId = $(modalId).data("record-id");
            $.ajax({
                url: updateUrl,
                type: "POST",
                headers: {
                    'x-csrf-token': _token
                },
                data: formData,
                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).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>