@extends('admin.layouts.master')
@section('css')
    {{-- Use lightweight form assets (no DataTables needed here) --}}
    @include('admin.helper.formscss')
@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='blogId'>
        <div>

            <div class="row">
                <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">

                    <form id='newuser'>
                        <div class="card">
                            <div class="card-body">
                                <div class="main-content-label mg-b-5">
                                    اضافة كود منتج
                                </div>
                                <div class="row row-sm"> @include('admin.filters.games') <div class="row" id="products">
                                    </div>
                                    <!-- Remove the single code input as we now have multiple inputs -->
                                </div>
                                <button type="submit" class="btn btn-primary mt-3 mb-0"> إضافة </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>



            <!-- row closed -->
        </div>
        <!-- Container closed -->
    </div>
    <!-- main-content closed -->
@endsection

@section('js')
    {{-- Only form scripts (Select2, modal, form elements) --}}
    @include('admin.helper.formscripts')
    @include('vue')
    <script>
        const productByGameUrl = "{{ route('admin.products.filterByGame', ['id' => '__ID__']) }}";
        $(document).ready(function() {
            $('#gameFilter').on('change', function() {
                var gameId = $(this).val();
                $('#products').html('<div class="text-center">جاري التحميل...</div>');
                if (gameId.trim() !== "") {
                    const url = productByGameUrl.replace('__ID__', gameId);
                    $.get(url, function(data) {
                        let productsHtml = '';
                        data.forEach(function(product) {
                            // Check if product already has a code

                            productsHtml += `
                                <div class="col-6 mt-3">
                                    <label class="form-label">${product.name}</label>
                                    <input class="form-control" name="products[${product.id}]" type="text" value="${product.price}" placeholder="ادخل الكود للمنتج: ${product.name}">
                                </div>
                            `;
                        });
                        $('#products').html(productsHtml);
                    });
                } else {
                    $('#products').html('');
                }
            });
        });
    </script>
    <script>
        $(function() {
            $('#newuser').on('submit', function(e) {
                e.preventDefault();
                let formData = new FormData(document.getElementById('newuser'));
                adawe('{{ route('admin.products.updateprices') }}', formData)
                // Reset form after successful submission
                // document.getElementById('newuser').reset();
                // $('#products').html('');
            });

        });
        $(function() {
            $('.select2').select2()
        });
    </script>
@endsection