@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.formscss')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .user-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem;
            border: 1px solid #eee;
            border-radius: 8px;
            margin-bottom: 0.5rem;
        }
        .user-info { display: flex; align-items: center; }
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #6c757d;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 1rem;
            font-weight: bold;
        }
        .select2-container { width: 100% !important; }
    </style>
@endsection

@include('admin.helper.tittle', ['title' => 'تفعيل الميزة للمستخدمين: ' . $featureFlag->name])

@section('content')
    <div id='pageid'>
        <div>
            <div class="row">
                <div class="col-md-12 col-xl-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h4 class="card-title mb-0">{{ $featureFlag->name }}</h4>
                            <a href="{{ route('admin.feature-flags.index') }}" class="btn btn-secondary btn-sm">
                                <x-lucide-arrow-right width="20" height="20" /> رجوع للقائمة
                            </a>
                        </div>
                        <div class="card-body">
                            <p class="text-muted">{{ $featureFlag->description }}</p>
                            <div class="d-flex gap-2">
                                @if($featureFlag->is_active)
                                    <span class="badge badge-success">مفعل</span>
                                @else
                                    <span class="badge badge-danger">معطل</span>
                                @endif
                                @if($featureFlag->activate_for_everyone)
                                    <span class="badge badge-info">للجميع</span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header">
                            <h4 class="card-title">تفعيل لمستخدم محدد</h4>
                        </div>
                        <div class="card-body">
                            <form id="activate-user-form">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-8 col-12">
                                        <label class="form-label">ابحث عن مستخدم</label>
                                        <select id="user-search" name="user_id" class="form-control">
                                            <option value="">ابحث بالاسم أو البريد أو الهاتف أو ID</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-4 col-12 d-flex align-items-end">
                                        <button type="submit" class="btn btn-primary w-100">
                                            <x-lucide-plus width="20" height="20" /> تفعيل للمستخدم
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header">
                            <h4 class="card-title">المستخدمين المفعل لهم الميزة ({{ $activatedUsers->count() }})</h4>
                        </div>
                        <div class="card-body">
                            @if($activatedUsers->isEmpty())
                                <div class="text-center text-muted py-4">
                                    <x-lucide-users width="48" height="48" class="mb-3" />
                                    <p>لا يوجد مستخدمين مفعل لهم هذه الميزة بشكل خاص</p>
                                </div>
                            @else
                                <div id="activated-users-list">
                                    @foreach($activatedUsers as $user)
                                        <div class="user-card" data-user-id="{{ $user->id }}">
                                            <div class="user-info">
                                                <div class="user-avatar">
                                                    {{ mb_substr($user->name, 0, 1) }}
                                                </div>
                                                <div>
                                                    <strong>{{ $user->name }}</strong>
                                                    <br>
                                                    <small class="text-muted">
                                                        {{ $user->email }} | {{ $user->phone }} | ID: {{ $user->id }}
                                                    </small>
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-danger btn-sm deactivate-btn" 
                                                    data-user-id="{{ $user->id }}" data-user-name="{{ $user->name }}">
                                                <x-lucide-x width="20" height="20" /> إلغاء التفعيل
                                            </button>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.formscripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(function() {
            // Initialize Select2 for user search
            $('#user-search').select2({
                placeholder: 'ابحث بالاسم أو البريد أو الهاتف أو ID',
                allowClear: true,
                minimumInputLength: 2,
                ajax: {
                    url: '{{ route('admin.feature-flags.users.search', $featureFlag->id) }}',
                    dataType: 'json',
                    delay: 300,
                    data: function(params) {
                        return { q: params.term };
                    },
                    processResults: function(data) {
                        return {
                            results: data.map(function(user) {
                                return {
                                    id: user.id,
                                    text: `${user.name} (${user.email}) - ID: ${user.id}`
                                };
                            })
                        };
                    }
                }
            });

            // Activate user form
            $('#activate-user-form').on('submit', function(e) {
                e.preventDefault();
                const userId = $('#user-search').val();
                if (!userId) {
                    Swal.fire('تنبيه', 'يرجى اختيار مستخدم', 'warning');
                    return;
                }
                
                Swal.showLoading();
                $.ajax({
                    url: '{{ route('admin.feature-flags.users.activate', $featureFlag->id) }}',
                    type: 'POST',
                    data: {
                        '_token': '{{ csrf_token() }}',
                        'user_id': userId
                    },
                    success: function(response) {
                        Swal.fire('تم!', response.message || 'تم تفعيل الميزة للمستخدم', 'success')
                            .then(() => location.reload());
                    },
                    error: function(xhr) {
                        Swal.fire('خطأ!', xhr.responseJSON?.message || 'حدث خطأ', 'error');
                    }
                });
            });

            // Deactivate user
            $(document).on('click', '.deactivate-btn', function() {
                const userId = $(this).data('user-id');
                const userName = $(this).data('user-name');
                
                Swal.fire({
                    title: `إلغاء تفعيل الميزة للمستخدم: ${userName}؟`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'نعم، إلغاء التفعيل',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.showLoading();
                        $.ajax({
                            url: '{{ route('admin.feature-flags.users.deactivate', $featureFlag->id) }}',
                            type: 'POST',
                            data: {
                                '_token': '{{ csrf_token() }}',
                                'user_id': userId
                            },
                            success: function(response) {
                                Swal.fire('تم!', response.message || 'تم إلغاء تفعيل الميزة', 'success')
                                    .then(() => location.reload());
                            },
                            error: function(xhr) {
                                Swal.fire('خطأ!', xhr.responseJSON?.message || 'حدث خطأ', 'error');
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection