{{-- Scripts --}}
<script src="{{ Module::asset('frontend:js/jquery.js') }}"></script>
<script src="{{ Module::asset('frontend:js/plugins.js') }}"></script>
<script src="{{ Module::asset('frontend:js/functions.js') }}"></script>
<script src="{{ Module::asset('frontend:js/custom.js') }}"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.js"></script>

<script>
    const $_lang = "{{ $page_init['lang'] ?? app()->getLocale() }}";

    $(document).ready(function() {

        // =============================
        // ซ่อน Summernote modal backdrop อัตโนมัติ
        // =============================
        function hideBackdrop(el) {
            el.forEach(node => {
                if (node.classList && node.classList.contains('note-modal-backdrop')) {
                    node.style.display = 'none';
                }
            });
        }

        // ตรวจจับ DOM ใหม่ที่ถูกเพิ่ม
        const observer = new MutationObserver((mutationsList) => {
            mutationsList.forEach(mutation => {
                hideBackdrop(mutation.addedNodes);
            });
        });
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });

        // Summernote initialization
        $('#summernote').summernote({
            placeholder: 'พิมพ์ข้อความที่นี่...',
            tabsize: 2,
            height: 300,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'clear']],
                ['fontname', ['fontname']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video']],
                ['custom', ['insertDivGrid', 'undo']], // ปุ่ม custom + undo
                ['view', ['fullscreen', 'codeview', 'help']]
            ],
            buttons: {
                insertDivGrid: function(context) {
                    var ui = $.summernote.ui;

                    var button = ui.buttonGroup([
                        ui.button({
                            className: 'dropdown-toggle',
                            contents: '<i class="note-icon-table"></i> DIV Grid',
                            tooltip: 'Insert DIV Grid',
                            data: {
                                toggle: 'dropdown'
                            }
                        }),
                        ui.dropdown({
                            className: 'note-div-grid-dropdown',
                            items: '<div class="note-dimension-picker" style="width:10em;height:10em;"></div>',
                            callback: function($dropdown) {
                                const picker = $('<div class="note-dimension-picker" style="position:relative;width:10em;height:10em;background:#f9f9f9;border:1px solid #ccc;"></div>');
                                $dropdown.empty().append(picker);

                                const maxRows = 5;
                                const maxCols = 5;

                                for (let r = 0; r < maxRows; r++) {
                                    for (let c = 0; c < maxCols; c++) {
                                        const cell = $('<div class="grid-cell"></div>').css({
                                            width: '18%',
                                            height: '18%',
                                            border: '1px solid #aaa',
                                            float: 'left',
                                            margin: '1%',
                                            boxSizing: 'border-box',
                                            cursor: 'pointer'
                                        });
                                        cell.data('row', r + 1);
                                        cell.data('col', c + 1);

                                        cell.on('mouseenter', function() {
                                            picker.find('.grid-cell').each(function() {
                                                const rr = $(this).data('row');
                                                const cc = $(this).data('col');
                                                if (rr <= r + 1 && cc <= c + 1) {
                                                    $(this).css('background', '#b3d4fc');
                                                } else {
                                                    $(this).css('background', 'transparent');
                                                }
                                            });
                                        });

                                        cell.on('click', function() {
                                            const rows = r + 1;
                                            const cols = c + 1;
                                            let html = '<div class="custom-grid">';
                                            for (let i = 0; i < rows; i++) {
                                                html += '<div class="row" style="display:flex;">';
                                                for (let j = 0; j < cols; j++) {
                                                    html += '<div class="col" style="flex:1;border:1px solid #ccc;padding:5px;margin:2px;">DIV</div>';
                                                }
                                                html += '</div>';
                                            }
                                            html += '</div>';
                                            context.invoke('editor.pasteHTML', html);
                                            $dropdown.parent().removeClass('open'); // ปิด dropdown
                                        });

                                        picker.append(cell);
                                    }
                                }

                                // ซ่อน backdrop หลัง dropdown เปิด
                                $('.note-modal-backdrop').hide();
                            }
                        })
                    ]);
                    return button.render();
                },
                undo: function(context) {
                    var ui = $.summernote.ui;
                    var button = ui.button({
                        contents: '<i class="note-icon-undo"></i>',
                        tooltip: 'Undo',
                        click: function() {
                            context.invoke('editor.undo');
                        }
                    });
                    return button.render();
                }
            }
        });

        // ซ่อน backdrop หาก Summernote modal เปิดแบบปกติ
        $(document).on('summernote.dialog.shown', function() {
            $('.note-modal-backdrop').hide();
        });

    });
</script>

{{ module_vite('build-frontend', 'resources/assets/js/app.js') }}

@yield('scripts')