@extends('layouts.auth')

@section('title', 'Enter code — ' . config('app.name'))

@section('content')
    <h1 class="h4 fw-bold mb-1">Enter the code</h1>
    <p class="text-muted small mb-4">
        We sent a 6-digit code to <span class="fw-semibold">+91 {{ substr($phone, 0, 2) }}xxxx{{ substr($phone, -2) }}</span>.
        <a href="{{ route('login') }}" class="text-decoration-none">Change number</a>
    </p>

    <x-auth-session-status class="mb-3" :status="session('status')" />

    @if ($errors->has('phone'))
        <div class="alert alert-warning py-2">{{ $errors->first('phone') }}</div>
    @endif

    <form method="POST" action="{{ route('login.verify') }}">
        @csrf

        <div class="mb-3">
            <x-input-label for="code" :value="__('Verification code')" />
            <x-text-input id="code" type="text" name="code" inputmode="numeric" autocomplete="one-time-code"
                maxlength="6" class="text-center fs-4 letter-spacing-2" placeholder="------" required autofocus />
            <x-input-error :messages="$errors->get('code')" />
        </div>

        <x-primary-button class="w-100 justify-content-center">{{ __('Verify & continue') }}</x-primary-button>
    </form>

    <form method="POST" action="{{ route('login.resend') }}" class="mt-3 text-center">
        @csrf
        <input type="hidden" name="phone" value="{{ $phone }}">
        <button type="submit" class="btn btn-link btn-sm text-decoration-none">Resend code</button>
    </form>
@endsection