@extends('admin.layouts.master')

@section('title', 'إدارة أسعار الأرباح')

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

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3 class="card-title mb-0">إدارة أسعار الأرباح</h3>
                        @if(can_admin('profits_view'))
                        <a href="{{ route('admin.profitrate.create') }}" class="btn btn-primary">
                            <x-lucide-plus width="20" height="20" />
                            إضافة سعر ربح
                        </a>
                        @endif
                    </div>
                    <div class="card-body">
                        <div class="row g-3 mb-4">
                            <div class="col-md-4">
                                <label for="game_idFilter" class="form-label">اللعبة</label>
                                <select id="game_idFilter" class="form-control select2" name="game_id">
                                    <option value="">كل الألعاب</option>
                                    @foreach ($games as $game)
                                        <option value="{{ $game->id }}">{{ $game->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="product_idFilter" class="form-label">المنتج</label>
                                <select id="product_idFilter" class="form-control select2" name="product_id">
                                    <option value="" selected>كل المنتجات</option>
                                </select>
                            </div>
                            <div class="col-md-2 align-self-end">
                                <button type="button" id="refreshFilters" class="btn btn-outline-secondary w-100">
                                    <x-lucide-refresh-cw width="20" height="20" />
                                    تحديث
                                </button>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table id="profitRateTable" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>اللعبة</th>
                                        <th>المنتج</th>
                                        @foreach (config('app.rates') as $rate)
                                            <th>{{ $rate }}</th>
                                        @endforeach
                                        <th>تاريخ الإنشاء</th>
                                        <th>الإجراءات</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('admin.helper.requfilter')
    @include('vue')
    <script>
        $(function() {
            $('.select2').select2({
                theme: 'bootstrap4',
                width: '100%'
            });

            const tablehead = ['id', 'game_name', 'product_name', 'one', 'two', 'three', 'four', 'five', 'six',
                'seven', 'created_at', 'action'
            ];

            const table = initUrlSyncedDatatable({
                selector: '#profitRateTable',
                url: "{{ route('admin.profitrate.index') }}",
                columns: tablehead,
                extraOptions: {
                    pageLength: 10,
                    lengthMenu: [
                        [10, 50, 100, 200, -1],
                        [10, 50, 100, 200, 'الكل']
                    ],
                    language: {
                        lengthMenu: 'عرض _MENU_ عنصر في الصفحة',
                        info: 'عرض _START_ إلى _END_ من _TOTAL_ عنصر',
                        infoEmpty: 'لا توجد عناصر للعرض',
                        infoFiltered: '(تم التصفية من _MAX_ عنصر إجمالي)',
                        paginate: {
                            first: 'الأول',
                            last: 'الأخير',
                            next: 'التالي',
                            previous: 'السابق'
                        }
                    }
                },
                filters: ['game_id', 'product_id'],
                refreshSelector: '#refreshFilters',
                redrawDebounce: 200,
            });

            $('#profitRateTable tbody').on('click', '.delete', function() {
                const value = $(this).attr('value');
                Swal.fire({
                    title: 'هل أنت متأكد من الحذف؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'نعم، احذف!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        const data = {
                            '_token': "{{ csrf_token() }}",
                            'id': value,
                        };
                        Swal.showLoading();
                        adawe('{{ route('admin.profitrate.delete') }}', data);
                        $('#profitRateTable').DataTable().draw();
                    }
                });
            });
        });
    </script>
@endsection