@extends('layouts.app')

@section('title', 'Подтверждение email — teeu')

@section('content')
<div class="mx-auto max-w-sm py-8">
    <div class="rounded-[var(--radius-xl)] bg-white p-6 shadow-[var(--shadow-card)] sm:p-8">
        <h1 class="text-xl font-extrabold text-[var(--color-ink)]">Подтвердите email</h1>
        <p class="mt-1 text-sm text-[var(--color-slate)]">Мы отправили 4-символьный код на <b>{{ $seller->email }}</b>.</p>

        @if (session('status'))
            <div class="mt-4 rounded-[var(--radius-md)] bg-[#E9F7EF] px-4 py-2.5 text-sm font-semibold text-[var(--color-success)]">{{ session('status') }}</div>
        @endif
        @error('code')<div class="mt-4 rounded-[var(--radius-md)] bg-[#FDECEE] px-4 py-2.5 text-sm font-semibold text-[var(--color-sale)]">{{ $message }}</div>@enderror

        <form method="POST" action="{{ route('merchant.email.verify') }}" class="mt-5 space-y-3">
            @csrf
            <input name="code" maxlength="4" placeholder="ABCD" autocomplete="one-time-code"
                   class="w-full rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] px-4 py-3 text-center font-mono text-2xl uppercase tracking-[0.5em] outline-none focus:border-[var(--color-primary)]">
            <button type="submit" class="w-full rounded-[var(--radius-md)] bg-[var(--color-primary)] px-6 py-3 text-[15px] font-bold text-white shadow-[var(--shadow-primary)] hover:bg-[var(--color-primary-dark)]">Подтвердить</button>
        </form>

        <form method="POST" action="{{ route('merchant.email.resend') }}" class="mt-3">
            @csrf
            <button type="submit" class="w-full text-sm font-semibold text-[var(--color-muted)] hover:text-[var(--color-primary)]">Отправить код повторно</button>
        </form>
    </div>
</div>
@endsection