@php use App\Enums\Products\ProductClassificationEnum; @endphp

<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-md-12">
                <div class="custom-control custom-switch">
                    <input type="hidden" name="isHideChildProducts" value="0">
                    <input type="checkbox" value="1" class="custom-control-input" name="isHideChildProducts"
                           id="isHideChildProducts">
                    <label class="custom-control-label" for="isHideChildProducts"> Hide child products </label>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-md-12">
                <span class="pt-1 badge badge-pill badge-primary mr-2 pb-1" data-toggle="tooltip" data-placement="top"
                      title="Variation">
                    Product {{ ProductClassificationEnum::VARIATION() }}
                </span>
                <span class="pt-1 badge badge-pill badge-warning mr-2 pb-1" data-toggle="tooltip" data-placement="top"
                      title="Parent">
                    Product {{ ProductClassificationEnum::PARENT() }}
                </span>
                <span class="pt-1 badge badge-pill border border-dark pb-1" data-toggle="tooltip" data-placement="top"
                      title="Without Variations">
                    Product {{ ProductClassificationEnum::WITHOUT_VARIATIONS() }}
                </span>
            </div>
        </div>
        <div class="font-13 text-muted mt-2">The color represents the type of product displayed in the general product
            table.
        </div>
        <hr>
        <table id="products-dt" class="table dt-responsive nowrap">
            <thead>
            <tr>
                <th>Class</th>
                <th>isbn_code</th>
                <th>HID</th>
                <th>Photo</th>
                <th>Code</th>
                <th>Title</th>
                <th>Manufacture</th>
                <th>Category</th>
                <th>Inventory</th>
                <th>Prices</th>
                <th title="Is TOP">T.</th>
                <th title="Is NEW">N.</th>
                <th title="Is Published">P.</th>
                <th title="Has Image">I.</th>
                <th>Action</th>
            </tr>
            <tfoot>
            <tr>
                <th>Class</th>
                <th>isbn_code</th>
                <th>HID</th>
                <th>Photo</th>
                <th>Code</th>
                <th>Title</th>
                <th>Manufacture</th>
                <th>Category</th>
                <th>Inventory</th>
                <th>Prices</th>
                <th title="Is TOP">T.</th>
                <th title="Is NEW">N.</th>
                <th title="Is Published">P.</th>
                <th title="Has Image">I.</th>
                <th>Action</th>
            </tr>
            </tfoot>
        </table>
    </div>
</div>

@push('script')

    <script src="{{ asset('js/components/cookie.js') }}"></script>

    <script>

        $(function () {

            let isHideChildProducts = $('#isHideChildProducts');
            let productDataTableEl = $('#products-dt');

            // Use CookieHelper to persist and read 'hide_child_products'
            // Function to update the DataTable based on the checkbox state
            function updateDataTable(includeTestOrders) {

                let dt_config = {

                    ajax: '{{ route('admin.datatable.products', ['product' => request()->product]) }}' + '?hide_child_products=' + includeTestOrders,

                    columns:    [
                        {
                            data:       'product_row_class',
                            name:       'product_row_class',
                            visible:    false,
                            searchable: false,
                            orderable:  false
                        },
                        {
                            data:       'isbn_code',
                            name:       'isbn_code',
                            visible:    false,
                            searchable: true,
                            orderable:  false
                        },
                        {
                            width:     '25',
                            name:      'id',
                            data:      'product_id',
                            className: 'dt-body-center',
                        },
                        {
                            width:      '40',
                            name:       'photo',
                            data:       'product_photo',
                            className:  'dt-body-center',
                            orderable:  false,
                            searchable: false,
                        },
                        {
                            width:     '60',
                            name:      'code',
                            data:      'product_code',
                            className: ''
                        },
                        {
                            width:     '150',
                            name:      'title',
                            data:      'product_title',
                            className: ''
                        },
                        {
                            width:     '80',
                            name:      'manufacture.title',
                            data:      'product_manufacture',
                            className: ''
                        },
                        {
                            width:     '100',
                            name:      'category.title',
                            data:      'product_category',
                            className: ''
                        },
                        {
                            width:     '80',
                            name:      'product_quantities',
                            data:      'product_quantities',
                            className: 'dt-body-center'
                        },
                        {
                            width:     '60',
                            name:      'price_with_tax',
                            data:      'product_prices',
                            className: 'dt-body-center'
                        },
                        {
                            width:      '25',
                            name:       'is_top',
                            data:       'product_is_top',
                            className:  'dt-body-center',
                            searchable: false,
                        },
                        {
                            width:      '25',
                            name:       'is_new',
                            data:       'product_is_new',
                            className:  'dt-body-center',
                            searchable: false,
                        },
                        {
                            width:      '25',
                            name:       'is_published',
                            data:       'product_is_published',
                            className:  'dt-body-center',
                            searchable: false,
                        },
                        {
                            width:      '25',
                            name:       'attachments.id',
                            data:       'product_has_image',
                            className:  'dt-body-center',
                            searchable: false,
                        },
                        {
                            width:      '50',
                            name:       'action',
                            data:       'product_action',
                            className:  'dt-body-center',
                            orderable:  false,
                            searchable: false,
                        },
                    ],
                    stateSave:  '{{ request()->route()->getName() !== 'admin::products.show' }}',
                    createdRow: function (row, data) {
                        $(row).addClass(data.product_row_class);
                    }
                };

                // $('#products-dt').DataTable({...dt_config, ...window.globalDataTableConfig});

                // Initialize DataTable or destroy and reinitialize it if it already exists
                if ($.fn.DataTable.isDataTable('#products-dt')) {
                    productDataTableEl.DataTable().clear();
                    productDataTableEl.DataTable().destroy();
                }

                productDataTableEl.DataTable({...dt_config, ...window.globalDataTableConfig});

            }

            // Read persisted value (CookieHelper preferred; default to '0')
            let previousIncludeTestOrders = (window.CookieHelper ? CookieHelper.get('hide_child_products', '0') : '0');

            // Reflect in UI using robust boolean coercion
            isHideChildProducts.prop('checked', Boolean(Number(previousIncludeTestOrders)));

            updateDataTable(previousIncludeTestOrders);

            // Listen for changes to the checkbox
            isHideChildProducts.on('change', function () {
                // Get the checkbox state (1 for checked, 0 for unchecked)
                let includeTestOrders = this.checked ? 1 : 0;
                // Persist selection and refresh DataTable
                if (window.CookieHelper) {
                    CookieHelper.set('hide_child_products', includeTestOrders);
                }
                updateDataTable(includeTestOrders);
            });
        });

    </script>

@endpush