{% extends "accounts/_base.html" %}

{% load static %}

{% block title %}
    Verification
{% endblock title %}

{% block header_branding %}{% endblock header_branding %}

{% block content %}
    <section class="accounts">
        <div class="container">
            <div class="row flex-center">

                <div class="branding col-6 text-center">
                    <img src="{% static "img/tapped.svg" %}"/>
                </div>
            </div>

            <div class="row flex-center">
                <div class="col-6 text-center">
                    <h1>Enter your code</h1>
                    <p>Please enter the code, that was sent to {{ phonenumber }}</p>
                </div>
            </div>

            {% if messages %}
                {% for message in messages %}
                    <div class="row flex-center">
                        <div class="col-6">
                            <p class="alert-danger">{{ message }}</p>
                        </div>
                    </div>
                {% endfor %}
            {% endif %}

            <form method="POST" action="/verificationhandler/">
                {% csrf_token %}
                <div class="row flex-center">
                    <div class="col-6 text-center">
                        <input type="number" name="phone_code" required="" id="id_phone_code"
                               autocomplete="one-time-code">
                    </div>
                </div>

                <div class="row flex-center">
                    <div class="col-6">
                        <button class="button" type="submit" class="button">Verify code</button>
                    </div>
                </div>

                <div class="row flex-center">
                    <div class="col-6">
                        {% if abusetimes < 3 %}
                        <div class="button ghost" style="text-align:center" id="phone-resend">Resend code</div>
                        {% endif %}

                         {% if newuser == False %}

                            {% if abusetimesemail < 3 %}
                            <div class="button ghost" style="text-align:center; margin-top: 20px;" id="email-resend">Resend code via E-Mail</div>
                            {% endif %}

                            {% if abusetimesemail >= 3 and abusetimes >= 3 %}
                            <div class="button ghost" style="text-align:center; margin-top: 20px;">Please contact support@tapped.to </div>
                            {% endif %}

                        {% endif %}

                            {% if newuser == True and abusetimes >= 3 %}
                            <div class="button ghost" style="text-align:center; margin-top: 20px;">Please contact support@tapped.to </div>
                            {% endif %}
                    </div>
                </div>
            </form>
            <script src="{% static "js/jquery-3.5.1.min.js" %}"></script>

            <script>
                 function getCookie(name) {
                    var cookieValue = null;
                    if (document.cookie && document.cookie !== '') {
                        var cookies = document.cookie.split(';');
                        for (var i = 0; i < cookies.length; i++) {
                            var cookie = cookies[i].trim();
                            // Does this cookie string begin with the name we want?
                            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                                break;
                            }
                        }
                    }
                    return cookieValue;
                }
            </script>

            {% if newuser == True %}
                <script>
                    var timeout = false;
                    var timessent = 0;
                    var csrfToken = getCookie('csrftoken');
                    $("#phone-resend").click(function () {
                        $.ajax({
                            type: "POST",
                            url: '/resendhandler/',
                            headers: {
                                "X-CSRFToken": csrfToken
                            },
                            data: {
                                type: "check"
                            },
                            success: function(data) {
                                if (data.status == "codelimit") {
                                    $("#phone-resend").html('Still not received a code? Contact us at support@tapped.to');
                                } else {
                                    if (timeout == false) {
                            $.ajax({
                                type: "POST",
                                url: '/resendhandler/',
                                headers: {
                                    "X-CSRFToken": csrfToken
                                },
                                data: {
                                    type: "phone",
                                    phonenumber: "{{ phonenumber }}"
                                }
                            });
                            console.log("Phone");
                            $("section.accounts").after("<div class='flashpop'>A verification code was sent again via SMS.</div>");
                            setTimeout(function () {
                                $(".flashpop").fadeOut();
                            }, 5000);
                            $("#phone-resend").css('opacity', '0.5');
                            $("#phone-resend").css('cursor', 'not-allowed');
                            $("#phone-resend").html('Please wait <span id="countdown">30</span> seconds to send the verification code again');
                            $("#countdown").css('opacity', '0.5');

                            timeout = true;

                            var seconds = document.getElementById("countdown").textContent;
                            var countdown = setInterval(function () {
                                seconds--;
                                document.getElementById("countdown").textContent = seconds;
                                if (seconds <= 0) {
                                    clearInterval(countdown);
                                    $("#phone-resend").css('opacity', '1');
                                    $("#phone-resend").css('cursor', 'pointer');
                                    $("#phone-resend").html('Resend code');
                                    timeout = false;
                                    timessent = timessent + 1;
                                    if (timessent >= 3) {
                                        $("#phone-resend").html('Still not received a code? Contact us at support@tapped.to');
                                        $("#phone-resend").removeAttr('id');
                                    }
                                }
                            }, 1000);
                        };
                                }
                            }
                        });


                    });
                </script>
            {% else %}
               <script>
                   var timeout = false;
                   var timessent = 0;
                   var csrfToken = getCookie('csrftoken');
                   $("#phone-resend").click(function () {
                       $.ajax({
                           type: "POST",
                           url: '/resendhandler/',
                           headers: {
                               "X-CSRFToken": csrfToken
                           },
                           data: {
                               type: "checkphone"
                           },
                           success: function (data) {
                               if (data.status == "codelimit") {
                                   $("#phone-resend").fadeOut();
                               } else {
                                   if (timeout == false) {
                                       $.ajax({
                                           type: "POST",
                                           url: '/resendhandler/',
                                           headers: {
                                               "X-CSRFToken": csrfToken
                                           },
                                           data: {
                                               type: "phone",
                                               phonenumber: "{{ phonenumber }}"
                                           }
                                       });
                                       $("section.accounts").after("<div class='flashpop'>A verification code was sent again via SMS.</div>");
                                       setTimeout(function () {
                                           $(".flashpop").fadeOut();
                                       }, 5000);
                                       $("#phone-resend").css('opacity', '0.5');
                                       $("#phone-resend").css('cursor', 'not-allowed');
                                       $("#phone-resend").html('Please wait <span id="countdown">30</span> seconds to send the verification code again');
                                       $("#countdown").css('opacity', '0.5');

                                       timeout = true;

                                       var seconds = document.getElementById("countdown").textContent;
                                       var countdown = setInterval(function () {
                                           seconds--;
                                           document.getElementById("countdown").textContent = seconds;
                                           if (seconds <= 0) {
                                               clearInterval(countdown);
                                               $("#phone-resend").css('opacity', '1');
                                               $("#phone-resend").css('cursor', 'pointer');
                                               $("#phone-resend").html('Resend code');
                                               timeout = false;
                                               timessent = timessent + 1;
                                               if (timessent >= 3) {
                                                   $("#phone-resend").html('Still not received a code? Contact us at support@tapped.to');
                                                   $("#phone-resend").removeAttr('id');
                                               }
                                           }
                                       }, 1000);
                                   };
                               }
                           }
                       });


                   });

                   $("#email-resend").click(function () {
                       $.ajax({
                           type: "POST",
                           url: '/resendhandler/',
                           headers: {
                               "X-CSRFToken": csrfToken
                           },
                           data: {
                               type: "checkemail"
                           },
                           success: function (data) {
                               if (data.status == "codelimit") {
                                   $("#email-resend").text("Please contact support@tapped.to");
                               } else {
                                   if (timeout == false) {
                                       $.ajax({
                                           type: "POST",
                                           url: '/resendhandler/',
                                           headers: {
                                               "X-CSRFToken": csrfToken
                                           },
                                           data: {
                                               type: "email",
                                               phonenumber: "{{ phonenumber }}"
                                           }
                                       });
                                       $("section.accounts").after("<div class='flashpop'>A verification code was sent again via E-Mail.</div>");
                                       setTimeout(function () {
                                           $(".flashpop").fadeOut();
                                       }, 5000);
                                       $("#email-resend").css('opacity', '0.5');
                                       $("#email-resend").css('cursor', 'not-allowed');
                                       $("#email-resend").html('Please wait <span id="countdown">30</span> seconds to send the verification code again');
                                       $("#countdown").css('opacity', '0.5');

                                       timeout = true;

                                       var seconds = document.getElementById("countdown").textContent;
                                       var countdown = setInterval(function () {
                                           seconds--;
                                           document.getElementById("countdown").textContent = seconds;
                                           if (seconds <= 0) {
                                               clearInterval(countdown);
                                               $("#email-resend").css('opacity', '1');
                                               $("#email-resend").css('cursor', 'pointer');
                                               $("#email-resend").html('Resend code via E-mail');
                                               timeout = false;
                                               timessent = timessent + 1;
                                               if (timessent >= 3) {
                                                   $("#email-resend").html('Still not received a code? Contact us at support@tapped.to');
                                                   $("#email-resend").removeAttr('id');
                                               }
                                           }
                                       }, 1000);
                                   }
                                   ;
                               }
                           }
                       });


                   });
                </script>
            {% endif %}

            {% if registereduser %}

            {% endif %}
        </div>
        </div>
{% endblock content %}