@extends('admin.layouts.master')

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

@section('title', 'رفع درجة مستخدم إلى تاجر')

@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>
                <span class="text-muted mt-1 tx-13 mr-2 mb-0">/ إدارة التجار</span>
                <span class="text-muted mt-1 tx-13 mr-2 mb-0">/ رفع درجة مستخدم إلى تاجر</span>
            </div>
        </div>
        <div class="d-flex my-xl-auto right-content">
            <div class="pr-1 mb-3 mb-xl-0">
                <a href="{{ route('admin.vendors.index') }}" class="btn btn-secondary btn-sm">
                    <x-lucide-arrow-right class="me-2" width="20" height="20" />العودة للقائمة
                </a>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-8 col-xl-8 col-md-12 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">رفع درجة مستخدم إلى تاجر</h4>
                    <p class="card-text">اختر مستخدماً لرفع درجته إلى تاجر وتحديد صلاحياته</p>
                </div>
                <div class="card-body">
                    @if ($users->count() > 0)
                        <form action="{{ route('admin.vendors.store') }}" method="POST">
                            @csrf

                            <!-- اختيار المستخدم -->
                            <div class="form-group">
                                <label for="user_id" class="form-label">اختيار المستخدم <span
                                        class="text-danger">*</span></label>
                                <select name="user_id" id="user_id" class="form-control select2" required>
                                    <option value="">-- اختر مستخدماً --</option>
                                    @foreach ($users as $user)
                                        <option value="{{ $user->id }}"
                                            {{ old('user_id') == $user->id ? 'selected' : '' }}>
                                            {{ $user->name }} - {{ $user->email }}
                                            @if ($user->mobile)
                                                - {{ $user->mobile }}
                                            @endif
                                            (الرصيد: {{ number_format($user->balance, 2) }}
                                            {{ $user->currency->name ?? '' }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('user_id')
                                    <div class="text-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- الصلاحيات -->
                            <div class="form-group">
                                <label class="form-label">صلاحيات التاجر</label>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input type="checkbox" name="canDisable" id="canDisable"
                                                class="form-check-input" value="1"
                                                {{ old('canDisable') ? 'checked' : '' }}>
                                            <label for="canDisable" class="form-check-label">
                                                <strong>تعطيل المستخدمين</strong>
                                                <br><small class="text-muted">السماح للتاجر بتعطيل المستخدمين التابعين
                                                    له</small>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input type="checkbox" name="canAdduser" id="canAdduser"
                                                class="form-check-input" value="1"
                                                {{ old('canAdduser') ? 'checked' : '' }}>
                                            <label for="canAdduser" class="form-check-label">
                                                <strong>إضافة مستخدمين</strong>
                                                <br><small class="text-muted">السماح للتاجر بإضافة مستخدمين جدد</small>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mt-2">
                                        <div class="form-check">
                                            <input type="checkbox" name="canPostAds" id="canPostAds"
                                                class="form-check-input" value="1"
                                                {{ old('canPostAds') ? 'checked' : '' }}>
                                            <label for="canPostAds" class="form-check-label">
                                                <strong>نشر الإعلانات</strong>
                                                <br><small class="text-muted">السماح للتاجر بإضافة/تعديل/حذف صور
                                                    الإعلانات</small>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- أزرار الإجراءات -->
                            <div class="form-group mt-4">
                                <button type="submit" class="btn btn-success">
                                    <x-lucide-user-check class="me-2" width="20" height="20" />رفع إلى تاجر
                                </button>
                                <a href="{{ route('admin.vendors.index') }}" class="btn btn-secondary">
                                    <x-lucide-x class="me-2" width="20" height="20" />إلغاء
                                </a>
                            </div>
                        </form>
                    @else
                        <div class="text-center py-5">
                            <x-lucide-info class="text-info mb-3" width="48" height="48" />
                            <h5 class="text-info">لا توجد مستخدمين متاحين</h5>
                            <p class="text-muted">جميع المستخدمين في النظام هم تجار بالفعل أو لا توجد مستخدمين</p>
                            <a href="{{ route('admin.vendors.index') }}" class="btn btn-primary">
                                <x-lucide-arrow-right class="me-2" width="20" height="20" />العودة للقائمة
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- معلومات إضافية -->
        <div class="col-lg-4 col-xl-4 col-md-12 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">معلومات مهمة</h4>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h6><x-lucide-info class="me-2" width="20" height="20" />ماذا يعني رفع المستخدم إلى تاجر؟</h6>
                        <ul class="mb-0">
                            <li>سيتم تعيين المستخدم كتاجر في النظام</li>
                            <li>سيحصل على صلاحيات إدارة المستخدمين التابعين له</li>
                            <li>يمكنه الحصول على عمولات من العمليات</li>
                        </ul>
                    </div>

                    <div class="alert alert-warning">
                        <h6><x-lucide-triangle-alert class="me-2" width="20" height="20" />الصلاحيات المتاحة:</h6>
                        <ul class="mb-0">
                            <li><strong>تعطيل المستخدمين:</strong> يمكن للتاجر تعطيل حسابات المستخدمين التابعين</li>
                            <li><strong>إضافة مستخدمين:</strong> يمكن للتاجر إضافة مستخدمين جدد تحت إدارته</li>
                        </ul>
                    </div>

                    <div class="alert alert-success">
                        <h6><x-lucide-trending-up class="me-2" width="20" height="20" />إحصائيات سريعة:</h6>
                        <ul class="mb-0">
                            <li>عدد التجار الحاليين: <strong>{{ \App\Models\Vendor\Vendor::count() }}</strong></li>
                            <li>عدد المستخدمين المتاحين: <strong>{{ $users->count() }}</strong></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.formscripts')
    <script>
        $(document).ready(function() {
            // Initialize Select2
            $('.select2').select2({
                placeholder: "-- اختر مستخدماً --",
                allowClear: true,
                language: {
                    noResults: function() {
                        return "لا توجد نتائج";
                    },
                    searching: function() {
                        return "جاري البحث...";
                    }
                }
            });

            // Show user details when selected
            $('#user_id').on('change', function() {
                const selectedOption = $(this).find('option:selected');
                if (selectedOption.val()) {
                    // يمكن إضافة عرض تفاصيل إضافية للمستخدم المحدد هنا
                }
            });
        });
    </script>
@endsection