@extends('layouts.app')
@section('title', __('sale.products'))

@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">@lang('sale.products')
            <small class="tw-text-sm md:tw-text-base tw-text-gray-700 tw-font-semibold">@lang('lang_v1.manage_products')</small>
        </h1>
        <!-- <ol class="breadcrumb">
                    <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
                    <li class="active">Here</li>
                </ol> -->
    </section>

    <!-- Main content -->
    <section class="content">
        @include('product.partials.kyte_inventory_header', [
            'prefix' => 'list_products',
            'title' => 'Items',
            'search_placeholder' => 'Item or code',
        ])
        <div class="row kyte-filter-panel-row">
            <div class="col-md-12">
                @component('components.filters', ['title' => __('report.filters')])
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('list_products_sort_by', __('lang_v1.sort_by') . ':') !!}
                            {!! Form::select(
                                'list_products_sort_by',
                                [
                                    'brand' => __('product.brand'),
                                    'product' => __('sale.product'),
                                    'category' => __('product.category'),
                                    'sku' => __('product.sku'),
                                ],
                                $list_products_sort_by ?? 'brand',
                                [
                                    'class' => 'form-control select2',
                                    'style' => 'width:100%',
                                    'id' => 'list_products_sort_by',
                                ],
                            ) !!}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('list_products_sort_dir', __('messages.order') . ':') !!}
                            {!! Form::select(
                                'list_products_sort_dir',
                                ['asc' => __('lang_v1.ascending'), 'desc' => __('lang_v1.descending')],
                                $list_products_sort_dir ?? 'asc',
                                [
                                    'class' => 'form-control select2',
                                    'style' => 'width:100%',
                                    'id' => 'list_products_sort_dir',
                                ],
                            ) !!}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('type', __('product.product_type') . ':') !!}
                            {!! Form::select(
                                'type',
                                ['single' => __('lang_v1.single'), 'variable' => __('lang_v1.variable'), 'combo' => __('lang_v1.combo')],
                                null,
                                [
                                    'class' => 'form-control select2',
                                    'style' => 'width:100%',
                                    'id' => 'product_list_filter_type',
                                    'placeholder' => __('lang_v1.all'),
                                ],
                            ) !!}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('product_list_filter_quantity', __('lang_v1.quantity') . ':') !!}
                            {!! Form::select(
                                'quantity_filter',
                                ['' => __('lang_v1.all'), 'zero' => __('lang_v1.quantity') . ' = 0'],
                                null,
                                [
                                    'class' => 'form-control select2',
                                    'style' => 'width:100%',
                                    'id' => 'product_list_filter_quantity',
                                ],
                            ) !!}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('category_id', __('product.category') . ':') !!}
                            {!! Form::select('category_id', $categories, null, [
                                'class' => 'form-control select2',
                                'style' => 'width:100%',
                                'id' => 'product_list_filter_category_id',
                                'placeholder' => __('lang_v1.all'),
                            ]) !!}
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('unit_id', __('product.unit') . ':') !!}
                            {!! Form::select('unit_id', $units, null, [
                                'class' => 'form-control select2',
                                'style' => 'width:100%',
                                'id' => 'product_list_filter_unit_id',
                                'placeholder' => __('lang_v1.all'),
                            ]) !!}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('tax_id', __('product.tax') . ':') !!}
                            {!! Form::select('tax_id', $taxes, null, [
                                'class' => 'form-control select2',
                                'style' => 'width:100%',
                                'id' => 'product_list_filter_tax_id',
                                'placeholder' => __('lang_v1.all'),
                            ]) !!}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('brand_id', __('product.brand') . ':') !!}
                            {!! Form::select('brand_id', $brands, null, [
                                'class' => 'form-control select2',
                                'style' => 'width:100%',
                                'id' => 'product_list_filter_brand_id',
                                'placeholder' => __('lang_v1.all'),
                            ]) !!}
                        </div>
                    </div>
                    <div class="col-md-3" id="location_filter">
                        <div class="form-group">
                            {!! Form::label('location_id', __('purchase.business_location') . ':') !!}
                            {!! Form::select('location_id', $business_locations, null, [
                                'class' => 'form-control select2',
                                'style' => 'width:100%',
                                'placeholder' => __('lang_v1.all'),
                            ]) !!}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <br>
                        <div class="form-group">
                            {!! Form::select(
                                'active_state',
                                ['active' => __('business.is_active'), 'inactive' => __('lang_v1.inactive')],
                                null,
                                [
                                    'class' => 'form-control select2',
                                    'style' => 'width:100%',
                                    'id' => 'active_state',
                                    'placeholder' => __('lang_v1.all'),
                                ],
                            ) !!}
                        </div>
                    </div>

                    <!-- include module filter -->
                    @if (!empty($pos_module_data))
                        @foreach ($pos_module_data as $key => $value)
                            @if (!empty($value['view_path']))
                                @includeIf($value['view_path'], ['view_data' => $value['view_data']])
                            @endif
                        @endforeach
                    @endif

                    <div class="col-md-3">
                        <div class="form-group">
                            <br>
                            <label>
                                {!! Form::checkbox('not_for_selling', 1, false, ['class' => 'input-icheck', 'id' => 'not_for_selling']) !!} <strong>@lang('lang_v1.not_for_selling')</strong>
                            </label>
                        </div>
                    </div>
                    @if ($is_woocommerce)
                        <div class="col-md-3">
                            <div class="form-group">
                                <br>
                                <label>
                                    {!! Form::checkbox('woocommerce_enabled', 1, false, ['class' => 'input-icheck', 'id' => 'woocommerce_enabled']) !!} {{ __('lang_v1.woocommerce_enabled') }}
                                </label>
                            </div>
                        </div>
                    @endif
                @endcomponent
            </div>
        </div>
        @can('product.view')
            <div class="row">
                <div class="col-md-12">
                    <!-- Custom Tabs -->
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a href="#product_list_tab" data-toggle="tab" aria-expanded="true"><i class="fa fa-cubes"
                                        aria-hidden="true"></i> @lang('lang_v1.all_products')</a>
                            </li>
                            @can('stock_report.view')
                                <li>
                                    <a href="#product_stock_report" class="product_stock_report" data-toggle="tab"
                                        aria-expanded="true"><i class="fa fa-hourglass-half" aria-hidden="true"></i>
                                     @lang('report.stock_report')</a>
                                </li>
                            @endcan
                        </ul>

                        <div class="tab-content">
                            <div class="tab-pane active " id="product_list_tab">
                                @if ($is_admin)

                                    <a class="tw-dw-btn tw-bg-gradient-to-r tw-from-indigo-600 tw-to-blue-500 tw-font-bold tw-text-white tw-border-none tw-rounded-full pull-right tw-m-2"
                                        href="{{ action([\App\Http\Controllers\ProductController::class, 'downloadExcel']) }}">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round"
                                            class="icon icon-tabler icons-tabler-outline icon-tabler-download">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                                            <path d="M7 11l5 5l5 -5" />
                                            <path d="M12 4l0 12" />
                                        </svg> @lang('lang_v1.download_excel')
                                    </a>
                                @endif
                                @can('product.create')

                                    <a class="tw-dw-btn tw-bg-gradient-to-r tw-from-indigo-600 tw-to-blue-500 tw-font-bold tw-text-white tw-border-none tw-rounded-full pull-right tw-m-2"
                                        href="{{ action([\App\Http\Controllers\ProductController::class, 'create']) }}">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-plus">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path d="M12 5l0 14" />
                                            <path d="M5 12l14 0" />
                                        </svg> @lang('messages.add')
                                    </a>
                                    <a class="tw-dw-btn tw-dw-btn-outline tw-dw-btn-primary tw-font-bold pull-right tw-m-2"
                                        href="{{ route('products.serial_backfill') }}">
                                        <i class="fa fa-barcode"></i> @lang('lang_v1.serial_backfill')
                                    </a>
                                    <br><br>
                                @endcan
                                @include('product.partials.product_list')
                            </div>
                            @can('stock_report.view')
                                <div class="tab-pane" id="product_stock_report">
                                    @include('report.partials.stock_report_table')
                                </div>
                            @endcan
                        </div>
                    </div>
                </div>
            </div>
        @endcan
        <input type="hidden" id="is_rack_enabled" value="{{ $rack_enabled }}">

        <div class="modal fade product_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
        </div>

        <div class="modal fade" id="view_product_modal" tabindex="-1" role="dialog"
            aria-labelledby="gridSystemModalLabel">
        </div>

        <div class="modal fade" id="opening_stock_modal" tabindex="-1" role="dialog"
            aria-labelledby="gridSystemModalLabel">
        </div>

        @if ($is_woocommerce)
            @include('product.partials.toggle_woocommerce_sync_modal')
        @endif
        @include('product.partials.edit_product_location_modal')

    </section>
    <!-- /.content -->

@endsection

@section('javascript')
    <script src="{{ asset('js/product.js?v=' . $asset_v) }}"></script>
    <script src="{{ asset('js/opening_stock.js?v=' . $asset_v) }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            @php
                // Compute the brand column index for DataTables initial ordering.
                // Columns:
                // 0 mass_delete, 1 action, 2 product, then dynamic stock_location_* columns,
                // then current_stock, (optional) purchase_price, (optional) distributor_price, (optional) reseller_price, (optional) selling_price,
                // then category, brand, sku.
                $brand_col_index = 2;
                $brand_col_index += ($stock_locations ?? collect())->count();
                $brand_col_index += 1; // current_stock
                if(auth()->user()->can('view_purchase_price')) { $brand_col_index += 1; }
                if(auth()->user()->can('view_distributor_price')) { $brand_col_index += 1; }
                if(auth()->user()->can('view_reseller_price')) { $brand_col_index += 1; }
                if(auth()->user()->can('access_default_selling_price')) { $brand_col_index += 1; }
                $brand_col_index += 1; // category
                $brand_col_index += 1; // brand
            @endphp
            @php
                $product_col_index = 2;
                $category_col_index = $brand_col_index - 1;
                $sku_col_index = $brand_col_index + 1;
            @endphp
            var LIST_PRODUCTS_SORT_COLS = {
                product: {{ $product_col_index }},
                category: {{ $category_col_index }},
                brand: {{ $brand_col_index }},
                sku: {{ $sku_col_index }}
            };
            var LIST_PRODUCTS_COLUMN_KEYS = [
                'mass_delete',
                'action',
                'product',
                @foreach($stock_locations as $location)
                    'stock_location_{{ $location->id }}',
                @endforeach
                'current_stock',
                @can('view_purchase_price')
                    'purchase_price',
                @endcan
                @can('view_distributor_price')
                    'distributor_price',
                @endcan
                @can('view_reseller_price')
                    'reseller_price',
                @endcan
                @can('access_default_selling_price')
                    'selling_price',
                @endcan
                'category',
                'brand',
                'sku'
            ];
            var SAVED_LIST_PRODUCTS_COLUMN_VISIBILITY = @json($list_products_column_visibility ?? []);
            var BUSINESS_LIST_PRODUCTS_COLUMN_VISIBILITY = @json(data_get(session('business.common_settings'), 'default_column_visibility.list_products', []));
            var is_applying_saved_column_visibility = false;
            var list_products_batch_size = 25;
            var list_products_loaded_length = list_products_batch_size;
            var list_products_filtered_total = 0;
            var list_products_is_loading_more = false;
            var list_products_scroll_events_bound = false;
            product_table = $('#product_table').DataTable({
                processing: true,
                serverSide: true,
                fixedHeader:false,
                aaSorting: [
                    [LIST_PRODUCTS_SORT_COLS['{{ $list_products_sort_by ?? 'brand' }}'] || {{ $brand_col_index }}, '{{ $list_products_sort_dir ?? 'asc' }}']
                ],
                pageLength: list_products_batch_size,
                scrollY: "75vh",
                scrollX: true,
                scrollCollapse: true,
                dom: '<"row margin-bottom-20 text-center"<"col-sm-8"B><"col-sm-4"f> r>t<"row"<"col-sm-5"i><"col-sm-7"p>>',
                "ajax": {
                    "url": "/products",
                    "data": function(d) {
                        d.type = $('#product_list_filter_type').val();
                        d.quantity_filter = $('#product_list_filter_quantity').val();
                        d.category_id = $('#product_list_filter_category_id').val();
                        d.brand_id = $('#product_list_filter_brand_id').val();
                        d.unit_id = $('#product_list_filter_unit_id').val();
                        d.tax_id = $('#product_list_filter_tax_id').val();
                        d.active_state = $('#active_state').val();
                        d.not_for_selling = $('#not_for_selling').is(':checked');
                        d.location_id = $('#location_id').val();
                        if ($('#repair_model_id').length == 1) {
                            d.repair_model_id = $('#repair_model_id').val();
                        }

                        if ($('#woocommerce_enabled').length == 1 && $('#woocommerce_enabled').is(
                                ':checked')) {
                            d.woocommerce_enabled = 1;
                        }

                        d = __datatable_ajax_callback(d);
                    }
                },
                columnDefs: [{
                    "targets": [0, 1],
                    "searchable": false
                }],
                columns: [{
                        data: 'mass_delete',
                        name: 'products.id'
                    },
                    {
                        data: 'action',
                        name: 'products.id'
                    },
                    {
                        data: 'product',
                        name: 'products.name'
                    },
                    @foreach($stock_locations as $location)
                        {
                            data: 'stock_location_{{ $location->id }}',
                            name: 'stock_location_{{ $location->id }}',
                            searchable: false,
                            className: '{{ !empty($location->is_rma_location) ? 'product-rma-location-col' : '' }}'
                        },
                    @endforeach
                    {
                        data: 'current_stock',
                        name: 'current_stock',
                        searchable: false
                    },
                    @can('view_purchase_price')
                        {
                            data: 'purchase_price',
                            name: 'max_purchase_price',
                            searchable: false
                        },
                    @endcan
                    @can('view_distributor_price')
                        {
                            data: 'distributor_price',
                            name: 'max_distributor_price',
                            searchable: false
                        },
                    @endcan
                    @can('view_reseller_price')
                        {
                            data: 'reseller_price',
                            name: 'max_reseller_price',
                            searchable: false
                        },
                    @endcan
                    @can('access_default_selling_price')
                        {
                            data: 'selling_price',
                            name: 'max_price',
                            searchable: false
                        },
                    @endcan
                    {
                        data: 'category',
                        name: 'c1.name'
                    },
                    {
                        data: 'brand',
                        name: 'brands.name'
                    },
                     {
                         data: 'sku',
                         name: 'products.sku'
                     },
                 ],
                 createdRow: function(row, data, dataIndex) {
                     if ($('input#is_rack_enabled').val() == 1) {
                         var target_col = 0;
                        @can('product.delete')
                            target_col = 1;
                        @endcan
                        $(row).find('td:eq(' + target_col + ') div').prepend(
                            '<i style="margin:auto;" class="fa fa-plus-circle text-success cursor-pointer no-print rack-details" title="' +
                            LANG.details + '"></i>&nbsp;&nbsp;');
                    }
                    $(row).find('td:eq(0)').attr('class', 'selectable_td');
                },
                fnDrawCallback: function(oSettings) {
                    list_products_filtered_total = oSettings._iRecordsDisplay || 0;
                    list_products_loaded_length = Math.min(oSettings._iDisplayLength || list_products_batch_size, list_products_filtered_total);
                    list_products_is_loading_more = false;
                    __update_list_products_infinite_status();
                    __currency_convert_recursively($('#product_table'));
                 },
             });

            // Keep the select-all checkbox from also triggering its header's sort.
            // The rest of the header cell remains sortable by product ID.
            $('#select-all-row').on('click.listProductsSorting', function(e) {
                e.stopPropagation();
                var checked = this.checked;
                $('#product_table tbody input.row-select').each(function() {
                    if (this.checked !== checked) {
                        $(this).prop('checked', checked).change();
                    }
                });
            });

            // Apply saved prefs to UI + allow user to update and persist them.
            if ($('#list_products_sort_by').length) {
                $('#list_products_sort_by').val('{{ $list_products_sort_by ?? 'brand' }}').trigger('change');
            }
            if ($('#list_products_sort_dir').length) {
                $('#list_products_sort_dir').val('{{ $list_products_sort_dir ?? 'asc' }}').trigger('change');
            }

            function __get_list_products_column_visibility() {
                var visibility = {};
                $.each(LIST_PRODUCTS_COLUMN_KEYS, function (index, key) {
                    if (product_table.column(index).length) {
                        visibility[key] = product_table.column(index).visible();
                    }
                });

                return visibility;
            }

            function __persist_list_products_ui_settings() {
                var sort_by = $('#list_products_sort_by').val();
                var sort_dir = $('#list_products_sort_dir').val();

                $.ajax({
                    method: 'POST',
                    url: "{{ route('user.ui_settings.list_products') }}",
                    dataType: 'json',
                    data: {
                        page_length: list_products_batch_size,
                        sort_by: sort_by,
                        sort_dir: sort_dir,
                        column_visibility: __get_list_products_column_visibility(),
                        _token: "{{ csrf_token() }}"
                    }
                });
            }

            if (SAVED_LIST_PRODUCTS_COLUMN_VISIBILITY && Object.keys(SAVED_LIST_PRODUCTS_COLUMN_VISIBILITY).length) {
                is_applying_saved_column_visibility = true;
                $.each(SAVED_LIST_PRODUCTS_COLUMN_VISIBILITY, function (key, visible) {
                    var index = LIST_PRODUCTS_COLUMN_KEYS.indexOf(key);
                    if (index >= 0 && product_table.column(index).length) {
                        product_table.column(index).visible(!!visible, false);
                    }
                });
                product_table.columns.adjust();
                is_applying_saved_column_visibility = false;
            } else if (BUSINESS_LIST_PRODUCTS_COLUMN_VISIBILITY && Object.keys(BUSINESS_LIST_PRODUCTS_COLUMN_VISIBILITY).length) {
                is_applying_saved_column_visibility = true;
                window.__applyBusinessDefaultColumnVisibility(product_table, LIST_PRODUCTS_COLUMN_KEYS, BUSINESS_LIST_PRODUCTS_COLUMN_VISIBILITY);
                is_applying_saved_column_visibility = false;
            }

            $('#product_table').on('column-visibility.dt', function () {
                if (!is_applying_saved_column_visibility) {
                    __persist_list_products_ui_settings();
                }
            });

            function __list_products_filter_data() {
                return {
                    type: $('#product_list_filter_type').val(),
                    quantity_filter: $('#product_list_filter_quantity').val(),
                    category_id: $('#product_list_filter_category_id').val(),
                    brand_id: $('#product_list_filter_brand_id').val(),
                    unit_id: $('#product_list_filter_unit_id').val(),
                    tax_id: $('#product_list_filter_tax_id').val(),
                    active_state: $('#active_state').val(),
                    not_for_selling: $('#not_for_selling').is(':checked'),
                    location_id: $('#location_id').val(),
                    repair_model_id: $('#repair_model_id').length == 1 ? $('#repair_model_id').val() : '',
                    woocommerce_enabled: $('#woocommerce_enabled').length == 1 && $('#woocommerce_enabled').is(':checked') ? 1 : 0,
                    search: $('#list_products_kyte_search').val() || ''
                };
            }

            function __update_list_products_kyte_summary() {
                $.ajax({
                    method: 'GET',
                    url: "{{ route('products.kyte_summary') }}",
                    dataType: 'json',
                    data: __list_products_filter_data(),
                    success: function(data) {
                        $('#list_products_registered_items').text(data.registered_items || 0);
                        $('#list_products_total_stock_value').text(data.formatted ? data.formatted.stock_value : '--');
                        $('#list_products_cost_of_stock').text(data.formatted ? data.formatted.stock_cost : '--');
                        $('#list_products_projected_profit').text(data.formatted ? data.formatted.projected_profit : '--');
                        $('#list_products_low_stock').text(data.low_stock || 0);
                        $('#list_products_out_of_stock').text(data.out_of_stock || 0);
                        $('#list_products_in_stock').text(data.in_stock || 0);
                        if (typeof window.__toggleKyteFinancialSummaryButtons === 'function') {
                            window.__toggleKyteFinancialSummaryButtons('list_products', data.financial_summary_approved);
                        }
                    }
                });
            }

            window.__refreshKyteInventorySummary = window.__refreshKyteInventorySummary || {};
            window.__refreshKyteInventorySummary.list_products = __update_list_products_kyte_summary;

            function __reset_list_products_infinite_scroll() {
                list_products_loaded_length = list_products_batch_size;
                list_products_is_loading_more = false;
                product_table.page.len(list_products_batch_size);
                __update_list_products_infinite_status();
            }

            function __update_list_products_infinite_status() {
                var visible_rows = $('#product_table tbody tr').not('.child').length;
                var loaded = Math.min(visible_rows || list_products_loaded_length || 0, list_products_filtered_total || 0);
                $('#product_list_loaded_count').text(loaded);
                $('#product_list_total_count').text(list_products_filtered_total || 0);
                $('#product_list_infinite_loader').toggleClass('hide', !list_products_is_loading_more);
                $('#product_list_infinite_end').toggleClass('hide', list_products_filtered_total === 0 || loaded < list_products_filtered_total || list_products_is_loading_more);
            }

            function __load_more_list_products_if_needed(scroll_element) {
                if (list_products_is_loading_more || list_products_loaded_length >= list_products_filtered_total) {
                    return;
                }

                var near_bottom = false;
                if (scroll_element && scroll_element !== window) {
                    near_bottom = scroll_element.scrollTop + scroll_element.clientHeight >= scroll_element.scrollHeight - 260;
                } else {
                    near_bottom = $(window).scrollTop() + $(window).height() >= $(document).height() - 260;
                }

                if (near_bottom) {
                    list_products_is_loading_more = true;
                    __update_list_products_infinite_status();
                    product_table.page.len(list_products_loaded_length + list_products_batch_size).draw(false);
                }
            }

            function __bind_list_products_scroll_events() {
                if (list_products_scroll_events_bound) {
                    return;
                }

                var $data_table_scroll_body = $('#product_table_wrapper .dataTables_scrollBody');
                $data_table_scroll_body.off('scroll.listProductsInfinite').on('scroll.listProductsInfinite', function () {
                    __load_more_list_products_if_needed(this);
                });

                $('#scrollable-container').off('scroll.listProductsInfinite').on('scroll.listProductsInfinite', function () {
                    __load_more_list_products_if_needed(this);
                });

                $(window).off('scroll.listProductsInfinite').on('scroll.listProductsInfinite', function () {
                    __load_more_list_products_if_needed(window);
                });

                list_products_scroll_events_bound = true;
            }

            $(document).on('change', '#list_products_sort_by, #list_products_sort_dir', function () {
                var sort_by = ($('#list_products_sort_by').val() || 'brand').toString();
                var sort_dir = ($('#list_products_sort_dir').val() || 'asc').toString();
                var col = LIST_PRODUCTS_SORT_COLS[sort_by] || {{ $brand_col_index }};
                __reset_list_products_infinite_scroll();
                product_table.order([col, sort_dir]).draw(false);
                __persist_list_products_ui_settings();
            });
            $('#product_table_filter input').on('input', function () {
                __reset_list_products_infinite_scroll();
            });
            var list_products_kyte_search_timer = null;
            $('#list_products_kyte_search').on('input', function () {
                var value = $(this).val() || '';
                $('#product_table_filter input').val(value);
                __reset_list_products_infinite_scroll();
                clearTimeout(list_products_kyte_search_timer);
                list_products_kyte_search_timer = setTimeout(function () {
                    product_table.search(value).draw();
                    __update_list_products_kyte_summary();
                }, 350);
            });
            $('#list_products_kyte_filter_btn').on('click', function () {
                $('#collapseFilter').collapse('toggle');
            });
            function __reload_list_products_first_batch() {
                __reset_list_products_infinite_scroll();
                product_table.ajax.reload();
                __update_list_products_kyte_summary();
            }
            __update_list_products_kyte_summary();
            // Array to track the ids of the details displayed rows
            var detailRows = [];

            $('#product_table tbody').on('click', 'tr i.rack-details', function() {
                var i = $(this);
                var tr = $(this).closest('tr');
                var row = product_table.row(tr);
                var idx = $.inArray(tr.attr('id'), detailRows);

                if (row.child.isShown()) {
                    i.addClass('fa-plus-circle text-success');
                    i.removeClass('fa-minus-circle text-danger');

                    row.child.hide();

                    // Remove from the 'open' array
                    detailRows.splice(idx, 1);
                } else {
                    i.removeClass('fa-plus-circle text-success');
                    i.addClass('fa-minus-circle text-danger');

                    row.child(get_product_details(row.data())).show();

                    // Add to the 'open' array
                    if (idx === -1) {
                        detailRows.push(tr.attr('id'));
                    }
                }
            });

            $('#opening_stock_modal').on('hidden.bs.modal', function(e) {
                __reload_list_products_first_batch();
            });

            $('table#product_table tbody').on('click', 'a.delete-product', function(e) {
                e.preventDefault();
                swal({
                    title: LANG.sure,
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                }).then((willDelete) => {
                    if (willDelete) {
                        var href = $(this).attr('href');
                        $.ajax({
                            method: "DELETE",
                            url: href,
                            dataType: "json",
                            success: function(result) {
                                if (result.success == true) {
                                    toastr.success(result.msg);
                                    __reload_list_products_first_batch();
                                } else {
                                    toastr.error(result.msg);
                                }
                            }
                        });
                    }
                });
            });

            $(document).on('click', '#delete-selected', function(e) {
                e.preventDefault();
                var selected_rows = getSelectedRows();

                if (selected_rows.length > 0) {
                    $('input#selected_rows').val(selected_rows);
                    swal({
                        title: LANG.sure,
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    }).then((willDelete) => {
                        if (willDelete) {
                            $('form#mass_delete_form').submit();
                        }
                    });
                } else {
                    $('input#selected_rows').val('');
                    swal('@lang('lang_v1.no_row_selected')');
                }
            });

            $(document).on('click', '#deactivate-selected', function(e) {
                e.preventDefault();
                var selected_rows = getSelectedRows();

                if (selected_rows.length > 0) {
                    $('input#selected_products').val(selected_rows);
                    swal({
                        title: LANG.sure,
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    }).then((willDelete) => {
                        if (willDelete) {
                            var form = $('form#mass_deactivate_form')

                            var data = form.serialize();
                            $.ajax({
                                method: form.attr('method'),
                                url: form.attr('action'),
                                dataType: 'json',
                                data: data,
                                success: function(result) {
                                    if (result.success == true) {
                                        toastr.success(result.msg);
                                        __reload_list_products_first_batch();
                                        form
                                            .find('#selected_products')
                                            .val('');
                                    } else {
                                        toastr.error(result.msg);
                                    }
                                },
                            });
                        }
                    });
                } else {
                    $('input#selected_products').val('');
                    swal('@lang('lang_v1.no_row_selected')');
                }
            })

            $(document).on('click', '#edit-selected', function(e) {
                e.preventDefault();
                var selected_rows = getSelectedRows();

                if (selected_rows.length > 0) {
                    $('input#selected_products_for_edit').val(selected_rows);
                    $('form#bulk_edit_form').submit();
                } else {
                    $('input#selected_products').val('');
                    swal('@lang('lang_v1.no_row_selected')');
                }
            })

            $('table#product_table tbody').on('click', 'a.activate-product', function(e) {
                e.preventDefault();
                var href = $(this).attr('href');
                $.ajax({
                    method: "get",
                    url: href,
                    dataType: "json",
                    success: function(result) {
                        if (result.success == true) {
                            toastr.success(result.msg);
                            __reload_list_products_first_batch();
                        } else {
                            toastr.error(result.msg);
                        }
                    }
                });
            });

            $(document).on('change',
                '#product_list_filter_type, #product_list_filter_quantity, #product_list_filter_category_id, #product_list_filter_brand_id, #product_list_filter_unit_id, #product_list_filter_tax_id, #location_id, #active_state, #repair_model_id',
                function() {
                    if ($("#product_list_tab").hasClass('active')) {
                        __reload_list_products_first_batch();
                        __update_list_products_kyte_summary();
                    }

                    if ($("#product_stock_report").hasClass('active')) {
                        stock_report_table.ajax.reload();
                    }
                });

            $(document).on('ifChanged', '#not_for_selling, #woocommerce_enabled', function() {
                if ($("#product_list_tab").hasClass('active')) {
                    __reload_list_products_first_batch();
                    __update_list_products_kyte_summary();
                }

                if ($("#product_stock_report").hasClass('active')) {
                    stock_report_table.ajax.reload();
                }
            });

            $('#product_location').select2({
                dropdownParent: $('#product_location').closest('.modal')
            });

            @if ($is_woocommerce)
                $(document).on('click', '.toggle_woocomerce_sync', function(e) {
                    e.preventDefault();
                    var selected_rows = getSelectedRows();
                    if (selected_rows.length > 0) {
                        $('#woocommerce_sync_modal').modal('show');
                        $("input#woocommerce_products_sync").val(selected_rows);
                    } else {
                        $('input#selected_products').val('');
                        swal('@lang('lang_v1.no_row_selected')');
                    }
                });

                $(document).on('submit', 'form#toggle_woocommerce_sync_form', function(e) {
                    e.preventDefault();
                    var url = $('form#toggle_woocommerce_sync_form').attr('action');
                    var method = $('form#toggle_woocommerce_sync_form').attr('method');
                    var data = $('form#toggle_woocommerce_sync_form').serialize();
                    var ladda = Ladda.create(document.querySelector('.ladda-button'));
                    ladda.start();
                    $.ajax({
                        method: method,
                        dataType: "json",
                        url: url,
                        data: data,
                        success: function(result) {
                            ladda.stop();
                            if (result.success) {
                                $("input#woocommerce_products_sync").val('');
                                $('#woocommerce_sync_modal').modal('hide');
                                toastr.success(result.msg);
                                __reload_list_products_first_batch();
                            } else {
                                toastr.error(result.msg);
                            }
                        }
                    });
                });
            @endif
        });

        $(document).on('shown.bs.modal', 'div.view_product_modal, div.view_modal, #view_product_modal',
            function() {
                var div = $(this).find('#view_product_stock_details');
                if (div.length) {
                    $.ajax({
                        url: "{{ action([\App\Http\Controllers\ReportController::class, 'getStockReport']) }}" +
                            '?for=view_product&product_id=' + div.data('product_id'),
                        dataType: 'html',
                        success: function(result) {
                            div.html(result);
                            __currency_convert_recursively(div);
                        },
                    });
                }
                __currency_convert_recursively($(this));
            });
        var data_table_initailized = false;
        $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
            if ($(e.target).attr('href') == '#product_stock_report') {
                if (!data_table_initailized) {
                    //Stock report table
                    var stock_report_cols = [{
                            data: 'action',
                            name: 'action',
                            searchable: false,
                            orderable: false
                        },
                        {
                            data: 'sku',
                            name: 'variations.sub_sku'
                        },
                        {
                            data: 'product',
                            name: 'p.name'
                        },
                        {
                            data: 'variation',
                            name: 'variation'
                        },
                        {
                            data: 'category_name',
                            name: 'c.name'
                        },
                        {
                            data: 'location_name',
                            name: 'l.name'
                        },
                        {
                            data: 'unit_price',
                            name: 'variations.sell_price_inc_tax'
                        },
                        {
                            data: 'stock',
                            name: 'stock',
                            searchable: false
                        },
                    ];
                    if ($('th.stock_price').length) {
                        stock_report_cols.push({
                            data: 'stock_price',
                            name: 'stock_price',
                            searchable: false
                        });
                        stock_report_cols.push({
                            data: 'stock_value_by_sale_price',
                            name: 'stock_value_by_sale_price',
                            searchable: false,
                            orderable: false
                        });
                        stock_report_cols.push({
                            data: 'potential_profit',
                            name: 'potential_profit',
                            searchable: false,
                            orderable: false
                        });
                    }

                    stock_report_cols.push({
                        data: 'total_sold',
                        name: 'total_sold',
                        searchable: false
                    });
                    stock_report_cols.push({
                        data: 'total_transfered',
                        name: 'total_transfered',
                        searchable: false
                    });
                    stock_report_cols.push({
                        data: 'total_adjusted',
                        name: 'total_adjusted',
                        searchable: false
                    });
                    stock_report_cols.push({
                        data: 'product_custom_field1',
                        name: 'p.product_custom_field1'
                    });
                    stock_report_cols.push({
                        data: 'product_custom_field2',
                        name: 'p.product_custom_field2'
                    });
                    stock_report_cols.push({
                        data: 'product_custom_field3',
                        name: 'p.product_custom_field3'
                    });
                    stock_report_cols.push({
                        data: 'product_custom_field4',
                        name: 'p.product_custom_field4'
                    });

                    if ($('th.current_stock_mfg').length) {
                        stock_report_cols.push({
                            data: 'total_mfg_stock',
                            name: 'total_mfg_stock',
                            searchable: false
                        });
                    }
                    stock_report_table = $('#stock_report_table').DataTable({
                        order: [
                            [1, 'asc']
                        ],
                        processing: true,
                        serverSide: true,
                        scrollY: "75vh",
                        scrollX: true,
                        scrollCollapse: true,
                        fixedHeader:false,
                        ajax: {
                            url: '/reports/stock-report',
                            data: function(d) {
                                d.location_id = $('#location_id').val();
                                d.category_id = $('#product_list_filter_category_id').val();
                                d.brand_id = $('#product_list_filter_brand_id').val();
                                d.unit_id = $('#product_list_filter_unit_id').val();
                                d.type = $('#product_list_filter_type').val();
                                d.active_state = $('#active_state').val();
                                d.not_for_selling = $('#not_for_selling').is(':checked');
                                if ($('#repair_model_id').length == 1) {
                                    d.repair_model_id = $('#repair_model_id').val();
                                }
                            }
                        },
                        columns: stock_report_cols,
                        fnDrawCallback: function(oSettings) {
                            __currency_convert_recursively($('#stock_report_table'));
                        },
                        "footerCallback": function(row, data, start, end, display) {
                            var footer_total_stock = 0;
                            var footer_total_sold = 0;
                            var footer_total_transfered = 0;
                            var total_adjusted = 0;
                            var total_stock_price = 0;
                            var footer_stock_value_by_sale_price = 0;
                            var total_potential_profit = 0;
                            var footer_total_mfg_stock = 0;
                            for (var r in data) {
                                footer_total_stock += $(data[r].stock).data('orig-value') ?
                                    parseFloat($(data[r].stock).data('orig-value')) : 0;

                                footer_total_sold += $(data[r].total_sold).data('orig-value') ?
                                    parseFloat($(data[r].total_sold).data('orig-value')) : 0;

                                footer_total_transfered += $(data[r].total_transfered).data(
                                        'orig-value') ?
                                    parseFloat($(data[r].total_transfered).data('orig-value')) : 0;

                                total_adjusted += $(data[r].total_adjusted).data('orig-value') ?
                                    parseFloat($(data[r].total_adjusted).data('orig-value')) : 0;

                                total_stock_price += $(data[r].stock_price).data('orig-value') ?
                                    parseFloat($(data[r].stock_price).data('orig-value')) : 0;

                                footer_stock_value_by_sale_price += $(data[r].stock_value_by_sale_price)
                                    .data('orig-value') ?
                                    parseFloat($(data[r].stock_value_by_sale_price).data(
                                        'orig-value')) : 0;

                                total_potential_profit += $(data[r].potential_profit).data(
                                        'orig-value') ?
                                    parseFloat($(data[r].potential_profit).data('orig-value')) : 0;

                                footer_total_mfg_stock += $(data[r].total_mfg_stock).data(
                                        'orig-value') ?
                                    parseFloat($(data[r].total_mfg_stock).data('orig-value')) : 0;
                            }

                            $('.footer_total_stock').html(__currency_trans_from_en(footer_total_stock,
                                false));
                            $('.footer_total_stock_price').html(__currency_trans_from_en(
                                total_stock_price));
                            $('.footer_total_sold').html(__currency_trans_from_en(footer_total_sold,
                                false));
                            $('.footer_total_transfered').html(__currency_trans_from_en(
                                footer_total_transfered, false));
                            $('.footer_total_adjusted').html(__currency_trans_from_en(total_adjusted,
                                false));
                            $('.footer_stock_value_by_sale_price').html(__currency_trans_from_en(
                                footer_stock_value_by_sale_price));
                            $('.footer_potential_profit').html(__currency_trans_from_en(
                                total_potential_profit));
                            if ($('th.current_stock_mfg').length) {
                                $('.footer_total_mfg_stock').html(__currency_trans_from_en(
                                    footer_total_mfg_stock, false));
                            }
                        },
                    });
                    data_table_initailized = true;
                } else {
                    stock_report_table.ajax.reload();
                }
            } else {
                __reload_list_products_first_batch();
            }

            // remove class from data table button
            $('.btn-default').removeClass('btn-default');
            $('.tw-dw-btn-outline').removeClass('btn');
        });

        $(document).on('click', '.update_product_location', function(e) {
            e.preventDefault();
            var selected_rows = getSelectedRows();

            if (selected_rows.length > 0) {
                $('input#selected_products').val(selected_rows);
                var type = $(this).data('type');
                var modal = $('#edit_product_location_modal');
                if (type == 'add') {
                    modal.find('.remove_from_location_title').addClass('hide');
                    modal.find('.add_to_location_title').removeClass('hide');
                } else if (type == 'remove') {
                    modal.find('.add_to_location_title').addClass('hide');
                    modal.find('.remove_from_location_title').removeClass('hide');
                }

                modal.modal('show');
                modal.find('#product_location').select2({
                    dropdownParent: modal
                });
                modal.find('#product_location').val('').change();
                modal.find('#update_type').val(type);
                modal.find('#products_to_update_location').val(selected_rows);
            } else {
                $('input#selected_products').val('');
                swal('@lang('lang_v1.no_row_selected')');
            }
        });

        $(document).on('submit', 'form#edit_product_location_form', function(e) {
            e.preventDefault();
            var form = $(this);
            var data = form.serialize();

            $.ajax({
                method: $(this).attr('method'),
                url: $(this).attr('action'),
                dataType: 'json',
                data: data,
                beforeSend: function(xhr) {
                    __disable_submit_button(form.find('button[type="submit"]'));
                },
                success: function(result) {
                    if (result.success == true) {
                        $('div#edit_product_location_modal').modal('hide');
                        toastr.success(result.msg);
                        __reload_list_products_first_batch();
                        $('form#edit_product_location_form')
                            .find('button[type="submit"]')
                            .attr('disabled', false);
                    } else {
                        toastr.error(result.msg);
                    }
                },
            });
        });
    </script>
    <style>
        /* Highlight the RMA stock location column (like the reference screenshot). */
        #product_table th.product-rma-location-col {
            background-color: #fca5a5 !important;
            color: #7f1d1d;
            font-weight: 700;
        }
        #product_table td.product-rma-location-col {
            background-color: #fee2e2 !important;
            color: #7f1d1d;
        }
        #product_table_filter {
            display: none;
        }
        .product-list-infinite-status {
            padding: 10px;
            text-align: center;
            color: #64748b;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-top: 0;
            border-radius: 0 0 10px 10px;
        }
    </style>
@endsection