@include('laws.partials.modal-edit-structure')

<script>
document.addEventListener('DOMContentLoaded', function() {

    const sortableOptions = {
        group: 'nested',
        animation: 200,
        fallbackOnBody: true,
        swapThreshold: 0.65,
        handle: '.sortable-handle',
        ghostClass: 'sortable-ghost',
        chosenClass: 'sortable-chosen',
        dragClass: 'sortable-drag',

        onStart: () => document.body.style.cursor = 'grabbing',

        onEnd: (evt) => {
            document.body.style.cursor = '';
            const saveBtn = document.getElementById('saveOrderBtn');
            if (saveBtn) saveBtn.disabled = false;


            document.querySelectorAll('.sortable-ghost, .sortable-chosen, .sortable-drag')
                .forEach(e => e.removeAttribute('style'));

            console.log('Item movido:', evt.item.dataset.id);
        }
    };


    function setupSortables(parent = document) {
        parent.querySelectorAll('.sortable-container, .sortable-nested').forEach(el => {
            if (el.dataset.sortableInitialized === 'true') return;

            const sortableInstance = new Sortable(el, sortableOptions);
            el.sortable = sortableInstance;
            el.dataset.sortableInitialized = 'true';
        });
    }


    setupSortables();


    const treeTab = document.getElementById('tree-tab');
    if (treeTab) {
        treeTab.addEventListener('shown.bs.tab', () => {
            const mainList = document.getElementById('structureTree');
            if (mainList && mainList.dataset.sortableInitialized !== 'true') {
                setupSortables();
            }
        });
    }


    function serializeSortable(listElement) {
        return [...listElement.children].map(el => {
            const id = parseInt(el.dataset.id);
            if (!id || isNaN(id)) return null;

            const childList = el.querySelector(':scope > ul.sortable-nested');
            return {
                id,
                children: childList ? serializeSortable(childList) : []
            };
        }).filter(item => item !== null);
    }


    const saveBtn = document.getElementById('saveOrderBtn');
    if (saveBtn) {
        saveBtn.addEventListener('click', () => {
            const lawId = saveBtn.dataset.lawId;
            const list = document.querySelector('#structureTree');
            if (!list) return alert('Lista de estruturas não encontrada!');

            const order = serializeSortable(list);
            if (!order.length) return alert('Nenhuma estrutura válida para salvar.');

            console.log('Ordem serializada:', JSON.stringify(order, null, 2));

            fetch(`/leis/${lawId}/estruturas/ordenar`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({ order })
            })
            .then(r => r.ok ? r.json() : r.json().then(err => { throw new Error(err.message) }))
            .then(data => {
                if (data.success) {
                    alert('Ordem salva com sucesso!');
                    saveBtn.disabled = true;
                } else {
                    alert('Erro: ' + (data.message || 'Falha ao salvar a ordem.'));
                }
            })
            .catch(err => {
                console.error('Erro ao salvar ordem:', err);
                alert('Erro ao salvar ordem: ' + err.message);
            });
        });
    }


    document.addEventListener('click', function(event) {
        const btn = event.target.closest('.add-child-btn');
        if (!btn) return;

        event.preventDefault();
        const parentId = btn.dataset.parentId;
        console.log('Adicionar sub-elemento para o pai ID:', parentId);

        alert('Funcionalidade de adicionar sub-elemento será implementada aqui para o ID pai: ' + parentId);
    });

});
</script>