@extends('adminlte::page')

@section('title', 'Formulario')

@section('content_header')
    <style>
        #sortable-table tbody tr {
            cursor: move; /* Cambia el cursor a "move" cuando se posa sobre una fila */
        }
    </style>
    <h1>Ordenar Páginas (Arrastrar y soltar para aplicar el orden. Serán visibles las 3 primeras)</h1>
@stop
@section('content')
    <table class="table" id="sortable-table">
        <thead>
        <tr>
            <th scope="col">Título</th>
        </tr>
        </thead>
        <tbody>
        @foreach($pages as $p)
            <tr data-id="{{ $p->id }}">
                <td>{{ $p->title }}</td>
            </tr>
        @endforeach

        </tbody>
    </table>
@endsection

@section('css')
    <style>
        /* Opcional: estilo personalizado */
        .custom-input {
            width: 150px;
            height: 30px;
        }
    </style>
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const sortable = new Sortable(document.querySelector('#sortable-table tbody'), {
                onEnd: function (evt) {
                    // Obtener el nuevo orden de los registros
                    const items = evt.from.children;
                    const newOrder = Array.from(items).map((item, index) => {
                        return {
                            id: item.getAttribute('data-id'),
                            order: index + 1
                        };
                    });

                    // Enviar el nuevo orden al servidor
                    fetch('{{ URL::to('/') }}/admin/page/update-order', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'  // Añade el token CSRF
                        },
                        body: JSON.stringify(newOrder)
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                console.log('Order updated successfully');
                            } else {
                                console.error('Failed to update order');
                            }
                        })
                        .catch(error => console.error('Error:', error));
                }
            });
        });
    </script>
@stop