@extends('layouts.master')

@section('css')
{!! Html::style('css/jquery_ui.css')!!}
{!! Html::style('css/autocomplete_combobox.css')!!}
{!! Html::style('css/datatable/dataTables.bootstrap.css')!!}
@stop

@section('content')   
    @if(Session::has('message_error'))
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-12 col-sm-12 col-xs-12">
            <div class="alert alert-danger error-msg centrado"><strong>{!! Session::get('message_error') !!}</strong></div>
        </div>
    </div>
    @endif
    @if(Session::has('message_success'))
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-12 col-sm-12 col-xs-12">
            <div class="alert alert-success success-msg centrado"><strong>{!! Session::get('message_success') !!}</strong></div>
        </div>
    </div>
    @endif
    <div class="panel panel-default">
        <div class="panel-body">
            <!-- <div class="form-group col-lg-9 col-md-9 col-sm-12 col-xs-12 @if($errors->has('materia')){!!'has-error'!!} @endif">
                <label for="materia">Materia <span class="glyphicon glyphicon-asterisk text-danger" style="font-size:9px;"></span></label> 
                <div class="input-group">
                    {!! Form::text('materia_id', NULL , $attributes = array('class' => 'form-control mayuscula', 'id'=>'materia_id'))!!}  
                    <span class="input-group-btn">
                        <button id="consultar" class="consultar btn btn-info"><i class="fa fa-search"></i></button>
                    </span>
                </div>
                <div class="text-danger">
                    @if($errors->has('materia'))  {!! $errors->first('materia') !!}   @else {!! "&nbsp;" !!} @endif
                </div> 
            </div>  -->
            <div class="form-group col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <label for="buscar">Buscar</label>
                {!! Form::text('buscar',NULL, $attributes =  array('class' => 'form-control','id'=>'buscar','placeholder'=>'Insertar código o descripción de la asignatura'))!!}
            </div>
            <div class="form-group col-lg-3 col-md-3 col-sm-12 col-xs-12 @if($errors->has('localidad')){!!'has-error'!!} @endif">
                <label for="localidad_id">Localidad <span class="glyphicon glyphicon-asterisk text-danger" style="font-size:9px;"></span></label> 
                {!! Form::select('localidad_id',$localidades, NULL , $attributes = array('class' => 'form-control', 'id'=>'localidad_id'))!!}  
                <div class="text-danger">
                    @if($errors->has('localidad'))   {!! $errors->first('localidad') !!}    @else {!! "&nbsp;" !!} @endif
                </div> 
            </div>
        </div>
    </div>
    <div class="row small">
        <div class="col-lg-3 col-md-4 col-sm-12 col-xs-12">
            <div class="well well-sm text-center">
                <span class="text-danger"><i class="fa fa-square" aria-hidden="true"></i></span> Secci&oacute;n Llena
            </div>
        </div>
        {!! Form::open(array('url'=>'proceso/contadorsecciones'))!!}{!! csrf_field() !!}
        <div class="col-lg-3 col-md-4 col-sm-12 col-xs-12">
            <div class="text-center">
                <input type="submit" id="btn_contador" value="Generar Contador" class="btn btn-primary btn-sm">
            </div>
        </div>
        {!! Form::close() !!}        
    </div>
    <div id="mensaje">
    </div>
    <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div id="cargando">
            <div class="windows8">
                <div class="wBall" id="wBall_1">
                    <div class="wInnerBall">
                    </div>
                </div>
                <div class="wBall" id="wBall_2">
                    <div class="wInnerBall">
                    </div>
                </div>
                <div class="wBall" id="wBall_3">
                    <div class="wInnerBall">
                    </div>
                </div>
                <div class="wBall" id="wBall_4">
                    <div class="wInnerBall">
                    </div>
                </div>
                <div class="wBall" id="wBall_5">
                    <div class="wInnerBall">
                    </div>
                </div>
            </div>
            <br><h4>Espere un Momento</h4>
        </div>
        <div id="tabla">
            <table class="table table-hover">
                <thead>
                    <tr class="info">
                        <th class="text-center">Materia</th>
                        <th class="text-center">Secci&oacute;n</th>
                        <th class="text-center">Inscritos</th>
                        <th class="text-center">Cupo</th>
                        <th class="text-center">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="4" class="text-center">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal fade bs-example-modal-sm ventanamodal" id="Eliminar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Eliminar Oferta</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <div class="col-xs-12 col-md-12 col-lg-12 text-center"  class="input-group" style="margin-bottom: 25px">
                            <label for="LabelCodigo">¿Confirma que desea eliminar la oferta del periodo actual?</label>
                            {!! Form::hidden('seccion_id','',array('id'=>'seccion_id'))!!}
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="delete_yes" class="btn btn-success" data-dismiss="modal">Si</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
                    </div>
                </div>
            </div>
        </div>
    </div>   
@stop
@section('postscript')
{!! Html::script('js/jquery_ui.js') !!}
{!! Html::script('js/solonumeros.js') !!}
<!-- Incluyo Javascript de la libreria Datatable -->
{!! Html::script('js/datatable/jquery.dataTables.js') !!}
{!! Html::script('js/datatable/dataTables.bootstrap.js') !!}

<script type="text/javascript">
    $(document).ready(function(){

        var tabla_new = '<table class="table table-hover"><thead><tr class="info"><th class="text-center">Secci&oacute;n</th><th class="text-center">Inscritos</th><th class="text-center">Cupo</th><th class="text-center">Acciones</th></tr></thead><tbody><tr><td colspan="4" class="text-center"></td></tr></tbody></table>';

        var materiasTags=new Array({!! $materias !!});
        $( "#materia_id" ).autocomplete({
            source: materiasTags
        });
        
        $('#localidad_id').change(function(){
            var localidad_id = $('#localidad_id').val();
            if (localidad_id != '') {
                $.ajax({
                    type: "POST",
                    url: "{!!URL::action('ProcesoController@postAjaxlistado_ofertas')!!}", 
                    dataType: "json",
                    cache: false,
                    data: {
                            localidad_id: localidad_id
                        },
                    beforeSend: function() {
                        document.getElementById('cargando').style.display='block';
                    },
                    success: function(data)
                    {   
                        document.getElementById('cargando').style.display='none';       
                        $('#tabla').html(data.listado);
                       // $('#tabla_listado').dataTable();
                        $('#mensaje').html('');

                        //Funcion para eliminar el area elegida
                        $(".eliminar").click(function(){

                            var parametro=$(this).val();
                            $("#seccion_id").val(parametro);
                        });
                        
                    }
                });
            } else{
                $('#tabla').html(tabla_new);
                $('#mensaje').html('');
            };
        });

        $('#delete_yes').click(function(){
            var id = $('#seccion_id').val();
            var materia_id = $('#materia_id').val();
            var localidad_id = $('#localidad_id').val();
            if (id != '' && materia_id != '' && localidad_id != '') {
                $.ajax({
                    type: "POST",
                    url: "{!!URL::action('ProcesoController@postAjaxeliminar_oferta')!!}", 
                    dataType: "json",
                    cache: false,
                    data: {
                            id: id, materia_id: materia_id, localidad_id: localidad_id
                        },
                    beforeSend: function() {
                        document.getElementById('cargando').style.display='block';
                    },
                    success: function(data)
                    {   
                        document.getElementById('cargando').style.display='none';       
                        $('#tabla').html(data.listado);
                        //$('#tabla_listado').dataTable();
                        $('#mensaje').html(data.mensaje);
                        
                    }
                });
            }
        });

        $('#materia_id').change(function(){
            
            $('#tabla').html(tabla_new);
            $('#mensaje').html(''); 
        });

    });

    $(document).ready(function(){
      $("#buscar").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#tabla_listado tr").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
    });
</script>

@stop