@extends('admin.layouts.master')

@section('css')
    @include('admin.helper.tablecss')
@endsection

@section('page-header')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">إنشاء توثيق جديد</h4>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-md-8 col-xl-8 col-xs-12 col-sm-12">
            <div class="card">
                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success">{{ session('status') }}</div>
                    @endif
                    @if (session('error'))
                        <div class="alert alert-danger">{{ session('error') }}</div>
                    @endif
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('admin.verifications.store') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">المستخدم</label>
                            <select id="userSelect" name="user_id" class="form-control" required></select>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">الوجه الأمامي</label>
                                <input type="file" class="form-control" name="front_image" accept="image/*" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">الوجه الخلفي</label>
                                <input type="file" class="form-control" name="back_image" accept="image/*" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">صورة مع الهوية</label>
                                <input type="file" class="form-control" name="selfie_image" accept="image/*" required>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button class="btn btn-primary" type="submit">إنشاء وقبول</button>
                            <a class="btn btn-light" href="{{ route('admin.verifications.index') }}">رجوع</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5>ملاحظات</h5>
                    <ul class="mb-0">
                        <li>يتم قبول الطلب مباشرة بعد الرفع.</li>
                        <li>يظهر في القائمة اسم المستخدم والبريد.</li>
                        <li>مسموح صور فقط.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    <script>
        $(function() {
            // Initialize select2 if available, otherwise fallback to simple AJAX populate
            if ($.fn.select2) {
                $('#userSelect').select2({
                    placeholder: 'اختر مستخدمًا غير موثق',
                    allowClear: true,
                    dir: 'rtl',
                    ajax: {
                        url: '{{ route('admin.verifications.users-options') }}',
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                term: params.term
                            };
                        },
                        processResults: function(data) {
                            return data;
                        },
                        cache: true
                    },
                    minimumInputLength: 0
                });
            } else {
                // Fallback: fetch once and fill options
                fetch('{{ route('admin.verifications.users-options') }}')
                    .then(r => r.json())
                    .then(data => {
                        const sel = document.getElementById('userSelect');
                        (data.results || []).forEach(opt => {
                            const o = document.createElement('option');
                            o.value = opt.id;
                            o.text = opt.text;
                            sel.appendChild(o);
                        });
                    });
            }
        });
    </script>
@endsection