@extends('layouts.auth')

@section('title', __('auth.verify_title') . ' — ' . config('app.name'))

@section('form')
    @php
        $length = (int) config('smartcarb.otp.length', 6);
        $minutes = (int) ceil((int) config('smartcarb.otp.ttl_seconds') / 60);
        $masked = substr($phone, 0, 4) . str_repeat('*', max(0, strlen($phone) - 7)) . substr($phone, -3);
    @endphp

    <span class="section-eyebrow">{{ __('auth.portal_login') }}</span>
    <h1 class="text-3xl">{{ __('auth.verify_title') }}</h1>
    <p class="mt-3 leading-relaxed text-ink-500">
        {{ __('auth.verify_intro', ['length' => $length, 'phone' => $masked, 'minutes' => $minutes]) }}
    </p>

    <div class="mt-6">
        <x-alerts/>
    </div>

    @if (session('debug_code'))
        <div class="mb-4 rounded-2xl border border-dashed border-brand-400 bg-brand-50 px-4 py-3 text-sm text-brand-800">
            <strong>Local environment:</strong>
            <span class="numeric font-bold">{{ session('debug_code') }}</span>
            <span class="block text-xs text-brand-700">Shown only when APP_ENV=local. In production the code is SMS-only.</span>
        </div>
    @endif

    <form method="POST" action="{{ route('otp.store') }}" class="space-y-5">
        @csrf

        <div>
            <label for="code" class="field-label">{{ __('auth.verification_code') }}</label>
            <input id="code"
                   name="code"
                   type="text"
                   inputmode="numeric"
                   autocomplete="one-time-code"
                   maxlength="{{ $length }}"
                   required
                   data-otp-input
                   class="otp-input">
            @error('code')
                <p class="field-error">{{ $message }}</p>
            @enderror
        </div>

        <button type="submit" class="btn-brand w-full">{{ __('auth.verify') }}</button>
    </form>

    <div class="mt-6 flex flex-wrap items-center justify-between gap-3">
        <form method="POST" action="{{ route('otp.resend') }}">
            @csrf
            <button type="submit" data-resend-button class="btn-soft">{{ __('auth.resend') }}</button>
        </form>

        <a href="{{ route('login') }}" class="text-sm font-semibold text-ink-500 no-underline hover:text-brand-600">
            {{ __('auth.change_number') }}
        </a>
    </div>

    @if ($cooldown > 0)
        <p class="mt-3 text-sm text-ink-400" data-countdown-wrapper>
            {!! __('auth.resend_in', ['seconds' => '<span class="numeric font-bold" data-countdown="' . $cooldown . '">' . $cooldown . '</span>']) !!}
        </p>
    @endif
@endsection