@extends('layouts.auth')

@section('title', 'Resend OTP')

@push('styles')
<style>
    html, body {
        height: 100%;
        font-family: 'Poppins', sans-serif;
        background-color: #fff;
    }

    .resend-card {
        border: 1px solid #FEBD21;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

    .logo-text span:last-child {
        color: #FEBD21;
    }
</style>
@endpush

@section('content')
<div class="d-flex align-items-center justify-content-center h-100">
    <div class="resend-card p-4 p-md-5 bg-white" style="max-width: 420px; width: 100%;">
        {{-- Logo --}}
        <div class="text-center mb-4">
            <img src="{{ asset('logo.png') }}" alt="FlareSend Logo" class="mb-2" style="height: 28px;">
            <div class="logo-text fw-bold fs-5 text-dark">
                <span>Flare</span><span>Send</span>
            </div>
            <p class="text-muted small mb-0">Resend your verification code</p>
        </div>

            {{-- Alerts --}}
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Resend Form --}}
        <form action="{{ route('verification.resend.post') }}" method="POST">
            @csrf
            <div class="mb-3">
                <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                       placeholder="Enter your email" value="{{ old('email') }}" required>
                @error('email')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <button type="submit" class="btn w-100 text-white" style="background-color: #FEBD21;">
                Resend OTP
            </button>

            <p class="text-center small mt-3 mb-0">
                Remembered your OTP?
                <a href="{{ route('verification.view') }}" class="text-decoration-none fw-semibold" style="color: #FEBD21;">
                    Verify Account
                </a>
            </p>
        </form>
    </div>
</div>
@endsection