@extends('user.layouts.app')

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

@section('content')
    <div class="content-wrapper">
        <div class="page-header">
            <x-lucide-mail-check width="24" height="24" />
            <div class="page-header--title">
                <h1>تأكيد البريد الإلكتروني</h1>
            </div>
        </div>

        <div class="container" style="max-width: 480px;">
            <div class="form-container">
                <div class="form-header" style="text-align: center;">
                    <div
                        style="width: 80px; height: 80px; background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem;">
                        <x-lucide-mail-open width="32" height="32" style="color: white;" />
                    </div>
                    <h2>أدخل كود التحقق</h2>
                    <p style="color: var(--color-gray-500); margin: 0;">
                        تم إرسال كود التحقق إلى بريدك الإلكتروني<br>
                        <strong style="color: var(--color-primary-500);">{{ $email }}</strong>
                    </p>
                </div>

                @if (session('resent'))
                    <div class="alert alert-success"
                        style="background: rgba(40, 167, 69, 0.1); border: 1px solid rgba(40, 167, 69, 0.3); color: #28a745; padding: 1rem; border-radius: 0.5rem; text-align: center;">
                        <x-lucide-check-circle class="me-2" width="16" height="16" />
                        {{ session('success') ?? 'تم إرسال كود التحقق الجديد بنجاح!' }}
                    </div>
                @endif

                @if ($errors->any())
                    <div class="alert alert-danger"
                        style="background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.3); color: #dc3545; padding: 1rem; border-radius: 0.5rem; text-align: center;">
                        @foreach ($errors->all() as $error)
                            {{ $error }}
                        @endforeach
                    </div>
                @endif

                <form action="{{ route('verification.verify') }}" method="POST">
                    @csrf

                    <div class="input-group">
                        <label for="code" style="text-align: center;">كود التحقق (6 أحرف)</label>
                        <div class="input-wrapper">
                            <input type="text" id="code" name="code" placeholder="مثال: ABC123" required
                                autocomplete="one-time-code" maxlength="6"
                                style="text-align: center; font-size: 1.5rem; letter-spacing: 0.5rem; font-weight: bold; text-transform: uppercase;"
                                value="{{ old('code') }}">
                        </div>
                        <small
                            style="color: var(--color-gray-500); text-align: center; display: block; margin-top: 0.5rem;">
                            <x-lucide-info class="me-1" width="14" height="14" />
                            الكود صالح لمدة 15 دقيقة
                        </small>
                    </div>

                    <button type="submit" class="submit-btn">
                        <x-lucide-check-circle class="me-2" width="18" height="18" />
                        تأكيد البريد الإلكتروني
                    </button>
                </form>

                <div
                    style="border-top: 1px solid var(--color-gray-200); margin-top: 1.5rem; padding-top: 1.5rem; text-align: center;">
                    <p style="color: var(--color-gray-500); margin-bottom: 1rem;">
                        لم تستلم الكود؟
                    </p>
                    <form action="{{ route('verification.resend') }}" method="POST" style="display: inline;">
                        @csrf
                        <button type="submit"
                            style="background: transparent; border: 2px solid var(--color-primary-500); color: var(--color-primary-500); padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease;"
                            onmouseover="this.style.background='var(--color-primary-500)'; this.style.color='white';"
                            onmouseout="this.style.background='transparent'; this.style.color='var(--color-primary-500)';">
                            <x-lucide-refresh-cw class="me-2" width="16" height="16" />
                            إعادة إرسال الكود
                        </button>
                    </form>
                </div>

                <div style="margin-top: 1.5rem; text-align: center;">
                    <a href="{{ route('logout') }}"
                        onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
                        style="color: var(--color-gray-500); font-size: 0.875rem;">
                        <x-lucide-log-out class="me-1" width="14" height="14" />
                        تسجيل الخروج واستخدام حساب آخر
                    </a>
                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                        @csrf
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // Auto uppercase and format the code input
        document.getElementById('code').addEventListener('input', function(e) {
            this.value = this.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
        });
    </script>
@endpush