@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.tablecss')
@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>
            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header pb-0">
                            <div class="d-flex justify-content-between">
                                <h2 class="card-title mg-b-0"> المنتجات </h2>
                            </div>

                            <div class="row">
                                <div class="col-lg-4 mt-2">
                                    <p class="mt-0"> لعبه </p>
                                    <select name="game_id" id='game_id' class="form-control select2">
                                        <option value="" selected> اختر لعبه </option>
                                        @foreach (\App\Models\Game::get() as $game)
                                            <option value="{{ $game->id }}">{{ $game->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                            </div>

                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table text-md-nowrap" id="products">
                                    <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>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

{{-- 'is_package',
'package',
'min_value',
'max_value', --}}
@section('js')
    @include('admin.helper.tablescripts')
    @include('vue')
    <script>
        $(function() {
            $('.select2').select2()
            const tablehead = ['id', 'name', 'price', 'old_price_col', 'redenomination_at_col', 'type',
                'bundleInfo', 'game', 'storage', 'status', 'action'
            ]
            var table = $('#products').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                autoWidth: false,
                ajax: {
                    url: "{{ route('admin.products.index') }}",
                    data: function(d) {
                        d.game_id = $('#game_id').val()
                    }

                },
                columns: tablehead.map(element => ({
                    data: element
                })),

            });
            $('#game_id').change(function() {
                table.draw();
            });
            $('#products 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.products.delete') }}', data)
                        $('#products').DataTable().draw();
                    }
                })
            });
            const URL = '{{ route('admin.products.changestatus') }}';
            const TOKEN = '{{ csrf_token() }}'; // كل الأنواع المسموح بيها (لو عايز تمنع أي تايب غريب)
            const ALLOWED_TYPES = [
                'isActive',
                'isVisible',
                'isPrivate',
                'isCard',
            ]; // هاندلر واحد لكل الأزرار
            $('#products 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(() => {
                            $('#products').DataTable().ajax.reload(null,
                                false); // من غير ما يرجع لأول صفحة
                            Swal.close();
                        })
                        .catch(() => {
                            Swal.fire('خطأ', 'حدث خطأ أثناء الحفظ', 'error');
                        });
                });
            });
        });
    </script>
@endsection