@extends('layouts.site.master')
@section('content')
    <div class="col-xxl-4 col-xl-5 col-sm-7 col-12 mx-auto pt-lg-5 pt-0 mt-lg-5 mt-3">
        <div class="bg-white shadow-sm main-radius p-3 text-center">
            <div class="d-flex justify-content-between">
                <p class="font-13 dark-gray text-center mb-3">
                    کد ارسال شده به شماره <span class="light-gray">{{$mobile}}</span> را وارد کنید
                </p>
                <a class="font-13 mint-green" href="">
                    ویرایش شماره
                </a>
            </div>
            <form method="post" action="{{route('auth.confirm.post',['next_url'=>$next_url])}}">
                @csrf
                <div class="mb-3">
                    <label class="text-start w-100 font-14 mb-1 dark-gray light">
                        وارد کردن کد
                    </label>
                    <input type="hidden" name="mobile" value="{{$mobile}}">
                    <input type="hidden" name="url" value="{{$url}}">
                    <input oninput="numberFormat()" style="letter-spacing: 20px;" name="code"
                           class="w-100 main-radius border login-input font-13 text-center" placeholder="-----"
                           type="text">
                </div>
                <button type="submit" style="padding: 13px;"
                        class="first-page-btn-component mt-1 justify-content-center d-flex font-14 text-white main-radius btn-dark-gray">
                    <span>ورود</span>

                </button>
            </form>
            <a class="d-flex dark-gray font-13 justify-content-center mt-3"
               href="{{route('auth.confirm.again',['mobile'=>$mobile,'url'=>$url ,'next_url'=>$next_url])}}"
               id="resendLink">
                بعد از <span class="khaki">۰۲:۰۰</span> دقیقه مجدد امتحان کنید
            </a>
        </div>
    </div>

    <script>
        const link = document.getElementById('resendLink');
        const originalHref = link.getAttribute('href');
        let time = 120;
        let timer = null;

        function toPersian(num) {
            return num.toString().replace(/\d/g, d => '۰۱۲۳۴۵۶۷۸۹'[d]);
        }

        function updateDisplay() {
            let minutes = Math.floor(time / 60);
            let seconds = time % 60;

            if (time > 0) {
                const timeStr = `${toPersian(String(minutes).padStart(2, '0'))}:${toPersian(String(seconds).padStart(2, '0'))}`;
                link.innerHTML = `بعد از <span class="khaki">${timeStr}</span> دقیقه مجدد امتحان کنید`;

                link.style.pointerEvents = 'none';
                link.style.opacity = '0.6';
                link.removeAttribute('href');

            } else {
                link.textContent = 'ارسال مجدد';

                link.style.pointerEvents = 'auto';
                link.style.opacity = '1';
                link.setAttribute('href', originalHref);

                link.style.color = '#e63946';
                link.style.transition = 'color 0.3s ease';
                link.onmouseover = () => link.style.color = '#c1121f';
                link.onmouseout = () => link.style.color = '#e63946';
            }
        }

        function startTimer() {
            clearInterval(timer);
            time = 120;
            updateDisplay();

            timer = setInterval(() => {
                time--;
                updateDisplay();

                if (time <= 0) {
                    clearInterval(timer);
                }
            }, 1000);
        }

        link.addEventListener('click', function (e) {
            if (time > 0) {
                e.preventDefault(); // point
                return false;
            }
            startTimer();
        });

        startTimer();
    </script>
@endsection