{% extends 'base.html' %}
{% load static %}
{% block body %}
     <div class="loginColumns animated fadeInDown">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="ibox-content">


                    <div class="justify-content-center d-flex text-align-center">
                        <img alt="image" style="width: 100px; height:100px;" class="rounded-circle" src="{% static 'admin/logo.png' %}" />
                    </div>
                    <form class="m-t" role="form" id="email-form">
                        <div class="form-group">
                            <label>Email *</label> 
                            <input type="email" placeholder="" id="email" name="email" class="form-control" required>
                        </div>
                        <button type="button" id="send-otp" class="btn btn-primary block full-width m-b">Request OTP</button>
                    </form>
                    <form class="m-t" role="form" id="otp-form">
                        <div class="form-group">
                            <label>OTP *</label> 
                            <input type="otp" placeholder="" id="otp" name="otp" class="form-control" required>
                        </div>
                        <button type="button" id="verify-otp" class="btn btn-primary block full-width m-b">Verify OTP</button>
                    </form>

                    <form class="m-t" role="form" id="password-form">
                        <div class="form-group">
                            <label>New Password *</label> 
                            <input type="password" placeholder="" id="password" name="password" class="form-control" required>
                        </div>
                        <button type="button" id="change-password" class="btn btn-primary block full-width m-b">Submit</button>
                    </form>
                    <div class="justify-content-end d-flex align-items-end">
                        <a href="/demo/authentication/login">
                            <small>Login</small>
                        </a>
                    </div>
                    <p class="m-t text-align-center justify-content-center d-flex">
                        <small>MIS PORTAL &copy; 2025</small>
                    </p>
                </div>
            </div>
            <!-- <div class="col-md-3"></div> -->
        </div>
        <hr/>
    </div>
{% for message in messages %}
	<script>
		showNotification('{{message}}', '{{message.tags}}')
	</script>
{% endfor %}


<script>

    $(document).ready(function(){
        $('#email-form').show();
        $('#password-form').hide();
        $('#otp-form').hide();
    });

    $(document).on('click', '#send-otp', async function(){
        var email = $('#email').val()
        $.ajax({
            url: getUrl('/authentication/send-otp'),
            type: 'POST',
            data : {'email' : email},
            success: function(data) {
                if(data.status == 200){
                    $('#email-form').hide();
                    $('#password-form').hide();
                    $('#otp-form').show();
                }
                else{
                    showNotification(data.message, 'error')
                }
            },
            error: function(xhr, status, error) {
                console.error("Error fetching districts:", error);
            }
        });
    });


    $(document).on('click', '#verify-otp', async function(){
        var otp = $('#otp').val()
        $.ajax({
            url: getUrl('/authentication/verify-otp'),
            type: 'POST',
            data : {'otp' : otp},
            success: function(data) {
                if(data.status == 200){
                    $('#email-form').hide();
                    $('#password-form').show();
                    $('#otp-form').hide();
                }
                else{
                    showNotification(data.message, 'error')
                }
            },
            error: function(xhr, status, error) {
                console.error("Error fetching districts:", error);
            }
        });
    });


    $(document).on('click', '#change-password', async function(){
        var password = $('#password').val()
        $.ajax({
            url: getUrl('/authentication/change-password'),
            type: 'POST',
            data : {'password' : password},
            success: function(data) {
                window.location.replace('/demo/authentication/login');
            },
            error: function(xhr, status, error) {
                console.error("Error fetching districts:", error);
            }
        });
    });


</script>

{% endblock %}