@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 Programas (Arrastrar y soltar para aplicar el orden)</h1>
@stop
@section('content')
    <table class="table" id="sortable-table">
        <thead>
            <tr>
                <th scope="col">Título</th>
            </tr>
        </thead>
        <tbody>
            @foreach($projects as $p)
                <tr data-id="{{ $p->id }}">
                    <td>{{ $p->title }}</td>
                    <td><a href="{{ route('page.order', $p->id) }}" class="btn btn-sm btn-primary">Ordenar Páginas</a></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/project/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