@extends('admin.layouts.app')

@section('title', 'اختبار النماذج')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">اختبار النماذج</h4>
                </div>
                <div class="card-body">
                    <!-- نموذج اختبار بسيط -->
                    <form action="{{ route('admin.users.store') }}" method="POST" id="testForm">
                        @csrf
                        <div class="mb-3">
                            <label for="test_name" class="form-label">الاسم</label>
                            <input type="text" class="form-control" id="test_name" name="name" value="مستخدم اختبار" required>
                        </div>
                        <div class="mb-3">
                            <label for="test_email" class="form-label">البريد الإلكتروني</label>
                            <input type="email" class="form-control" id="test_email" name="email" value="test@example.com" required>
                        </div>
                        <div class="mb-3">
                            <label for="test_phone" class="form-label">رقم الهاتف</label>
                            <input type="tel" class="form-control" id="test_phone" name="phone" value="0500000000" required>
                        </div>
                        <div class="mb-3">
                            <label for="test_password" class="form-label">كلمة المرور</label>
                            <input type="password" class="form-control" id="test_password" name="password" value="password123" required>
                        </div>
                        <div class="mb-3">
                            <label for="test_password_confirmation" class="form-label">تأكيد كلمة المرور</label>
                            <input type="password" class="form-control" id="test_password_confirmation" name="password_confirmation" value="password123" required>
                        </div>
                        <div class="mb-3">
                            <label for="test_status" class="form-label">الحالة</label>
                            <select class="form-select" id="test_status" name="status">
                                <option value="active">نشط</option>
                                <option value="inactive">غير نشط</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="test_user_type" class="form-label">نوع المستخدم</label>
                            <select class="form-select" id="test_user_type" name="user_type">
                                <option value="passenger">راكب</option>
                                <option value="driver">سائق</option>
                                <option value="admin">مدير</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary" id="testSubmitBtn">
                            <i class="fas fa-save"></i> اختبار الحفظ
                        </button>
                    </form>

                    <hr class="my-4">

                    <!-- معلومات التصحيح -->
                    <div class="alert alert-info">
                        <h5>معلومات التصحيح:</h5>
                        <ul>
                            <li>CSRF Token: <code>{{ csrf_token() }}</code></li>
                            <li>Session ID: <code>{{ session()->getId() }}</code></li>
                            <li>User Authenticated: <code>{{ Auth::check() ? 'نعم' : 'لا' }}</code></li>
                            @if(Auth::check())
                                <li>User Type: <code>{{ Auth::user()->user_type }}</code></li>
                                <li>User Status: <code>{{ Auth::user()->status }}</code></li>
                            @endif
                            <li>Route Name: <code>{{ request()->route()->getName() }}</code></li>
                            <li>Request Method: <code>{{ request()->method() }}</code></li>
                            <li>Request URL: <code>{{ request()->url() }}</code></li>
                        </ul>
                    </div>

                    <!-- اختبار JavaScript -->
                    <div class="alert alert-warning">
                        <h5>اختبار JavaScript:</h5>
                        <button type="button" class="btn btn-warning" id="testJsBtn">
                            اختبار JavaScript
                        </button>
                        <div id="jsTestResult" class="mt-2"></div>
                    </div>

                    <!-- اختبار النموذج -->
                    <div class="alert alert-success">
                        <h5>اختبار النموذج:</h5>
                        <button type="button" class="btn btn-success" id="testFormBtn">
                            اختبار إرسال النموذج
                        </button>
                        <div id="formTestResult" class="mt-2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('تم تحميل صفحة الاختبار');

    const form = document.getElementById('testForm');
    const submitBtn = document.getElementById('testSubmitBtn');
    const testJsBtn = document.getElementById('testJsBtn');
    const testFormBtn = document.getElementById('testFormBtn');
    const jsTestResult = document.getElementById('jsTestResult');
    const formTestResult = document.getElementById('formTestResult');

    // اختبار JavaScript
    testJsBtn.addEventListener('click', function() {
        console.log('تم النقر على زر اختبار JavaScript');
        jsTestResult.innerHTML = '<span class="text-success">✓ JavaScript يعمل بشكل صحيح</span>';
    });

    // اختبار النموذج
    testFormBtn.addEventListener('click', function() {
        console.log('تم النقر على زر اختبار النموذج');

        // محاكاة إرسال النموذج
        const formData = new FormData(form);
        const data = {};

        for (let [key, value] of formData.entries()) {
            data[key] = value;
        }

        console.log('بيانات النموذج:', data);
        formTestResult.innerHTML = '<span class="text-success">✓ تم اختبار النموذج بنجاح</span><br><small>راجع Console للمزيد من التفاصيل</small>';
    });

    // إرسال النموذج
    form.addEventListener('submit', function(e) {
        console.log('تم إرسال نموذج الاختبار');
        console.log('بيانات النموذج:', {
            name: form.name.value,
            email: form.email.value,
            phone: form.phone.value,
            password: form.password.value,
            password_confirmation: form.password_confirmation.value,
            status: form.status.value,
            user_type: form.user_type.value
        });

        // تعطيل الزر
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري الاختبار...';

        // إرسال النموذج
        console.log('إرسال النموذج...');
        return true;
    });

    // اختبار إضافي للـ CSRF token
    console.log('CSRF Token موجود:', document.querySelector('input[name="_token"]') !== null);
    console.log('CSRF Token value:', document.querySelector('input[name="_token"]')?.value);
});
</script>
@endpush