@extends('layouts.master')

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

@stop

@section('content')
<div class="row">
<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 class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h3 class="page-header">Recibo de Pago</h3>
        @if(Session::has('message_success'))
        <div class="alert alert-success success-msg centrado negrita">{!! Session::get('message_success') !!}</div>
        @endif
        @if(Session::has('message_error'))
        <div class="alert alert-danger error-msg centrado negrita">{!! Session::get('message_error') !!}</div>
        @endif
    </div>
</div>        
<div class="panel panel-default">    
    <div class="panel-body">
        <div id="div_fecha_ini" class="form-group col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <label for="fecha_ini">Fecha Desde</label>
            <div class="input-group date">
                {!! Form::text('fecha_ini', NULL ,$attributes = array('class' => 'form-control', 'id'=>'fecha_ini','readOnly' => 'readOnly')) !!}              
                <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                <div id="msg_fecha_ini" class="text-danger"></div>
            </div>
        </div>        
        <div id="div_fecha_hasta" class="form-group col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <label for="fecha_hasta">Fecha Hasta</label>
            <div class="input-group date">
                {!! Form::text('fecha_hasta', NULL ,$attributes = array('class' => 'form-control', 'id'=>'fecha_hasta','readOnly' => 'readOnly')) !!}
                <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                <div id="msg_fecha_hasta" class="text-danger"></div>
            </div> 
        </div>
        <div class="form-group col-lg-2 col-md-2 col-sm-12 col-xs-12 text-center">
            <label for="">&nbsp;</label>
            <button class="btn btn-success form-control" id="ejecutar"><span class="glyphicon glyphicon-ok"></span></button>
        </div>                
    </div>
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="table-responsive">
                <div id="tabla_nomina">
                    <table class="table table-condensed table-striped table-bordered table-hover no-margin">
                        <thead>
                        <tr class="info">
                            <th class="text-center">N&uacute;mero de Recibo</th>                        
                            <th class="text-center">Fecha Desde</th>                        
                            <th class="text-center">Fecha Hasta</th>
                            <th class="text-center">Opci&oacute;n</th>                                                
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td class="text-center" colspan="4">No existe registro</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>     
</div>

@stop
@section('postscript')
{!! Html::script('js/solonumeros.js') !!}
{!! Html::script('js/jquery_ui.js') !!}
{!! Html::script('js/datepicker/bootstrap-datepicker.js') !!}
{!! Html::script('js/datepicker/locales/bootstrap-datepicker.es.js') !!}
{!! Html::script('js/datatable/jquery.dataTables.js') !!}
{!! Html::script('js/datatable/dataTables.bootstrap.js') !!}
<!-- Incluyo Javascript de la libreria Datatable -->
<script type="text/javascript">
    $(document).ready(function(){
        $('#fecha_ini,#fecha_hasta').datepicker({
            language: "{!! App::getLocale(); !!}",
            autoclose: true,
            format: "dd-mm-yyyy"
        });

        $("#ejecutar").click(function(){
            var fecha_ini = $("#fecha_ini").val();
            var fecha_hasta = $("#fecha_hasta").val();
            if (fecha_ini!='' && fecha_hasta!='')
            {
                $.ajax({
                    type: "POST",
                    url: "{!!URL::action('NominaController@postAjaxrecibonomina')!!}", 
                    dataType: "json",
                    data: {
                        fecha_ini: fecha_ini, fecha_hasta: fecha_hasta
                    },
                    cache: false,
                    success: function(data)
                    {         

                        $("#tabla_nomina").html(data.tabla_nomina);

                        if (data.mensaje_error!=''){
                            $("#mensaje").html(data.mensaje_error);
                        }                
                    }
                });
            }else{
                if (fecha_ini=='') {
                    $("#div_fecha_ini" ).addClass( "has-error" );
                    $("#msg_fecha_ini").html('Requerido');
                }else{
                    $("#div_fecha_ini" ).removeClass( "has-error" );
                    $("#msg_fecha_ini").html('');
                }
                if (fecha_hasta=='') {
                    $("#div_fecha_hasta" ).addClass( "has-error" );
                    $("#msg_fecha_hasta").html('Requerido');
                }else{
                    $("#div_fecha_hasta" ).removeClass( "has-error" );
                    $("#msg_fecha_hasta").html('');
                } 
            }   
        })
    });
</script>

@stop