{% 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>
.btn-whatsapp{
    display:inline-block;
    background:#25D366;
    color:white;
    font-size:18px;
    padding:14px 22px;
    border-radius:50px;
    text-decoration:none;
    font-weight:bold;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
    animation: pulse 1.5s infinite;
    transition:0.3s;
}

.btn-whatsapp:hover{
    background:#1ebe5d;
    transform:scale(1.05);
    color:white;
}

@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(37,211,102,0.7);}
    70%{box-shadow:0 0 0 15px rgba(37,211,102,0);}
    100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
}
</style>
            <br>
<div style="text-align:center; margin-top:20px;">
    <a href="https://wa.me/5930987635146?text=Hola%20deseo%20contratar%20un%20facturero..."
       target="_blank"
       class="btn-whatsapp">
        📲 Deseo contratar un facturero
    </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 %}