ECOMMERCE/resources/views/account/otp.blade.php

@extends('layouts.landing', ['title' => 'Account - OTP Verification'])

@section('content')
    <main class="content-wrapper w-100 px-3 ps-lg-5 pe-lg-4 mx-auto" style="max-width: 1920px">
        <div class="d-lg-flex">
            <!-- OTP form + Footer -->
            <div class="d-flex flex-column min-vh-100 w-100 py-4 mx-auto me-lg-5" style="max-width: 416px">
                <!-- Logo -->
                <header class="navbar px-0 pb-4 mt-n2 mt-sm-0 mb-2 mb-md-3 mb-lg-4">
                    <a class="navbar-brand pt-0" href="/">
                        <span class="d-flex flex-shrink-0 text-primary me-2">
                            <img src="{{ asset('logo/logo-colored.png') }}" alt="AsiaGolf Logo"
                                style="height: 36px; width: auto;">
                        </span>
                    </a>
                </header>
                <h1 class="h2 mt-auto">{{ __('otp.title', ['type' => $type == 'email' ? 'Email' : 'Phone']) }}</h1>
                <div class="nav fs-sm mb-4">
                    {{ __('otp.description', ['phone' => $identity]) }}
                </div>

                {{-- error message --}}
                @if ($errors->any())
                    <div class="alert alert-danger">
                            @foreach ($errors->all() as $error)
                                <div>{{ $error }}</div>
                            @endforeach
                        
                    </div>
                @endif

                <!-- Form -->
                <!-- Form -->
                <form class="needs-validation" novalidate method="POST" action="{{ $type == 'email' ? route('login-email.verify') : route('login-phone.verify') }}">
                    @csrf
                    <input type="hidden" name="identity" value="{{ $identity }}">

                    <div class="position-relative mb-4">
                        <label for="otp" class="form-label">{{ __('otp.enter_code') }}</label>
                        <input class="form-control form-control-lg" type="text" placeholder="{{ __('otp.enter_code') }}" maxlength="6"
                            pattern="[0-9]{6}" required="" name="otp" id="otp" autocomplete="one-time-code" />
                        <div class="invalid-tooltip bg-transparent py-0">{{ __('otp.invalid_code') }}</div>
                    </div>

                    <div class="d-flex align-items-center justify-content-between mb-4">
                        <div class="nav">
                            <a class="nav-link animate-underline p-0" href="{{ route('login-phone') }}">
                                <span class="animate-target">{{ __('otp.back_to_login') }}</span>
                            </a>
                        </div>
                        <div class="nav">
                            <button type="button" class="btn btn-link p-0" id="resend-otp">
                                <span class="animate-target">{{ __('otp.resend_code') }}</span>
                            </button>
                        </div>
                    </div>
                    <button class="btn btn-lg btn-primary w-100" type="submit">{{ __('otp.verify') }}</button>
                </form>
                
                <!-- Footer -->
                <footer class="mt-auto">
                    <div class="nav mb-4">
                        <a class="nav-link text-decoration-underline p-0"
                            href="{{ route('second', ['help', 'topics-v1']) }}">Need help?</a>
                    </div>
                    <p class="fs-xs mb-0">
                        © All rights reserved. Made by <span class="animate-underline"><a
                                class="animate-target text-dark-emphasis text-decoration-none"
                                href="https://coderthemes.com/" rel="noreferrer" target="_blank">Coderthemes</a></span>
                    </p>
                </footer>
            </div>
            <!-- Cover image visible on screens > 992px wide (lg breakpoint) -->
            <div class="d-none d-lg-block w-100 py-4 ms-auto" style="max-width: 1034px">
                <div class="d-flex flex-column justify-content-end h-100 rounded-5 overflow-hidden">
                    <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark"
                        style="background: linear-gradient(-90deg, #accbee 0%, #e7f0fd 100%)"></span>
                    <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"
                        style="background: linear-gradient(-90deg, #1b273a 0%, #1f2632 100%)"></span>
                    <div class="ratio position-relative z-2" style="--cz-aspect-ratio: calc(1030 / 1032 * 100%)">
                        <img alt="Girl" src="/img/account/cover.png" />
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const otpInput = document.getElementById('otp');
            const resendBtn = document.getElementById('resend-otp');
            let resendTimer = null;
            let countdown = 60;

            // Auto-focus OTP input
            otpInput.focus();



            // Resend OTP functionality
            resendBtn.addEventListener('click', function() {
                if (resendTimer) return;

                const identity = document.querySelector('input[name="identity"]').value;

                fetch('{{ route('login-phone.otp') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                .getAttribute('content')
                        },
                        body: JSON.stringify({
                            identity: identity
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Start countdown
                            resendBtn.disabled = true;
                            countdown = 60;

                            resendTimer = setInterval(function() {
                                countdown--;
                                resendBtn.textContent = '{{ __('otp.resend_in') }} ' +
                                    countdown + 's';

                                if (countdown <= 0) {
                                    clearInterval(resendTimer);
                                    resendTimer = null;
                                    resendBtn.disabled = false;
                                    resendBtn.innerHTML =
                                        '<span class="animate-target">{{ __('otp.resend_code') }}</span>';
                                }
                            }, 1000);
                        } else {
                            alert(data.message || '{{ __('otp.resend_failed') }}');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('{{ __('otp.resend_failed') }}');
                    });
            });
        });
    </script>
@endsection