{% 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/unlocked.png' %}"
                                class="w-full object-cover"
                                alt="images"
                            />
                        </div>
                        <div class="flex-1">
                            <h4 class="text-2xl dark:text-white">
                                {% if messages %}
                        {% for message in messages %}
                            
                                    {% if message.tags == 'success' %}
                                    Success!
                                    {% elif message.tags == 'error' %}
                                    Error!
                                    {% else %}
                                    {{ message }}
                                    {% endif %}
                               
                        {% endfor %}
                    {% endif %}
                            </h4>
                            {% if messages %}
                        {% for message in messages %}
                            
                                    {% if message.tags == 'success' %}
                                    <h4 class="text-2xl dark:text-white"><strong class="ltr:mr-1 rtl:ml-1">Success!</strong>{{ message }}</h4>
                                    {% elif message.tags == 'error' %}
                                    <h4 class="text-2xl dark:text-white"><strong class="ltr:mr-1 rtl:ml-1">Error!</strong>{{ message }}</h4>
                                    {% else %}
                                    <h4 class="text-2xl dark:text-white">{{ message }}</h4>
                                    {% endif %}
                               
                        {% endfor %}
                    {% endif %}
                            
                        </div>
                    </div>
                    <form class="space-y-5">
                        <script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2/dist/alpine.min.js" defer></script>

                        <div x-data="countdown">
                            <div class="mb-5 grid grid-cols-4 justify-items-center gap-3" x-init="setTimerDemo2">
                                <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>
                                <div x-show="countdownFinished" class="flex-1">
                                    
                                    <button type="button" class="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]" onclick="redirectToDashboard()">
                                        Contact_us!
                                     </button>
                                </div>
                            </div>
                        </div>
                        
                    </form>
                    
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function redirectToDashboard() {
        window.location.href = '{% url 'Dashboard' %}';
    }
</script>

<script>
    document.addEventListener("alpine:init", () => {
        Alpine.data("countdown", () => ({
            timer2: null,
            countdownFinished: false,
            demo2: {
                minutes: null,
                seconds: null,
            },
            
            setTimerDemo2() {
                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 %}