@extends('layouts.master')

@section('css')
{!! Html::style('css/jquery_ui.css')!!}
{!! Html::style('css/datatable/dataTables.bootstrap.css')!!}
<link rel="stylesheet" href="{!!URL::to('css/datepicker.css')!!}" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />

@stop

@section('content')
<div class="row">
    <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
        @if(Session::has('message_error'))
        <div class="alert alert-danger error-msg centrado negrita">{!! Session::get('message_error') !!}</div>
        @endif
    </div>
    <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
        @if(Session::has('mensaje'))
        <div class="alert alert-danger error-msg centrado negrita">{!! Session::get('mensaje') !!}</div>
        @endif
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-body">
        <form role="form" id="solicitudes" name="solicitudes" target="_blank" method="post" action="{!! URL::to('administrativo/imprimirpagos') !!}">{!! csrf_field() !!}
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 @if($errors->has('cedula')){!!'has-error'!!} @endif">
                    <label for="nucleo">Cedula:</label>
                    {!! Form::text('cedula',NULL, array('class' => 'form-control', 'id'=>'cedula')) !!}
                    {!! Form::hidden('cedula_i', NULL , array('id' => 'cedula_i')) !!}
                    <div class="text-danger">
                        @if($errors->has('cedula')) {!! $errors->first('cedula') !!}  @else {!! "&nbsp;" !!} @endif
                    </div>
                </div>

            </div>
            	
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 @if($errors->has('consulta')){!!'has-error'!!} @endif">
                <label for="consulta"><span class="glyphicon glyphicon-asterisk" style="color:#B1361C"></span> Consultar Pagos:</label>
                {!! Form::select('consulta', $consulta ,NULL, array('class' => 'form-control', 'id'=>'consulta')) !!}
                {!! Form::hidden('consulta_i', NULL , array('id' => 'consulta_i')) !!}
                <div class="text-danger">
                    @if($errors->has('consulta')) {!! $errors->first('consulta') !!}  @else {!! "&nbsp;" !!} @endif
                </div>  
            </div> 
            
            <div class="form-group col-lg-1 col-md-1 col-sm-12 col-xs-12">
                <label for="">&nbsp;</label>
                <div class="btn btn-info form-control" id="buscar"><i class="fa fa-search" aria-hidden="true"></i></div> 
            </div>
            <div class="form-group col-lg-1 col-md-1 col-sm-12 col-xs-12">
                <label for="">&nbsp;</label>
                <div class="btn btn-warning form-control" id="cancelar"><i class="fa fa-times" aria-hidden="true"></i></div> 
            </div>
                
                <div class="form-group col-lg-1 col-md-1 col-sm-12 col-xs-12">
                    <div>
                        <label for="">&nbsp;</label>
                    </div>
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-print"></span></button>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <li class="dropdown-header">¿Como desea imprimir el pago?</li>
                        <li style="display: inline-flex;" class="center-block">
                            <button class="btn btn-default" target="_blank" id="imprimir" name="imprimir" type="submit" value="1">PDF</button>
                        </li>
                        <li style="display: inline-flex;">
                            <button class="btn btn-default" target="_blank" id="imprimir" name="imprimir" type="submit" value="2">Excel</button>
                        </li>
                    </ul> 
                    <div></div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 @if($errors->has('concepto')){!!'has-error'!!} @endif">
                    <label for="concepto"><span class="glyphicon glyphicon-asterisk" style="color:#B1361C"></span> Concepto:</label>
                    {!! Form::select('concepto', $conceptos ,NULL, array('class' => 'form-control', 'id'=>'concepto')) !!}
                    <div class="text-danger">
                        @if($errors->has('concepto')) {!! $errors->first('concepto') !!}  @else {!! "&nbsp;" !!} @endif
                    </div>  
                </div> 
                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 @if($errors->has('banco')){!!'has-error'!!} @endif">
                    <label for="banco"><span class="glyphicon glyphicon-asterisk" style="color:#B1361C"></span> Banco:</label>
                    {!! Form::select('banco', $bancos ,NULL, array('class' => 'form-control', 'id'=>'banco')) !!}
                    <div class="text-danger">
                        @if($errors->has('banco')) {!! $errors->first('banco') !!}  @else {!! "&nbsp;" !!} @endif
                    </div>  
                </div>
                <div class="form-group col-lg-3 col-md-3 col-sm-12 col-xs-12">
                    <label for="desde"><span class="glyphicon glyphicon-asterisk" style="color:#B1361C"></span> Desde</label>
                    <div class="input-group">
                        <input type="text" id="desde" name="desde" class="form-control" value="" readonly="true" />
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </div>
                    </div>
                </div>

                <div class="form-group col-lg-3 col-md-3 col-sm-12 col-xs-12">
                    <label for="hasta"><span class="glyphicon glyphicon-asterisk" style="color:#B1361C"></span> Hasta</label>
                    <div class="input-group">
                        <input type="text" id="hasta" name="hasta" class="form-control" value="" readonly="true" />
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </div>
                    </div>
                </div>
            </div>


                
                
        </form>
    </div>
</div>
<div id="mensaje" class="col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>
<div class="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" class="table-responsive">
        <table class="table tabled-bordered table-hover">
            <thead>
                <tr class="info">
                    <th class="text-center">C.I</th>
                    <th class="text-center">Apellidos y Nombres</th>
                    <th class="text-center">Estado</th>
                    <th class="text-center">Fecha de Transferencia</th>
                    <th class="text-center">Comprobante</th>
                    <th class="text-center">Acciones</th>
                    <th class="text-center">Referencia</th>
                </tr>  
            </thead> 
            <tbody>
                <tr>
                    <td class="text-center" colspan="5">Seleccione los datos de la búsqueda.</td>
                </tr>
            </tbody>
        </table>

    </div>
</div>

@stop
@section('postscript')
{!! Html::script('js/jquery_ui.js') !!}
{!! Html::script('js/sololetras.js') !!}
{!! Html::script('js/solonumeros.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') !!}
{!! Html::script('js/mask-plugins/src/jquery.mask.js') !!}
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function(){
        $('#buscar').click(function(){
            var cedula = $('#cedula').val();
            var consulta = $('#consulta').val();
            var concepto = $('#concepto').val();
            var banco = $('#banco').val();
            var desde = $('#desde').val();
            var hasta = $('#hasta').val();

            if (consulta != '' && concepto != '' ) {
                    $.ajax({
                        type: "POST",
                        url: "{!!URL::action('AdministrativoController@postAjaxconsultar_solicitudes')!!}", 
                        dataType: "json",
                        data: {
                            cedula: cedula, consulta: consulta , concepto: concepto , banco: banco, desde: desde, hasta: hasta
                        },
                        cache: false,
                        beforeSend: function() {
                        document.getElementById('cargando').style.display='block';
                        },
                        success: function(data)
                        {   
                        document.getElementById('cargando').style.display='none';
                       
                            $('#tabla').html(data.tabla);
                            $('#tabla_solicitudes').DataTable({
                               "language": {
                                   "url": "../js/datatable/Spanish.json"
                               }
                            });

                            $('.estado').click(function(){
                                var valor = $(this).val();
                                cambiarEstado(valor);   
                            });
                            $('#mensaje').html('');
                        }
                    }); 
            } else{
                $('#mensaje').html('<div class="col-lg-8 col-lg-offset-2 col-md-8 col-sm-offset-2 col-sm-12 col-xs-12 alert alert-danger error-msg centrado negrita">Disculpe, existen campos vac&iacute;os.</div>');
                document.getElementById('nucleo').disabled = false;  
                document.getElementById('consulta').disabled = false;
                document.getElementById('desde').disabled = false;
                document.getElementById('hasta').disabled = false;
              
                $('#tabla').html('');
                $('#mensaje').html('');
            };
        });

        $('#cancelar').click(function(){
            $('#consulta').val('');
            $('#desde').val('');
            $('#hasta').val('');
            $('#tabla').html('');
            $('#mensaje').html('');
        });

        $("#desde").datepicker({
            language: "es",
            format: "yyyy-mm-dd",
            autoclose: true,
            weekStart: 1
        });

        $("#desde").datepicker("setDate",$("#desde").val());

        $("#hasta").datepicker({
            language: "es",
            format: "yyyy-mm-dd",
            autoclose: true,
            weekStart: 1
        });

        $("#hasta").datepicker("setDate",$("#hasta").val());

        var seleccionados = new Array();

        $(document).on('click', '#tabla_solicitudes :checkbox',function(){
            console.log($(this).attr('id'));
            var cedula = $(this).parent().parent().children()[0].innerHTML;
            var ref = $(this).parent().parent().children()[6].innerHTML;
            seleccionados.push({cedula:cedula,ref:ref});
            console.log(seleccionados);

        });

        $(document).on('click', '#seleccionados',function(){
            $.ajax({
                    type: "POST",
                    url: "{!!URL::action('AdministrativoController@postAprobarseleccionados')!!}", 
                    dataType: "json",
                    data: {
                        seleccionados: seleccionados
                    },
                    cache: false,
                    beforeSend: function() {
                    },
                    success: function(data)
                    {   
                        $('#buscar').click();  
                        
                        setTimeout(function() {
                          $('html,body').scrollTop(0)
                        }, 600);
                        setTimeout(function() {
                          $('#mensaje').html(data.mensaje);
                        }, 2000);
                    }
            });
        });

        $(document).on('click', '#rechazados',function(){
            $.ajax({
                    type: "POST",
                    url: "{!!URL::action('AdministrativoController@postRechazarseleccionados')!!}", 
                    dataType: "json",
                    data: {
                        seleccionados: seleccionados
                    },
                    cache: false,
                    beforeSend: function() {
                    },
                    success: function(data)
                    {   
                        $('#buscar').click();  
                        
                        setTimeout(function() {
                          $('html,body').scrollTop(0)
                        }, 600);
                        setTimeout(function() {
                          $('#mensaje').html(data.mensaje);
                        }, 2000);
                    }
            });
        });
    });

    function cambiarEstado(valor) {
        var nucleo = $('#nucleo').val();
        var consulta = $('#consulta').val();
        var desde = $('#desde').val();
        var hasta = $('#hasta').val();
       
        var datos = valor;

        if (nucleo != '' && consulta != '' && datos != '' && desde != '' && hasta != '') {
                $.ajax({
                    type: "POST",
                    url: "{!!URL::action('AdministrativoController@postAjaxcambiarestado')!!}", 
                    dataType: "json",
                    data: {
                        nucleo: nucleo, consulta: consulta, datos: datos, desde: desde, hasta: hasta
                    },
                    cache: false,
                    beforeSend: function() {
                    document.getElementById('cargando').style.display='block';
                    },
                    success: function(data)
                    {   
                    document.getElementById('cargando').style.display='none';   
                        $('#tabla').html(data.tabla);
                        $('#tabla_solicitudes').DataTable({
                           "language": {
                               "url": "../js/datatable/Spanish.json"
                           }
                        });
                        $('.estado').click(function(){
                            var valor = $(this).val();
                            cambiarEstado(valor);   
                        });
                        $('#mensaje').html(data.mensaje);
                    }
                }); 
        } else{
            $('#mensaje').html('<div class="col-lg-8 col-lg-offset-2 col-md-8 col-sm-offset-2 col-sm-12 col-xs-12 alert alert-danger error-msg centrado negrita">Disculpe, existen campos vac&iacute;os.</div>');
        };
    }
</script>
@stop