@php use App\Settings; @endphp

<x-table.table with_title_area >
    <x-slot:title class="-mb-5">Subscore Display Order</x-slot:title>
    <div x-data="sortableListForTiebreak('/admin/scoring/reorder-display')" x-init="init">
        <x-table.body id="sortable-list">
            @foreach ($subscores as $subscore)
                <tr data-id="{{ $subscore->id }}">
                    <x-table.td>{{ $subscore->name }}</x-table.td>
                </tr>
            @endforeach
        </x-table.body>
    </div>
</x-table.table>

<script>
    function sortableListForTiebreak(submitLink) {
        return {
            init() {
                let el = document.getElementById('sortable-list');
                let sortable = Sortable.create(el, {
                    onEnd: function (evt) {
                        let order = Array.from(el.children).map((item, index) => item.getAttribute('data-id'));
                        fetch(submitLink, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({ order })
                        }).then(response => response.json())
                            .then(data => {
                                if (data.status === 'success') {
                                    console.log('Order updated successfully');
                                }
                                else {
                                    console.log(data.status);
                                }
                            });
                    }
                });
            }
        }
    }
</script>