@extends('layouts.auth')
@section('title', 'Verification — OTP')

@section('auth-top')
<div class="auth-right-top">
    <span>Already have an account?</span>
    <a href="{{ route('login') }}" class="btn btn-accent btn-sm">Login</a>
    <a href="mailto:hello@feespay.ng" class="btn btn-ghost btn-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none"
            stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="10"/>
            <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/>
            <line x1="12" y1="17" x2="12.01" y2="17"/>
        </svg>
        Support
    </a>
</div>
@endsection

@section('content')
<a href="{{ route('register.step3') }}" class="auth-back">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"
        stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>
    </svg>
    Back
</a>

<h1>Verification</h1>
<p class="auth-sub">Please enter the OTP sent to your registered phone number.</p>

@if($errors->any())
<div class="alert alert-error">{{ $errors->first() }}</div>
@endif

@if(session('otp_sent'))
<div class="alert alert-success">OTP sent successfully to {{ session('masked_phone') }}.</div>
@endif

<form action="{{ route('register.otp.verify') }}" method="POST">
    @csrf
    <input type="hidden" name="uid" value="{{ $uid }}">
    <input type="hidden" name="otp" id="otp_value" value="">

    <div class="otp-wrap" style="margin-bottom:24px">
        @for($i = 1; $i <= 6; $i++)
        <input type="text" class="otp-input" inputmode="numeric"
               maxlength="1" autocomplete="one-time-code"
               aria-label="OTP digit {{ $i }}">
        @endfor
    </div>

    <p style="font-size:0.84rem; color:var(--text-mid); margin-bottom:24px">
        Didn't get a code?
        <a href="{{ route('register.otp.resend', ['uid' => $uid]) }}"
           class="text-brand font-bold"
           id="resend_link"
           style="pointer-events:none; opacity:0.4">
           Click to resend
        </a>
        <span id="resend_timer" style="font-size:0.78rem; color:var(--text-light)">
            (resend in <span id="countdown">60</span>s)
        </span>
    </p>

    <button type="submit" class="btn btn-accent btn-full">Submit</button>
</form>
@endsection

@push('scripts')
<script>
// Countdown timer for resend
let seconds = 60;
const countdown = document.getElementById('countdown');
const resendLink = document.getElementById('resend_link');
const resendTimer = document.getElementById('resend_timer');

const timer = setInterval(() => {
    seconds--;
    if (countdown) countdown.textContent = seconds;
    if (seconds <= 0) {
        clearInterval(timer);
        resendLink.style.pointerEvents = 'auto';
        resendLink.style.opacity = '1';
        if (resendTimer) resendTimer.style.display = 'none';
    }
}, 1000);
</script>
@endpush