@extends('template.layout')

@section('content')
    <h1 class="page-title">
        Director de Carrera
    </h1>
    <div class="portlet light">
        <div class="portlet-title">
            <div class="caption">
                <span class="caption-subject bold"> Cursos </span>
            </div>
            <div class="actions"></div>
        </div>
        <div class="portlet-body">
            <div class="row" id="form-especialidad">
                <div class="col-md-6 col-xs-6">
                    <div class="form-group">
                        <select name="esp-periodo" id="esp-periodo" class="form-control select2"></select>
                    </div>
                </div>
                <div class="col-md-6 col-xs-6">
                    <div class="form-group">
                        <select name="esp-especialidad" id="esp-especialidad" class="form-control select2"></select>
                    </div>
                </div>
                <div class="col-md-3 col-xs-2">

                </div>
            </div>
            <table id="tb-especialidad" class="table table-hover nowrap dataTable dtr-inline collapsed"
                   width="100%">
                <thead class="thead-default">
                <tr>
                    <th>Nombre</th>
                    <th>Código</th>
                    <th>Temas</th>
                    <th>Créditos</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function(){
            var tableEspecialidad = $('#tb-especialidad').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 por nombre de trámite:",
                    "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: '{{ route('director_carrera.cursos') }}',
                    method: 'POST',
                    data: function(d){
                        d.id_especialidad = $('#esp-especialidad').val();
                        d.id_periodo = $('#esp-periodo').val();
                    }
                },
                columns: [
                    {
                        data: 'nombre',
                        name: 'nombre',
                        "searchable": false
                    },
                    {
                        data: 'codigo',
                        name: 'codigo',
                        "searchable": true
                    },
                    {
                        data: 'temas',
                        name: 'temas',
                        "searchable": false
                    },
                    {
                        data: 'creditos',
                        name: 'creditos',
                        "searchable": false
                    }
                ],
                "pageLength": 15,
                "bInfo": false,
                "bLengthChange": false,
                "ordering": false,
                "bFilter": false
            });
            $('#esp-periodo').select2({
                ajax: {
                    dataType: 'json',
                    minimumResultsForSearch: -1,
                    url: '{{ route("director_carrera.cursos.periodos") }}',
                    delay: 250,
                    processResults: function (data, page) {
                        return {
                            results: data.result
                        };
                    }
                }
            }).on('change',function(){
                $('#esp-especialidad').select2({
                    ajax: {
                        dataType: 'json',
                        minimumResultsForSearch: -1,
                        type: "POST",
                        url: '{{ route("director_carrera.cursos.especialidades") }}',
                        delay: 250,
                        data: {
                            id: $('#esp-periodo').val()
                        },
                        processResults: function (data, page) {
                            return {
                                results: data.result
                            };
                        }
                    }
                }).on('change',function(){
                    tableEspecialidad.ajax.reload();
                });
            });
        });


    </script>
@endsection