{% extends "static-pages/base.html" %}

{% block title %}
Verify OTP
{% endblock %}

{% block content %}

<style>
    .iti--allow-dropdown{
        width: 100% !important;
    }

    #canvas{
        width: 100% !important;
        height: 100% !important;
    }

    .swal2-confirm{
        background: red !important;
    }
</style>

<section class="mt-10 mb-10 md:flex items-center justify-around p-5 md:px-20" style="width:100%;">
    <div class="md:w-1/2">
        <img src="{{ URL_ROOT }}assets/img/loginImage.png" style="width:80%;height:auto;">
    </div>
    <div class="md:w-1/2">
        <form class="max-w-sm mx-auto" method="POST" id="OTPForm">
            <div class="mb-5">
                <h3 class="font-bold text-blue-1 text-xl">Verify OTP</h3>
                <p class="mt-3">Please check your inbox for your One time password</p>
            </div>
            <div class="mb-5">
              <label for="OTP" class="block mb-2 text-sm font-medium text-gray-900">Input OTP</label>
              <input type="text" id="OTP" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="" required />
            </div>

            <div class="flex items-center gap-5">
                <div class="md:w-1/2">
                    <div class="mb-5" style="background:black;">
                        <canvas id="canvas" style="width:200px;"></canvas>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="mb-5">
                        <label for="Captcha" class="block mb-2 text-sm font-medium text-gray-900">Captcha</label>
                        <input type="password" name="code" id="code" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required />
                    </div>
                </div>
            </div>
            
            <div class="flex items-center justify-around gap-10">
                <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Verify</button>
                <p class="text-sm">Dont have an account yet? <a href="{% url register %}" class="text-blue-1">Register</a></p>
            </div>
          </form>
    </div>
</section>

<section class="bg-blue-100">
    @php 

    include("ticker.html");

    @endphp
</section>
{% endblock %}

{% block js %}
<script>
    const captcha = new Captcha($('#canvas'));
    //console.log(captcha.getCode());

    $("#OTPForm").submit(function(e){
        e.preventDefault();
        const OTP = $("#OTP").val();
        if(!captcha.valid($("#code").val())){
            alert("Invalid Captcha Code. Try Again");
        }else{
            $.post({
                type: "POST",
                url: "{% url verify_otp %}",
                data: { 
                    'OTP': OTP,
                },

                success: function(data){
                    const result = JSON.parse(data);
                    switch(result.status){
                        case 'success':
                            Swal.fire({
                                title: 'Success',
                                text: `${result.msg}`,
                                icon: 'success',
                                confirmButtonText: 'Proceed to Dashboard'
                            }).then((outcome) => {
                                if(outcome.isConfirmed){
                                    //window.location = `${result.data.dashboard_url}`;
                                    console.log(result.data.dashboard_url);
                                    window.location = result.data.dashboard_url;
                                }
                            })
                            break;
                        case 'error':
                            Swal.fire({
                                title: 'Error',
                                text: `${result.msg}`,
                                icon: 'error',
                                confirmButtonText: 'Okay'
                            })
                            break;
                            
                    }
                },
            })
        }    
    })
</script>
{% endblock %}