@extends('front.layouts.app')

@section('content')
    @php
        $isOtpValid =
            isset($ref) &&
            !$ref->verified_at &&
            \Carbon\Carbon::parse($ref->otp_sent_at)->gt(\Carbon\Carbon::now()->subHour());
    @endphp
    <section class=" innerpage_wrap ">
        <div class="container">
            <!-- <div class="innerpagebg"><img src="images/background/innerpagebg.png" class="img-fluid" alt="innerpagebg">
                    </div> -->

            <div class="row text-center">
                <div class="col-sm-12">
                    <div class="common-heading py-5">
                        <img src="{{ asset('assets/web/images/assets/subscribe_logo.svg') }}" class="img-fluid"
                            alt="subscribe_logo">
                        <h6 class="font-weight-bold pt-3"> Subscribe to CLEarly Legal and get your CLE by podcast. On a run,
                            in the car, or wherever you are - you can now complete all your required hours on the go!
                        </h6>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="subscribe-wrapper pt-4 pb-5">
        <div class="container">
            @if ($isOtpValid)
                <div class="graybg contact-box mb-5">
                    <form action="{{ route('verifyOtp') }}" method="POST" id="otpForm">
                        @csrf
                        <div class="row text-center pb-4 justify-content-center">
                            <div class="col-sm-10 col-lg-8">
                                <div class="common-heading">
                                    <h3>Confirm Your Email</h3>
                                    <p>We have sent you a one-time passcode. Please confirm your email by entering the OTP.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="otp-container">
                            <div class="d-flex justify-content-center otp-inputs">
                                <input type="tel" maxlength="1" pattern="\d*" inputmode="numeric" class="otp-input"
                                    required>
                                <input type="tel" maxlength="1" pattern="\d*" inputmode="numeric" class="otp-input"
                                    required>
                                <input type="tel" maxlength="1" pattern="\d*" inputmode="numeric" class="otp-input"
                                    required>
                                <input type="tel" maxlength="1" pattern="\d*" inputmode="numeric" class="otp-input"
                                    required>
                                <input type="tel" maxlength="1" pattern="\d*" inputmode="numeric" class="otp-input"
                                    required>
                                <input type="tel" maxlength="1" pattern="\d*" inputmode="numeric" class="otp-input"
                                    required>
                                <input type="hidden" name="otp" id="otpFinal">
                            </div>
                        </div>
                        <input type="hidden" name="user_id" id="user_id" value="{{ $user->id ?? '' }}">
                        <input type="hidden" name="bar_id" id="bar_id" value="{{ $bar_id ?? '' }}">
                        <div class="row text-center">
                            <div class="col-sm-12">
                                <button type="submit"
                                    class="btn btn-primary text-uppercase px-5 paymentbtn proceed-button">Proceed to
                                    Payment</button>
                                <p class="mt-4">Didn’t receive OTP? <a href="javascript:void(0)" id="resendOtpBtn"
                                        class="resend-link">Resend</a></p>
                                <div id="resendMsg" class="resend-msg" style="display:none;">
                                    OTP has been resent successfully!
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            @else
                <div class="expired-msg">
                    <p>Your OTP has either been verified or expired.</p>
                </div>
            @endif
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Handle OTP input functionality
            const otpInputs = document.querySelectorAll('.otp-input');
            const otpFinal = document.getElementById('otpFinal');

            otpInputs.forEach((input, index) => {
                input.addEventListener('input', function(e) {
                    this.value = this.value.replace(/\D/g, ''); // Only digits
                    if (this.value.length === 1 && index < otpInputs.length - 1) {
                        otpInputs[index + 1].focus();
                    }
                    updateFinalOtp();
                });

                input.addEventListener('keydown', function(e) {
                    if (e.key === 'Backspace' && !this.value) {
                        if (index > 0) {
                            otpInputs[index - 1].focus();
                        }
                    }
                });
            });

            function updateFinalOtp() {
                const otp = Array.from(otpInputs).map(input => input.value).join('');
                otpFinal.value = otp;
            }

            // Handle resend OTP functionality
            document.getElementById('resendOtpBtn')?.addEventListener('click', function() {
                var userId = document.getElementById('user_id').value;
                var barId = document.getElementById('bar_id').value;

                fetch("{{ route('resendOtp') }}", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        body: JSON.stringify({
                            user_id: userId,
                            bar_id: barId
                        })
                    })
                    .then(async response => {
                        if (!response.ok) {
                            const err = await response.json();
                            throw new Error(err.message || 'Resend failed');
                        }
                        return response.json();
                    })
                    .then(data => {
                        const resendMsg = document.getElementById('resendMsg');
                        resendMsg.textContent = data.message;
                        resendMsg.style.color = 'green';
                        resendMsg.style.display = 'block';

                        setTimeout(() => {
                            resendMsg.style.display = 'none';
                        }, 5000);
                    })
                    .catch(error => {
                        const resendMsg = document.getElementById('resendMsg');
                        resendMsg.textContent = error.message;
                        resendMsg.style.color = 'red';
                        resendMsg.style.display = 'block';

                        setTimeout(() => {
                            resendMsg.style.display = 'none';
                        }, 5000);
                    });
            });
        });
    </script>
@endsection