@extends('admin.layouts.master')

@section('content')
    <div class="page-header">
        <h1>طلب توثيق #{{ $verification->id }}</h1>
    </div>

    @if (session('status'))
        <div class="alert alert-success">{{ session('status') }}</div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <div class="row">
        <div class="col-md-8">
            <div class="card mb-3">
                <div class="card-header">صور الهوية</div>
                <div class="card-body">
                    <div class="row g-3">
                        @php
                            $frontUrl = route('admin.media.identity.document', [
                                'verification' => $verification->id,
                                'field' => 'front',
                            ]);
                            $backUrl = route('admin.media.identity.document', [
                                'verification' => $verification->id,
                                'field' => 'back',
                            ]);
                            $selfieUrl = route('admin.media.identity.document', [
                                'verification' => $verification->id,
                                'field' => 'selfie',
                            ]);
                        @endphp

                        <div class="col-md-4">
                            <label class="form-label">الوجه الأمامي</label>
                            <img src="{{ $frontUrl }}" data-full="{{ $frontUrl }}"
                                class="img-fluid border rounded zoomable-image" style="cursor: zoom-in;" alt="front">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">الوجه الخلفي</label>
                            <img src="{{ $backUrl }}" data-full="{{ $backUrl }}"
                                class="img-fluid border rounded zoomable-image" style="cursor: zoom-in;" alt="back">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">صورة مع الهوية</label>
                            <img src="{{ $selfieUrl }}" data-full="{{ $selfieUrl }}"
                                class="img-fluid border rounded zoomable-image" style="cursor: zoom-in;" alt="selfie">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-3">
                <div class="card-header">بيانات</div>
                <div class="card-body">
                    <p class="mb-1">المستخدم: <strong>{{ $verification->user->name }}</strong></p>
                    <p class="mb-1">البريد الإلكتروني: <strong>{{ $verification->user->email }}</strong></p>
                    <p class="mb-1">الهاتف: <strong>{{ $verification->user->mobile }}</strong></p>
                    <p class="mb-1">المحل: <strong>{{ $verification->user->store }}</strong></p>
                    <p class="mb-1">الحالة: <strong>
                            @if ($verification->status === 'pending')
                                قيد المراجعة
                            @elseif($verification->status === 'approved')
                                مقبول
                            @else
                                مرفوض
                            @endif
                        </strong></p>
                    @if ($verification->admin_notes)
                        <p class="mb-1">ملاحظات: {{ $verification->admin_notes }}</p>
                    @endif
                    @if ($verification->reviewed_at)
                        <p class="mb-0">مراجَع بواسطة: {{ optional($verification->reviewer)->name }} في
                            {{ $verification->reviewed_at }}</p>
                    @endif
                </div>
            </div>

            @if ($verification->status === 'pending')
                <div class="card">
                    <div class="card-header">إجراءات</div>
                    <div class="card-body">
                        <form method="POST" action="{{ route('admin.verifications.approve', $verification) }}"
                            class="mb-2">
                            @csrf
                            <div class="mb-2">
                                <textarea name="admin_notes" class="form-control" placeholder="ملاحظات (اختياري)"></textarea>
                            </div>
                            <button class="btn btn-success w-100" type="submit">قبول</button>
                        </form>
                        <form method="POST" action="{{ route('admin.verifications.reject', $verification) }}">
                            @csrf
                            <div class="mb-2">
                                <textarea name="admin_notes" class="form-control" placeholder="سبب الرفض" required></textarea>
                            </div>
                            <button class="btn btn-danger w-100" type="submit">رفض</button>
                        </form>
                    </div>
                </div>
            @endif
        </div>
    </div>
    {{-- Modal تكبير الصور --}}
    <div class="modal fade" id="imageZoomModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content bg-transparent border-0 shadow-none position-relative">
                <button type="button" class="btn-close position-absolute top-0 end-0 m-2" data-bs-dismiss="modal"
                    aria-label="Close"></button>
                <img id="zoomModalImage" class="w-100 rounded shadow" alt="Zoomed Image">
            </div>
        </div>
    </div>

    <style>
        #imageZoomModal .modal-dialog {
            max-width: 900px;
        }

        #imageZoomModal img {
            object-fit: contain;
            max-height: 80vh;
        }

        body.modal-open {
            padding-right: 0 !important;
        }
    </style>

    <script>
        (function() {
            function ready(fn) {
                if (document.readyState !== 'loading') {
                    fn();
                } else {
                    document.addEventListener('DOMContentLoaded', fn);
                }
            }
            ready(function() {
                var imgs = document.querySelectorAll('.zoomable-image');
                if (!imgs.length) return;
                var modalEl = document.getElementById('imageZoomModal');
                var modalImg = document.getElementById('zoomModalImage');

                function showModal() {
                    // Bootstrap 5 (with getOrCreateInstance) OR earlier 5.x without it
                    if (window.bootstrap && window.bootstrap.Modal) {
                        try {
                            var ModalClass = window.bootstrap.Modal;
                            var instance;
                            if (typeof ModalClass.getOrCreateInstance === 'function') {
                                instance = ModalClass.getOrCreateInstance(modalEl);
                            } else {
                                // Older 5.x: cache instance manually
                                instance = modalEl._bsModal || new ModalClass(modalEl);
                                modalEl._bsModal = instance;
                            }
                            instance.show();
                            return;
                        } catch (e) {
                            console.warn('Bootstrap Modal init failed, fallback used', e);
                        }
                    }
                    // Bootstrap 4 (no window.bootstrap.Modal) أو لا يوجد JS
                    modalEl.classList.add('show');
                    modalEl.style.display = 'block';
                    modalEl.removeAttribute('aria-hidden');
                }

                function hideModal() {
                    if (window.bootstrap && window.bootstrap.Modal) {
                        try {
                            var ModalClass = window.bootstrap.Modal;
                            var inst = null;
                            if (typeof ModalClass.getInstance === 'function') {
                                inst = ModalClass.getInstance(modalEl);
                            }
                            if (!inst && modalEl._bsModal) {
                                inst = modalEl._bsModal; // manual cache
                            }
                            if (inst && typeof inst.hide === 'function') {
                                inst.hide();
                                return;
                            }
                        } catch (e) {
                            console.warn('Bootstrap Modal hide failed, fallback used', e);
                        }
                    }
                    modalEl.classList.remove('show');
                    modalEl.style.display = 'none';
                    modalEl.setAttribute('aria-hidden', 'true');
                }

                imgs.forEach(function(img) {
                    img.addEventListener('click', function() {
                        modalImg.src = img.getAttribute('data-full') || img.src;
                        showModal();
                    });
                });

                // إغلاق عند الضغط على الخلفية
                modalEl && modalEl.addEventListener('click', function(e) {
                    if (e.target === modalEl) {
                        hideModal();
                    }
                });
            });
        })();
    </script>
@endsection