@extends('admin.layouts.app')

@section('title', 'إضافة مستخدم جديد')

@section('content')
<div class="container-fluid">
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-triangle me-2"></i>
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-triangle me-2"></i>
            <strong>يوجد أخطاء في النموذج:</strong>
            <ul class="mb-0 mt-2">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">
                        <i class="fas fa-user-plus me-2"></i>
                        إضافة مستخدم جديد
                    </h4>
                    <a href="{{ route('admin.users') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-right me-1"></i> رجوع
                    </a>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.users.store') }}" method="POST" enctype="multipart/form-data" id="createUserForm">
                        @csrf

                        <!-- معلومات التصحيح -->
                        <div class="alert alert-info mb-4">
                            <h6><i class="fas fa-info-circle me-2"></i>معلومات التصحيح:</h6>
                            <ul class="mb-0">
                                <li>CSRF Token: <code>{{ csrf_token() }}</code></li>
                                <li>Route: <code>{{ request()->route()->getName() }}</code></li>
                                <li>Method: <code>{{ request()->method() }}</code></li>
                                <li>URL: <code>{{ request()->url() }}</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
                            </ul>
                        </div>

                        <div class="row">
                            <!-- المعلومات الأساسية -->
                            <div class="col-md-6">
                                <h5 class="mb-3 text-primary">
                                    <i class="fas fa-user me-2"></i>
                                    المعلومات الأساسية
                                </h5>

                                <div class="mb-3">
                                    <label for="name" class="form-label">الاسم الكامل <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror"
                                           id="name" name="name" value="{{ old('name') }}" required
                                           placeholder="أدخل الاسم الكامل">
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="email" class="form-label">البريد الإلكتروني <span class="text-danger">*</span></label>
                                    <input type="email" class="form-control @error('email') is-invalid @enderror"
                                           id="email" name="email" value="{{ old('email') }}" required
                                           placeholder="أدخل البريد الإلكتروني">
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="phone" class="form-label">رقم الهاتف <span class="text-danger">*</span></label>
                                    <input type="tel" class="form-control @error('phone') is-invalid @enderror"
                                           id="phone" name="phone" value="{{ old('phone') }}" required
                                           placeholder="أدخل رقم الهاتف">
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- المحافظة والمدينة -->
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="governorate_id" class="form-label">المحافظة</label>
                                            <select class="form-control @error('governorate_id') is-invalid @enderror" 
                                                    id="governorate_id" name="governorate_id">
                                                <option value="">اختر المحافظة</option>
                                                @foreach(\App\Models\Governorate::active()->orderBy('name_ar')->get() as $governorate)
                                                    <option value="{{ $governorate->id }}" 
                                                            {{ old('governorate_id') == $governorate->id ? 'selected' : '' }}>
                                                        {{ $governorate->name_ar }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('governorate_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="city_id" class="form-label">المدينة</label>
                                            <select class="form-control @error('city_id') is-invalid @enderror" 
                                                    id="city_id" name="city_id">
                                                <option value="">اختر المدينة</option>
                                            </select>
                                            @error('city_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="address" class="form-label">العنوان التفصيلي</label>
                                    <textarea class="form-control @error('address') is-invalid @enderror"
                                              id="address" name="address" rows="2"
                                              placeholder="أدخل العنوان التفصيلي">{{ old('address') }}</textarea>
                                    @error('address')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="password" class="form-label">كلمة المرور <span class="text-danger">*</span></label>
                                    <input type="password" class="form-control @error('password') is-invalid @enderror"
                                           id="password" name="password" required
                                           placeholder="أدخل كلمة المرور (8 أحرف على الأقل)">
                                    @error('password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="password_confirmation" class="form-label">تأكيد كلمة المرور <span class="text-danger">*</span></label>
                                    <input type="password" class="form-control @error('password_confirmation') is-invalid @enderror"
                                           id="password_confirmation" name="password_confirmation" required
                                           placeholder="أعد إدخال كلمة المرور">
                                    @error('password_confirmation')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- معلومات إضافية -->
                            <div class="col-md-6">
                                <h5 class="mb-3 text-primary">
                                    <i class="fas fa-cog me-2"></i>
                                    معلومات إضافية
                                </h5>

                                <div class="mb-3">
                                    <label for="service_type" class="form-label">نوع الخدمة</label>
                                    <select class="form-select @error('service_type') is-invalid @enderror"
                                            id="service_type" name="service_type">
                                        <option value="">اختر نوع الخدمة</option>
                                        <option value="taxi" {{ old('service_type') == 'taxi' ? 'selected' : '' }}>تاكسي</option>
                                        <option value="restaurant" {{ old('service_type') == 'restaurant' ? 'selected' : '' }}>مطعم</option>
                                        <option value="gas" {{ old('service_type') == 'gas' ? 'selected' : '' }}>غاز</option>
                                        <option value="all" {{ old('service_type') == 'all' ? 'selected' : '' }}>جميع الخدمات</option>
                                    </select>
                                    @error('service_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="status" class="form-label">الحالة</label>
                                    <select class="form-select @error('status') is-invalid @enderror"
                                            id="status" name="status">
                                        <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>نشط</option>
                                        <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>غير نشط</option>
                                        <option value="suspended" {{ old('status') == 'suspended' ? 'selected' : '' }}>معلق</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="user_type" class="form-label">نوع المستخدم</label>
                                    <select class="form-select @error('user_type') is-invalid @enderror"
                                            id="user_type" name="user_type">
                                        <option value="passenger" {{ old('user_type') == 'passenger' ? 'selected' : '' }}>راكب</option>
                                        <option value="driver" {{ old('user_type') == 'driver' ? 'selected' : '' }}>سائق</option>
                                        <option value="admin" {{ old('user_type') == 'admin' ? 'selected' : '' }}>مدير</option>
                                        <option value="restaurant_manager" {{ old('user_type') == 'restaurant_manager' ? 'selected' : '' }}>مدير مطعم</option>
                                        <option value="gas_manager" {{ old('user_type') == 'gas_manager' ? 'selected' : '' }}>مدير مكتب غاز</option>
                                    </select>
                                    @error('user_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="profile_image" class="form-label">صورة الملف الشخصي</label>
                                    <input type="file" class="form-control @error('profile_image') is-invalid @enderror"
                                           id="profile_image" name="profile_image" accept="image/*">
                                    <small class="form-text text-muted">الحد الأقصى: 2MB، الأنواع المدعومة: JPG, PNG, GIF</small>
                                    @error('profile_image')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="notes" class="form-label">ملاحظات</label>
                                    <textarea class="form-control @error('notes') is-invalid @enderror"
                                              id="notes" name="notes" rows="3"
                                              placeholder="أدخل أي ملاحظات إضافية">{{ old('notes') }}</textarea>
                                    @error('notes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- معلومات السائق (تظهر فقط عند اختيار دور السائق) -->
                        <div id="driver_info" class="row mt-4" style="display: none;">
                            <div class="col-12">
                                <h5 class="mb-3 text-warning">
                                    <i class="fas fa-car me-2"></i>
                                    معلومات السائق
                                </h5>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="license_number" class="form-label">رقم رخصة القيادة</label>
                                            <input type="text" class="form-control @error('license_number') is-invalid @enderror"
                                                   id="license_number" name="license_number"
                                                   value="{{ old('license_number') }}"
                                                   placeholder="أدخل رقم رخصة القيادة (اختياري - سيتم تعيينه لاحقاً)">
                                            @error('license_number')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">يمكن للسائق تعبئة هذا الحقل لاحقاً عند إكمال معلومات سيارته</small>
                                        </div>

                                        <div class="mb-3">
                                            <label for="vehicle_type" class="form-label">نوع المركبة</label>
                                            <select class="form-select @error('vehicle_type') is-invalid @enderror" id="vehicle_type" name="vehicle_type">
                                                <option value="">اختر نوع المركبة</option>
                                                <option value="sedan" {{ old('vehicle_type') == 'sedan' ? 'selected' : '' }}>سيارة عادية</option>
                                                <option value="suv" {{ old('vehicle_type') == 'suv' ? 'selected' : '' }}>سيارة رياضية</option>
                                                <option value="van" {{ old('vehicle_type') == 'van' ? 'selected' : '' }}>فان</option>
                                                <option value="motorcycle" {{ old('vehicle_type') == 'motorcycle' ? 'selected' : '' }}>دراجة نارية</option>
                                            </select>
                                            @error('vehicle_type')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="experience_years" class="form-label">سنوات الخبرة</label>
                                            <input type="number" class="form-control" id="experience_years" name="experience_years"
                                                   value="{{ old('experience_years') }}" min="0" max="50"
                                                   placeholder="عدد سنوات الخبرة">
                                        </div>

                                        <div class="mb-3">
                                            <label for="is_available" class="form-label">متاح للعمل</label>
                                            <select class="form-select" id="is_available" name="is_available">
                                                <option value="1" {{ old('is_available') == '1' ? 'selected' : '' }}>نعم</option>
                                                <option value="0" {{ old('is_available') == '0' ? 'selected' : '' }}>لا</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary" id="submitBtn">
                                    <i class="fas fa-save me-2"></i> حفظ المستخدم
                                </button>
                                <a href="{{ route('admin.users') }}" class="btn btn-secondary">
                                    <i class="fas fa-times me-2"></i> إلغاء
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('تم تحميل صفحة إنشاء المستخدم');

    const userTypeSelect = document.getElementById('user_type');
    
    // إخفاء/إظهار حقل service_type بناءً على نوع المستخدم
    function toggleServiceTypeField() {
        const serviceTypeContainer = document.getElementById('service_type_container');
        const serviceTypeSelect = document.getElementById('service_type');
        const userType = userTypeSelect.value;

        if (userType === 'restaurant_manager' || userType === 'gas_manager') {
            serviceTypeContainer.style.display = 'none';
            // تعيين القيمة المناسبة تلقائياً
            if (userType === 'restaurant_manager') {
                serviceTypeSelect.value = 'restaurant';
            } else if (userType === 'gas_manager') {
                serviceTypeSelect.value = 'gas';
            }
        } else {
            serviceTypeContainer.style.display = 'block';
        }
    }

    // تشغيل عند تغيير نوع المستخدم
    userTypeSelect.addEventListener('change', toggleServiceTypeField);
    
    // تشغيل عند تحميل الصفحة
    toggleServiceTypeField();
    const driverInfo = document.getElementById('driver_info');
    const form = document.getElementById('createUserForm');
    const submitBtn = document.getElementById('submitBtn');

    // اختبار وجود العناصر
    console.log('العناصر الموجودة:', {
        userTypeSelect: !!userTypeSelect,
        driverInfo: !!driverInfo,
        form: !!form,
        submitBtn: !!submitBtn
    });

    // اختبار CSRF Token
    const csrfToken = document.querySelector('input[name="_token"]');
    console.log('CSRF Token موجود:', !!csrfToken);
    if (csrfToken) {
        console.log('CSRF Token value:', csrfToken.value);
    }

    function toggleDriverInfo() {
        if (userTypeSelect.value === 'driver') {
            driverInfo.style.display = 'block';
        } else {
            driverInfo.style.display = 'none';
        }
    }

    // تحميل المدن عند اختيار المحافظة
    const governorateSelect = document.getElementById('governorate_id');
    const citySelect = document.getElementById('city_id');

    if (governorateSelect && citySelect) {
        governorateSelect.addEventListener('change', function() {
            const governorateId = this.value;
            console.log('تم اختيار المحافظة:', governorateId);
            
            // مسح المدن الحالية
            citySelect.innerHTML = '<option value="">اختر المدينة</option>';
            
            if (governorateId) {
                console.log('جاري تحميل المدن للمحافظة:', governorateId);
                // تحميل المدن عبر AJAX
                fetch(`/admin/cities/by-governorate?governorate_id=${governorateId}`)
                    .then(response => {
                        console.log('استجابة الخادم:', response.status);
                        return response.json();
                    })
                    .then(cities => {
                        console.log('المدن المستلمة:', cities);
                        cities.forEach(city => {
                            const option = document.createElement('option');
                            option.value = city.id;
                            option.textContent = city.name_ar;
                            citySelect.appendChild(option);
                        });
                    })
                    .catch(error => {
                        console.error('خطأ في تحميل المدن:', error);
                    });
            }
        });
    }

    // إضافة event listener للنموذج
    if (form) {
        form.addEventListener('submit', function(e) {
            console.log('تم إرسال النموذج');

            // جمع بيانات النموذج
            const formData = new FormData(form);
            const data = {};
            for (let [key, value] of formData.entries()) {
                data[key] = value;
            }

            console.log('بيانات النموذج:', data);

            // التحقق من صحة البيانات قبل الإرسال - السماح بحقول فارغة للسائق
            console.log('جاري التحقق من البيانات...');

            // إظهار رسالة تأكيد وتعطيل الزر
            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> جاري الحفظ...';
            }

            // إرسال النموذج
            console.log('إرسال النموذج...');
            return true;
        });
    } else {
        console.error('النموذج غير موجود!');
    }

    // إضافة event listener لتغيير نوع المستخدم
    if (userTypeSelect) {
        userTypeSelect.addEventListener('change', function() {
            console.log('تم تغيير نوع المستخدم إلى:', this.value);
            toggleDriverInfo();
        });
    }

    // تشغيل عند تحميل الصفحة
    toggleDriverInfo();

    // اختبار إضافي للتحقق من صحة النموذج
    console.log('اختبار صحة النموذج:', {
        formAction: form ? form.action : 'غير موجود',
        formMethod: form ? form.method : 'غير موجود',
        formEnctype: form ? form.enctype : 'غير موجود'
    });
});
</script>
@endpush