@extends('layouts.PortalCcz.masterCcz')
@section('content')
    <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
                    });
                }
            });
        });


    </script>

    <div class="row">
        <div class="col-sm-10 col-sm-offset-1 container">
            <div class="col-lg-1 col-md-1"></div>
            <div class="col-lg-12 col-md-12">
                <div class="panel panel-primary" style="width:100%;">
                    <div class="panel-heading"><strong><h3 style="text-align: center;" class="panel-title"><SPAN class="glyphicon glyphicon-user"></SPAN> REGISTRO DE CLIENTES</h3></strong></div>
                    <div class="panel-body" >
                        @if (count($errors) > 0)
                            <div id="alert"  class="alert alert-danger">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </div>
                        @endif

                        <div id="alert">
                            @foreach (['danger', 'warning', 'success', 'info'] as $msg)
                                @if(Session::has('alert-' . $msg))
                                    <p class="alert alert-{!! $msg  !!}" style="text-align:center;">{!! Session::get('alert-' . $msg)  !!}</p>
                                @endif
                            @endforeach
                        </div>
                        {!! url(Request::path()) !!}
                        <div class="col-sm-12 col-md-5" >
                            <div class="panel panel-info" style="width:100%; text-align: center;">

                                <div class="panel-heading"><strong><h5 class="panel-title" style="text-transform: uppercase;"><span class="glyphicon glyphicon-lock"></span> Inicio de Sesi&oacute;n</h5></strong></div>
                                <div  class="panel-body">
                                    <form role="form" action="{{ url(Request::path()) }}" id="LoginForm" name="LoginForm" method="POST">
                                        <div style="margin-bottom: 5px; 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='Ingrese Correo Electr&oacute;nico'></i></span>
                                            <input type="text" class="form-control" name="login" id="login" autocomplete="off"
                                                   placeholder="Ingrese Correo Electr&oacute;nico"
                                                   autofocus
                                                   value="{{Request::old('login')}}"
                                                   autocomplete="off" maxlength="50"
                                                   data-container="body"
                                                   data-placement="right"
                                                   data-msg-required= "Este campo es Requerido."
                                                   data-rule-required="true"
                                                   data-rule-email="Debe Ingresar un correo valido"
                                                   data-toggle="tooltip"
                                                   data-rule-minlength="3">
                                        </div>
                                        <div style="margin-bottom: 15px; 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='Ingrese Contrase&ntilde;a'></i></span>
                                            <input type="password" class="form-control" name="claveenc" id="claveenc"
                                                   onkeyup="javascript:this.value=this.value.toLowerCase();"
                                                   placeholder="Ingrese Contrase&ntilde;a"
                                                   value="{{Request::old('claveenc')}}"
                                                   data-container="body"
                                                   data-placement="right"
                                                   data-msg-required="Este campo es Requerido."
                                                   data-msg-minlength="La contraseña debe tener minimo 8 caracteres."
                                                   data-msg-maxlength="La contraseña no debe exceder de 40 caracteres."
                                                   data-rule-required="true"
                                                   data-rule-minlength="8"
                                                   data-rule-maxlength="40">
                                        </div>
                                        <div style="margin-bottom: 5px; text-align: center;" class="input-group col-xs-12">
                                            <img src="{{ url('captchalogin/flat') }}" data-toggle="tooltip" data-placement="left" onclick="this.src='{{ url('captchalogin/flat') }}?r='+Math.random();" 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"
                                                   @if (Session::has('autofocus')) autofocus @endif
                                            >
                                        </div>
                                        <p>
                                            <input type="hidden" name="sistema" id="sistema" value="{{ Request::path() }}"/>
                                            <button type="submit" name="btnlogin" id="btnlogin" class="btn btn-default btn-md"><span class="glyphicon glyphicon-ok"></span> Aceptar</button>
                                            <button type="reset" class="btn btn-default btn-md"><span class="glyphicon glyphicon-erase"></span> Limpiar</button>
                                        </p>

                                        <!--<a href="#">¿Olvido su Correo Electr&oacute;nico?</a><br>-->
                                        <a href="{{route('PortalCcz.recuperar')}}">¿Olvido su Contrase&ntilde;a?</a><br>
                                        <a href="#">¿Olvido su Correo Electrónico?</a><br><br>
                                        <a href="{{route('PortalCcz.registro')}}" class="btn btn-success btn-sm" role="button"><b><span class="glyphicon glyphicon-edit"></span> ¡REGISTRESE!</b></a><br><br>
                                    </form>
                                </div>

                                <div class="panel-footer" style="font-size:12px;">
                                    <span class="glyphicon glyphicon-info-sign red"></span> Estoy registrado, pero <setion style="color: #b00;font-weight: bold;margin-bottom: 0;">no llega mensaje a mi correo electr&oacute;nico</setion>. <a href="{{route('PortalCcz.reenviodatosuser')}}" style="color:#0066ff;">Reenviar Informaci&oacute;n</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-7" >
                            <div class="panel panel-info" style="width:100%; text-align: center;">

                                <div class="panel-heading"><strong><h5 class="panel-title" style="text-transform: uppercase;"><span class="glyphicon glyphicon-list-alt"></span> Informaci&oacute;n</h5></strong></div>
                                <div>
                                    <img src="{{ url('img/orinoco/banner-login.png') }}" style="width: 100%;height: auto;"  class="img-responsive" />
                                </div>
                                <div class="panel-body responsive" >

                                    <div  class="texto-gen" style="line-height:130%;text-align: left;">
                                        <p> <strong> Estimado Usuario,</strong></p>
                                        <p style="text-align: justify;">Le damos la más cordial bienvenida a <b> CASA DE CAMBIO ZOOM</b>.</p>

                                        <p> <strong>Para ingresar:</strong></p>
                                        <ul>
                                            <li>Si ya está registrado,  ingrese su correo electrónico y contraseña como se indica en INICIO DE SESIÓN.</li>
                                               <li>Si no se ha registrado, complete los datos como se indica en el link <a href="{{ route('PortalCcz.registro') }}">REGISTRESE</a>.</li>

                                        </ul>
                                        {{--<p style="text-align: center;"> En caso de dudas, cont&aacute;ctenos <strong>0501-ZOOM000 (0501-9666000)</strong></p>--}}
                                        {{--<p style="text-align: justify;"><b>CASA DE CAMBIO ZOOM C.A.</b>,  NO se hace responsable por la informaci&oacute;n suministrada por los usuarios de este sitio web. La misma es exclusiva responsabilidad del usuario.</p>--}}
                                    </div>

                                </div>
                                <div class="panel-footer" style="font-size:12px;">
                                    <p style="text-align: center;margin-bottom: 0;"> En caso de dudas, cont&aacute;ctenos <strong>0501-ZOOM000 (0501-9666000)</strong></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer" style="font-size:11px;">
                        <p style="text-align: center;margin-bottom: 0;"><b>CASA DE CAMBIO ZOOM C.A.</b>,  NO se hace responsable por la informaci&oacute;n suministrada por los usuarios de este sitio web. La misma es exclusiva responsabilidad del usuario.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-1 col-md-1"></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 progress-bar-danger 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