@extends('admin.layouts.master')

@section('title', 'تخصيص الألعاب والمنتجات للموظفين')

@section('css')
    @include('admin.helper.formscss') {{-- Removed tablecss: no DataTable used on this page --}}
    <style>
        .permission-card {
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .permission-item {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .game-section {
            margin-bottom: 30px;
            border: 1px solid #e3e6f0;
            border-radius: 8px;
            padding: 20px;
        }

        .add-form {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
    </style>
@endsection

@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>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">تخصيص الألعاب والمنتجات للموظفين</h3>
                    <p class="text-muted mb-0">يمكنك تحديد الألعاب والمنتجات التي يمكن لكل موظف الوصول إليها</p>
                </div>
                <div class="card-body">

                    <!-- قسم إضافة صلاحية جديدة -->
                    <div class="add-form">
                        <h5 class="mb-3"><x-lucide-plus-circle width="20" height="20" class="text-success" /> إضافة صلاحية جديدة</h5>
                        <form id="addPermissionForm">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="admin_id">الموظف <span class="text-danger">*</span></label>
                                        <select class="form-control select2" id="admin_id" name="admin_id" required>
                                            <option value="">اختر الموظف</option>
                                            @foreach ($admins as $admin)
                                                <option value="{{ $admin->id }}">{{ $admin->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="game_id">اللعبة <span class="text-danger">*</span></label>
                                        <select class="form-control select2" id="game_id" name="game_id" required>
                                            <option value="">اختر اللعبة</option>
                                            <option value="all">جميع الألعاب</option>
                                            @foreach ($games as $game)
                                                <option value="{{ $game->id }}">{{ $game->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="product_id">المنتج</label>
                                        <select class="form-control select2" id="product_id" name="product_id">
                                            <option value="">جميع منتجات اللعبة</option>
                                        </select>
                                        <small class="text-muted">اتركه فارغاً للسماح بجميع منتجات اللعبة</small>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>&nbsp;</label>
                                        <div>
                                            <button type="submit" class="btn btn-success btn-block">
                                                <x-lucide-plus width="20" height="20" /> إضافة
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- قسم عرض الصلاحيات الحالية -->
                    <div class="permission-card">
                        <h5 class="mb-3"><x-lucide-list width="20" height="20" class="text-primary" /> الصلاحيات الحالية</h5>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="view_admin_id">عرض صلاحيات الموظف:</label>
                                    <select class="form-control select2" id="view_admin_id">
                                        <option value="">اختر موظفاً لعرض صلاحياته</option>
                                        @foreach ($admins as $admin)
                                            <option value="{{ $admin->id }}">{{ $admin->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <div>
                                        <button type="button" class="btn btn-info" id="loadPermissionsBtn">
                                            <x-lucide-search width="20" height="20" /> عرض الصلاحيات
                                        </button>
                                        <button type="button" class="btn btn-warning" id="clearViewBtn">
                                            <x-lucide-eraser width="20" height="20" /> مسح العرض
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="permissionsContainer">
                            <div class="text-center text-muted py-4">
                                <x-lucide-info width="32" height="32" class="mb-2" />
                                <p>اختر موظفاً لعرض صلاحياته</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.formscripts') {{-- Removed tablescripts: no DataTable initialization --}}
    @include('vue')

    <script>
        $(document).ready(function() {
            // تهيئة Select2
            $('.select2').select2();

            // تحميل المنتجات عند اختيار لعبة
            $('#game_id').change(function() {
                var gameId = $(this).val();
                $('#product_id').empty().append('<option value="">جميع منتجات اللعبة</option>');

                if (gameId === 'all') {
                    // إخفاء المنتجات عند اختيار جميع الألعاب
                    $('#product_id').prop('disabled', true);
                } else {
                    $('#product_id').prop('disabled', false);
                    if (gameId) {
                        $.get("{{ route('admin.employee.products-by-game') }}", {
                            game_id: gameId
                        }, function(data) {
                            $.each(data.products, function(key, product) {
                                $('#product_id').append('<option value="' + product.id + '">' +
                                    product.name + '</option>');
                            });
                        });
                    }
                }
            });

            // إضافة صلاحية جديدة
            $('#addPermissionForm').submit(function(e) {
                e.preventDefault();

                var adminId = $('#admin_id').val();
                var gameId = $('#game_id').val();
                var productId = $('#product_id').val() || null;

                if (gameId === 'all') {
                    // تجميع كل IDs الألعاب وإرسالها دفعة واحدة
                    var gameIds = [];
                    $('#game_id option').each(function() {
                        if (this.value && this.value !== 'all') {
                            gameIds.push(this.value);
                        }
                    });

                    $.post("{{ route('admin.employee.bulk-add-permission') }}", {
                        _token: '{{ csrf_token() }}',
                        admin_id: adminId,
                        game_ids: gameIds
                    })
                    .done(function(response) {
                        if (response.error) {
                            Swal.fire('خطأ!', response.message, 'error');
                        } else {
                            Swal.fire('تم!', response.message, 'success');
                            $('#addPermissionForm')[0].reset();
                            $('.select2').val(null).trigger('change');
                            $('#product_id').empty().append('<option value="">جميع منتجات اللعبة</option>');
                            $('#product_id').prop('disabled', false);

                            var currentViewAdmin = $('#view_admin_id').val();
                            if (currentViewAdmin == adminId) {
                                loadAdminPermissions(currentViewAdmin);
                            }
                        }
                    })
                    .fail(function(xhr) {
                        var message = xhr.responseJSON?.message || 'حدث خطأ أثناء حفظ البيانات';
                        Swal.fire('خطأ!', message, 'error');
                    });
                } else {
                    // إضافة صلاحية للعبة واحدة
                    var formData = {
                        _token: '{{ csrf_token() }}',
                        admin_id: adminId,
                        game_id: gameId,
                        product_id: productId
                    };

                    $.post("{{ route('admin.employee.add-permission') }}", formData)
                        .done(function(response) {
                            if (response.error) {
                                Swal.fire('خطأ!', response.message, 'error');
                            } else {
                                Swal.fire('نجح!', response.message, 'success');
                                $('#addPermissionForm')[0].reset();
                                $('.select2').val(null).trigger('change');
                                $('#product_id').empty().append(
                                    '<option value="">جميع منتجات اللعبة</option>');

                                // تحديث العرض إذا كان نفس الموظف محدد
                                var currentViewAdmin = $('#view_admin_id').val();
                                if (currentViewAdmin == formData.admin_id) {
                                    loadAdminPermissions(currentViewAdmin);
                                }
                            }
                        })
                        .fail(function(xhr) {
                            var message = xhr.responseJSON?.message || 'حدث خطأ أثناء حفظ البيانات';
                            Swal.fire('خطأ!', message, 'error');
                        });
                }
            });

            // تحميل صلاحيات الموظف
            $('#loadPermissionsBtn').click(function() {
                var adminId = $('#view_admin_id').val();
                if (!adminId) {
                    Swal.fire('تنبيه!', 'يرجى اختيار موظف أولاً', 'warning');
                    return;
                }
                loadAdminPermissions(adminId);
            });

            // مسح العرض
            $('#clearViewBtn').click(function() {
                $('#view_admin_id').val(null).trigger('change');
                $('#permissionsContainer').html(`
                    <div class="text-center text-muted py-4">
                        <x-lucide-info width="32" height="32" class="mb-2" />
                        <p>اختر موظفاً لعرض صلاحياته</p>
                    </div>
                `);
            });

            // تحميل الصلاحيات عند تغيير الموظف
            $('#view_admin_id').change(function() {
                var adminId = $(this).val();
                if (adminId) {
                    loadAdminPermissions(adminId);
                } else {
                    $('#permissionsContainer').html(`
                        <div class="text-center text-muted py-4">
                            <x-lucide-info width="32" height="32" class="mb-2" />
                            <p>اختر موظفاً لعرض صلاحياته</p>
                        </div>
                    `);
                }
            });

            // دالة تحميل صلاحيات الموظف
            function loadAdminPermissions(adminId) {
                $('#permissionsContainer').html(
                    `<div class="text-center py-4">{!! svg("lucide-loader-2", ["class" => "animate-spin", "width" => 20, "height" => 20])->toHtml() !!} جاري التحميل...</div>`
                );

                $.get("{{ route('admin.employee.admin-permissions') }}", {
                        admin_id: adminId
                    })
                    .done(function(response) {
                        displayPermissions(response.permissions, adminId);
                    })
                    .fail(function() {
                        $('#permissionsContainer').html(
                            '<div class="alert alert-danger">حدث خطأ أثناء تحميل البيانات</div>');
                    });
            }

            // دالة عرض الصلاحيات
            function displayPermissions(permissions, adminId) {
                if (permissions.length === 0) {
                    $('#permissionsContainer').html(`
                        <div class="alert alert-info text-center">
                            <x-lucide-info width="20" height="20" />
                            لا توجد صلاحيات محددة لهذا الموظف<br>
                            <small class="text-muted">(يمكنه الوصول لجميع الألعاب والمنتجات)</small>
                        </div>
                    `);
                    return;
                }

                // تجميع الصلاحيات حسب اللعبة
                var gameGroups = {};
                permissions.forEach(function(permission) {
                    if (!gameGroups[permission.game_id]) {
                        gameGroups[permission.game_id] = {
                            game_name: permission.game_name,
                            permissions: []
                        };
                    }
                    gameGroups[permission.game_id].permissions.push(permission);
                });

                var html = '';
                Object.keys(gameGroups).forEach(function(gameId) {
                    var group = gameGroups[gameId];
                    html += `
                        <div class="game-section">
                            <h6 class="mb-3">
                                <x-lucide-gamepad-2 width="20" height="20" class="text-primary" /> 
                                ${group.game_name}
                            </h6>
                    `;

                    group.permissions.forEach(function(permission) {
                        html += `
                            <div class="permission-item">
                                <div>
                                    <strong>${permission.product_name}</strong>
                                </div>
                                <button type="button" class="btn btn-danger btn-sm remove-permission" 
                                        data-admin="${adminId}" 
                                        data-game="${permission.game_id}" 
                                        data-product="${permission.product_id || ''}">
                                    <x-lucide-x width="20" height="20" /> إزالة
                                </button>
                            </div>
                        `;
                    });

                    html += '</div>';
                });

                $('#permissionsContainer').html(html);
            }

            // حذف صلاحية
            $(document).on('click', '.remove-permission', function() {
                var adminId = $(this).data('admin');
                var gameId = $(this).data('game');
                var productId = $(this).data('product') || null;
                var button = $(this);

                Swal.fire({
                    title: 'هل أنت متأكد؟',
                    text: 'سيتم إزالة هذه الصلاحية',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'نعم، قم بالإزالة',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.post("{{ route('admin.employee.remove-permission') }}", {
                                _token: '{{ csrf_token() }}',
                                admin_id: adminId,
                                game_id: gameId,
                                product_id: productId
                            })
                            .done(function(response) {
                                if (response.error) {
                                    Swal.fire('خطأ!', response.message, 'error');
                                } else {
                                    Swal.fire('تم!', response.message, 'success');
                                    loadAdminPermissions(adminId);
                                }
                            })
                            .fail(function() {
                                Swal.fire('خطأ!', 'حدث خطأ أثناء إزالة الصلاحية', 'error');
                            });
                    }
                });
            });
        });
    </script>
@endsection