@extends('admin.layouts.master')

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

@section('title', 'نِسَب التجار على المنتجات')

@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 pb-0">
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label">اختر التاجر</label>
                            <select id="vendor_id" class="form-control select2">
                                <option value="" selected>— اختر تاجر —</option>
                                @foreach($vendors as $v)
                                    <option value="{{ $v->id }}">{{ $v->user->name }} (ID: {{ $v->id }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">اللعبة</label>
                            <select 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>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    <script>
        $(function () {
            $('.select2').select2();
            const cols = ['id', 'name', 'price', 'percent', 'game', 'action'];
            var table = $('#products').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                autoWidth: false,
                ajax: {
                    url: "{{ route('admin.vendors.products.table') }}",
                    data: function (d) {
                        d.vendor_id = $('#vendor_id').val();
                        d.game_id = $('#game_id').val();
                    }
                },
                columns: cols.map(c => ({ data: c }))
            });

            $('#vendor_id, #game_id').change(function () {
                table.draw();
            });
        });
    </script>
@endsection