@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-genders" 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">Descripción</th>
            <th scope="col">Link imagen</th>
            <th scope="col">Acciones</th>
        </tr>
        </thead>
        <tbody>
            @foreach ( $genders as $gender)
            <tr>
                <td>{{ $gender->id  }}</td>
                <td>{{ $gender->nombre  }}</td>
                <td>{{ $gender->descripcion  }}</td>
                <td>{{ $gender->path  }}</td>
                <td>
                    <form action="{{ route('genders.destroy', $gender->id) }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <a href="/genders/{{ $gender->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-genders').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