@extends('site.layouts.auth-layout')

@section('title', 'تأیید کد ورود')

@section('content')
<div class="digi-auth-wrap">

    <div class="digi-auth-logo">
        <a href="{{ route('home') }}">
            <img src="{{ $siteLogo }}" width="160" alt="">
        </a>
    </div>

    <div class="digi-auth-card">
        <p class="digi-auth-card-title">کد تأیید را وارد کنید</p>
        <p class="digi-auth-card-desc">کد ۵ رقمی ارسال‌شده به <strong>{{ $mobile }}</strong> را وارد کنید.</p>

        @if ($errors->has('code'))
            <div class="alert alert-danger digi-auth-alert" role="alert">{{ $errors->first('code') }}</div>
        @endif

        @if ($errors->has('resend'))
            <div class="alert alert-warning digi-auth-alert" role="alert">{{ $errors->first('resend') }}</div>
        @endif

        @if (session('resent'))
            <div class="alert alert-success digi-auth-alert" role="alert">کد جدید ارسال شد.</div>
        @endif

        <form method="POST" action="{{ route('otp.verify') }}">
            @csrf

            <div id="otp-input">
                <input placeholder="_" type="number" step="1" min="0" max="9" autocomplete="off" pattern="\d*" />
                <input placeholder="_" type="number" step="1" min="0" max="9" autocomplete="off" pattern="\d*" />
                <input placeholder="_" type="number" step="1" min="0" max="9" autocomplete="off" pattern="\d*" />
                <input placeholder="_" type="number" step="1" min="0" max="9" autocomplete="off" pattern="\d*" />
                <input placeholder="_" type="number" step="1" min="0" max="9" autocomplete="off" pattern="\d*" />
                <input id="otp-value" type="hidden" name="code" />
            </div>

            @if ($hourlyUsed < 5)
                <div class="countDownContainer">
                    <div class="countdown-bar" id="countdownB">
                        <div></div>
                        <div></div>
                    </div>
                </div>
            @else
                <p class="text-danger text-center small mt-3 mb-0">حداکثر ۵ بار در ساعت می‌توانید کد دریافت کنید.</p>
            @endif

            <button type="submit" id="submit" class="digi-auth-btn">ورود</button>
        </form>

        <a href="{{ route('otp.login') }}" class="digi-auth-secondary-link">تغییر شماره موبایل</a>
    </div>

    <p class="digi-auth-terms">
        با ورود به سایت، <a href="#">شرایط و قوانین</a> و <a href="#">قوانین حریم خصوصی</a> را می‌پذیرید.
    </p>

</div>

<form id="resend-form" action="{{ route('otp.resend') }}" method="POST" class="d-none">@csrf</form>

@endsection

@section('scripts')
<script src="{{ asset('theme/assets/plugin/otp-sms/otp-input.js') }}"></script>
<script src="{{ asset('theme/assets/plugin/otp-loader/script.js') }}"></script>
@if ($hourlyUsed < 5)
<script>
    $(document).ready(function () {
        @if ($cooldown > 0)
            countdown('countdownB', 0, 0, 0, {{ $cooldown }});
        @else
            $('#countdownB div:nth-of-type(2)').html(
                "<span class='otp-resend-trigger' style='color:#e31f26;font-weight:700;cursor:pointer;margin-top:10px;display:block;text-align:center;'>ارسال مجدد کد</span>"
            );
            $('.countdown-bar').css({'width':'250px','height':'2px','margin':'30px auto'});
        @endif
        $(document).on('click', '.otp-resend-trigger', function () {
            $('#resend-form').submit();
        });
    });
</script>
@endif
@endsection
