{% extends 'backend/components/layouts/auth.html' %} 
{% load static %} 
{% block content %}

<div x-data="auth">
    <div class="absolute inset-0">
        <img
            src="{% static 'assets/images/auth/bg-gradient.png' %}"
            alt="image"
            class="h-full w-full object-cover"
        />
    </div>

    <div
        class="relative flex min-h-screen items-center justify-center bg-[url(../images/auth/map.png)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16"
    >
        <img
            src="{% static 'assets/images/auth/coming-soon-object1.png' %}"
            alt="image"
            class="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2"
        />
        <img
            src="{% static 'assets/images/auth/coming-soon-object2.png' %}"
            alt="image"
            class="absolute left-24 top-0 h-40 md:left-[30%]"
        />
        <img
            src="{% static 'assets/images/auth/coming-soon-object3.png' %}"
            alt="image"
            class="absolute right-0 top-0 h-[300px]"
        />
        <img
            src="{% static 'assets/images/auth/polygon-object.svg' %}"
            alt="image"
            class="absolute bottom-0 end-[28%]"
        />
        <div class="relative w-full max-w-[870px] rounded-md bg-[linear-gradient(45deg,#fff9f9_0%,rgba(255,255,255,0)_25%,rgba(255,255,255,0)_75%,_#fff9f9_100%)] p-2 dark:bg-[linear-gradient(52.22deg,#0E1726_0%,rgba(14,23,38,0)_18.66%,rgba(14,23,38,0)_51.04%,rgba(14,23,38,0)_80.07%,#0E1726_100%)]">
            <div
                class="relative flex flex-col justify-center rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 px-6 lg:min-h-[758px] py-20">
                
                <div class="mx-auto w-full max-w-[440px]">
                    <div class="mb-10 flex items-center">
                        <div
                            class="flex h-16 w-16 items-end justify-center overflow-hidden rounded-full bg-[#00AB55] ltr:mr-4 rtl:ml-4"
                        >
                            <img
                                src="{% static 'assets/images/auth/locked.png' %}"
                                class="w-full object-cover"
                                alt="images"
                            />
                        </div>
                        <div class="flex-1">
                            <h4 class="text-2xl dark:text-white">VERIFICATION EMAIL SENT!</h4>
                            <p class="text-white-dark">
                                A verification Email has been sent to your Email.
                            </p>
                            <br/>
                            <p class="text-white-dark">Please check your Email Inbox and spam folder and click on the link to verify your account.
                            </p>
                            
                        </div>
                    </div>
                    <div x-show="countdownFinished">
                    <form  class="space-y-5" method="post" action="{% url 'resend_verification_email' %}">
                        {% csrf_token %}
                        <div>
                            <label for="email" class="dark:text-white">Email:Enter email to request a new verification</label>
                            <div class="relative text-white-dark">
                                <input id="Email" name="email" type="email" placeholder="Enter email to request a new one" class="form-input ps-10 placeholder:text-white-dark" />
                                <span class="absolute start-4 top-1/2 -translate-y-1/2" >
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" >
                                        <path opacity="0.5" d="M1.5 12C1.5 9.87868 1.5 8.81802 2.15901 8.15901C2.81802 7.5 3.87868 7.5 6 7.5H12C14.1213 7.5 15.182 7.5 15.841 8.15901C16.5 8.81802 16.5 9.87868 16.5 12C16.5 14.1213 16.5 15.182 15.841 15.841C15.182 16.5 14.1213 16.5 12 16.5H6C3.87868 16.5 2.81802 16.5 2.15901 15.841C1.5 15.182 1.5 14.1213 1.5 12Z" fill="currentColor" />
                                        <path d="M6 12.75C6.41421 12.75 6.75 12.4142 6.75 12C6.75 11.5858 6.41421 11.25 6 11.25C5.58579 11.25 5.25 11.5858 5.25 12C5.25 12.4142 5.58579 12.75 6 12.75Z" fill="currentColor" />
                                        <path d="M9 12.75C9.41421 12.75 9.75 12.4142 9.75 12C9.75 11.5858 9.41421 11.25 9 11.25C8.58579 11.25 8.25 11.5858 8.25 12C8.25 12.4142 8.58579 12.75 9 12.75Z" fill="currentColor" />
                                        <path d="M12.75 12C12.75 12.4142 12.4142 12.75 12 12.75C11.5858 12.75 11.25 12.4142 11.25 12C11.25 11.5858 11.5858 11.25 12 11.25C12.4142 11.25 12.75 11.5858 12.75 12Z" fill="currentColor" />
                                        <path d="M5.0625 6C5.0625 3.82538 6.82538 2.0625 9 2.0625C11.1746 2.0625 12.9375 3.82538 12.9375 6V7.50268C13.363 7.50665 13.7351 7.51651 14.0625 7.54096V6C14.0625 3.20406 11.7959 0.9375 9 0.9375C6.20406 0.9375 3.9375 3.20406 3.9375 6V7.54096C4.26488 7.51651 4.63698 7.50665 5.0625 7.50268V6Z" fill="currentColor" />
                                    </svg>
                                </span>
                            </div>
                        </div>
                        
                        <div x-data="countdown">
                            <div class="mb-5 grid grid-cols-4 justify-items-center gap-3" x-init="setTimer">
                                <div class="mt-5 md:mt-0">
                                    <div x-show="!countdownFinished" class="w-16 h-16 sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded-full border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col">
                                        <h1 class="text-primary sm:text-3xl text-xl text-center" x-text="demo2.minutes"></h1>
                                    </div>
                                    <h4 class="text-[#3b3f5c] text-[15px] mt-4 text-center dark:text-white-dark font-semibold" x-show="!countdownFinished">Mins</h4>
                                </div>
                                <div class="mt-5 md:mt-0">
                                    <div x-show="!countdownFinished" class="w-16 h-16 sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded-full border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col">
                                        <h1 class="text-primary sm:text-3xl text-xl text-center" x-text="demo2.seconds"></h1>
                                    </div>
                                    <h4 class="text-[#3b3f5c] text-[15px] mt-4 text-center dark:text-white-dark font-semibold" x-show="!countdownFinished">Sec</h4>
                                </div>
                                
                                <button type="submit" class="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">Request New verification</button>
                            </div>
                        </div>
                    </form>
                    
                    
                </div>
                
            </div>
        </div>
    </div>
    <!-- Include Alpine.js from CDN -->
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2/dist/alpine.min.js" defer></script>
<script>
    document.addEventListener("alpine:init", () => {
        Alpine.data("countdown", () => ({
            timer2: null,
            countdownFinished: false,
            demo2: {
                minutes: null,
                seconds: null,
            },
            
            setTimer() {
                const resetTime = 1000;
                let countDownDate = new Date().getTime() + resetTime * 1000;
                
                this.timer2 = setInterval(() => {
                    let now = new Date().getTime();
                    let distance = countDownDate - now;

                    this.demo2.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                    this.demo2.seconds = Math.floor((distance % (1000 * 60)) / 1000);

                    if (distance < 0) {
                        this.countdownFinished = true;
                        clearInterval(this.timer2);
                    }
                }, 500);
            },
        }));
    });
</script>

{% endblock %}