@extends('layouts.basictemplate')
@section('css')
    <link href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" rel="stylesheet" >
@stop
@section('content')
    <table id="list-preferences" class="table table-striped table-bordered shadow-lg mt-4" style="width:100%">
        <thead class="bg-primary text-white">
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Nombre</th>
            <th scope="col">Link Imagen</th>
            <th scope="col">Acciones</th>
        </tr>
        </thead>
        <tbody>
            @foreach ( $preferences as $preference)
            <tr>
                <td>{{ $preference->id  }}</td>
                <td>{{ $preference->nombre  }}</td>
                <td>{{ $preference->imagen  }}</td>
                <td>
                    <form action="{{ route('preferences.destroy', $preference->id) }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <a href="/preferences/{{ $preference->id }}/edit" class="btn btn-info">Editar</a>
                        <button type="submit" class="btn btn-danger">Eliminar</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
@stop

@section('js')
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
<script>
    $(document).ready(function () {
        $('#list-preferences').DataTable({
            "lengthMenu": [[5,10,50,-1], [5,10,50,"Todos"]],
            "language": {
                url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/es-ES.json',
            },
        });
    });
</script>


@stop