@if (session()->has('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    <!--begin::form-->
    <form wire:submit="checkotp" class="form w-100 mb-13" novalidate="novalidate"
          data-kt-redirect-url="index.html" id="CheckOtpForm">

{{--        <div class="text-center mb-10">--}}
{{--            <!--begin::Title-->--}}
{{--            <h1 class="text-gray-900 mb-3">ورود</h1>--}}
{{--            <!--end::Title-->--}}
{{--            <!--begin::Sub-title-->--}}
{{--            <div class="text-muted fw-semibold fs-5 mb-5">وارد کردن رمز عبور ارسال شده به شماره</div>--}}
{{--            <!--end::Sub-title-->--}}
{{--            <!--begin::Mobile no-->--}}
{{--            <div class="fw-bold text-gray-900 fs-3" style="direction: ltr">--}}
{{--                {{ substr_replace($cellphone_number, '***', 5, 3) }}--}}
{{--            </div>--}}

{{--        </div>--}}
        <div class="mb-5">

            <div class="fw-bold text-start text-gray-900 fs-6 mb-3 ms-1">کد امنیتی 6 رقمی خود را تایپ کنید</div>


            <div class="d-flex flex-wrap flex-stack" style="direction: ltr">

                <div class="input-container d-flex" style="width: 100% !important; justify-content: space-between">

                    @for ($i = 0; $i < 6; $i++)

                        <input type="text" maxlength="1" oninput="moveFocus(this, 1);"

                               onkeyup="handleBackspace(event, this); updateMainInput()"

                               id="otp-{{$i}}" class="form-control bg-transparent h-60px w-60px fs-2qx text-center mx-1 my-2" />

                    @endfor

                </div>

            </div>


            @error('otp')

            <div class="error-validate-alert">{{ $message }}</div>

            @enderror


            <input type="hidden" wire:model.submit="otp" id="mainInput" value="1000">

        </div>


        <div class="d-grid mb-3">

            <button id="submitButton" wire:loading.attr="disabled" wire:target="checkotp" type="button"

                    class="btn btn-primary" onclick="submitOtp()">

                <span wire:loading.remove="" wire:target="checkotp" class="indicator-label">ورود</span>

                <span wire:loading="" wire:target="checkotp">

            <span class="loader"></span>

        </span>

            </button>

        </div>

    </form>
    <div class="d-grid mb-10">
        <button wire:click="resendOtp" id="resendOTP"
                class="btn btn-primary btn-block w-100 my-3 mt-3 d-none w-100 br20" type="button">
                <span wire:loading.remove wire:target="refresh" class="button-text">
                    ارسال مجدد
                </span>
            <span wire:loading wire:target="refresh">
                    <span class="loader"></span>
                </span>
        </button>
        <div class="d-flex justify-content-between p-3 align-content-center mt-3">
            <span id="resendCodeDiv">ارسال مجدد کد </span>
            <span id="resendOTPTime">2:00</span>
        </div>
    </div>