@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>
                        AsiaGolf
                    </a>
                </header>
                <h1 class="h2 mt-auto">{{ __('otp.title') }}</h1>
                <p class="text-muted mb-4">{{ __('otp.description', ['phone' => $identity]) }}</p>


                {{-- show message if error --}}
                @if ($errors->has('otp'))
                    <div class="alert alert-danger">
                        {{ $errors->first('otp') }}
                    </div>
                @endif
                
                <!-- Form -->
                <form class="needs-validation" novalidate method="POST" action="{{ 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="000000" 
                               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']) }}">{{ __('otp.need_help') }}</a>
                    </div>
                    <p class="fs-xs mb-0">
                        {!! __('signin.rights_reserved', ['company' => config('app.name')]) !!}
                    </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