@extends('adminlte::page')

@section('title', 'CRUD con Laravel 10')

@section('content_header')
    <h1>Equipo de Trabajo</h1>
@stop

@section('content')
   <a href="Teams/create" class="btn btn-primary mb-3">CREAR</a>

<table id="teams" 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">Código</th>
            <th scope="col">Nombre</th>
            <th scope="col">Apellido</th>
            <th scope="col">Profecion</th>
            <th scope="col">Imagen</th>

            <th scope="col">Acciones</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($teams as $team)
        <tr>
            <td>{{ $team->id}}</td>
            <td>{{$team->codigo}}</td>
            <td>{{$team->nombre}}</td>
            <td>{{$team->apellido}}</td>
            <td>{{$team->trabajo}}</td>
            <td>
                <img src="{{ asset($team->img) }}" style="width: 100px;">
            </td>
            <td>
                <form action="{{ route ('Teams.destroy',$team->id)}}" method="POST">
                <a href="/Teams/{{ $team->id}}/edit" class="btn btn-info">Editar</a>
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger">Borrar</button>
                </form>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <link href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap5.min.css" rel="stylesheet">
@stop

@section('js')
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap5.min.js"></script>

<script>
$(document).ready(function() {
    $('#teams').DataTable({
        "lengthMenu": [[5,10, 50, -1], [5, 10, 50, "All"]]
    });
} );
</script>

@stop
