@extends('user.layouts.app')

@section('css')
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/components/verification-status.css') }}">
@endsection

@section('scripts')
    {{-- load compression library (uses web workers) --}}
    <script src="https://unpkg.com/browser-image-compression@latest/dist/browser-image-compression.js"></script>
    <script src="{{ asset('assest/front2/js/verification-compress.js') }}"></script>
@endsection

@section('content')
    <div class="content-wrapper">
        <div class="page-header">
            <x-lucide-id-card width="24" height="24" />
            <div class="page-header--title">
                <h1>توثيق الهوية</h1>
            </div>
        </div>

        <div class="container">
            @php
                $user = auth()->user();
                $hasLatest = (bool) $latest;
                $status = $hasLatest ? $latest->status : 'initial';
                $isVerified = (bool) $user->is_verified;

                $componentStateClass = 'is-initial';
                if ($status === 'pending') {
                    $componentStateClass = 'is-pending';
                } elseif ($status === 'approved') {
                    $componentStateClass = 'is-approved';
                } elseif ($status === 'rejected') {
                    $componentStateClass = 'is-rejected';
                } elseif ($isVerified) {
                    $componentStateClass = 'is-approved';
                }

                $humanStatus = match (true) {
                    $isVerified => 'موثق',
                    $status === 'pending' => 'قيد المراجعة',
                    $status === 'approved' => 'مقبول',
                    $status === 'rejected' => 'مرفوض',
                    default => 'غير مقدم',
                };
            @endphp

            <div class="verification-status-wrapper" role="status" aria-live="polite">
                <div class="verification-status {{ $componentStateClass }}" aria-describedby="verificationStatusNotes">
                    <div class="verification-status-icon" aria-label="رمز حالة التوثيق">
                        @if ($componentStateClass === 'is-approved')
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                                <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12" />
                            </svg>
                        @elseif($componentStateClass === 'is-pending')
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="10" />
                                <path d="M12 6v6l3.5 3.5" />
                            </svg>
                        @elseif($componentStateClass === 'is-rejected')
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="10" />
                                <path d="m15 9-6 6" />
                                <path d="m9 9 6 6" />
                            </svg>
                        @else
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                stroke-linecap="round" stroke-linejoin="round">
                                <path d="M12 17h.01" />
                                <path d="M12 7v6" />
                                <circle cx="12" cy="12" r="10" />
                            </svg>
                        @endif
                    </div>
                    <div class="verification-status-body">
                        <div class="verification-status-header">
                            <h2 class="verification-status-title" style="margin:0;">حالة التوثيق</h2>
                            <span class="verification-status-badge">{{ $humanStatus }}</span>
                        </div>
                        <div class="verification-status-meta">
                            @if ($hasLatest)
                                <span>آخر تحديث: <strong>{{ $latest->updated_at->diffForHumans() }}</strong></span>
                                <span>المحاولة رقم: <strong>{{ $latest->attempt_number ?? '1' }}</strong></span>
                            @else
                                <span>لم يتم إرسال أي طلب بعد</span>
                            @endif
                        </div>

                        @if ($componentStateClass === 'is-approved' && !$hasLatest)
                            <p id="verificationStatusNotes" class="verification-status-notes">تم توثيق حسابك مسبقاً ولا حاجة
                                لإرسال مستندات جديدة.</p>
                        @elseif($componentStateClass === 'is-approved')
                            <p id="verificationStatusNotes" class="verification-status-notes">مبروك! تم قبول التوثيق بنجاح.
                                لا تقم بإعادة الإرسال إلا عند الحاجة لتحديث بياناتك.</p>
                        @elseif($componentStateClass === 'is-pending')
                            <p id="verificationStatusNotes" class="verification-status-notes">طلبك تحت المراجعة حالياً.
                                عادةً تتم المعالجة خلال 24 - 48 ساعة.</p>
                        @elseif($componentStateClass === 'is-rejected')
                            <p id="verificationStatusNotes" class="verification-status-notes">نعتذر، تم رفض الطلب السابق.
                                راجع الأسباب أدناه ثم أعد الإرسال مع صور أوضح.</p>
                        @else
                            <p id="verificationStatusNotes" class="verification-status-notes">ابدأ الآن برفع مستنداتك
                                الرسمية لتوثيق حسابك والاستفادة من كامل المزايا.</p>
                        @endif

                        @if ($latest && $latest->admin_notes)
                            <div class="verification-status-divider"></div>
                            <p class="verification-status-notes"><strong>ملاحظات
                                    الإدارة:</strong><br>{{ $latest->admin_notes }}</p>
                        @endif

                        @if ($componentStateClass === 'is-initial' || $componentStateClass === 'is-rejected')
                            @php
                                $verificationGuidelines = \App\Models\System\Setting::first()?->verification_guidelines;
                            @endphp
                            @if ($verificationGuidelines)
                                <div class="verification-guidelines-content" aria-label="إرشادات التوثيق">
                                    {!! $verificationGuidelines !!}
                                </div>
                            @endif
                        @endif
                    </div>
                </div>
            </div>

            @php
                $emailVerified = !is_null($user->email_verified_at);
            @endphp

            @if (!$emailVerified)
                <div class="notice-container" role="alert" style="margin-top:1.5rem;">
                    <strong>تنبيه:</strong> لا يمكنك تقديم طلب توثيق الهوية قبل تفعيل البريد الإلكتروني الخاص بك.
                    يرجى التوجه إلى صفحة <a href="{{ route('profile.edit') }}" class="alert-link">تعديل الملف الشخصي</a>
                    وتفعيل بريدك عبر إدخال الكود المرسل، ثم أعد فتح هذه الصفحة.
                </div>
            @endif

            @if ($componentStateClass === 'is-approved')
                {{-- لا نعرض الفورم بعد الموافقة --}}
            @elseif($componentStateClass === 'is-pending')
                {{-- لا نعرض الفورم أثناء الانتظار --}}
            @elseif(!$emailVerified)
                {{-- اخفاء الفورم لأن البريد غير مفعل --}}
            @else
                <form action="{{ route('user.verification.store') }}" method="POST" enctype="multipart/form-data"
                    class="form-container">
                    @csrf
                    <div class="form-header">
                        <p>رفع مستندات التحقق</p>
                    </div>

                    <div class="form-row">
                        <div class="input-group file-upload">
                            <span class="file-field-label">صورة الهوية (الوجه الأمامي)</span>
                            <label class="input-wrapper" for="front_image">
                                <input name="front_image" type="file" id="front_image" class="file-input"
                                    accept="image/*" required>
                                <span class="file-prefix">
                                    <svg viewBox="0 0 24 24">
                                        <path
                                            d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
                                    </svg>
                                    <span>صورة الهوية الأمامية</span>
                                </span>
                                <span class="file-name" id="front_image_name">لم يتم اختيار ملف</span>
                            </label>
                            <div class="image-preview" id="front_image_preview">
                                <img id="front_image_img" src="" alt="معاينة صورة الهوية الأمامية">
                                <div class="image-preview-overlay">
                                    <div class="preview-text">صورة الهوية الأمامية</div>
                                </div>
                                <button type="button" class="remove-image" onclick="removeImage('front_image')">×</button>
                            </div>
                            @error('front_image')
                                <div class="text-danger small">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="input-group file-upload">
                            <span class="file-field-label">صورة الهوية (الوجه الخلفي)</span>
                            <label class="input-wrapper" for="back_image">
                                <input name="back_image" type="file" id="back_image" class="file-input"
                                    accept="image/*" required>
                                <span class="file-prefix">
                                    <svg viewBox="0 0 24 24">
                                        <path
                                            d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
                                    </svg>
                                    <span>صورة الهوية الخلفية</span>
                                </span>
                                <span class="file-name" id="back_image_name">لم يتم اختيار ملف</span>
                            </label>
                            <div class="image-preview" id="back_image_preview">
                                <img id="back_image_img" src="" alt="معاينة صورة الهوية الخلفية">
                                <div class="image-preview-overlay">
                                    <div class="preview-text">صورة الهوية الخلفية</div>
                                </div>
                                <button type="button" class="remove-image"
                                    onclick="removeImage('back_image')">×</button>
                            </div>
                            @error('back_image')
                                <div class="text-danger small">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="input-group file-upload">
                            <span class="file-field-label">صورة شخصية وأنت تحمل الهوية</span>
                            <label class="input-wrapper" for="selfie_image">
                                <input name="selfie_image" type="file" id="selfie_image" class="file-input"
                                    accept="image/*" required>
                                <span class="file-prefix">
                                    <svg viewBox="0 0 24 24">
                                        <path
                                            d="M9,2A7,7 0 0,0 2,9C2,11.38 3.19,13.47 5,14.74V17A1,1 0 0,0 6,18H9A7,7 0 0,0 16,11A7,7 0 0,0 9,2M9,4A5,5 0 0,1 14,9A5,5 0 0,1 9,14A5,5 0 0,1 4,9A5,5 0 0,1 9,4M9,6A3,3 0 0,0 6,9A3,3 0 0,0 9,12A3,3 0 0,0 12,9A3,3 0 0,0 9,6M22,19V21H20V19H22M18,19H16V21H18V19M14,19V21H12V19H14Z" />
                                    </svg>
                                    <span>صورة شخصية مع الهوية</span>
                                </span>
                                <span class="file-name" id="selfie_image_name">لم يتم اختيار ملف</span>
                            </label>
                            <div class="image-preview" id="selfie_image_preview">
                                <img id="selfie_image_img" src="" alt="معاينة الصورة الشخصية">
                                <div class="image-preview-overlay">
                                    <div class="preview-text">صورة شخصية مع الهوية</div>
                                </div>
                                <button type="button" class="remove-image"
                                    onclick="removeImage('selfie_image')">×</button>
                            </div>
                            @error('selfie_image')
                                <div class="text-danger small">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    {{-- Upload Progress Bar --}}
                    <div id="upload_progress_wrapper" style="display:none; margin: 1.5rem 0;">
                        <div
                            style="background: #f0f0f0; border-radius: 8px; overflow: hidden; height: 30px; position: relative;">
                            <div id="upload_progress_bar"
                                style="background: linear-gradient(90deg, #4CAF50, #45a049); height: 100%; width: 0%; transition: width 0.3s ease;">
                            </div>
                            <div id="upload_progress_text"
                                style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; color: #333;">
                                0%</div>
                        </div>
                        <p style="text-align: center; margin-top: 0.5rem; font-size: 0.9rem; color: #666;">جاري رفع
                            الملفات...</p>
                    </div>

                    <button type="submit" class="submit-btn">إرسال للمراجعة</button>
                </form>
            @endif
        </div>
    </div>
@endsection