@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.tablecss')
    <style>
        .hierarchy-level-0 {
            font-weight: bold;
        }

        .hierarchy-level-1 {
            padding-right: 20px;
        }

        .hierarchy-level-2 {
            padding-right: 40px;
        }

        .hierarchy-level-3 {
            padding-right: 60px;
        }

        .tree-icon {
            margin-right: 5px;
            font-size: 12px;
        }

        .game-name-cell {
            white-space: nowrap;
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .parent-game {
            background-color: #f8f9fa;
            border-left: 3px solid #007bff;
        }

        .child-game {
            background-color: #fafbfc;
            border-left: 2px solid #6c757d;
        }

        .badge-hierarchical {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }
    </style>
@endsection
@section('page-header')
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto"> الألعاب </h4>
            </div>
        </div>
    </div>
    <!-- breadcrumb -->
@endsection
@section('content')
    <!-- row -->
    <div id='gameId'>
        <div>

            {{-- FILTERS --}}
            <div class="row">
                <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">
                    <form id="filters">
                        <div class="card">
                            <div class="card-body">
                                <div class="main-content-label mg-b-5">
                                    تصفية البيانات
                                </div>

                                <div class="row row-sm">

                                    <div class="col-lg-3 mt-2">
                                        <label class="mt-0">اسم اللعبة</label>
                                        <input type="text" id="nameFilter" class="form-control" placeholder="بحث بالاسم">
                                    </div>
                                    <div class="col-lg-3 mt-2">
                                        <label class="mt-0">الأقسام </label>
                                        <select id="categoryFilter" class="form-control">
                                            <option value="">كل </option>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-lg-3 mt-2">
                                        <label class="mt-0">ألعملة </label>
                                        <select id="currencyFilter" class="form-control">
                                            <option value="">كل العملات</option>
                                            @foreach ($currencies as $currency)
                                                <option value="{{ $currency->id }}">{{ $currency->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-lg-3 mt-2">
                                        <label class="mt-0">الحالة </label>
                                        <select id="statusFilter" class="form-control">
                                            <option value="">كل الحالات</option>
                                            <option value="1">مفعل</option>
                                            <option value="0">معطل</option>
                                        </select>
                                    </div>

                                    <div class="col-lg-3 mt-2">
                                        <label class="mt-0">يدوي او اوتو </label>
                                        <select id="automaticFilter" class="form-control">
                                            <option value="">كل الحالات</option>
                                            <option value="1">يدوي</option>
                                            <option value="0">اوتو</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-3 mt-2">
                                        <label class="mt-0"> استعلام</label>
                                        <select id="inquiryFilter" class="form-control">
                                            <option value="">الكل</option>
                                            <option value="1">استعلام</option>
                                            <option value="0">بدون استعلام</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-3 mt-2">
                                        <label class="mt-0">اللعبة الأساسية</label>
                                        <select id="parentFilter" class="form-control">
                                            <option value="">كل الألعاب</option>
                                            <option value="root">الألعاب الأساسية فقط</option>
                                            @foreach ($parentGames as $parentGame)
                                                <option value="{{ $parentGame->id }}">{{ $parentGame->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-lg-3 mt-2">
                                        <label class="mt-0">السكريبت</label>
                                        <select id="scriptFilter" class="form-control">
                                            <option value="">كل السكريبتات</option>
                                            @foreach ($scripts as $script)
                                                <option value="{{ $script->id }}">{{ $script->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-lg-3 mt-2">
                                        <label class="mt-0">المستوى</label>
                                        <select id="levelFilter" class="form-control">
                                            <option value="">كل المستويات</option>
                                            <option value="0">المستوى الأول</option>
                                            <option value="1">المستوى الثاني</option>
                                            <option value="2">المستوى الثالث</option>
                                        </select>
                                    </div>

                                    <div class="col-lg-3 mt-2">
                                        <label class="mt-0">فلتر الربح</label>
                                        <select id="rateFilter" class="form-control">
                                            <option value="">الكل</option>
                                            <option value="1">يوجد ربح</option>
                                            <option value="0">بدون ربح</option>
                                        </select>
                                    </div>

                                </div>

                                <button type="reset" class="btn btn-secondary mt-3 mb-0" id="resetBtn">إعادة تعيين
                                    الفلاتر</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            {{-- FILTERS --}}

            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header pb-0">
                            <div class="d-flex justify-content-between">
                                <h4 class="card-title mg-b-0"> الألعاب </h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table text-md-nowrap" id="games">
                                    <thead>
                                        <tr>
                                            <th> ID</th>
                                            <th> الاسم (هيكلي) </th>
                                            <th> اللعبة الأساسية </th>
                                            <th> نوع اللعبة </th>
                                            <th> القسم </th>
                                            <th> العملة </th>
                                            <th> السكريبت </th>
                                            <th> عدد الأطفال </th>
                                            <th> ربح اللعبة </th>
                                            <th> الحالة </th>
                                            <th> الرؤية </th>
                                            <th> خاص </th>
                                            <th> تلقائي </th>
                                            <th> الإجراءات </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('vue')
    <script>
        $(function() {
            $(document).ready(function() {
                const tablehead = ['id', 'name_hierarchy', 'parent_name', 'game_type', 'category_name',
                    'currency_name', 'script_name', 'children_count', 'profit_rate_status', 'status',
                    'visibility', 'private',
                    'automatic',
                    'action'
                ]

                var table = $('#games').DataTable({
                    responsive: true,
                    processing: true,
                    serverSide: true,
                    autoWidth: false,
                    ajax: {
                        url: "{{ route('admin.games.index') }}",
                        data: function(d) {
                            d.name = $('#nameFilter').val();
                            d.category = $('#categoryFilter').val();
                            d.status = $('#statusFilter').val();
                            d.automatic = $('#automaticFilter').val();
                            d.currency = $('#currencyFilter').val();
                            d.inquiry = $('#inquiryFilter').val();
                            d.parent = $('#parentFilter').val();
                            d.script = $('#scriptFilter').val();
                            d.level = $('#levelFilter').val();
                                    d.rate = $('#rateFilter').val();
                        }
                    },
                    columns: tablehead.map(element => ({
                        data: element
                    })),
                    order: [
                        [0, "asc"]
                    ], // Sort by ID by default
                    pageLength: 10,
                    columnDefs: [{
                            orderable: false,
                            targets: [13]
                        }, // Actions column not sortable
                        {
                            className: "text-center",
                            targets: [3, 7, 8, 9, 10, 11, 12]
                        } // Center align status columns
                    ]
                });

                $('#nameFilter, #categoryFilter, #statusFilter, #automaticFilter, #currencyFilter, #inquiryFilter, #parentFilter, #scriptFilter, #levelFilter, #rateFilter')
                    .on('keyup change', function() {
                        table.draw();
                    });

                $('#resetBtn').click(function() {
                    $('#nameFilter, #categoryFilter, #statusFilter, #automaticFilter, #currencyFilter, #inquiryFilter, #parentFilter, #scriptFilter, #levelFilter, #rateFilter')
                        .val('');
                    table.draw();
                });
            });


            // حذف اللعبة
            $('#games tbody').on('click', '.delete', function() {
                var value = $(this).attr("value");
                Swal.fire({
                    title: 'هل أنت متأكد من حذف اللعبة؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'نعم، احذف!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        data = {
                            '_token': "{{ csrf_token() }}",
                            'id': value,
                        }
                        Swal.showLoading();
                        adawe(`{{ route('admin.games.delete', ':id') }}`.replace(':id', value),
                            data);
                        $('#games').DataTable().draw();
                    }
                })
            });
            const URL = '{{ route('admin.games.simplechange') }}';
            const TOKEN = '{{ csrf_token() }}'; // كل الأنواع المسموح بيها (لو عايز تمنع أي تايب غريب)
            const ALLOWED_TYPES = [
                'isActive',
                'isVisible',
                'isPrivate',
                'isAutomatic',
            ];

            // هاندلر واحد لكل الأزرار
            $('#games tbody').on('click', '.toggle', function() {
                const $btn = $(this);
                const id = $btn.data('id') || $btn.attr('value');
                const type = $btn.data('type') || $btn.attr('class').split(' ')[0];
                // لو فيه تايب مش مسموح بيه اخرج بدري
                if (!ALLOWED_TYPES.includes(type)) return;
                Swal.fire({
                    title: 'هل أنت متأكد من تغيير الحالة؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'نعم',
                    cancelButtonText: 'إلغاء',
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    // نافذة تحميل صغيرة
                    Swal.fire({
                        title: 'جارٍ التغيير...',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading(),
                    });

                    // الطلب AJAX (الدالة adawe بتاعتك)
                    adawe(URL, {
                            _token: TOKEN,
                            id,
                            type
                        })
                        .then(() => {
                            $('#games').DataTable().ajax.reload(null,
                                false); // من غير ما يرجع لأول صفحة
                            Swal.close();
                        })
                        .catch(() => {
                            Swal.fire('خطأ', 'حدث خطأ أثناء الحفظ', 'error');
                        });
                });
            });



        });
    </script>
@endsection