@php use App\Models\LoginBanner;use App\Models\Setting; @endphp
@extends('auth.layouts.master')
@section('content')
    @php
        $codeLen = Setting::getValue('verify_code_length');
         $loginBanner = LoginBanner::where('date', verta()->format('m/d'))->first();
        if(!$loginBanner){
            $loginBanner = LoginBanner::whereNull('date')->inRandomOrder()->first();
        }

        $phone = session()->get('phone');
        $user = \App\Models\User::wherePhone($phone)->first();
        $rem = $user->verify_expires_at->diffInSeconds(now()->format('Y-m-d H:i:s'));
    @endphp
    <div class="grid grid-cols-12" style="width: 100%">
        <div class="col-span-4 flex items-center justify-center min-h-screen">
            <div class="">
                <!-- Header -->
                <div class="text-center mb-6 sm:mb-8 lg:mb-10">
                    <div class="flex items-center justify-center mx-auto mb-4 bounce-in">
                        <img src="{{ asset('assets/images/logo.jpeg') }}" alt="Day Insurance Logo" width="180"
                             height="50">
                    </div>
                </div>

                <!-- OTP Form -->
                <div id="otpForm" class="p-6 sm:p-8 lg:p-10 form-container">
                    <div class="text-center mb-4 sm:mb-6">
                        <h2 class="text-lg sm:text-xl lg:text-2xl font-bold text-gray-800 mb-2 bounce-in">تأیید شماره
                            موبایل</h2>
                        <p class="text-gray-600 text-xs sm:text-sm lg:text-base fade-in">رمز {{ $codeLen }} رقمی ارسال
                            شده به شماره
                            <span
                                id="sentMobile" class="font-medium text-blue-600"></span> را وارد کنید</p>
                    </div>

                    <form id="otpVerifyForm" action="{{ route('verify') }}" method="post"
                          class="space-y-4 sm:space-y-6">
                        @csrf
                        <input type="hidden" name="phone" value="{{ $phone }}">
                        <div class="flex justify-center gap-2 sm:gap-3 lg:gap-4 mb-4 sm:mb-6 slide-up codes-inp" dir="ltr">
                            @php
                                $delay = 0.40;
                            @endphp
                            @for($i = 0; $i < $codeLen; $i++)
                                <input type="text" class="code-input fade-in" autocomplete="off" maxlength="1"
                                       name="codes[]" data-index="{{ $i }}"
                                       style="animation-delay: {{ $delay - 0.05 }}s">
                            @endfor
                        </div>
                        @session('error')
                        <span id="otpError"
                              class="text-red-500 text-xs sm:text-sm block text-center shake mb-5">{{ session('error') }}</span>
                        @endsession
                        <div class="flex items-center justify-center gap-3 sm:gap-4 mb-4 sm:mb-6 slide-up">
                            <div class="timer-circle fade-in" id="timerCircle" style="animation-delay: 0.4s">
                                <div class="timer-inner" id="timerDisplay">0:00</div>
                            </div>
                            <span class="text-gray-600 text-xs sm:text-sm lg:text-base">زمان باقی‌مانده</span>
                        </div>

                        @if($rem < 0)
                            <button type="submit"
                                    class="w-full main-color text-white py-3 sm:py-4 rounded-lg font-medium text-sm sm:text-base btn-primary slide-up sumbitBtn">
                                تأیید کد
                            </button>
                        @endif

                        <button type="button" id="resendCode"
                                class="hidden w-full mt-2 main-color text-white py-3 sm:py-4 rounded-lg font-medium text-sm sm:text-base btn-primary slide-up disabled:bg-gray-400 disabled:cursor-not-allowed">
                            ارسال مجدد کد
                        </button>

                        {{--                        <div class="text-center slide-up">--}}
                        {{--                            <button type="button" id="resendCode"--}}
                        {{--                                    class="text-blue-600 hover:text-blue-800 text-xs sm:text-sm transition-all duration-300 disabled:text-gray-400 disabled:cursor-not-allowed hover:underline"--}}
                        {{--                                    disabled>--}}
                        {{--                                ارسال مجدد کد--}}
                        {{--                            </button>--}}
                        {{--                        </div>--}}
                    </form>
                </div>
            </div>
        </div>
        <div class="col-span-8 blue-sec text-white">
            @if(!empty($loginBanner->link))
                <a href="{{ $loginBanner->link }}">
                    @endif
                    <img src="{{ asset($loginBanner->image) }}" alt="" width="300" class="mb-5">
                    <p class="my-1" style="font-size: 36px; font-weight: bold">{{ $loginBanner->name }}</p>
                    <p style="font-size: 16px; width: 40%; text-align: justify" class="mt-5">
                    {!! $loginBanner->desc !!}
                    @if(!empty($loginBanner->link))
                </a>
            @endif
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function () {
            // Form elements
            const $mobileForm = $('#mobileForm');
            const $otpForm = $('#otpForm');

            /* ------------------------------
               Mobile form validation
            ------------------------------ */
            if ($('#mobileLoginForm').length) {
                $('#mobileLoginForm').on('submit', function (e) {
                    e.preventDefault();

                    const mobile = $('#mobile').val();
                    const $mobileError = $('#mobileError');
                    const mobilePattern = /^09\d{9}$/;

                    if (!mobilePattern.test(mobile)) {
                        $mobileError.removeClass('hidden');
                        return;
                    }

                    $mobileError.addClass('hidden');
                    $('#sentMobile').text(mobile);

                    $mobileForm.addClass('hidden');
                    $otpForm.removeClass('hidden').addClass('slide-up');

                    setTimeout(() => {
                        $('.code-input').first().focus();
                    }, 400);

                    startTimer();
                });
            }

            /* ------------------------------
               OTP input handling
            ------------------------------ */
            const $codeInputs = $('.code-input');

            if ($codeInputs.length) {
                $codeInputs.each(function (index) {

                    // Input
                    $(this).on('input', function () {
                        const value = $(this).val();

                        if (!/^\d$/.test(value)) {
                            $(this).val('');
                            return;
                        }

                        $(this).addClass('filled');

                        console.log(value)
                        console.log(index)
                        console.log($codeInputs.length)
                        if (value && index < $codeInputs.length - 1) {
                            $codeInputs.eq(index + 1).focus();
                        }
                    });

                    // Keydown
                    $(this).on('keydown', function (e) {
                        if (e.key === 'Backspace' && !$(this).val() && index > 0) {
                            $codeInputs.eq(index - 1).focus().removeClass('filled');
                        }

                        if (e.key === 'Backspace' && $(this).val()) {
                            $(this).removeClass('filled');
                        }
                    });

                    // Paste
                    $(this).on('paste', function (e) {
                        e.preventDefault();

                        const pastedData = e.originalEvent.clipboardData.getData('text');
                        const numbers = pastedData.replace(/\D/g, '').slice(0, 6);

                        numbers.split('').forEach((num, i) => {
                            if ($codeInputs.eq(i).length) {
                                $codeInputs.eq(i).val(num).addClass('filled');
                            }
                        });

                        if (numbers.length < 6) {
                            $codeInputs.eq(numbers.length).focus();
                        }
                    });
                });
            }

            /* ------------------------------
               OTP form submit
            ------------------------------ */
            if ($('#otpVerifyForm').length) {
                $('#otpVerifyForm').on('submit', function (e) {
                    const $otpError = $('#otpError');
                    let code = '';

                    $codeInputs.each(function () {
                        code += $(this).val();
                    });

                    if (code.length !== {{ $codeLen }}) {
                        $otpError.removeClass('hidden');
                        return;
                    }

                    $otpError.addClass('hidden');
                });

                $('.sumbitBtn').on('click', function (e){
                    e.preventDefault()
                    let self = $(this)
                    self.text('درحال بررسی...')
                    self.attr('disabled', 'disabled')
                    self.parents('form').submit()
                })
            }

            /* ------------------------------
               Timer
            ------------------------------ */
            let timerInterval;
            let timeLeft;

// فقط این عدد رو تغییر بده → مدت زمان به ثانیه
            const TIMER_DURATION = {{ $user->verify_expires_at ? -$rem : 30 }};     // ← اینجا عوض کن (مثلاً 30، 60، 120، 300 و ...)

            function startTimer() {
                const $timerDisplay = $('#timerDisplay');
                const $timerCircle = $('#timerCircle');
                const $resendBtn = $('#resendCode');

                // چک کردن وجود المنت‌ها
                if (!$timerDisplay.length || !$timerCircle.length || !$resendBtn.length) {
                    return;
                }

                // ریست کردن تایمر قبلی و مقدار اولیه
                clearInterval(timerInterval);
                timeLeft = TIMER_DURATION;           // ← از متغیر اصلی استفاده می‌شود

                $resendBtn.addClass('hidden');       // دکمه رو مخفی کن موقع شروع

                timerInterval = setInterval(() => {
                    const minutes = Math.floor(timeLeft / 60);
                    const seconds = timeLeft % 60;

                    // نمایش زمان
                    $timerDisplay.text(`${minutes}:${seconds.toString().padStart(2, '0')}`);

                    // محاسبه درصد پیشرفت (۰ تا ۳۶۰ درجه)
                    const progress = ((TIMER_DURATION - timeLeft) / TIMER_DURATION) * 360;

                    // آپدیت دایره رنگی
                    $timerCircle.css(
                        'background',
                        `#f1c40f`
                    );

                    // وقتی زمان تموم شد
                    if (timeLeft <= 0) {
                        clearInterval(timerInterval);
                        $timerDisplay.text('0:00');
                        $('.sumbitBtn').addClass('hidden');
                        $('.codes-inp input').attr('disabled', 'disabled')
                        $resendBtn.removeClass('hidden');
                        return;
                    }

                    timeLeft--;
                }, 1000);
            }

            /* ------------------------------
               Resend code
            ------------------------------ */
            if ($('#resendCode').length) {
                $('#resendCode').on('click', function () {
                    let self = $(this)
                    self.text('درحال ارسال...')
                    self.attr('disabled', 'disabled')
                    window.location = "{{ route('sendCode', ['phone' => $phone]) }}"
                });
            }

            startTimer();
        });
    </script>
@endsection