{{--Elaborado por Ender Bastidas

Modificado por Yoniquer Chacon
01-08-2018
Modificado por Ivan Salazar
05-08-2018
--}}

@extends('layouts/master')
@section('header')
    <style>
        .form-group{
            margin-bottom: 5px;
        }
    </style>

{{--<link href="{!! asset('/css/jquery.dataTables.min.css')  !!}" rel="stylesheet">
<link href="{!! asset('/css/dataTables.bootstrap.min.css')  !!}" rel="stylesheet">
<link rel="stylesheet" href="{!! asset('css/jquery.tablesorter.pager.css') !!}" type="text/css">
<script type="text/javascript" src="{!! asset('/js/jquery-ui.min.jtiporeportes') !!}"></script>--}}
    @php

        $fecha = new DateTime();
        $fecha = $fecha->format('d-m-Y');

    @endphp
@endsection
@section('content')
    @include('Wscanguroazul.Recolecta.menurecolectas')

    <div class="col-md-9 admin-content" id="">
        <div class="row">
            <div class="col-sm-11">

                <div class="panel panel-primary">

                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="glyphicon glyphicon-file"></i> Reportes:</h3>
                    </div>

                    <div class="container">
                        <div class="row">
                            <div class="card-body">
                                <form method="post" action="{{ route('reportesRecolecta') }}"
                                      accept-charset="UTF-8" enctype="multipart/form-data" id="">
                                    <div class="row">
                                        <br>
                                        <div class="col-md-4 col-md-offset-2">
                                            <div class="input-group col-xs-12 col-md-12 col-sm-12">
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-th-list" data-toggle="tooltip" data-placement="left" title='Debes Seleccionar un Tipo de Busqueda'></i></span>
                                                <select class="form-control" name="tipobusqueda" id="tiporeporte" required data-placement="bottom">
                                                    <option value="0">Seleccione..</option>
                                                    <option value="1">Detalle de recolectas Eventuales</option>
                                                    <option value="2">Detalle de recolectas Fijas</option>
                                                   {{-- <option value="3">Notas Generadas</option>--}}
                                                    @if($codoficina == 46)<option value="4">Efectividad</option> @else @endif
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <br>
                                    <div class="row">
                                        <div class="col-md-3 col-md-offset-1 form-group" id="fechadesdereporte" hidden>
                                            <div class="input-group col-xs-12 col-md-12 col-sm-12">
                                                <label for="codrecolecta" class="text-primary" style="font-size: small"><b>FECHA DESDE:</b></label>
                                                <div class='input-group date'>
                                                    <input type="text" class="form-control input-sm" id="datetimepickerdesde"
                                                           name="fechadesde"
                                                           value="{{$fecha }}"
                                                           data-container="body"
                                                           data-msg-required="Este campo es Requerido."
                                                           data-rule-required="true"
                                                    />
                                                    <span class="input-group-addon">
                                                        <span class="glyphicon glyphicon-calendar"></span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-3 form-group" id="fechahastareporte" hidden>
                                            <div class="input-group col-xs-12 col-md-12 col-sm-12">
                                                <label for="codrecolecta" class="text-primary" style="font-size: small"><b>FECHA HASTA:</b></label>
                                                <div class='input-group date'>
                                                    <input type="text" class="form-control input-sm" id="datetimepickerhasta"
                                                           name="fechahasta"
                                                           value="{{$fecha}}"
                                                           data-container="body"
                                                           data-msg-required="Este campo es Requerido."
                                                           data-rule-required="true"
                                                    />
                                                    <span class="input-group-addon">
                                                        <span class="glyphicon glyphicon-calendar"></span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">

                                        <div class="col-md-4 col-md-offset-2">
                                        <div class="col-xs-12 col-md-12 col-sm-12" id="fechafija" hidden>
                                                <div align="center">
                                                    <label for="codrecolecta" class="text-primary" style="font-size: small"><b>FECHA:</b></label>
                                                </div>
                                                <div class='input-group date' id='datetimepickerfija'>
                                                    <input type="text" class="form-control input-sm" id="fechafija"
                                                           name="fechafija"
                                                           value="{{$fecha }}"
                                                           data-container="body"
                                                           data-msg-required="Este campo es Requerido."
                                                           data-rule-required="true"
                                                    />
                                                    <span class="input-group-addon">
                                                            <span class="glyphicon glyphicon-calendar"></span>
                                                        </span>

                                             </div>
                                        </div>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-md-3 col-md-offset-1 form-group" id="selectoficina" hidden>
                                            <div class="input-group col-xs-12 col-md-12 col-sm-12">
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-th-list" data-toggle="tooltip" data-placement="left" title='Debes Seleccionar una oficina'></i></span>
                                                    <select onchange="return rutaXoficina()" class="form-control  show-tick" data-live-search="true" data-size="10" data-msg-required="Este campo es Requerido." data-rule-required="true" name="codoficina" id="codoficina" required data-placement="bottom">
                                                       @if($codoficina == 46)
                                                        <option value= "0" >TODAS LAS OFICINAS</option>
                                                        @foreach($consultaOficinas['entidadRespuesta'] as $oficina){
                                                        <option value={{$oficina['codoficina']}}> {{$oficina['nombre']}}</option>
                                                        }
                                                        @endforeach
                                                          @else

                                                                <option value={{$codoficina}}> {{$nombre}}</option>
                                                                }

                                                        @endif

                                                    </select>

                                            </div>
                                        </div>

                                        <div class="col-md-3 form-group" id="selectvehiculo" hidden>
                                            <div class="input-group col-xs-12 col-md-12 col-sm-12">
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-th-list" data-toggle="tooltip" data-placement="left" title='Debes Seleccionar un Tipo de Vehiculo'></i></span>
                                                <select class="form-control" name="vehiculo" id="vehiculo" required data-placement="bottom">
                                                    <option value= "0" >TODOS LOS VEHICULOS</option>
                                                    @foreach($tipoVehiculo['entidadRespuesta'] as $vehiculo)
                                                        <option
                                                                value="{{ $vehiculo['codtipoveh'] }}">{{ strtoupper($vehiculo['nombre']) }}</option>
                                                    @endforeach
                                                </select>
                                                </div>
                                            </div>

                                        <div class="col-md-3 form-group" id="codigocliente" hidden>
                                            <div class="input-group date col-xs-12 col-md-12 col-sm-12">

                                                    <span class="input-group-addon">
                                                        <span class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="left" title='Ingresar nombre o código de cliente'></span>
                                                    </span>
                                                <input onclick="getClientes()" type="text" class="form-control input-sm col-md-1" id="nomcliente" placeholder="Ingresar el Nombre del cliente" name="nomcliente"
                                                       data-container="body"
                                                       data-msg-required="Este campo es Requerido."
                                                       data-rule-required="false"
                                                />
                                                <input type="number" class="form-control input-sm col-md-1" id="codcliente" placeholder="Ingresar el codigo del cliente" name="codcliente"
                                                       data-container="body"
                                                       data-msg-required="Este campo es Requerido."
                                                       data-rule-required="false"
                                                />
                                            </div>
                                        </div>
                                        </div>


                                        <div class="col-md-4 col-md-offset-2 form-group" id="selectruta" hidden>
                                            <div class="input-group col-xs-12 col-md-12 col-sm-12">
                                            <span class="input-group-addon"><i class="glyphicon glyphicon-th-list" data-toggle="tooltip" data-placement="left" title='Debes Seleccionar una ruta'></i></span>
                                            <select name="ruta" id="ruta" class="form-control"
                                                    data-rule-required="false">
                                                <option value= "0">TODAS LAS RUTAS</option>

                                            </select>

                                            </div>

                                    </div>


                                    <div class="row">
                                        <div class="col-md-3 form-group col-md-offset-1" id="selectstatus" hidden>
                                            <label for="codrecolecta" class="text-primary" style="font-size: small"><b>ESTATUS:</b></label>
                                            <div class="input-group col-xs-12 col-md-12 col-sm-12">
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-th-list" data-toggle="tooltip" data-placement="left" title='Causales'></i></span>
                                                <select class="form-control" name="status" id="status" data-placement="top" onchange="mostrar()" >
                                                    <option value= "0" >TODOS</option>
                                                    <option value= "1" >NPK (RECOLECTA NO REALIZADA)</option>
                                                    <option value= "2" >NPKZ (RECOLECTA NO REALIZADA DEBIDO A UNA CAUSA CONTROLABLE POR ZOOM)</option>
                                                    <option value= "3" >PK (RECOLECTA REALIZADA)</option>

                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3 form-group " id="selectcausales" hidden>
                                            <label for="codrecolecta" class="text-primary" style="font-size: small"><b>CAUSALES:</b></label>
                                            <div class="input-group col-xs-12 col-md-12 col-sm-12">
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-th-list" data-toggle="tooltip" data-placement="left" title='Causales'></i></span>
                                                <select class="form-control selectpicker" name="causales[]" id="causales[]" data-placement="top"  data-width="240px" data-size="15" multiple title="Seleccione Los Causales">
                                                    <option value= "0" >TODAS</option>
                                                    @foreach($consultaCausales['entidadRespuesta'][0]['listestatus']['listobservaciones'] as $causal){
                                                    <option value={{$causal['codobservacion']}}> {{$causal['observaciones']}}</option>
                                                    }
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3 form-group " id="selectcausalesnpkz" hidden>
                                            <label for="codrecolecta" class="text-primary" style="font-size: small"><b>CAUSALES NPKZ:</b></label>
                                            <div class="input-group col-xs-12 col-md-12 col-sm-12">
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-th-list" data-toggle="tooltip" data-placement="left" title='Causales'></i></span>
                                                <select class="form-control selectpicker dropup" name="causales[]" id="causales[]" data-placement="bottom"  data-width="240px" data-size="15" multiple title="Seleccione Los Causales">
                                                    <option value= "0" >TODAS</option>
                                                    @foreach($consultaCausales['entidadRespuesta'][1]['listestatus']['listobservaciones'] as $causal){
                                                    <option value={{$causal['codobservacion']}}> {{$causal['observaciones']}}</option>
                                                    }
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-3 form-group " id="tipoenvio" hidden>
                                            <label for="codrecolecta" class="text-primary" style="font-size: small"><b>TIPO DE ENVIO:</b></label>
                                            <div class="input-group col-xs-12 col-md-12 col-sm-12">
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-th-list" data-toggle="tooltip" data-placement="left" title='tipoenvio'></i></span>
                                                <select class="form-control selectpicker dropup" name="tipoenvio" id="tipoenvio" data-placement="bottom"  data-width="240px" data-size="15" title="Seleccione el Tipo de Envio">
                                                    <option value= "0" >TODOS</option>
                                                    <option value= "1" >DOCUMENTOS</option>
                                                    <option value= "2" >MERCANCIA</option>
                                                    <option value= "3" >VALIJAS</option>

                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-3 form-group col-md-offset-1" id="selectrecolecta" hidden>
                                            <label for="codrecolecta" class="text-primary" style="font-size: small"><b>TIPO DE RECOLECTA:</b></label>

                                            <div class="input-group col-xs-12 col-md-12 col-sm-12">
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-th-list" data-toggle="tooltip" data-placement="left" title='Debes Seleccionar un Tipo de Recolecta'></i></span>
                                                <select class="form-control" name="tiporecolect" id="tiporecolect" required data-placement="bottom">
                                                    <option value="0">TODAS</option>
                                                    <option value="1">EMERGENTE</option>
                                                    <option value="2">EVENTUAL</option>
                                                    <option value="3">FIJA</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3 form-group" id="selectcliente" hidden>
                                            <label for="codrecolecta" class="text-primary" style="font-size: small"><b>TIPO DE CLIENTE:</b></label>
                                            <div class="input-group col-xs-12 col-md-12 col-sm-12">
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-th-list" data-toggle="tooltip" data-placement="left" title='Debes Seleccionar un Tipo de Cliente'></i></span>
                                                <select class="form-control" name="tipocliente" id="tipocliente" required data-placement="bottom">
                                                    <option value="0">TODOS</option>
                                                    <option value="2">ALIADOS</option>
                                                    <option value="3">CREDITO</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel-body col-md-offset-6">
                                        <button class="btn btn-primary" id="enviar" type="submit"><span class=" glyphicon glyphicon-ok"></span> Aceptar</button>
                                    </div>
                                </form>
                                <div class="panel-footer col-md-7" style="font-size:12px; width:64.2%;">
                                    <span class="glyphicon glyphicon-info-sign red"></span> <b>Nota:</b> Al posicionar el "mouse" sobre los iconos del formulario, podrá ver una breve descripci&oacute;n del campo
                                </div>
                                <div class="modal fade" style="margin-top:18%;" id="procesando" tabindex="-1" role="dialog">
                                    <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">Procesando búsqueda, Por Favor Espere...</h4>
                                            </div>
                                            <div class="modal-body">
                                                <div class="progress">
                                                    <div class="progress-bar progress-bar-striped progress-bar-primary active" role="progressbar" id="progressBar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                                                        <div id="label">0%</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            @if(session('msj') && session('cod') == false)
                <div class="alert alert-danger col-sm-6 col-sm-push-3" style="margin-top: 20px;">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>{{ session('msj') }}</strong>
                </div>
            @endif
            </div>
        </div>
    </div>

@endsection

@section('script')


    <script type="text/javascript">


        function rutaXoficina() {

            $.ajax({
                url: 'https://webservices.grupozoom.com/baaszoom/public/canguroazul/cuentasWs',
                data: {
                    'codoficina': $('#codoficina').val()

                },

                type: 'get',
                dataType: 'json',
                success: function (data) {
                    console.log('codoficina');
                    console.log(data);
                    if (($('#codoficina').val()) == 0 ){
                        var lista = '<option value="0" >TODAS LAS RUTAS</option>';
                        $('#ruta').html(lista);
                    }else {
                         if (data.codrespuesta == "COD_000") {

                            var lista = '<option value="0" >TODAS LAS RUTAS</option>';
                            $.each(data.entidadRespuesta, function (index, record) {
                                lista += '<option value="' + record.numerorut + '">' + 'RUTA ' + record.numerorut + '</option>';
                            });
                            $('#ruta').html(lista);
                         }
                    }
                }
            });
        }





        $('#myTabs a').click(function (e) {
            e.preventDefault();
            $(this).tab('show')
        });
        $('#myTabs a[href="#profile"]').tab('show') // Select tab by name
        $('#myTabs a:first').tab('show') // Select first tab
        $('#myTabs a:last').tab('show') // Select last tab
        $('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)
        $('#someTab').tab('show')
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            e.target // newly activated tab
            e.relatedTarget // previous active tab
        })

        // VALIDO LOS CAMPOS DEL FORMULARIO

        $('document').ready(function () {
            $("#crearRecolecta").validate({
                showErrors: function (errorMap, errorList) {
                    //LIMPIAR LOS TOOLTIPS PARA LOS ELEMENTOS VÁLIDOS
                    $.each(this.validElements(), function (index, element) {
                        var $element = $(element);
                        $element.data("title", "") // BORRAR EL TITULO - NO HAY ERROR ASOCIADO
                            .removeClass("error")
                            .tooltip("destroy");
                    });

                    // CREAR LOS TOOLTIPS PARA ELEMENTOS INVÁLIDOS
                    $.each(errorList, function (index, error) {
                        var $element = $(error.element);
                        $element.tooltip("destroy") // DESTRUIR TODO TOOLTIP EXISTENTE PARA PODER CREAR UNO NUEVO
                            .data("title", error.message)
                            .addClass("error")
                            .tooltip(); // CREAR UN NUEVO TOOLTIP CON EL MENSAJE DE ERROR ASOCIADO AL TITULO AGREGADO
                    });
                }
            });
        });

        $('document').ready(function () {
            $("#buscarRecolecta2").validate({
                showErrors: function (errorMap, errorList) {
                    //LIMPIAR LOS TOOLTIPS PARA LOS ELEMENTOS VÁLIDOS
                    $.each(this.validElements(), function (index, element) {
                        var $element = $(element);
                        $element.data("title", "") // BORRAR EL TITULO - NO HAY ERROR ASOCIADO
                            .removeClass("error")
                            .tooltip("destroy");
                    });

                    // CREAR LOS TOOLTIPS PARA ELEMENTOS INVÁLIDOS
                    $.each(errorList, function (index, error) {
                        var $element = $(error.element);
                        $element.tooltip("destroy") // DESTRUIR TODO TOOLTIP EXISTENTE PARA PODER CREAR UNO NUEVO
                            .data("title", error.message)
                            .addClass("error")
                            .tooltip(); // CREAR UN NUEVO TOOLTIP CON EL MENSAJE DE ERROR ASOCIADO AL TITULO AGREGADO
                    });
                }
            });
        });

        $(function () {
            $('#datetimepicker').datetimepicker({
                format: 'DD/MM/YYYY',
                useCurrent: false,
                widgetPositioning: {
                    vertical: 'bottom'
                }

            });
        });
        var minDate = moment().subtract(367, 'days');
        var maxDate = moment().add(16, 'days');
        $(function () {
            $('#datetimepickerdesde').datetimepicker({
                minDate: minDate,
                maxDate: maxDate,
                format: 'DD-MM-YYYY',
                daysOfWeekDisabled: [0, 6],
                useCurrent: false,
                widgetPositioning: {
                    vertical: 'bottom'
                }

            });
        });



        $(function () {
            $('#datetimepickerfija').datetimepicker({
                format: 'DD-MM-YYYY',
                useCurrent: false,
                daysOfWeekDisabled: [0, 6],
                widgetPositioning: {
                    vertical: 'bottom'
                }

            });
        });

        $(function () {
            $('#datetimepickerhasta').datetimepicker({
                minDate: minDate,
                maxDate: maxDate,
                format: 'DD-MM-YYYY',
                daysOfWeekDisabled: [0, 6],
                useCurrent: false,
                widgetPositioning: {
                    vertical: 'bottom'
                }

            });
        });

        $(document).ready(function()
        {
            var navItems = $('.admin-menu li > a');
            var navListItems = $('.admin-menu li');
            var allWells = $('.admin-content');
            var allWellsExceptFirst = $('.admin-content:not(:first)');

            allWellsExceptFirst.hide();
            navItems.click(function(e)
            {
                e.preventDefault();
                navListItems.removeClass('active');
                $(this).closest('li').addClass('active');

                allWells.hide();
                var target = $(this).attr('data-target-id');
                $('#' + target).show();
            });
        });

        $(document).ready(function() {

            //VALIDACION DE CAMPOS
            jQuery.validator.addMethod("accept", function(value, element, param) {
                return value.match(new RegExp("." + param + "$"));
            });
            $.validator.addMethod('regexp', function(value, element, param) {
                    return this.optional(element) || value.match(param);
                },
                'ingresa una cuenta valida');
            $("#listaRecolecta").validate({
                rules :{
                    checkfecha: { required : true}
                },

                messages : {
                    checkfecha: { required : "* Requerido"},
                },
                tooltip_options: {

                },
            });
            //Combo de select de Actualizar Datos view (recolectaActualizarDatos)
            $('#tipo').change(function(){

                aux = document.getElementById('tipo').value;

                if (aux == 1){

                    $('#fechadesdeselect').show("slow");
                    $('#fechahastaselect').show("slow");
                    $('#clienteselect').hide("slow");
                    $('#recolectainicial').hide("slow");
                    $('#recolectafinal').hide("slow");

                }else if (aux == 2){

                    $('#fechadesdeselect').hide("slow");
                    $('#fechahastaselect').hide("slow");
                    $('#clienteselect').show("slow");
                    $('#recolectainicial').hide("slow");
                    $('#recolectafinal').hide("slow");

                }else{

                    $('#fechadesdeselect').hide("slow");
                    $('#fechahastaselect').hide("slow");
                    $('#clienteselect').hide("slow");
                    $('#recolectainicial').show("slow");
                    $('#recolectafinal').show("slow");

                }
            });

            /*         $('#tiponota').change(function(){

                                     aux = document.getElementById('tiponota').value;

                                     if (aux == 0){

                                         $('#notaTipoBusqueda').hide("slow");
                                         $('#notaFechaIngreso').hide("slow");
                                         $('#notaRecolectaInicial').hide("slow");
                                         $('#notaRecolectaFinal').hide("slow");
                                         $('#notarutadesde').hide("slow");
                                         $('#notarutahasta').hide("slow");
                                     }else if (aux == 1){

                                         $('#notaTipoBusqueda').show("slow");
                                         $('#notaFechaIngreso').show("slow");
                                         $('#notaRecolectaInicial').hide("slow");
                                         $('#notaRecolectaFinal').hide("slow");
                                         $('#notarutadesde').hide("slow");
                                         $('#notarutahasta').hide("slow");

                                     }else if (aux == 2){

                                         $('#notaTipoBusqueda').show("slow");
                                         $('#notaFechaIngreso').hide("slow");
                                         $('#notaRecolectaInicial').show("slow");
                                         $('#notaRecolectaFinal').show("slow");
                                         $('#notarutadesde').hide("slow");
                                         $('#notarutahasta').hide("slow");

                                     }else{

                                         $('#notaTipoBusqueda').show("slow");
                                         $('#notaFechaIngreso').hide("slow");
                                         $('#notaRecolectaInicial').hide("slow");
                                         $('#notaRecolectaFinal').hide("slow");
                                         $('#notarutadesde').show("slow");
                                         $('#notarutahasta').show("slow");
                                     }
                                 });
                     */
            $('#tiporeporte').change(function() {

                aux = document.getElementById('tiporeporte').value;

                if (aux == 0) {
                    $('#selectreportes').hide("slow");
                    $('#fechadesdereporte').hide("slow");
                    $('#fechahastareporte').hide("slow");
                    $('#selectoficina').hide("slow");
                    $('#selectcliente').hide("slow");
                    $('#codigocliente').hide("slow");
                    $('#nombrecliente').hide("slow");
                    $('#selectestatus').hide("slow");
                    $('#selectrecolecta').hide("slow");
                    $('#nombrecliente').hide("slow");
                    $('#selectcausales').hide("slow");
                    $('#selectstatus').hide("slow");
                    $("#tipoenvio").hide("slow");
                    $('#selectcliente').hide("slow");



                } else if (aux == 1) {
                    $('#selectreportes').hide("slow");
                    $('#fechadesdereporte').show("slow");
                    $('#fechahastareporte').show("slow");
                    $('#selectoficina').show("slow");
                    $('#selectcliente').hide("slow");
                    $('#codigocliente').hide("slow");
                    $('#selectvehiculo').hide("slow");
                    $('#selectestatus').hide("slow");
                    $('#selectrecolecta').hide("slow");
                    $('#selectruta').hide("slow");
                    $('#fechafija').hide("slow");
                    $('#nombrecliente').hide("slow");
                    $('#selectcausales').hide("slow");
                    $('#selectstatus').hide("slow");
                    $("#tipoenvio").hide("slow");
                    $('#selectcliente').hide("slow");



                }else if (aux == 2){
                    $('#fechadesdereporte').hide("slow");
                    $('#fechahastareporte').hide("slow");
                    $('#fechafija').show("slow");
                    $('#selectvehiculo').show("slow");
                    $('#selectoficina').show("slow");
                    $('#selectruta').show("slow");
                    $('#nombrecliente').hide("slow");
                    $('#codigocliente').hide("slow");
                    $('#selectcausales').hide("slow");
                    $('#selectstatus').hide("slow");
                    $("#tipoenvio").hide("slow");
                    $('#selectrecolecta').hide("slow");
                    $('#selectcliente').hide("slow");



                }else {
                    $('#nombrecliente').hide("slow");
                    $('#selectrecolecta').hide("slow");
                    $('#selectruta').hide("slow");
                    $('#fechafija').hide("slow");
                    $('#selectvehiculo').hide("slow");
                    $('#selectstatus').show("slow");
                    $('#fechadesdereporte').show("slow");
                    $('#fechahastareporte').show("slow");
                    $('#codigocliente').show("slow");
                    $('#nombrecliente').show("slow");
                    $('#selectcausales').hide("slow");
                    $('#selectoficina').show("slow");
                    $('#selectcliente').show("slow");
                    $("#tipoenvio").hide("slow");
                    $('#selectrecolecta').show("slow");




                }

            });

        });

        $('#enviar').on('click', function() {
            var RegistroForm=$('#tiporeporte').valid();
            if(RegistroForm==true) {
                $('#procesando').modal('show');
                var elem = document.getElementById("progressBar");
                var width = 1;
                var id = setInterval(frame, 5);

                function frame() {
                    if (width >= 100) {
                        clearInterval(id);
                    } else {
                        width++;
                        elem.style.width = width + '%';
                        document.getElementById("label").innerHTML = width * 1 + '%';
                    }
                }
            }
        });

        function mostrar() {
            if ($("#status").val() == "1") {
                $("#selectcausales").show("slow");
                $("#selectcausalesnpkz").hide("slow");
                $("#tipoenvio").hide("slow");

            }
            else if ($("#status").val() == "2") {
                $("#selectcausalesnpkz").show("slow");
                $("#selectcausales").hide("slow");
                $("#tipoenvio").hide("slow");

            }
            else if ($("#status").val() == "3") {
                $("#tipoenvio").show("slow");
                $("#selectcausalesnpkz").hide("slow");
                $("#selectcausales").hide("slow");
            }
            else {
                $("#selectcausales").hide("slow");
                $("#selectcausalesnpkz").hide("slow");
                $("#tipoenvio").hide("slow");
            }
        }

    </script>

    <script>
           function getClientes() {
             $("#nomcliente").autocomplete({
                 source: function (request, response) {
                     $.ajax({
                         type: 'GET',
                         url: 'https://webservices.grupozoom.com/baaszoom/public/canguroazul/getInfoRecolectaClientesWs',
                        dataType: "json",
                         data: {
                            term: request.term,
                        },

                        success: function (data) {

                            response($.map(data.entidadRespuesta, function (item) {
                                return {
                                    label: item.nomcliente + ' ['+item.codcliente+']',
                                    id: item.codcliente,
                                };
                            }));
                        },

                    });
                },
                select: function(event, ui) {
                    $("#codcliente").val(ui.item.id);
                },
                minLength: 3,
            });
        }
    </script>

@endsection