@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.tablecss') {{-- formscss removed: no rich editors needed --}}
@endsection
@section('page-header')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title my-auto mb-0"> مزامنة الاسعار </h4>
            </div>
        </div>
    </div>
@endsection
@section('content')
    <div id='asyncPriceApp'>
        <div class="row">
            <div class="col-md-12 justify-content-center">
                <form id='new-prod' enctype="multipart/form-data">
                    @csrf
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-4 mt-2">
                                    <label> الالعاب </label>
                                    <select class="form-control select2" name='game_id' id="game_idFilter"
                                        style="width: 100%;height:45px">
                                        <option selected value=" ">اختر </option>
                                        @foreach (\App\Models\Game::all() as $us)
                                            <option value="{{ $us->id }}"> {{ $us->name }} </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-4 mt-2">
                                    <label> المنتجات </label>
                                    <select class="form-control select2" name='product_id' id="product_idFilter"
                                        style="width: 100%;height:45px" required>
                                        <option selected value=" "> اختر </option>
                                    </select>
                                </div>
                                <div class="col-lg-4 mt-2">
                                    <p>المزود</p>
                                    <select name="site_id"
                                        class="form-control select2 @error('site_id') is-invalid @enderror" required>
                                        <option value="">اختر موقع</option>
                                        @foreach ($sites as $site)
                                            <option value="{{ $site->id }}">{{ $site->admin_name }}</option>
                                        @endforeach
                                    </select>

                                </div>
                                <div class="col-lg-4 mt-2">
                                    <p>المنتج الخارجي</p>
                                    <select name="external_id"
                                        class="form-control select2 @error('external_id') is-invalid @enderror" required>
                                    </select>

                                </div>
                                <div class="col-lg-4 mt-2">
                                    <p> اختيار المزامنه </p>
                                    <select name="type" class="form-control select2 @error('type') is-invalid @enderror"
                                        required>
                                        <option value="price_only">سعر فقط</option>
                                        <option value="execution_only">تشغيل فقط</option>
                                        <option value="price_and_execution">سعر وتشغيل</option>
                                    </select>

                                </div>
                                <div class="col-lg-4 mt-2">
                                    <p>العدد</p>
                                    <input name="count" class="form-control @error('count') is-invalid @enderror"
                                        value="1" required />
                                </div>
                                <div class="col-lg-4 mt-2">
                                    <p>مزامنة الحالة تلقائياً</p>
                                    <select name="is_sync_status" class="form-control select2">
                                        <option value="0" selected>لا</option>
                                        <option value="1">نعم</option>
                                    </select>
                                    <small class="text-muted">هل تريد تفعيل/إيقاف المنتج تلقائياً عند توفر/عدم توفر المنتج
                                        الخارجي؟</small>
                                </div>
                                <div class="col-lg-4 mt-2">
                                    <p>حالة النشاط</p>
                                    <select name="is_active" class="form-control select2">
                                        <option value="1" selected>نشط</option>
                                        <option value="0">غير نشط</option>
                                    </select>
                                </div>
                            </div>
                            <div class="text-center">
                                <button type="button" id="saveBtn" class="btn btn-primary mt-3">حفظ</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="row">
                            @include('admin.filters.gaproduct')
                            <div class="col-lg-4 mt-2">
                                <label>المزود</label>
                                <select id="siteFilter" class="form-control select2" style="width: 100%;height:45px">
                                    <option selected value="">اختر موقع</option>
                                    @foreach ($sites as $site)
                                        <option value="{{ $site->id }}">{{ $site->admin_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <button type="button" id="refresh" class="btn btn-primary mt-3"> تحديث المنتجات </button>
                        <button type="button" id="refreshprice" class="btn btn-primary mt-3"> تحديث الاسعار </button>
                        <h4 class="card-title"> الاسعار المزامنة </h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table" id="prices">
                                <thead>
                                    <tr>
                                        <th>ID</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>
@endsection
@section('js')
    @include('admin.helper.tablescripts') {{-- formscripts removed: DataTable + select2 only --}}
    @include('vue')
    @include('admin.helper.requfilter')
    <script>
        $(function() {
            const tablehead = ['id', 'product_name', 'site_name', 'external_product', 'external_price', 'type',
                'is_sync_status', 'is_active', 'count', 'action'
            ]

            const filterdata = ['game', 'product', 'site']
            const table = initDatatable(
                '#prices',
                "{{ route('admin.external-sites.async.index') }}",
                tablehead, {},
                filterdata
            );


            $('#gameFilter, #productFilter, #siteFilter, #refresh').on(
                'keyup change click',
                function() {
                    table.draw();
                });


            // عند النقر على زر تحديث المنتجات
            $('#refresh').on('click', function() {
                ajaxx("{{ route('admin.external-sites.async.getExternalProducts') }}", () => {
                    table.draw();
                });
            });

            // عند النقر على زر تحديث الاسعار
            $('#refreshprice').on('click', function() {
                ajaxx("{{ route('admin.external-sites.async.update-prices') }}", () => {
                    table.draw();
                });
            });

            // تفعيل Select2
            $('.select2').select2();

            // عند تغيير الموقع، جلب المنتجات الخارجية عبر AJAX
            $('select[name="site_id"]').on('change', function() {
                let siteId = $(this).val();
                $.ajax({
                    url: "{{ route('admin.external-sites.async.getExternalProductForSite') }}",
                    type: "GET",
                    data: {
                        site_id: siteId
                    },
                    success: function(data) {
                        let externalSelect = $('select[name="external_id"]');
                        externalSelect.empty();
                        $.each(data, function(index, item) {
                            externalSelect.append(new Option(item.name || item
                                .product_name, item
                                .id || item.product_id));
                        });
                    }
                });
            });
            // حذف البيانات عند النقر على زر الحذف
            $('#prices').on('click', '.delete', function() {
                var value = $(this).attr("value");

                Swal.fire({
                    title: 'هل أنت متأكد؟',
                    text: "لن تتمكن من التراجع عن هذا!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'نعم، احذف!'
                }).then((result) => {
                    data = {
                        id: value
                    }
                    if (result.isConfirmed) {
                        adawe('{{ route('admin.external-sites.async.delete') }}', data)
                        table.draw();
                    }
                });
            });

            $('#saveBtn').on('click', function() {
                let formData = $('#new-prod').serialize();
                adawe("{{ route('admin.external-sites.async.store') }}", formData)
                table.draw();
            });
        });

        // عند النقر على زر الحفظ
    </script>
@endsection