@extends('template.layout')


@section('styles')
    <link href="{{asset('css/icheck/skins/all.css')}}" rel="stylesheet" type="text/css"/>

    <style>
        option{
            background-color: white;
        }
        .min-tardanza{
            width: 10%;
        }
        .tbPersonal_filter{
            display: none;
        }
    </style>
@endsection

@section('content')
    <h1 class="page-title">
        Registro de Notas por Secci&oacute;n
    </h1>
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <h4 class="modal-title caption-subject font-blue-secondary sbold uppercase"> Listado de Materias Por Secci&oacute;n</h4>
            </div>
        </div>
        <div class="portlet-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="col-md-10">
                        <div class="col-md-6">
                            <h4><i class="glyphicon glyphicon-search"></i>  Busqueda avanzada</h4>
                        </div>
                        <div class="col-md-6">
                            <h6 style="margin-bottom: 0px; margin-top: 16px">Por: Nombre del Curso o Secci&oacute;n</h6>
                        </div>
                        <input type="search" class="form-control input-md" id="text-filter" aria-controls="tbEncuestas">
                    </div>
                </div>
            </div>
            <div class="Forum-ForumTopicList row" style="margin:20px">
                <table class="table table-hover nowrap dataTable dtr-inline collapsed tbPersonal"
                       id="tbPersonal"
                       width="100%" role="grid" aria-describedby="tbPersonal_info">
                    <thead class="thead-default">
                    <tr>
                        <th>C&oacute;digo de Secci&oacute;n</th>
                        <th>Nombre del Curso</th>
                        <th>Periodo Acad&eacute;mico</th>
                        <th>Detalle</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($Arr as $item)
                        <tr>
                            <td> {{ $item->seccion }} </td>
                            <td> {{ $item->curso }} </td>
                            <td> {{ $item->periodo}} </td>
                            <td>
                                <button  style="margin-top: 0px; !important;" type="button" data-id="{{$item->id_seccion}}" data-id2="{{$item->id_curso}}" class="vmas btn btn-primary waves-effect waves-light m-t-10 evaluaciones_td">
                                    <i class="fa fa-clone"></i>
                                </button>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div id="ModalEval"></div>
@endsection

@section('scripts')
    <script src="{{asset('css/icheck/icheck.min.js')}}" type="text/javascript"></script>
    <script>

        $(document).ready(function () {

            $('#tbPersonal').on('click','.evaluaciones_td', function () {

                $('button.evaluaciones_td').prop('disabled', true);
                this.blur();
                $.ajax({
                    url: '{{ url('registro/secciones') }}' +"/"+ $(this).data('id') +"/"+ $(this).data('id2'),
                    type: 'GET',
                    cache: false,
                    success: function (result) {
                        $('#ModalEval').html(result).find('.modal').modal({
                            show: true
                        });
                    },
                    complete: function (result) {
                        $('button.evaluaciones_td').prop('disabled', false);
                    }
                });
                return false;
            });





            $("#form-validation").validate({});

            var tablePersonal = $('#tbPersonal').DataTable({
                "lengthMenu": [[25, 20, 50, -1], [25, 20, 50, "Todas"]],
                bFilter: true,
                "bLengthChange": false,
                bInfo: true,
                "searching": 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": true},
                    {"bSearchable": true},
                    {"bSearchable": true},
                    {"bSearchable": true}
                ],
                "columns": [
                    {"orderable": true},
                    {"orderable": true},
                    {"orderable": true},
                    {"orderable": true}
                ]
            });

            $("#tbPersonal_filter").hide();


            $("#text-filter").on('keyup',function () {
                tablePersonal
                    .search($(this).val())
                    .draw();
            });


        });

    </script>
@endsection