@extends('front.layouts.app')

@section('title', 'تأكيد البريد الإلكتروني')

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/login.css') }}">
@endsection

@section('content')
<div class="login-page">
    <div class="container">
        <div class="login-card" style="max-width: 600px; margin: 80px auto; text-align: center; padding: 40px;">
            <div class="login-header">
                <div class="login-icon">
                    <i class="fas fa-envelope-open-text"></i>
                </div>
                <h2>تأكيد البريد الإلكتروني</h2>
                <p>شكراً لتسجيلك! قبل البدء، يرجى تأكيد بريدك الإلكتروني من خلال الضغط على الرابط الذي أرسلناه إليك للتو.</p>
            </div>

            @if (session('status'))
                <div class="alert alert-success" style="background: #d4edda; color: #155724; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
                    تم إرسال رابط تأكيد جديد إلى بريدك الإلكتروني.
                </div>
            @endif

            <div class="auth-options" style="margin-top: 30px; display: flex; flex-direction: column; gap: 15px;">
                <form method="POST" action="{{ route('verification.send') }}">
                    @csrf
                    <button type="submit" class="btn btn-primary" style="width: 100%;">إعادة إرسال رابط التأكيد</button>
                </form>

                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="btn btn-secondary" style="width: 100%; background: #6c757d; color: #fff;">تسجيل الخروج</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection