@extends('layouts.client')

@include('client.financing-request._home_theme')

@section('page_title', ln('Verify Email', 'تأكيد البريد الإلكتروني'))

@section('content')
<div style="max-width:640px; margin:2rem auto;">
    <div style="background:#fff; border:1px solid #f1f3f5; border-radius:18px; padding:2.25rem; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,.04);">
        <div style="width:84px; height:84px; border-radius:50%; background:linear-gradient(135deg,#FFF4E5,#FFE8CC); display:grid; place-items:center; margin:0 auto 1.2rem; color:#D97706; font-size:2.2rem;">
            <i class="fa-solid fa-envelope-circle-check"></i>
        </div>
        <h2 style="margin:0 0 .5rem; font-weight:800; color:#1a1a1a;">
            {{ ln('Please verify your email', 'يرجى تأكيد بريدك الإلكتروني') }}
        </h2>
        <p style="color:#6b7280; line-height:1.7; font-size:.95rem; margin:0 auto 1.4rem; max-width:460px;">
            {{ ln(
                'To continue using Hotspot features (including submitting financing requests), please confirm your email address. We sent a verification link to:',
                'للاستفادة من كافة خدمات هوت سبوت (بما فيها تقديم طلبات التمويل)، يُرجى تأكيد بريدك الإلكتروني. أرسلنا رابط التأكيد إلى:'
            ) }}
        </p>
        <div style="background:#FFF4F4; color:#B71C1C; padding:.8rem 1.2rem; border-radius:10px; display:inline-block; font-weight:700; margin-bottom:1.5rem; direction:ltr;">
            <i class="fa-solid fa-envelope"></i> {{ $user->email ?? '' }}
        </div>

        @if(session('success'))
            <div style="background:#E6F7EA; color:#166534; border:1px solid #A7F3D0; border-radius:10px; padding:.75rem 1rem; margin-bottom:1.2rem; font-size:.9rem;">
                <i class="fa-solid fa-circle-check"></i> {{ session('success') }}
            </div>
        @endif
        @if(session('warning'))
            <div style="background:#FFF4E5; color:#92400E; border:1px solid #FCD34D; border-radius:10px; padding:.75rem 1rem; margin-bottom:1.2rem; font-size:.9rem;">
                <i class="fa-solid fa-triangle-exclamation"></i> {{ session('warning') }}
            </div>
        @endif

        <div style="display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap;">
            <form method="POST" action="{{ route('client.email.resend') }}">
                @csrf
                <button type="submit" style="background:linear-gradient(135deg,#FF4040,#FF6B6B); color:#fff; border:none; padding:.75rem 1.6rem; border-radius:10px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem;">
                    <i class="fa-solid fa-paper-plane"></i> {{ ln('Resend Email', 'إعادة إرسال الرسالة') }}
                </button>
            </form>
            <a href="{{ route('logout') }}"
               onclick="event.preventDefault(); document.getElementById('lo-form').submit();"
               style="border:1px solid #e5e7eb; color:#4b5563; padding:.75rem 1.4rem; border-radius:10px; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:.45rem;">
                <i class="fa-solid fa-right-from-bracket"></i> {{ ln('Logout', 'تسجيل الخروج') }}
            </a>
            <form id="lo-form" method="POST" action="{{ route('logout') }}" style="display:none;">@csrf</form>
        </div>

        <p style="margin:1.5rem 0 0; font-size:.8rem; color:#9ca3af;">
            {{ ln('Check your spam folder if you don\'t see the email.', 'تحقّق من مجلد "الرسائل غير المرغوب فيها" إذا لم تجد الرسالة.') }}
        </p>
    </div>
</div>
@endsection