@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-edit me-2"></i>
                        تعديل المستخدم: {{ $user->name }}
                    </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.update', $user->id) }}" method="POST" enctype="multipart/form-data" id="editUserForm">
                        @csrf
                        @method('PUT')

                        <!-- معلومات التصحيح -->
                        <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>Method Field: <code>{{ old('_method', 'PUT') }}</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 ID: <code>{{ $user->id }}</code></li>
                                <li>User Authenticated: <code>{{ Auth::check() ? 'نعم' : 'لا' }}</code></li>
                                @if(Auth::check())
                                    <li>Current User Type: <code>{{ Auth::user()->user_type }}</code></li>
                                    <li>Current 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', $user->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', $user->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', $user->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', $user->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', $user->address) }}</textarea>
                                    @error('address')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

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

                                <div class="mb-3">
                                    <label for="password_confirmation" class="form-label">تأكيد كلمة المرور الجديدة</label>
                                    <input type="password" class="form-control @error('password_confirmation') is-invalid @enderror"
                                           id="password_confirmation" name="password_confirmation"
                                           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', $user->service_type) == 'taxi' ? 'selected' : '' }}>تاكسي</option>
                                        <option value="food_delivery" {{ old('service_type', $user->service_type) == 'food_delivery' ? 'selected' : '' }}>توصيل طعام</option>
                                        <option value="gas_delivery" {{ old('service_type', $user->service_type) == 'gas_delivery' ? 'selected' : '' }}>توصيل غاز</option>
                                        <option value="all" {{ old('service_type', $user->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', $user->status) == 'active' ? 'selected' : '' }}>نشط</option>
                                        <option value="inactive" {{ old('status', $user->status) == 'inactive' ? 'selected' : '' }}>غير نشط</option>
                                        <option value="suspended" {{ old('status', $user->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', $user->user_type) == 'passenger' ? 'selected' : '' }}>راكب</option>
                                        <option value="driver" {{ old('user_type', $user->user_type) == 'driver' ? 'selected' : '' }}>سائق</option>
                                        <option value="admin" {{ old('user_type', $user->user_type) == 'admin' ? 'selected' : '' }}>مدير</option>
                                        <option value="restaurant_manager" {{ old('user_type', $user->user_type) == 'restaurant_manager' ? 'selected' : '' }}>مدير مطعم</option>
                                        <option value="gas_manager" {{ old('user_type', $user->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>
                                    @if($user->profile_image)
                                        <div class="mb-2">
                                            <img src="{{ asset('storage/' . $user->profile_image) }}"
                                                 alt="صورة المستخدم" class="img-thumbnail" style="max-width: 100px;">
                                            <small class="d-block text-muted">الصورة الحالية</small>
                                        </div>
                                    @endif
                                    <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', $user->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">
                                        <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', $user->driver->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" id="vehicle_type" name="vehicle_type">
                                                <option value="">اختر نوع المركبة</option>
                                                <option value="sedan" {{ old('vehicle_type', $user->driver->vehicle_type ?? '') == 'sedan' ? 'selected' : '' }}>سيارة عادية</option>
                                                <option value="suv" {{ old('vehicle_type', $user->driver->vehicle_type ?? '') == 'suv' ? 'selected' : '' }}>سيارة رياضية</option>
                                                <option value="van" {{ old('vehicle_type', $user->driver->vehicle_type ?? '') == 'van' ? 'selected' : '' }}>فان</option>
                                                <option value="motorcycle" {{ old('vehicle_type', $user->driver->vehicle_type ?? '') == 'motorcycle' ? 'selected' : '' }}>دراجة نارية</option>
                                            </select>
                                        </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', $user->driver->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', $user->driver->is_available ?? '') == '1' ? 'selected' : '' }}>نعم</option>
                                                <option value="0" {{ old('is_available', $user->driver->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');
    const driverInfo = document.getElementById('driver_info');
    const form = document.getElementById('editUserForm');
    const submitBtn = document.getElementById('submitBtn');

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

    // اختبار CSRF Token و Method Field
    const csrfToken = document.querySelector('input[name="_token"]');
    const methodField = document.querySelector('input[name="_method"]');

    console.log('CSRF Token موجود:', !!csrfToken);
    if (csrfToken) {
        console.log('CSRF Token value:', csrfToken.value);
    }

    console.log('Method Field موجود:', !!methodField);
    if (methodField) {
        console.log('Method Field value:', methodField.value);
    }

    function toggleDriverInfo() {
        const licenseNumberField = document.getElementById('license_number');

        if (userTypeSelect.value === 'driver') {
            driverInfo.style.display = 'block';
            if (licenseNumberField) {
                licenseNumberField.required = true;
            }
        } else {
            driverInfo.style.display = 'none';
            if (licenseNumberField) {
                licenseNumberField.required = false;
            }
        }
    }

    // تحميل المدن عند اختيار المحافظة
    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);
                    });
            }
        });

        // تحميل المدن عند تحميل الصفحة إذا كانت المحافظة محددة
        const currentGovernorateId = governorateSelect.value;
        if (currentGovernorateId) {
            fetch(`/admin/cities/by-governorate?governorate_id=${currentGovernorateId}`)
                .then(response => response.json())
                .then(cities => {
                    cities.forEach(city => {
                        const option = document.createElement('option');
                        option.value = city.id;
                        option.textContent = city.name_ar;
                        if (city.id == {{ $user->city_id ?? 'null' }}) {
                            option.selected = true;
                        }
                        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);

            // التحقق من صحة البيانات قبل الإرسال
            if (userTypeSelect.value === 'driver') {
                const licenseNumber = document.getElementById('license_number');
                if (licenseNumber && !licenseNumber.value.trim()) {
                    e.preventDefault();
                    alert('يرجى إدخال رقم رخصة القيادة للسائق');
                    return false;
                }
            }

            // إظهار رسالة تأكيد وتعطيل الزر
            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 : 'غير موجود'
    });

    // اختبار البيانات الحالية للمستخدم
    console.log('بيانات المستخدم الحالية:', {
        id: {{ $user->id }},
        name: '{{ $user->name }}',
        email: '{{ $user->email }}',
        user_type: '{{ $user->user_type }}',
        status: '{{ $user->status }}',
        hasDriver: {{ $user->driver ? 'true' : 'false' }}
    });
});
</script>
@endpush