@extends('backend.layout.master-tailwind')
@section('title', __('Verification Requests'))

@section('content')
    <style>
        #userIdentityModal {
            border: none;
            border-radius: 12px;
            padding: 0;
            background: var(--surface);
            color: var(--text);
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
            width: 820px;
            max-width: 96vw;
        }

        #userIdentityModal::backdrop {
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(3px);
        }

        .id-dialog-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 18px;
            border-bottom: 1px solid var(--border);
            font-weight: 600;
            font-size: 14px;
            flex-shrink: 0
        }

        .id-dialog-body {
            padding: 20px;
            overflow-y: auto;
            max-height: calc(90vh - 120px)
        }

        .id-dialog-foot {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
            padding: 12px 18px;
            border-top: 1px solid var(--border);
            flex-shrink: 0
        }
    </style>

    <div class="page">

        <div class="page-head">
            <div>
                <h1 class="page-title">{{ __('Verification Requests') }}</h1>
                <p class="page-sub">{{ $all_requests->total() }} {{ __('pending · declined requests') }}</p>
            </div>
        </div>

        <div class="card">
            <div class="toolbar">
                <div style="position:relative;width:220px">
                    <svg class="icon"
                        style="position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
                        stroke-linejoin="round">
                        <circle cx="11" cy="11" r="7" />
                        <path d="m20 20-3.5-3.5" />
                    </svg>
                    <input type="text" id="string_search" placeholder="{{ __('Search by name…') }}"
                        style="width:100%;padding:4px 10px 4px 30px;background:var(--bg);border:1px solid var(--border);border-radius:6px;font-size:13px;color:var(--text);outline:none;height:32px">
                </div>
            </div>

            <div style="overflow-x:auto">
                <div class="search_result">
                    @include('backend.pages.user.verification.verification-request-search')
                </div>
            </div>

        </div>

    </div>

    {{-- Identity Details Dialog --}}
    <dialog id="userIdentityModal">
        <div style="display:flex;flex-direction:column;max-height:90vh">
            <div class="id-dialog-head">
                <span>{{ __('Verify User Identity') }}</span>
                <button type="button" class="icon-btn" id="closeIdentityDialog">
                    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path d="M18 6 6 18M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <div class="id-dialog-body" id="user_identity_details">
                <div style="display:flex;justify-content:center;align-items:center;padding:40px;color:var(--text-3)">
                    <svg class="icon" style="width:20px;height:20px;animation:spin 1s linear infinite" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                        <path
                            d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
                    </svg>
                </div>
            </div>
            <div class="id-dialog-foot">
                <button type="button" class="btn ghost sm" id="closeIdentityDialog2">{{ __('Close') }}</button>
                <button type="button" class="btn danger sm user_identity_decline">{{ __('Decline') }}</button>
                <button type="button" class="btn primary sm user_verify_status">{{ __('Approve') }}</button>
            </div>
        </div>
    </dialog>

@endsection

@section('script')
    <style>
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
    @include('backend.pages.user.verification.verification-js')
@endsection