@extends('../layouts/partials/header')

@section('title', 'Cursos')


@section('content')

    <div class="container mt-3">

        <h2>Cursos</h2>
        <a href="{{ route('cursos.create') }}">Nuevo curso</a>
        <div class="table-responsive">
            <table class="table table-hover table-bordered table-striped table-condensed" id="cursos">
                <thead class="table-dark">
                    <tr>
                        <th scope="col">Id</th>
                        <th scope="col">Curso</th>
                        <th scope="col">Categoria</th>
                        <th scope="col">Fec.Creación</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($cursos as $item)
                        <tr class="">
                            <td scope="row">{{ $item->id }}</td>
                            <td scope="row"><a href="{{ Route('cursos.show', $item->id) }}">{{ $item->name }}</a></td>
                            <td scope="row">{{ $item->category }}</td>
                            <td scope="row">{{ $item->created_at }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td>No hay datos</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

    </div>
@endsection

@section('js')
    {{-- <script src="https://code.jquery.com/jquery-3.7.1.js"></script> --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/2.0.5/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.0.5/js/dataTables.bootstrap5.js"></script>

    <script>
        new DataTable('#cursos', {
            order: [
                [0, 'desc'],
            ]
        });
    </script>

@endsection


@extends('../layouts/partials/footer')