@extends('template.layout')

@section('content')
    <h1 class="page-title">
        <a href="{{ url('matricula/regular') . '/curso/alumnos?especialidad=' . $especialidad->id . '&ciclo=' . $ciclo->id . '&turno=' . $turno->id. '&curso=' . $curso->id }}"><i class="icon-action-undo"></i></a>
        Matr&iacute;cula Regular
    </h1>
    <div class="portlet light bordered">
        {{--<div id="data" hidden="hidden" data-esp="1" data-per="1" data-cic="1" data-cur=""></div>--}}
        <div class="portlet-title">
            <div class="caption">Listado de Secciones del Curso de {{ $curso->nombre }}</div>
            <div class="actions">
            </div>
        </div>
        <div class="portlet-body">
            <div class="row">
                <div class="col-md-12">
                    <h4 style="margin-top: 0">Especialidad: {{ $especialidad->nombre }}</h4>
                </div>
                <div class="col-md-4">
                    <h5 style="margin-top: 0">Turno: {{ $turno->nombre }}</h5>
                </div>
                <div class="col-md-4">
                    <h5 style="margin-top: 0">Ciclo: {{ $ciclo->nombre }}</h5>
                </div>
            </div>

            <table class="table table-striped table-bordered table-hover table-bg" id="table_matricula">
                <thead class="thead-default">
                <tr>
                    <th>Secci&oacute;n</th>
                    <th>Profesor</th>
                    <th>Opciones</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <div id="modal_gestion"></div>

@endsection
@section('scripts')
    <script>
        var urlBase = "{{ url('matricula/regular') }}";
        var urlData = "{{ route('matricula.regular.secciones.get') }}?especialidad={{ $especialidad->id }}&ciclo={{ $ciclo->id }}&turno={{ $turno->id }}&curso={{ $curso->id }}";

        var oTable = $('#table_matricula').DataTable({
            "language": {
                "sProcessing":     "Procesando...",
                "sLengthMenu":     "Mostrar _MENU_ registros",
                "sZeroRecords":    "No se encontraron resultados",
                "sEmptyTable":     "No existen registros creados",
                "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
                "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
                "sInfoPostFix":    "",
                "sSearch":         "Buscar:",
                "sUrl":            "",
                "sInfoThousands":  ",",
                "sLoadingRecords": "Cargando...",
                "oPaginate": {
                    "sFirst":    "Primero",
                    "sLast":     "Último",
                    "sNext":     "Siguiente",
                    "sPrevious": "Anterior"
                },
                "oAria": {
                    "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                    "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                }
            },
            processing: true,
            serverSide: true,
            destroy: true,
            responsive:true,
            ajax:{
                url:  urlData,
                method: 'POST',
                error: function(error){
                    console.log(error);
                }
            },
            columns:[
                {
                    data:'nombre_seccion',
                    name:'seccion_curso.nombre_seccion',
                    "searchable": true
                },
                {
                    data:'nombre_completo',
                    name:'nombre_completo',
                    "searchable": true,
                    render: function(data,type,row){
                        return '<td>'
                                + (data == "" ? "Sin asignar" : data)
                                +'</td>'
                    }
                },
                {
                    data:'id',
                    name:'seccion_curso.id',
                    "searchable": false,
                    render: function(data,type,row) {
                        return '<td>'
                            +'<button class="btn btn-success btn-circle btn-sm editar" data-id="' + data + '"><i class="fa fa-pencil"></i> Editar </button>'
                            +'<button class="btn btn-primary btn-circle btn-sm horario" data-id="' + data + '"><i class="fa fa-hand-pointer-o"></i> Gestionar Horario </button>'
                            +'</td>';
                    }
                }
            ],
            "pageLength": 15,
            "columnDefs": [{
                'orderable': false,
                'targets': [0]
            }, {
                "searchable": true,
                "targets": [0]
            }],
            "bInfo": false,
            "bLengthChange": false,
            "ordering": false
        });
        function tableRefresh() {
            oTable.draw();
        }

        $('#table_matricula').on('click','.editar', function () {
            console.log("entro");
            var aux = $(this);
            var id = aux.data('id');
            aux.prop('disabled', true);
            aux.blur();
            $.ajax({
                url: urlBase + "/curso/secciones/editar/" + id,
                type: 'GET',
                cache: false,
                success: function (result) {
                    $('#modal_gestion').html(result);
                    $('#periodo_modal').modal({
                        show: true
                    });
                },
                complete: function () {
                    aux.removeAttr("disabled");
                    aux.prop('disabled', false);
                }
            });
            return false;
        });

        $('#table_matricula').on('click','.horario', function () {
            var aux = $(this);
            var id = aux.data('id');
            aux.prop('disabled', true);
            aux.blur();
            $.ajax({
                url: urlBase + "/horarios/" + id,
                type: 'GET',
                cache: false,
                success: function (result) {
                    $('#modal_gestion').html(result);
                    $('#periodo_modal').modal({
                        show: true
                    });
                },
                complete: function () {
                    aux.removeAttr("disabled");
                    aux.prop('disabled', false);
                }
            });
            return false;
        })
    </script>
@endsection