<div style="padding-top: 2%;padding-bottom: 2%">
    <div class="row">
        <div class="col-lg-12">
            <div class="col-lg-2">
                <span class="caption-subject uppercase">Carrera: </span>
            </div>
            <div class="col-lg-2">

                <select class="bs-select form-control" id="selectCarrera">
                    <option value="">Todos</option>
                    @foreach($carrera as $esp)
                        <option value="{{$esp->nombre}}">{{$esp->nombre}}</option>
                    @endforeach
                </select>

            </div>
        </div>
    </div>
</div>


<div id="conteinerTable">
    <table class="table table-hover nowrap dataTable dtr-inline collapsed tbAlumno" id="tbAlumno" width="100%"
           role="grid"
           aria-describedby="tbAlumno_info">
        <thead class="thead-default">
        <tr>
            <th>N°</th>
            <th>Código alumno</th>
            <th>Nombre completo</th>
            <th>Carrera</th>
            <th>Asistencias</th>
        </tr>
        </thead>
        <tbody>
        @php ($count = 1)
        @foreach($alumnos as $item)
            <tr>
                <td> {{ $count }} </td>
                <td> {{ $item->codigo }} </td>
                <td> {{ $item->nombre_completo }} </td>
                <td> {{ $item->nombre }} </td>
                <td>
                    <a href="{{url('reportesasistencia/alumnos/asistencias/cursos',['id' => $item->userid])}}"
                            class="btn btn-outline btn-circle btn-sm">
                        <i class="fa fa-eye"></i> Ver Asistencias
                    </a>
                </td>
            </tr>
            @php ($count++)
        @endforeach
        </tbody>
    </table>
</div>

<script>
    var tbAlumno = $('#tbAlumno').DataTable({
        "lengthMenu": [[25, 20, 50, -1], [25, 20, 50, "Todas"]],
        bFilter: true,
        "bLengthChange": false,
        bInfo: true,
        responsive: true,
        "autoWidth": true,
        "language": {
            "lengthMenu": "Mostrar _MENU_ Entradas",
            "zeroRecords": "No se encontraron registros",
            "info": "Mostrando la página _PAGE_ de _PAGES_",
            "infoEmpty": "No hay registros disponibles",
            "infoFiltered": "(filtrado de _MAX_ registros totales)",
            "search": "Buscar: ",
            "paginate": {
                "first": "Primero",
                "last": "Último",
                "next": "Siguiente",
                "previous": "Anterior"
            },
        },
        "order": [],
        "aoColumns": [
            {"bSearchable": false},
            {"bSearchable": true},
            {"bSearchable": true},
            {"bSearchable": true},
            {"bSearchable": false},
        ],
        "columns": [
            {"orderable": false},
            {"orderable": true},
            {"orderable": true},
            {"orderable": true},
            {"orderable": false},
        ],
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'excel',
                exportOptions: {
                    columns: [ 0, 1, 2,3 ]
                },
                title: 'Reporte de alumnos'
            },{
                extend: 'pdf',
                exportOptions: {
                    columns: [ 0, 1, 2 ,3]
                },
                pageSize: 'LEGAL',
                customize: function(doc) {
                    //pageMargins [left, top, right, bottom]
                    doc.pageMargins = [ 120, 20, 20, 20 ];
                },
                title: 'Reporte de alumnos'
            }

        ]
    });

    $("#selectCarrera").change(function () {
        tbAlumno.column(3)
            .search($("#selectCarrera").val() ? '^' + $("#selectCarrera").val() + '$' : '', true, false)
            .draw();
    });

</script>