{{--
Creado por Fabiola Rodriguez
Fecha: 07/12/2016/
--}}
@extends('layouts/master')
@section('content')
    <script type="text/javascript">
        $('document').ready(function () {
            $("#BusquedaGuiaForm").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 quitarLongitud() {
            $('#nroguia').removeAttr('maxlength');
            $('#guiaref').show();
            $('#casilleros').hide();
            $('#listclientes').hide();
        }

        function agregarLongitud() {
            $('#nroguia').attr('maxlength', '10');
            $('#guiaref').show();
            $('#casilleros').hide();
            $('#listclientes').hide();
        }

        function showCasilleroInput() {

            if ($("input[name=opcion]:checked").val() == 'casillero') {
                $('#casilleros').show();
                $('#guiaref').hide();
                $('#listclientes').hide();
            }

        }

        function showClienteInput() {

            if ($("input[name=opcion]:checked").val() == 'cliente') {
                $('#listclientes').show();
                $('#guiaref').hide();
                $('#casilleros').hide();
            }

        }


        function changeCasilleroSelect() {
            if ($('#optcasillero').val() == 'casillero') {
                $('#casillerodiv').show();
            } else {
                $('#casillerodiv').hide(); // hide div if value is not "custom"
            }

            if ($('#optcasillero').val() == 'cliente') {
                $('#clientediv').show();
            } else {
                $('#clientediv').hide(); // hide div if value is not "custom"
            }
        }

        function changeClienteSelect() {
            if ($('#optcliente').val() == 'codigocli') {
                $('#codigoclidiv').show();
            } else {
                $('#codigoclidiv').hide(); // hide div if value is not "custom"
            }

            if ($('#optcliente').val() == 'rifci') {
                $('#rifcidiv').show();
            } else {
                $('#rifcidiv').hide(); // hide div if value is not "custom"
            }

            if ($('#optcliente').val() == 'razsoc') {
                $('#razsocdiv').show();
            } else {
                $('#razsocdiv').hide(); // hide div if value is not "custom"
            }

            if ($('#optcliente').val() == 'densoc') {
                $('#densocdiv').show();
            } else {
                $('#densocdiv').hide(); // hide div if value is not "custom"
            }

            if ($('#optcliente').val() == 'nit') {
                $('#nitdiv').show();
            } else {
                $('#nitdiv').hide(); // hide div if value is not "custom"
            }
        }
    </script>

    <div class="col-sm-6 col-sm-offset-3 container">

        <div class="panel panel-primary">
            <div class="panel-heading"><strong><h3 class="panel-title" style="text-align:center;"><span
                                class="glyphicon glyphicon-search"></span>
                        CONSULTAR DATOS</h3></strong></div>
            <div class="panel-body">
                @if (count($errors) > 0)
                    <div class="alert alert-danger">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </div>
                @endif
                                <form role="form" action="{{ url('resultados') }}" id="BusquedaGuiaForm" method="get">
                    <label class="radio-inline"><input type="radio" name="opcion" id="opcion" value="guia" checked
                                                       onclick="agregarLongitud()">Por Guía</label>
                    <label class="radio-inline"><input type="radio" name="opcion" id="opcion" value="referencia"
                                                       onclick="quitarLongitud()">Por Referencia</label>
                    <label class="radio-inline"><input type="radio" name="opcion" id="opcion" value="casillero"
                                                       onclick="showCasilleroInput()">Por Casillero</label>
                    <label class="radio-inline"><input type="radio" name="opcion" id="opcion" value="cliente"
                                                       onclick="showClienteInput()">Por Cliente</label>
                    <br>
                    <br>
                    <div style="margin-bottom: 25px; width: 100%;" class="input-group col-xs-12 col-md-4" id="guiaref">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-search" data-toggle="tooltip"
                                                           data-placement="left"
                                                           title='Número de Guía o Referencia'></i></span>
                        <input type="text" class="form-control" name="nroguia" id="nroguia"
                               placeholder="Ingrese un número de Guía o Referencia"
                               maxlength="20"
                               data-container="body"
                               data-placement="bottom"
                               data-msg-required="Este campo es Requerido."
                               data-msg-minlength="Debes ingresar al menos 3 caracteres."
                               data-rule-minlength="3">
                    </div>
                    <div style="margin-bottom: 25px; width: 100%;display: none;" class="input-group col-xs-12 col-md-4"
                         id="casilleros">
                        <label for="optcasillero">Seleccione una opción</label>
                        <select class="form-control" id="optcasillero" name="optcasillero"
                                onchange="changeCasilleroSelect()">
                            <option value="*">Seleccione...</option>
                            <option value="casillero">Casillero</option>
                            <option value="cliente">Cliente</option>
                        </select>
                        <br>
                        <br>
                        <br>
                        <br>
                        <div class="input-group" id="casillerodiv" style="display:none;">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-search" data-toggle="tooltip"
                                                               data-placement="left"
                                                               title='Número de Casillero'></i></span>
                            <input type="text" class="form-control" name="casillero" id="casillero"
                                   placeholder="Ingrese un número de Casillero"
                                   maxlength="6"
                                   data-container="body"
                                   data-placement="bottom"
                                   data-msg-required="Este campo es Requerido.">
                        </div>

                        <div class="input-group" id="clientediv" style="display:none;">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-search" data-toggle="tooltip"
                                                               data-placement="left"
                                                               title='Código del Cliente'></i></span>
                            <input type="text" class="form-control" name="cliente" id="cliente"
                                   placeholder="Ingrese el código del Cliente"
                                   maxlength="15"
                                   data-container="body"
                                   data-placement="bottom"
                                   data-msg-required="Este campo es Requerido.">
                        </div>
                    </div>
                    <div style="margin-bottom: 25px; width: 100%;display: none;" class="input-group col-xs-12 col-md-4"
                         id="listclientes">
                        <label for="optcliente">Seleccione una opción</label>
                        <select class="form-control" id="optcliente" name="optcliente"
                                onchange="changeClienteSelect()">
                            <option value="*">Seleccione...</option>
                            <option value="codigocli">Código</option>
                            <option value="razsoc">Razón Social</option>
                            <option value="rifci">R.I.F./C.I.</option>
                            <option value="nit">N.I.T.</option>
                            <option value="densoc">Denominación Social</option>
                        </select>
                        <br>
                        <br>
                        <br>
                        <br>
                        <div class="input-group" id="codigoclidiv" style="display:none;">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-search" data-toggle="tooltip"
                                                               data-placement="left"
                                                               title='Código del Cliente'></i></span>
                            <input type="text" class="form-control" name="codigocli" id="codigocli"
                                   placeholder="Ingrese el Código del Cliente"
                                   data-container="body"
                                   data-placement="bottom"
                                   data-msg-required="Este campo es Requerido.">
                        </div>

                        <div class="input-group" id="razsocdiv" style="display:none;">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-search" data-toggle="tooltip"
                                                               data-placement="left"
                                                               title='Razón Social'></i></span>
                            <input type="text" class="form-control" name="razsoc" id="razsoc"
                                   placeholder="Ingrese la Razón Social del Cliente"
                                   data-container="body"
                                   data-placement="bottom"
                                   data-msg-required="Este campo es Requerido.">
                        </div>

                        <div class="input-group" id="rifcidiv" style="display:none;">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-search" data-toggle="tooltip"
                                                               data-placement="left"
                                                               title='R.I.F./C.I.'></i></span>
                            <input type="text" class="form-control" name="rifci" id="rifci"
                                   placeholder="Ingrese el R.I.F. o C.I. del Cliente"
                                   data-container="body"
                                   data-placement="bottom"
                                   data-msg-required="Este campo es Requerido.">
                        </div>

                        <div class="input-group" id="densocdiv" style="display:none;">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-search" data-toggle="tooltip"
                                                               data-placement="left"
                                                               title='Denominación Social'></i></span>
                            <input type="text" class="form-control" name="densoc" id="densoc"
                                   placeholder="Ingrese la Denominación Social del Cliente"
                                   data-container="body"
                                   data-placement="bottom"
                                   data-msg-required="Este campo es Requerido.">
                        </div>

                        <div class="input-group" id="nitdiv" style="display:none;">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-search" data-toggle="tooltip"
                                                               data-placement="left"
                                                               title='N.I.T.'></i></span>
                            <input type="text" class="form-control" name="nit" id="nit"
                                   placeholder="Ingrese el N.I.T. de Cliente"
                                   data-container="body"
                                   data-placement="bottom"
                                   data-msg-required="Este campo es Requerido.">
                        </div>
                    </div>

                    <div style="margin:1em;text-align:center;">
                        <button type="submit" class="btn btn-primary btn-lg" id="load"
                                data-loading-text="<i class='glyphicon glyphicon-refresh spinning '></i> Procesando.."
                                data-style="expand-right">Aceptar
                        </button>
                    </div>
                </form>

            </div>
            <div class="panel-footer"><span class="glyphicon glyphicon-info-sign color"></span> <b>Nota:</b> Al
                posicionar el mouse sobre los iconos del formulario, podra ver una breve descripci&oacute;n del campo
            </div>
        </div>
    </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 su solicitud. Por Favor Espere</h4>
                </div>
                <div class="modal-body">
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped 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>


@endsection