{% extends 'base/baselogin.html' %}

{% block title %}
    Autenticação
{% endblock %}

{% block content %}

    {% csrf_token %}
    <div class="superguide_login_firstaccess">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="centerlogin-fristacess">
                        <div class="bubblelogin-form">
                            <div class="loadercode">
                                <div class="cetnerdloadercode">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="shape-rendering: auto; display: block;" xmlns:xlink="http://www.w3.org/1999/xlink">
                                        <g>
                                            <circle cx="50" cy="50" r="32" stroke-width="8" stroke="#000000" stroke-dasharray="50.26548245743669 50.26548245743669" fill="none" stroke-linecap="round">
                                                <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="0 50 50;360 50 50"></animateTransform>
                                            </circle>
                                            <g></g>
                                        </g>
                                    </svg>
                                </div>
                            </div>
                            <div class="header-loggin-form">
                                <h2>Autenticação</h2>
                                <p>Digite abaixo o código que foi enviado para seu e-mail.</p>
                            </div>
                            <div class="body-loggin-form">
                                <form id="meu-formulario" method="post">
                                    {% csrf_token %}
                                    <div class="body-loggin-form">
                                        <div class="formg_login_first">
                                            <label for="3">
                                                <input required class="confirma__code" maxlength="6" type="text" name="autenticacao">
                                            </label>
                                        </div>
                                        <div class="formg_login_first btn_inside-form">
                                            <button type="button">Enviar</button>
                                        </div>
                                        <div class="alert_error"></div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottomlogin-flex row g-0">
            <div class="col-12 col-lg-4 offset-lg-4">
                <div class="brand-crt">
                    <a href="#">Desenvolvido com <i></i> por CRT</a>
                </div>
            </div>
            <div class="col-12 col-lg-4">
                <div class="brand-math-footer">
                    <a href="#"></a>
                </div>
            </div>
        </div>
    </div>
    
    
    <script>
        $('.confirma__code').on('input', function() {
            // Remover caracteres não numéricos
            $(this).val($(this).val().replace(/\D/g, ''));
        });
        
        $('#meu-formulario button').on('click', function() {
            if($('.confirma__code').val() == ''){
                $('.confirma__code').addClass('error_field');
            }
            else{
                $('.confirma__code').removeClass('error_field');
                var formData = $('#meu-formulario').serialize(); // Serializa os dados do formulário
                $('.loadercode').fadeIn();
                $.ajax({
                    type: 'POST',
                    url: '{% url "autenticacao" %}', // Substitua "sua_view" pelo nome de sua view Django
                    data:formData,
                    success: function(data) {
                        $('.loadercode').fadeOut();
                        
                        // Verificações 
                        if(data.error_message){
                            $('.alert_error').html(
                                '<span>' + data.error_message + '</span> <a href="javascript:void(0)" onclick="resend()"> Reenviar código de confirmação</a>');
                        }
                        else{
                            window.location.href = "{% url 'administrativo' %}";
                        }
                    },
                    error: function(xhr, status, error) {
                        // Erro
                        $('.loadercode').fadeOut();
                        alert('Erro na requisição');
                        console.log('Status: ' + status);
                        console.log('Erro: ' + error);
                    }
                });
            }
            
        });

        // Reenviar o código 
        function resend(){
            $('.loadercode').fadeIn();
            var csrfToken = $('input[name="csrfmiddlewaretoken"]').val(); 

            $.ajax({
                type: 'POST',
                url: '{% url "autenticacao" %}', 
                data : {
                    csrfmiddlewaretoken: csrfToken, 
                    typex : 'resend'
                },
                success: function(data) {
                    $('.loadercode').fadeOut();
                    console.log(data);
                },
                error: function(xhr, status, error) {
                    // Erro
                    $('.loadercode').fadeOut();
                    alert('Erro na requisição');
                    console.log('Status: ' + status);
                    console.log('Erro: ' + error);
                }
            });
        }
    </script> 

{% endblock %}