<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">Periodo: </span>
                <select class="bs-select form-control" id="selectCiclo">
                    <option value="0">Todos</option>
                    <?php $__currentLoopData = $ciclo; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cic): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($cic->id); ?>"><?php echo e($cic->nombre); ?></option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </div>


            <div class="col-lg-3">
                <span class="caption-subject uppercase">Curso: </span>
                <select class="bs-select form-control" id="selectCurso" disabled>
                    <option value="0">Todos</option>
                </select>
            </div>

            <div class="col-lg-2">
                <span class="caption-subject uppercase">Sección: </span>
                <select class="bs-select form-control" id="selectSeccion" disabled>
                    <option value="0">Todos</option>
                </select>
            </div>

            <div class="col-lg-2" style="padding-top: 18px;">
                <button class="btn blue btn-outline sbold" onclick="filter()">Buscar</button>
            </div>

        </div>

    </div>
</div>

<div id="conteinerTable">

    <table class="table table-hover nowrap dataTable dtr-inline collapsed tbCurso" id="tbCurso" width="100%" role="grid"
           aria-describedby="tbCurso_info">
        <thead class="thead-default">
        <tr>

            <th>N°</th>
            <th>Ciclo</th>
            <th>Curso</th>
            <th>Sección</th>
            <th>Opciones</th>
        </tr>
        </thead>
        <tbody>
        <?php ($count = 1); ?>
        <?php $__currentLoopData = $cursos; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <tr>

                <td> <?php echo e($count); ?> </td>
                <td> <?php echo e($item->ciclo); ?> </td>
                <td> <?php echo e($item->Curso); ?> </td>
                <td> <?php echo e($item->nombre_seccion); ?> </td>
                <td>
                    <a href="<?php echo e(url('reportesasistencia/cursos/asistencias/alumnos/detalle',["seccionID" => $item->id])); ?>"
                            class="btn btn-outline btn-circle btn-sm">
                        <i class="fa fa-eye"></i> Ver Asistencias
                    </a>
                </td>

            </tr>
            <?php ($count++); ?>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </tbody>
    </table>

    <script>
        $('#tbCurso').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: 'Listado de cursos'
                },{
                    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: 'Listado de cursos'
                }

            ]
        });
    </script>
</div>


<script>


    $("#selectCiclo").change(function () {

        $('#selectCurso').removeAttr('disabled');
        var cicloid = $("#selectCiclo").val();

        $('#selectCurso')
            .find('option')
            .remove()
            .end()
            .append('<option value="0">Todos</option>')
            .val('whatever')
        ;

        $.ajax({

            url: "<?php echo e(url('cursoxciclo/lista')); ?>" + "/" + cicloid,

            success: function (data) {

                $.each(data, function (key, value) {
                    $('#selectCurso')
                        .append($("<option></option>")
                            .attr("value", key)
                            .text(value));
                });

            }

        });

        $('#selectSeccion').removeAttr('disabled');
        var cicloid = $("#selectCiclo").val();

        var cursoid = $("#selectCurso").val();

        $('#selectSeccion')
            .find('option')
            .remove()
            .end()
            .append('<option value="0">Todos</option>')
            .val('whatever')
        ;

        $.ajax({

            url: "<?php echo e(url('seccionxcurso/lista')); ?>" + "/" + cursoid + "/" + cicloid,

            success: function (data) {

                $.each(data, function (key, value) {
                    $('#selectSeccion')
                        .append($("<option></option>")
                            .attr("value", key)
                            .text(value));
                });

            }

        });


    });

    $("#selectCurso").change(function () {


        $('#selectSeccion').removeAttr('disabled');
        var cicloid = $("#selectCiclo").val();

        var cursoid = $("#selectCurso").val();

        $('#selectSeccion')
            .find('option')
            .remove()
            .end()
            .append('<option value="0">Todos</option>')
            .val('whatever')
        ;

        $.ajax({

            url: "<?php echo e(url('seccionxcurso/lista')); ?>" + "/" + cursoid + "/" + cicloid,

            success: function (data) {

                $.each(data, function (key, value) {
                    $('#selectSeccion')
                        .append($("<option></option>")
                            .attr("value", key)
                            .text(value));
                });

            }

        });


    });

    $(document).ready(function () {

        $('#selectCurso').removeAttr('disabled');
        var cicloid = $("#selectCiclo").val();

        $('#selectCurso')
            .find('option')
            .remove()
            .end()
            .append('<option value="0">Todos</option>')
            .val('whatever')
        ;

        $.ajax({

            url: "<?php echo e(url('cursoxciclo/lista')); ?>" + "/" + cicloid,

            success: function (data) {

                $.each(data, function (key, value) {
                    $('#selectCurso')
                        .append($("<option></option>")
                            .attr("value", key)
                            .text(value));
                });

            }

        });

        $('#selectSeccion').removeAttr('disabled');
        var cicloid = $("#selectCiclo").val();

        var cursoid = $("#selectCurso").val();

        $('#selectSeccion')
            .find('option')
            .remove()
            .end()
            .append('<option value="0">Todos</option>')
            .val('whatever')
        ;

        $.ajax({

            url: "<?php echo e(url('seccionxcurso/lista')); ?>" + "/" + cursoid + "/" + cicloid,

            success: function (data) {

                $.each(data, function (key, value) {
                    $('#selectSeccion')
                        .append($("<option></option>")
                            .attr("value", key)
                            .text(value));
                });

            }

        });

    });

    function filter() {

        var cicloid = $("#selectCiclo").val();

        var cursoid = $("#selectCurso").val();

        var seccionid = $("#selectSeccion").val();

        $.ajax({

            url: "<?php echo e(url('reportesasistencia/newtable')); ?>" + "/" + cicloid + "/" + cursoid + "/" + seccionid,

            success: function (data) {
                $("#conteinerTable").empty();
                $("#conteinerTable").html(data);

            }

        });

    }

</script>