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

{% block title %}
Sign In to Continue
{% 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="loginForm">
            <div class="mb-5">
                <h3 class="font-bold text-blue-1 text-xl">Sign In to Continue</h3>
            </div>
            <div class="mb-5">
              <label for="email" class="block mb-2 text-sm font-medium text-gray-900">Your email</label>
              <input type="email" id="email" 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="mb-5">
              <label for="password" class="block mb-2 text-sm font-medium text-gray-900">Your password</label>
              <input type="password" id="password" 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 class="flex items-center gap-5">
                <div class="md:w-1/2">
                    <div class="mb-5 p-3" style="background:black;">
                        <canvas id="canvas" style="width:200px;"></canvas>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="mb-5">
                        <label for="password" 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="mb-5">
                <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">Sign In</button>
            </div>
            
            <div class="flex items-center justify-around gap-5">
                <p class="text-sm">Dont have an account yet? <a href="{% url register %}" class="text-blue-1">Register</a></p>
                <p class="text-sm"><a href="{% url forgot_password %}" class="text-blue-1">Forgot Password?</a></p>
            </div>
          </form>
    </div>
</section>
{% endblock %}

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

    $("#loginForm").submit(function(e){
        e.preventDefault();
        console.log("Default Action Prevented")

        const email = $("#email").val();
        const password = $("#password").val();

        if(!captcha.valid($("#code").val())){
            alert("Invalid Captcha Code. Try Again");
        }else{
            $.post({
                type: "POST",
                url: "{% url user_login %}",
                data: { 
                    'email': email,
                    'password': password,
                },

                success: function(data){
                    const result = JSON.parse(data);
                    switch(result.status){
                        case 'success':
                            Swal.fire({
                                title: 'Success',
                                text: `${result.msg}`,
                                icon: 'success',
                                confirmButtonText: 'Verify OTP'
                            }).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 %}