{{--
    Partial: JS для страницы редактирования page-edit
    Подключается через @include внутри @push('js') основного файла
    Зависимости: SortableJS (CDN), jQuery + Summernote (подключены через AdminLTE)
    Переменные Blade: $page (для route())
--}}
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script>
(function () {
    // ===== Инициализация Summernote для всех текстовых секций =====
    $('.content-editor').each(function () {
        var $ta        = $(this);
        var sectionId  = $ta.data('section-id');
        var $wrapper   = $ta.closest('.flex-grow-1').find('#editor-' + sectionId);

        $wrapper.summernote({
            lang: 'ru-RU',
            height: 220,
            toolbar: [
                ['style',  ['style']],
                ['font',   ['bold', 'italic', 'underline', 'clear']],
                ['para',   ['ul', 'ol', 'paragraph']],
                ['insert', ['link', 'hr']],
                ['view',   ['fullscreen', 'codeview']],
            ],
            styleTags: ['p', 'h2', 'h3', 'h4', 'blockquote'],
            callbacks: {
                onChange: function (contents) {
                    $ta.val(contents);
                }
            }
        });

        $ta.val($wrapper.summernote('code'));
    });

    // ===== Сохранение контента текстовой секции через AJAX =====
    $('.btn-save-content').on('click', function () {
        var sectionId  = $(this).data('section-id');
        var $btn       = $(this);
        var $status    = $('#status-' + sectionId);
        var $ta        = $('[data-section-id="' + sectionId + '"].content-editor');
        var saveUrl    = $ta.data('save-url');

        $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');

        fetch(saveUrl, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ content: $ta.val() })
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            $btn.prop('disabled', false).html('<i class="fas fa-save"></i> Сохранить текст');
            if (data.ok) {
                $status.show();
                setTimeout(function () { $status.hide(); }, 2500);
            } else {
                alert('Ошибка сохранения.');
            }
        })
        .catch(function () {
            $btn.prop('disabled', false).html('<i class="fas fa-save"></i> Сохранить текст');
            alert('Ошибка соединения.');
        });
    });

    // ===== Drag-and-drop сортировка секций =====
    var list    = document.getElementById('sortable-sections');
    var btnSave = document.getElementById('btn-save-order');

    if (!list) return;

    Sortable.create(list, {
        handle: '.drag-handle',
        animation: 150,
        ghostClass: 'bg-light',
        onEnd: function () {
            btnSave.disabled = false;
        }
    });

    // Сохраняем новый порядок через AJAX
    btnSave.addEventListener('click', function () {
        btnSave.disabled = true;
        btnSave.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Сохранение…';

        var ids = Array.from(list.querySelectorAll('[data-id]'))
            .map(function (el) { return parseInt(el.dataset.id, 10); });

        fetch('{{ route('admin.pages.sections.reorder', $page) }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ order: ids })
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            if (data.ok) {
                btnSave.innerHTML = '<i class="fas fa-check"></i> Сохранено';
                setTimeout(function () {
                    btnSave.innerHTML = '<i class="fas fa-save"></i> Сохранить порядок';
                }, 2000);
            } else {
                btnSave.disabled = false;
                btnSave.innerHTML = '<i class="fas fa-save"></i> Сохранить порядок';
                alert('Ошибка сохранения порядка.');
            }
        })
        .catch(function () {
            btnSave.disabled = false;
            btnSave.innerHTML = '<i class="fas fa-save"></i> Сохранить порядок';
            alert('Ошибка соединения.');
        });
    });
})();
</script>