{% extends 'minimal.html.twig' %}

{% block title %}Ingresar{% endblock %}

{% block body %}

    {% if error is defined and error != null %}

    <!-- The Modal -->
    {#<div id="myModal" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
            <span class="close">&times;</span>
            <br>
            <br>
            <div class="alert alert-danger"><br>{{ error.messageKey | raw }}</div>

        </div>

    </div>#}

    <script>
        // Get the modal
        var modal = document.getElementById("myModal");

        // Get the button that opens the modal
        var btn = document.getElementById("myBtn");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks the button, open the modal
        //btn.onclick = function() {
            modal.style.display = "block";
        //}

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            modal.style.display = "none";
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
    {% endif %}


    <form method="post" id="ingreso_form">
        <div class="col-12 col-md-4 peer pX-40 pY-30 h-100 bgc-white scrollable pos-r" style="min-width:420px">
            <h4 class="h2 mb-2 font-weight-normal">Ingreso Sistema</h4>

            {% if error is defined and error != null %}
                <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
            {% endif %}

            <div class="form-group">
                <label for="inputUsername" class="text-normal text-dark">Usuario</label>
                <input type="text" value="{{ last_username }}" name="username" id="inputUsername" class="form-control"
                       required autofocus maxlength="13"
                       pattern=".{2,}">
            </div>
           <div class="form-group position-relative">
    <label for="inputPassword" class="text-normal text-dark">Contrase&ntilde;a</label>
    <input type="password" name="password" id="inputPassword" class="form-control" required>
    
    <!-- Botón ojo -->
    <span class="position-absolute" 
          style="top: 38px; right: 12px; cursor: pointer; z-index: 10;" 
          onclick="togglePassword()">
        <i id="togglePasswordIcon" class="fa fa-eye"></i>
    </span>
</div>

<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">


<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">



            {#Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
            See https://symfony.com/doc/current/security/remember_me.html
    #}
           
        {#   
            {% if server == 'remote' %}
                <div class="form-group">
                    {% if errorgg is defined  and errorgg != null %}
                        <span class="invalid-feedback d-block"><span class="d-block">
                        <span class="form-error-icon badge badge-danger text-uppercase">Error</span> <span class="form-error-message">{{ errorgg }}</span>
                    </span></span>
                        <br>
                    {% endif %}
                    <div class="g-recaptcha" data-sitekey="{{ gg_recaptcha_site_key }}" data-action="LOGIN" required></div>
                </div>
            {% endif %}
            #}
            <div class="form-group">
                <div class="peers ai-c jc-sb fxw-nw">
                   {# <div class="peer">
                        <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                            <input id="remember_me" type="checkbox" name="_remember_me">
                            <label for="remember_me" class="peers peer-greed js-sb ai-c"><span class="peer peer-greed">Recordar</span></label>
                        </div>
                    </div>#}
                    <div class="peer">
                        <button class="btn btn-lg btn-primary" type="submit">
                            Ingresar
                        </button>
                    </div>
                </div>
            </div>
            <br>
            <div class="form-group">
                <div class="pull-right hidden-xs">
                    <a href="{{ path('app_forgot_password_request') }}">Olvide mi usuario y/o contraseña</a><br>
                </div>

            </div>




  <style>
.contratar-box{
    margin-top:25px;
    padding:18px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:14px;
    text-align:center;
}

.contratar-box h6{
    margin-bottom:15px;
    color:#374151;
    font-size:15px;
    font-weight:600;
}

.contratar-botones{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.btn-servicio{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-decoration:none;
    color:#fff;
    padding:11px 15px;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
    transition:.25s;
}

.btn-servicio i{
    font-size:18px;
}

.btn-facturacion{
    background:#2563eb;
}

.btn-facturacion:hover{
    background:#1d4ed8;
    color:#fff;
    transform:translateY(-2px);
}

.btn-firma{
    background:#16a34a;
}

.btn-firma:hover{
    background:#15803d;
    color:#fff;
    transform:translateY(-2px);
}

.ver-planes{
    display:inline-block;
    margin-top:15px;
    color:#2563eb;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
}

.ver-planes:hover{
    color:#1d4ed8;
    text-decoration:none;
}

@media (max-width:576px){
    .contratar-box{
        padding:15px;
    }

    .btn-servicio{
        font-size:13px;
        padding:10px;
    }
}
</style>
            <br>
<div class="contratar-box">
    <h6>A&uacute;n no eres cliente?</h6>

    <div class="contratar-botones">
        <a href="https://wa.me/5930987635146?text=Hola,%20deseo%20contratar%20Facturacion%20Electronica."
           target="_blank"
           class="btn-servicio btn-facturacion">
            <i class="fa fa-file-text-o"></i>
            Facturaci&oacute;n Electr&oacute;nica
        </a>

        <a href="https://wa.me/5930987635146?text=Hola,%20deseo%20contratar%20una%20Firma%20Electronica."
           target="_blank"
           class="btn-servicio btn-firma">
            <i class="fa fa-id-card-o"></i>
            Firma Electr&oacute;nica
        </a>
    </div>

    <a href="https://factecu.com/webfactecu/" target="_blank" class="ver-planes">
        Ver planes y precios <i class="fa fa-arrow-right"></i>
    </a>
</div>


            <br>
            <br>
          <!-- <div class="row">Soy Nuevo</div>
            <div class="row">
                <a href="{{ path('app_register') }}">Crea tu usuario y contrase単a</a>
            </div>  -->

        <a href="{{ path('app_ayuda') }}" class="btn-flotante">Ayuda</a>

            <br>
        </div>
    </form>
{% endblock %}

{% block javascripts %}
    <script src=" {{ asset("core/vendor/jquery-2.2.3.min.js") }}"></script>
  {#  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
        jQuery(function ($) {

            $body = $("body");

            var form = document.getElementById('ingreso_form');

            form.addEventListener('submit', function(event) {
                if (!grecaptcha.getResponse()) {
                    event.preventDefault();
                    alert('Debes completar el captcha para continuar :)');
                }
            });

        });

    </script>
    #}
    
    
    <script>
function togglePassword() {
    var passwordInput = document.getElementById('inputPassword');
    var icon = document.getElementById('togglePasswordIcon');
    if (passwordInput.type === "password") {
        passwordInput.type = "text";
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        passwordInput.type = "password";
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}
</script>


{% endblock %}