@extends('layouts.blesser.app-simple')

@section('content')
<livewire:auth.login-form />
@endsection


@section('script')

<script>
    let countdownMinutes = 2;
    let countdownSeconds = 0;
    let countdownInterval;
    let form;
    let inputs;

    function updateCountdown() {
        const countdownElement = document.getElementById("countdown");
        countdownElement.textContent = `${countdownMinutes}:${countdownSeconds.toString().padStart(2, "0")}`;
    }

    function startCountdown() {
        countdownInterval = setInterval(function() {
            if (countdownMinutes === 0 && countdownSeconds === 0) {
                clearInterval(countdownInterval);
                document.getElementById("resendButton").classList.remove("hidden");
                document.getElementById("resendButton").disabled = false;
                document.getElementById("countdownSection").classList.add("hidden");
            } else {
                if (countdownSeconds === 0) {
                    countdownMinutes--;
                    countdownSeconds = 59;
                } else {
                    countdownSeconds--;
                }
                updateCountdown();
            }
        }, 1000);
    }

    function resendOTP() {
        if (countdownMinutes != 0 || countdownSeconds != 0) return;
        countdownMinutes = 2;
        countdownSeconds = 0;
        updateCountdown();
        document.getElementById("resendButton").classList.add("hidden");
        document.getElementById("resendButton").disabled = true;
        document.getElementById("countdownSection").classList.remove("hidden");

        startCountdown();
    }

    function isAllInputFilled() {
        return Array.from(inputs).every((item) => item.value);
    };

    function getOtpText() {
        return Array.from(inputs)
            .map((input) => input.value)
            .join("");
    };

    function verifyOTP() {
        if (isAllInputFilled()) {
            const text = getOtpText();
            alert(`Your OTP is "${text}". OTP is correct`);
        }
    };

    function toggleFilledClass(field) {
        if (field.value) {
            field.classList.add("!border-primary");
        } else {
            field.classList.remove("!border-primary");
        }
    };
</script>
@endsection