@extends('layouts.PortalCcz.masterCcz')
@section('content')

    <script type="text/javascript">
        $('document').ready(function () {
            $("#RegForm").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 () {
                $('input.disablecopypaste').bind('copy paste', function (e) {
                    e.preventDefault();
                });
            });
        });

    </script>
    {{--<script type="text/javascript">
        $('document').ready(function(){
            setTimeout(function() {$("#alert2").fadeOut(4000);},4000);
            $.ajaxSetup({
                headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
            });
        });
    </script>--}}
    <div class="row">
        <div class="col-sm-10 col-sm-offset-1 container">
            <div class="col-lg-3 col-md-3"></div>
            <div class="col-lg-6 col-md-6">
                <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-list-alt"></SPAN> ACTIVAR CUENTA </h3></strong></div>
                    <li class="list-group-item" style="margin-bottom:0px;text-align:left;color: #000000;background-color: #c4e3f3;font-size: 12px">
                        <b>INGRESE LOS SIGUIENTES DATOS:</b>
                    </li>
                    <div class="panel-body" >
                        @if (count($errors) > 0)
                            <div id="alert2" class="alert alert-danger">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </div>
                        @endif
                        <form role="form" action="{{ route('PortalCcz.activateUsuarioCcz') }}" id="RegForm" name="RegForm" method="POST">
                            <input type="hidden" name="token_contra" id="token_contra" value="{{ $token_contra }}"/>
                            <div class="row">
                                <div class="col-md-12">
                                    <div style="margin-bottom: 15px" class='input-group date col-xs-12 col-md-12 col-sm-12'>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-lock" data-toggle="tooltip" data-placement="top" title='Ingrese una Contraseña'></span>
                                        </span>
                                        <input type="password"
                                               class="form-control"
                                               name="clave"
                                               id="clave"
                                               minlength="8"
                                               maxlength="40"
                                               placeholder="Ingrese una Contraseña"
                                               autocomplete="off"
                                               data-container="body"
                                               data-placement="right"
                                               data-msg-required= "Este campo es Requerido."
                                               data-rule-required="true"
                                               data-toggle="tooltip"
                                               data-msg-minlength="La contraseña debe tener minimo 8 caracteres."
                                               data-msg-maxlength="La contraseña no debe exceder de 40 caracteres."
                                        />
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div style="margin-bottom: 15px" class='input-group date col-xs-12 col-md-12 col-sm-12'>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-lock" data-toggle="tooltip" data-placement="top" title='Confirme Contraseña'></span>
                                        </span>
                                        <input type="password"
                                               class="form-control disablecopypaste"
                                               name="claveconf"
                                               id="claveconf"
                                               minlength="8"
                                               maxlength="40"
                                               placeholder="Confirme Contraseña"
                                               autocomplete="off"
                                               data-rule-equalto="#clave"
                                               data-msg-equalto="Las Contraseñas no coinciden."
                                               data-container="body"
                                               data-placement="right"
                                               data-msg-required= "Este campo es Requerido."
                                               data-rule-required="true"
                                               data-toggle="tooltip"
                                               data-msg-minlength="La contraseña debe tener minimo 8 caracteres."
                                               data-msg-maxlength="La contraseña no debe exceder de 40 caracteres."
                                        />
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div style="margin-bottom: 15px" class='input-group date col-xs-12 col-md-12 col-sm-12'>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-phone" data-toggle="tooltip" data-placement="top" title='Ingrese Código de Seguridad'></span>
                                        </span>
                                        <input type="text"
                                               class="form-control disablecopypaste"
                                               onKeyUp="this.value = this.value.toUpperCase();"
                                               name="token_incri"
                                               id="token_incri"
                                               size="8"
                                               maxlength="8"
                                               minlength="8"
                                               placeholder="Ingrese Código de Seguridad"
                                               autocomplete="off"
                                               data-container="body"
                                               data-placement="right"
                                               data-msg-required= "Este campo es Requerido."
                                               data-rule-required="true"
                                               data-toggle="tooltip"
                                               data-rule-minlength="8"
                                               data-rule-maxlength="8"
                                               data-msg-minlength="El Código de Seguridad debe tener 8 caracteres."
                                               data-msg-maxlength="El Código de Seguridad debe tener 8 caracteres."
                                        />
                                    </div>
                                </div>
                            </div>


                            <p style="text-align: center;">
                                <input type="hidden" name="sistema" id="sistema" value="{{ Request::path() }}"/>
                                <button type="submit" name="btnreg" id="btnreg" 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><br><br>
                                <a type="button" href="{{url('orinoco/PortalCcz/login')}}" class="btn btn-default btn-md"><span class="glyphicon glyphicon-chevron-left"></span> Regresar</a>--}}
                            </p>

                        </form>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3"></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