@extends('layouts/master')
@section('content')
    <div class="col-xs-12 col-sm-6 col-sm-offset-3">
    <div class="panel panel-primary" style="width:100%; text-align: center; margin-top: 55px;">

        <div class="panel-heading"><strong><h3 class="panel-title" style="text-transform: uppercase;"><span class="glyphicon glyphicon-lock"></span> Inicio de Sesi&oacute;n</h3></strong></div>
        <div class="panel-body">


            <form role="form" action="" id="LoginForm" name="LoginForm" method="POST">
                <div style="margin-bottom: 25px; width: 100%;" class="input-group col-xs-12 col-md-4">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="left" title='Nombre de Usuario'></i></span>
                    <input type="text" onblur="buscarif();"; class="form-control" name="RIF" id="RIF" placeholder="Ingrese Nombre de Usuario" autofocus value="" autocomplete="off" maxlength="27"
                           data-container="body"
                           data-placement="right"
                           data-msg-required="Este campo es Requerido."
                           data-msg-minlength="Debes ingresar al menos 3 caracteres."
                           data-rule-required="true"
                           data-rule-minlength="3"

                    >
                </div>
                <div style="margin-bottom: 25px; width: 100%;" class="input-group col-xs-12">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock" data-toggle="tooltip" data-placement="left" title='Contraseña'></i></span>
                    <input type="password" class="form-control" id="claveenc" name="claveenc" placeholder="Ingrese Contraseña" maxlength="20" value=""
                           data-container="body"
                           data-placement="right"
                           data-msg-required="Este campo es Requerido."
                           data-msg-minlength="La contraseña debe tener 8 caracteres."
                           data-msg-maxlength="La contraseña debe tener 8 caracteres."
                           data-rule-required="true"
                           data-rule-minlength="3"
                           data-rule-maxlength="20"
                    >
                </div>
                <div style="margin-bottom: 25px; text-align: center;" class="input-group col-xs-12">
                    <img src="" data-toggle="tooltip" data-placement="left" onclick="" title="Código de Validación"/>
                    <h5>
                        <p class="text-info">
                            <b>
                                <i class="glyphicon glyphicon-info-sign"></i>
                                Hacer clic en la Imagen para actualizar el Código de Validación.
                            </b>
                        </p>
                    </h5>
                </div>
                <div style="margin-bottom: 25px; width: 100%;" class="input-group col-xs-10">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-pencil" data-toggle="tooltip" data-placement="left" title='Ingrese Código de Validación'></i></span>
                    <input type="text" class="form-control" id="captcha" name="captcha" placeholder="Ingrese C&oacute;digo de Validaci&oacute;n" autocomplete="off" maxlength="5"
                           data-container="body"
                           data-placement="right"
                           data-msg-required="Este campo es Requerido."
                           data-rule-required="true"
                    >
                </div>

                      <div style="margin-bottom: 25px; width: 100%;" class="input-group col-xs-12">
                <span class="input-group-addon"><i class="glyphicon glyphicon-credit-card" data-toggle="tooltip" data-placement="left" title='Contraseña'></i></span>
                <select name="estado" id="estado" size="1" class="form-control" required onchange="elegirestado();" >
                    <option value="selecione el pais" >Seleccione una pais...</option>
                                    </select>
                </div>

                <p>
                    <input type="hidden" name="sistema" id="sistema" value="" />

                    <button type="submit" class="btn btn-primary btn-md">Aceptar</button>
                    <button type="reset" class="btn btn-default btn-md">Limpiar</button>
                </p>
            </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
            </br>
            registrarse
        </div>
    </div>
    </div>
    <div class="col-sm-4 col-md-4"></div>

    <script type="text/javascript">
        $('document').ready(function () {
            $("#LoginForm").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
                    });
                }
            });
        });


  $("#subproceso").change(function () {
                var codestatusunidad = $('#unidad').val();
                var codestatusproceso = $('#proceso').val();
                var codestatussubproceso = $('#subproceso').val();
                var selectconsultar = $("#modesta");
                var webservice = "getArbolEstatusWs";
                var pagina = 'canguroazul/';
                var method = 'Get';
                var url = '{{route("getConsumirAjax")}}';
                var arrcampos = ['codestatusunidad','codestatusproceso','codestatussubproceso'];
                var arrvar = [codestatusunidad, codestatusproceso, codestatussubproceso];
                //alert(selectconsultar);
                var data = {webservice: webservice, pagina: pagina, method: method, campos: arrcampos, valores: arrvar};
                $.ajax({
                    type: "GET",
                    //headers: {'X-CSRF-TOKEN': token},
                    url: url,
                    data: data,
                    datatype: 'JSON',
                    success: function (text) {
                        console.log(data);
                        //alert('hola');
                        console.log(JSON.stringify(text)); //hacer alert de un json
                        if (text.codrespuesta == 'COD_000') {
                            // Limpiamos el select
                            selectconsultar.find('option').remove();
                            selectconsultar.append('<option value="0">Seleccione el Estatus a Modificar</option>');
                            var $entidadRespuesta = text.entidadRespuesta;
                            var $count = $entidadRespuesta.length;
                            for (j = 0; j < $count; j++) {
                                selectconsultar.append('<option value="' + $entidadRespuesta[j].codestatus + '">' + $entidadRespuesta[j].codestatus+'</option>');
                            }
                            selectconsultar.prop('disabled', false);
                        }
                        else {
                            selectconsultar.prop('disabled', true);
                            selectconsultar.find('option').remove();
                            selectconsultar.append('<option value="0">Seleccione el Estatus a Modificar</option>');
                            alert("NO SE ENCONTRARON DATOS");
                        }
                    },
                    error: function (e) {
                        alert("No se puede obtener la data. " + JSON.stringify(e));
                    }
                });
            });





function elegirestado()
{
  var codestado = $('#estado').val();
//  alert(codestado);
  var webservice = "getCiudades";
  var pagina = 'canguroazul/';
  var method = 'Get';
  var url = '{{route("getConsumirAjax")}}';
  var arrcampos = ['filtro'];
  var arrvar = ["origen"];
  //alert(selectconsultar);
  var data = {webservice: webservice, pagina: pagina, method: method, campos: arrcampos, valores: arrvar};
  console.log(data);
        $.ajax({
                    type: "GET",
                    //headers: {'X-CSRF-TOKEN': token},
                    url: url,
                    data: data,
                    datatype: 'JSON',
                    success: function (text) {
                      console.log(text);
                        
                    }
                });
}



function buscarif()
{
  //verifico que tenga una forma similar al rif
  var regEsRif = new RegExp("^([VEJPG]{1})([0-9]{9})$");
  if(regEsRif.test($("#RIF").val()))
  {
    consultarif($("#RIF").val());
  }
  else
  {alert("nohayrif")
  }
}









    </script>
@endsection