@extends('admin.layouts.master')

@section('contents')
<div class="content-wrapper">
    <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-left mb-0">تفاصيل طلب التوثيق #{{ $verification->id }}</h2>
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">الرئيسية</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('admin.identity-verifications.index') }}">توثيق الهوية</a></li>
                            <li class="breadcrumb-item active">#{{ $verification->id }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="content-body">
        <div class="row">

            {{-- بيانات الطلب --}}
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header"><h4 class="card-title">بيانات المستخدم والهوية</h4></div>
                    <div class="card-body">
                        <table class="table table-sm">
                            <tr><th>المستخدم</th><td>
                                <a href="{{ route('freelancers.details', $verification->user->username) }}" target="_blank">
                                    {{ $verification->user->name }}
                                </a>
                            </td></tr>
                            <tr><th>البريد الإلكتروني</th><td>{{ $verification->user->email }}</td></tr>
                            <tr><th>الاسم (عربي)</th><td>{{ $verification->displayNameAr() ?: '—' }}</td></tr>
                            <tr><th>الاسم (إنجليزي)</th><td>{{ $verification->displayNameEn() ?: '—' }}</td></tr>
                            <tr><th>الاسم المعروض بعد الاعتماد</th><td>{{ $verification->profile_name_lang === 'en' ? 'إنجليزي' : 'عربي' }}</td></tr>
                            <tr><th>الدولة</th><td>{{ optional($verification->country)->name ?? '—' }}</td></tr>
                            <tr><th>نوع الوثيقة</th><td>{{ \App\Models\IdentityVerification::idTypeLabel($verification->id_type) }}</td></tr>
                            <tr><th>رقم الوثيقة</th><td>{{ $verification->id_number }}</td></tr>
                            <tr><th>تاريخ الميلاد</th><td>{{ $verification->birth_date?->format('Y-m-d') ?? '—' }}</td></tr>
                            <tr><th>الجنس</th><td>
                                @if($verification->gender === 'male')
                                    <span class="badge badge-info">{{ __('Male') }}</span>
                                @elseif($verification->gender === 'female')
                                    <span class="badge badge-warning">{{ __('Female') }}</span>
                                @else
                                    —
                                @endif
                            </td></tr>
                            <tr><th>الحالة</th><td>
                                <span class="badge badge-{{ $verification->statusBadgeColor() }}">
                                    {{ match($verification->status) { 'pending' => 'معلّق', 'approved' => 'مُعتمد', 'rejected' => 'مرفوض', default => $verification->status } }}
                                </span>
                            </td></tr>
                            <tr><th>تاريخ الإرسال</th><td>{{ $verification->created_at->format('Y-m-d H:i') }}</td></tr>
                            @if($verification->reviewer)
                                <tr><th>راجعه</th><td>{{ $verification->reviewer->name }}</td></tr>
                                <tr><th>تاريخ المراجعة</th><td>{{ $verification->reviewed_at?->format('Y-m-d H:i') }}</td></tr>
                            @endif
                            @if($verification->admin_notes)
                                <tr><th>ملاحظات الأدمن</th><td class="text-danger">{{ $verification->admin_notes }}</td></tr>
                            @endif
                        </table>
                    </div>
                </div>

                @php
                    $profileUser = $verification->user;
                    $profileBirth = $profileUser->birth_date
                        ? \Carbon\Carbon::parse($profileUser->birth_date)->format('Y-m-d')
                        : null;
                    $diffs = $comparisonDiffs ?? [];
                @endphp
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title mb-0">بيانات الحساب الشخصي (للمقارنة)</h4>
                        <p class="text-muted small mb-0 mt-1">الصفوف المميزة تختلف عن بيانات طلب التوثيق (حسب لغة الاسم المختارة في الطلب).</p>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm">
                            <tr class="{{ !empty($diffs['first_name']) ? 'table-warning' : '' }}">
                                <th>الاسم الأول
                                    @if(!empty($diffs['first_name']))
                                        <span class="badge badge-warning iv-diff-badge" title="يختلف عن بيانات الطلب">⚠ يختلف</span>
                                    @endif
                                </th>
                                <td>{{ $profileUser->first_name ?: '—' }}</td>
                            </tr>
                            <tr class="{{ !empty($diffs['last_name']) ? 'table-warning' : '' }}">
                                <th>الاسم الأخير
                                    @if(!empty($diffs['last_name']))
                                        <span class="badge badge-warning iv-diff-badge" title="يختلف عن بيانات الطلب">⚠ يختلف</span>
                                    @endif
                                </th>
                                <td>{{ $profileUser->last_name ?: '—' }}</td>
                            </tr>
                            <tr class="{{ !empty($diffs['country_id']) ? 'table-warning' : '' }}">
                                <th>الدولة
                                    @if(!empty($diffs['country_id']))
                                        <span class="badge badge-warning iv-diff-badge" title="يختلف عن بيانات الطلب">⚠ يختلف</span>
                                    @endif
                                </th>
                                <td>{{ optional($profileUser->country)->name ?? '—' }}</td>
                            </tr>
                            <tr class="{{ !empty($diffs['gender']) ? 'table-warning' : '' }}">
                                <th>الجنس
                                    @if(!empty($diffs['gender']))
                                        <span class="badge badge-warning iv-diff-badge" title="يختلف عن بيانات الطلب">⚠ يختلف</span>
                                    @endif
                                </th>
                                <td>
                                @if($profileUser->gender == 'male')
                                    <span class="badge badge-info">{{ __('Male') }}</span>
                                @elseif($profileUser->gender == 'female')
                                    <span class="badge badge-warning">{{ __('Female') }}</span>
                                @else
                                    {{ __('None') }}
                                @endif
                            </td></tr>
                            <tr class="{{ !empty($diffs['birth_date']) ? 'table-warning' : '' }}">
                                <th>تاريخ الميلاد
                                    @if(!empty($diffs['birth_date']))
                                        <span class="badge badge-warning iv-diff-badge" title="يختلف عن بيانات الطلب">⚠ يختلف</span>
                                    @endif
                                </th>
                                <td>{{ $profileBirth ?? '—' }}</td>
                            </tr>
                        </table>
                    </div>
                </div>

                {{-- أزرار الاعتماد/الرفض --}}
                @if($verification->isPending())
                    @can('update_identity_verifications')
                    <div class="card">
                        <div class="card-header"><h4 class="card-title">اتخاذ القرار</h4></div>
                        <div class="card-body">
                            <form action="{{ route('admin.identity-verifications.approve', $verification->id) }}" method="POST" class="mb-2">
                                @csrf
                                <div class="form-group">
                                    <label>ملاحظات (اختياري)</label>
                                    <textarea name="admin_notes" class="form-control" rows="2" placeholder="ملاحظة للمستخدم..."></textarea>
                                </div>
                                <button type="submit" class="btn btn-success btn-block"
                                        onclick="return confirm('اعتماد هذا الطلب؟')">
                                    <i class="fa fa-check mr-1"></i> اعتماد الهوية
                                </button>
                            </form>

                            <hr>

                            <form action="{{ route('admin.identity-verifications.reject', $verification->id) }}" method="POST">
                                @csrf
                                @include('admin.partials.reject-reason-field', [
                                    'reasons' => $rejectReasons,
                                    'fieldName' => 'admin_notes',
                                    'inputId' => 'identity_reject_' . $verification->id,
                                    'minLength' => 5,
                                ])
                                <button type="submit" class="btn btn-danger btn-block">
                                    <i class="fa fa-times mr-1"></i> رفض الطلب
                                </button>
                            </form>
                        </div>
                    </div>
                    @endcan
                @endif
            </div>

            {{-- الصور --}}
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header"><h4 class="card-title">صور الهوية</h4></div>
                    <div class="card-body">
                        @foreach([
                            ['key' => 'id_front',       'label' => 'الوجه الأمامي'],
                            ['key' => 'id_back',        'label' => 'الوجه الخلفي'],
                            ['key' => 'selfie_with_id', 'label' => 'السيلفي مع الهوية'],
                        ] as $img)
                            <div class="mb-3">
                                <h6>{{ $img['label'] }}</h6>
                                @php $media = $verification->getFirstMedia($img['key']); @endphp
                                @if($media)
                                    <div class="id-img-wrapper" onclick="openLightbox(this)">
                                        <img src="{{ route('admin.identity-verifications.image', [$verification->id, $img['key']]) }}"
                                             alt="{{ $img['label'] }}"
                                             style="max-width:100%;border-radius:8px;border:2px solid #e2e8f0;"
                                             loading="lazy">
                                        <div class="id-img-overlay">
                                            <i class="fa fa-search-plus"></i>
                                        </div>
                                    </div>
                                @else
                                    <p class="text-muted">لا توجد صورة</p>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

{{-- Lightbox Modal --}}
<div id="id-lightbox" onclick="closeLightbox()">
    <button class="id-lightbox-close" onclick="closeLightbox()">
        <i class="fa fa-times"></i>
    </button>
    <img id="id-lightbox-img" src="" alt="">
</div>

@endsection

@section('css')
<style>
    .iv-diff-badge { font-size: 0.75rem; margin-inline-start: 6px; font-weight: 600; }

    /* ---- wrapper الصورة ---- */
    .id-img-wrapper {
        position: relative;
        display: inline-block;
        width: 100%;
        cursor: zoom-in;
        border-radius: 8px;
        overflow: hidden;
    }
    .id-img-wrapper img {
        display: block;
        width: 100%;
        transition: transform 0.3s ease, filter 0.3s ease;
    }
    .id-img-wrapper:hover img {
        transform: scale(1.03);
        filter: brightness(0.85);
    }

    /* ---- overlay أيقونة التكبير ---- */
    .id-img-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }
    .id-img-wrapper:hover .id-img-overlay {
        opacity: 1;
    }
    .id-img-overlay i {
        font-size: 2.4rem;
        color: #fff;
        text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    }

    /* ---- Lightbox ---- */
    #id-lightbox {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: rgba(0, 0, 0, 0.92);
        align-items: center;
        justify-content: center;
        cursor: zoom-out;
        animation: lbFadeIn 0.25s ease;
    }
    #id-lightbox.open {
        display: flex;
    }
    #id-lightbox-img {
        max-width: 92vw;
        max-height: 92vh;
        border-radius: 10px;
        box-shadow: 0 8px 60px rgba(0,0,0,0.7);
        animation: lbZoomIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        cursor: default;
        object-fit: contain;
    }
    .id-lightbox-close {
        position: fixed;
        top: 20px;
        left: 24px;
        background: rgba(255,255,255,0.12);
        border: none;
        color: #fff;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        font-size: 1.2rem;
        cursor: pointer;
        transition: background 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100000;
    }
    .id-lightbox-close:hover {
        background: rgba(255,255,255,0.25);
    }
    @keyframes lbFadeIn  { from { opacity: 0 } to { opacity: 1 } }
    @keyframes lbZoomIn  { from { transform: scale(0.85); opacity: 0 } to { transform: scale(1); opacity: 1 } }
</style>
@endsection

@section('scripts')
@include('admin.partials.reject-reason-field-scripts')
<script>
    function openLightbox(wrapper) {
        var src = wrapper.querySelector('img').src;
        document.getElementById('id-lightbox-img').src = src;
        document.getElementById('id-lightbox').classList.add('open');
        document.body.style.overflow = 'hidden';
    }

    function closeLightbox() {
        document.getElementById('id-lightbox').classList.remove('open');
        document.body.style.overflow = '';
    }

    // إغلاق بزر Escape
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeLightbox();
    });

    // منع إغلاق عند الضغط على الصورة نفسها
    document.getElementById('id-lightbox-img').addEventListener('click', function(e) {
        e.stopPropagation();
    });
</script>
@endsection