@extends('layouts.master')

@section('page_title', 'Edit Product')
@section('title', 'Products Details')
@section('main_item', 'Products')
@section('sub_item', 'Edit Product')

@section('content')
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <h4 class="mt-0 header-title">Edit Product</h4>
                <p class="text-muted mb-3"></p>
                <form id="update-product-form" class="form-parsley" method="POST"
                    action="{{ route('products.update', $product->id) }}" enctype="multipart/form-data">
                    @csrf
                    @method('PATCH')
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="product_name">Product Name</label>
                                <input type="text" class="form-control required_text" placeholder="Product Name"
                                    id="product_name" name="product_name" required=""
                                    value="{{ $product->product_name }}">
                                <input type="text" id="pro_id" name="id" value="{{ $product->product_id }}"
                                    hidden>
                                <input type="text" id="pro_id" name="single_id" value="{{ $product->id }}" hidden>
                            </div>
                        </div>
                        {{-- <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="category">Category</label>
                                <select class="form-control required_combo" id="category" name="category_id" required>
                                    <option value="">Select</option>
                                    @foreach ($categories as $category)
                                        @if ($category->id == $product->category_id)
                                            <option value="{{ $category->id }}" selected>{{ $category->category_name }}
                                            </option>
                                        @else
                                            <option value="{{ $category->id }}">{{ $category->category_name }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div> --}}
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="category">Category</label>
                                    <select class="form-control select2" id="category" name="category_id[]"
                                    multiple="multiple" required>
                                    @foreach ($categories as $category)
                                            <option value="{{ $category->id }}"  {{ in_array($category->id, $product_hascategories) ? 'selected' : ' ' }}>
                                                {{ $category->category_name }}
                                            </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="sub_category_id">Sub Category</label>
                                <select class="form-control select2" id="sub_category_id" name="sub_category_id[]"
                                    multiple="multiple">
                                    @foreach ($sub_categories as $sub_category)
                                        <option value="{{ $sub_category->id }}"
                                            {{ in_array($sub_category->id, $product_has_sub_categories) ? 'selected' : ' ' }}>
                                            {{ $sub_category->sub_category_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="unit">Unit</label>
                                <select class="form-control required_combo" id="unit" name="unit_id" required>
                                    <option value="">Select</option>
                                    @foreach ($units as $unit)
                                        @if ($unit->id == $product->unit_id)
                                            <option value="{{ $unit->id }}" selected>
                                                {{ $unit->actual_name . ' (' . $unit->short_name . ')' }}</option>
                                        @else
                                            <option value="{{ $unit->id }}">
                                                {{ $unit->actual_name . ' (' . $unit->short_name . ')' }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="sku">SKU</label>
                                <input type="text" class="form-control" placeholder="SKU" id="sku" name="sku"
                                    value="{{ $p_sku->sku }}">
                            </div>
                        </div>
                        <div class="col-md-2 mt-2">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="allow_woocommerce_sync"
                                    data-parsley-multiple="groups" data-parsley-mincheck="1" name="allow_woocommerce_sync"
                                    @if ($product->allow_woocommerce_sync) checked @endif>
                                <label class="custom-control-label" for="allow_woocommerce_sync">Allow Woocomerce
                                    Sync</label>
                            </div>
                        </div>
                        <div class="col-md-2 mt-2">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="product_visible_sync"
                                    data-parsley-multiple="groups" data-parsley-mincheck="1" name="product_visible_sync"
                                    @if ($product->product_visible_sync) checked @endif>
                                <label class="custom-control-label" for="product_visible_sync">Woocomerce Product InVisible
                                    Sync
                                </label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="reorder_level">Re-order Level</label>
                                <input type="number" step="0.01" class="form-control required_text"
                                    placeholder="Re-order Level" id="reorder_level" name="reorder_level" required=""
                                    value="{{ $product->reorder_level }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold">Warranty Period Type</label>
                                <select class="form-control" id="warranty_select" name="warranty_select">
                                    <option value="">Select</option>
                                    <option value="month"
                                        {{ (old('warranty_select') ? old('warranty_select') : $product->warranty_select ?? '') == 'month' ? 'selected' : '' }}>
                                        Month</option>
                                    <option value="year"
                                        {{ (old('warranty_select') ? old('warranty_select') : $product->warranty_select ?? '') == 'year' ? 'selected' : '' }}>
                                        Year</option>
                                    <option value="day"
                                        {{ (old('warranty_select') ? old('warranty_select') : $product->warranty_select ?? '') == 'day' ? 'selected' : '' }}>
                                        Day</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold">Warranty Period</label>
                                <input type="number" step="0.01" class="form-control" placeholder="Warranty Period"
                                    id="warranty_period" name="warranty_period" value="{{ $product->warranty_period }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="required" style="font-weight: bold" for="activate_code">business
                                    Location</label>
                                <select class="form-control select2" id="location_id" name="location_id[]"
                                    multiple="multiple" required>
                                    @if (Auth::user()->role_id == '1')
                                        @foreach ($users_access_location as $business_location)
                                            @if ($business_location->is_active == '1')
                                                <option value="{{ $business_location->id }}"
                                                    {{ in_array($business_location->id, $product_has_business_locations) ? 'selected' : ' ' }}>
                                                    {{ $business_location->name }}
                                                </option>
                                            @else
                                            @endif
                                        @endforeach
                                    @else
                                        @foreach ($users_access_location as $business_location)
                                            @if ($business_location->is_active == '1')
                                                <option value="{{ $business_location->business_location_id }}"
                                                    {{ in_array($business_location->business_location_id, $product_has_business_locations) ? 'selected' : ' ' }}>
                                                    {{ $business_location->name }}
                                                </option>
                                            @else
                                            @endif
                                        @endforeach
                                    @endif

                                </select>
                            </div>
                        </div>
                        @if (!empty($product->attribute_id))
                            <div class="col-md-4" id="attri">
                                <div class="form-group">
                                    <label style="font-weight: bold">First Variation Type</label>
                                    <select class="form-control select2" id="attribute_io" name="attribute_id">
                                        @foreach ($attributes as $att)
                                            @if ($product->attribute_id == $att->id)
                                                <option value="{{ $att->id }}" selected>{{ $att->attribute_name }}
                                                </option>
                                            @else
                                                <option value="{{ $att->id }}">{{ $att->attribute_name }}
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4" id="second_attri">
                                <div class="form-group">
                                    <label style="font-weight: bold">Second Variation Type</label>
                                    <select class="form-control select2" id="second_attribute_id"
                                        name="second_attribute_id">
                                        <option value="" disabled selected>Select</option>
                                        @foreach ($attributes as $att)
                                            @if ($product->second_attribute_id == $att->id)
                                                <option value="{{ $att->id }}" selected>{{ $att->attribute_name }}
                                                </option>
                                            @else
                                                <option value="{{ $att->id }}">{{ $att->attribute_name }}
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 pt-4" id="attri_btn">
                                <div class="form-group">
                                    <a class="btn btn-primary" id="attribute" style="color: white;">Add Attribute</a>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="table-responsive">
                                    <table id="attribute-table" class="table table-bordered mb-0 table-centered">
                                        <thead class="thead-dark">
                                            <tr>
                                                <th>Variation <span id="row-count"></span> </th>
                                                <th>Variation Value</th>
                                                <th>Quantity</th>
                                                <th>Unit Price</th>
                                                <th>Selling Price</th>
                                                <th>Second Price</th>
                                                <th>action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="attribute-value-tbody">
                                            {{-- @php
                                                $attribute = App\Attribute::find($product->attribute_id);
                                                dd($product );
                                            @endphp
                                            <tr>
                                                <td>{{ $attribute->attribute_name }}</td>
                                                <td>{{ $product->attribute_value }}</td>
                                                <td>
                                                    <div>
                                                        <input type="hidden" name="attribute_values[0][product_id]"
                                                            value="{{ $product->id }}">
                                                        <input type="hidden"
                                                            name="attribute_values[0][attribute_value_id]"
                                                            id="attribute_value_id"
                                                            value="{{ $product->attribute_value_id }}">
                                                        <input type="hidden" name="attribute_values[0][attribute_value]"
                                                            id="attribute_value" value="{{ $product->attribute_value }}">
                                                        <input class="form-control" type="number" id="qty"
                                                            name="attribute_values[0][qty]" value="{{ $stock->qty }}">
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <input type="number" step="0.01" class="form-control"
                                                            id="unit_cost" name="attribute_values[0][unit_cost]"
                                                            value="{{ $stock->unit_cost }}">
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <input type="number" step="0.01" class="form-control"
                                                            id="unit_price" name="attribute_values[0][unit_price]"
                                                            value="{{ $stock->unit_price }}">
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <input type="number" step="0.01" class="form-control"
                                                            id="second_price" name="attribute_values[0][second_price]"
                                                            value="{{ $stock->second_price }}">
                                                    </div>
                                                </td>
                                            </tr> --}}
                                            @php $number = 0 @endphp
                                            @foreach ($child_products as $key => $child_product) 
                                            @php
                                                $key++;
                                                $attribute = App\Attribute::find($child_product->attribute_id);
                                                $second_attribute = App\Attribute::find($child_product->second_attribute_id);
                                                $attribute_value = App\AttributeValue::find($child_product->attribute_value_id);
                                                $second_attribute_value = App\AttributeValue::find($child_product->second_attribute_value_id);
                                            @endphp
                                            <tr>
                                                <td>
                                                    {{ $attribute ? $attribute->attribute_name : 'N/A' }} |
                                                    @if ($second_attribute)
                                                        {{ $second_attribute->attribute_name }}
                                                    @endif
                                                </td>
                                                <td>
                                                    {{ $attribute_value ? $attribute_value->value : 'N/A' }} |
                                                    @if ($second_attribute_value)
                                                        {{ $second_attribute_value->value }}
                                                    @endif
                                                </td>
                                                <td>
                                                    <div>
                                                        <input type="hidden" name="attribute_values[{{ $key }}][product_id]" value="{{ $child_product->product_id }}">
                                                        <input type="hidden" name="attribute_values[{{ $key }}][attribute_id]" id="attribute_id" value="{{ $child_product->attribute_id }}">
                                                        <input type="hidden" name="attribute_values[{{ $key }}][attribute_name]" id="attribute_name" value="{{ $attribute ? $attribute->attribute_name : '' }}">
                                                        <input type="hidden" name="attribute_values[{{ $key }}][attribute_value_id]" id="attribute_value_id" value="{{ $child_product->attribute_value_id }}">
                                                        <input type="hidden" name="attribute_values[{{ $key }}][attribute_value]" id="attribute_value" value="{{ $attribute_value ? $attribute_value->value : '' }}">
                                                        <input type="hidden" name="attribute_values[{{ $key }}][second_attribute_id]" id="second_attribute_id" value="{{ $child_product->second_attribute_id }}">
                                                        <input type="hidden" name="attribute_values[{{ $key }}][second_attribute_name]" id="second_attribute_name" value="{{ $second_attribute ? $second_attribute->attribute_name : '' }}">
                                                        <input type="hidden" name="attribute_values[{{ $key }}][second_attribute_value_id]" id="attribute_value_id" value="{{ $child_product->second_attribute_value_id }}">
                                                        @php
                                                            $second_attribute_value_text = $second_attribute_value ? $second_attribute_value->value : 'N/A';
                                                        @endphp
                                                        <input type="hidden" name="attribute_values[{{ $key }}][second_attribute_value]" id="attribute_value" value="{{ $second_attribute_value_text }}">
                                                        <input class="form-control qty-edit" type="number" id="qty" name="attribute_values[{{ $key }}][qty]" value="{{ $child_product->qty }}">
                                                    </div>
                                                    {{-- Apply same value for qty --}}
                                                    @if ($number == 0)
                                                    <span class="input-group-btn">
                                                    <button  type="button" id="apply-all" class="apply-edit-qty btn-success" data-target-class=".qty-edit"><i class="fas fa-check-double"></i></button>
                                                    </span>
                                                    @endif
                                                </td>
                                                <td id="unit_price">
                                                    <div>
                                                        <input type="number" step="0.01" class="form-control cost-edit" id="unit_cost" name="attribute_values[{{ $key }}][unit_cost]" value="{{ $child_product->unit_cost }}">
                                                    </div>
                                                    {{-- Apply same value for purchase cost button --}}
                                                    @if ($number == 0)
                                                    <span class="input-group-btn">
                                                    <button  type="button" id="apply-all" class="apply-edit-all btn-success" data-target-class=".cost-edit"><i class="fas fa-check-double"></i></button>
                                                    </span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <div>
                                                        <input type="number" step="0.01" class="form-control price-edit" id="unit_price" name="attribute_values[{{ $key }}][unit_price]" value="{{ $child_product->unit_price }}">
                                                    </div>
                                                    {{-- Apply same value for selling price button --}}
                                                    @if ($number == 0)
                                                    <span class="input-group-btn">
                                                    <button type="button" id="apply-all" class="apply-edit-price btn-success" data-target-class=".price-edit"><i class="fas fa-check-double"></i></button>
                                                    </span>
                                                    @endif
                                                    @php
                                                    $number++
                                                @endphp
                                                </td>
                                                <td>
                                                    <div>
                                                        <input type="number" step="0.01" class="form-control" id="second_price" name="attribute_values[{{ $key }}][second_price]" value="{{ $child_product->second_price }}">
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                        
                        </tbody>
                        </table>
                    </div>
            </div>
        @else
            @endif
            <div class="col-md-12">
                <div class="form-group" style="position: relative;">
                    <label style="font-weight: bold" for="message">Description</label>
                    <textarea class="form-control" rows="5" id="message" name="descrption">{{ $product->descrption }}</textarea>
                </div>
            </div>
            @if (empty($product->attribute_id))
                <div class="col-md-4">
                    <div class="form-group">
                        <label style="font-weight: bold" for="unit_cost">Unit Cost</label>
                        <input type="hidden" id="variation" value="single">
                        <input type="number" step="0.01" class="form-control required_text" placeholder="Unit Cost"
                            id="unit_cost" name="unit_cost" required="" value="{{ $stock->unit_cost }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label style="font-weight: bold" for="unit_price">Selling Price</label>
                        <input type="number" step="0.01" class="form-control required_text"
                            placeholder="Selling Price" id="unit_price" name="unit_price" required=""
                            value="{{ $stock->unit_price }}">
                    </div>
                </div>
                <div class="col-md-4" id="single-second-price">
                    <div class="form-group">
                        <label style="font-weight: bold" for="second_price">Second Price</label>
                        <input type="number" step="0.01" class="form-control" placeholder="Second Price"
                            id="second_price" name="second_price" value="{{ $stock->second_price }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label style="font-weight: bold" for="available_qty">Availabel Quantity</label>
                        <input type="number" step="0.01" class="form-control" placeholder="Available Quantity"
                            id="available_qty" name="qty" required=""
                            @if (!empty($stock->qty)) value="{{ $stock->qty }}" @else value="0" @endif>
                    </div>
                </div>
            @else
                <input type="hidden" id="variation" value="variable">
            @endif
            <div class="col-md-4">
                <div class="form-group">
                    <label style="font-weight: bold">Product Image</label>

                    <input class="form-control dropify" type="file" name="image" id="image" accept="image/*">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label style="font-weight: bold">Current Image</label>
                    <img class="form-control" src="{{ asset($product->image) }}"
                        style="width: 100px;height: 100px;object-fit: cover;margin-bottom: 20px">
                </div>
            </div>
        </div>
        <div id="combo_section" @if ($product->is_combo == 'no') hidden @endif hidden>
            <div class="row justify-content-center">
                <div class="col-md-6 ">
                    <div class="form-group">
                        <div class="input-group">
                            <select class="form-control select2 " multiple="multiple" name="products[]"
                                id="product-list" data-placeholder="Select">
                                @foreach ($combo_products as $combo_product)
                                    <option value="{{ $combo_product->combo_product_id }}" selected>
                                        {{ $combo_product->product->product_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-responsive dash-social" hidden>
                <table id="datatable" class="table table-striped">
                    <thead class="thead-dark">
                        <tr>
                            <th>Product </th>
                            <th>Qty</th>
                        </tr>
                    </thead>
                    <tbody id="t-body">
                        @foreach ($combo_products as $key => $combo_product)
                            <tr>
                                <td><input class="form-control" type="text"
                                        name="combo[{{ $key }}][product_name]" id="product_name"
                                        value="{{ $combo_product->product->product_name }}" readonly></td>
                                <td><input type="hidden" class="form-control "
                                        name="combo[{{ $key }}][product_id]" id="product_id"
                                        value="{{ $combo_product->combo_product_id }}">
                                    <input type="number" class="form-control qty"
                                        name="combo[{{ $key }}][qty]" id="qty"
                                        value="{{ $combo_product->qty }}">
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 text-right">
                <button id="update-btn" type="submit" class="btn btn-primary px-5 py-2">Update</button>
            </div>
        </div>
        </form>
    </div>
    </div>
    </div>
@endsection
@section('scripts')
    <script>
        $('#sku').keyup(function() {
            let input = $('#sku').val();
            let url = "{{ route('products.validate-sku') }}";
            $.ajax({
                method: 'POST',
                url: url,
                data: {
                    "_token": "{{ csrf_token() }}",
                    sku: input
                },
                success: function(response) {
                    if (response.is_have == 'yes') {
                        $('#sku').val('');
                        Swal.fire(
                            'Error',
                            'This SKU already used',
                            'warning'
                        )
                    }
                }
            })
        });
        $('#product-list').on('change', function() {
            let id = $('#product-list').val();
            $.ajax({
                method: 'POST',
                url: "{{ url('/product/combo/add') }}",
                data: {
                    "_token": "{{ csrf_token() }}",
                    'id': id,
                },
                success: function(response) {
                    $('#datatable tbody').empty().html(response);
                }
            })
        });
        $('#attribute').click(function() {
            var id = $('#attribute_io').val();
            var second_id = $('#second_attribute_id').val();
            if (id == '') {
                $('#attribute-value-tbody').empty();
                return false;
            }
            let url = "{{ route('products.get_attribute_values') }}";
            $.ajax({
                method: 'POST',
                url: url,
                data: {
                    "_token": "{{ csrf_token() }}",
                    'id': id,
                    'second_id': second_id,
                },
                success: function(result) {
                    $(result).appendTo($("#attribute-value-tbody"));
                },
            });
        });
        $(document).on('click', '#remove-value', function() {
            this.closest('tr').remove();
        })
        $(document).on('click', "#attribute-value-tbody input[type='number']", function() {
            $(this).select();
        });
        $(document).on('click', '#update-btn', function(e) {
            e.preventDefault();
            let product_type = $('#variation').val();
            if (product_type != '' && product_type == 'variable') {
                let row_count = $('#attribute-table tbody tr').length;
                if (row_count == 0) {
                    $.toast({
                        heading: 'Error',
                        text: "No Variations in table.!",
                        position: 'top-right',
                        bgColor: '#f1646c',
                        icon: 'error',
                        showHideTransition: 'fade',
                        loaderBg: '#ecf0f1'
                    });
                    return false;
                }
            }
            let item_flag = false;
            $('#attribute-table tbody tr').each(function() {
                let qty = $(this).find('td #qty').val();
                let unit_cost = $(this).find('td #unit_cost').val();
                let unit_price = $(this).find('td #unit_price').val();
                if (parseFloat(unit_cost) == 0 || parseFloat(unit_price) == 0) {
                    item_flag = true;
                }
                if (qty == '' || unit_cost == '' || unit_price == '') {
                    item_flag = true;
                }
            });
            if (item_flag) {
                $.toast({
                    heading: 'Error',
                    text: "Please add values to variations, cannot be emply or 0 values.!",
                    position: 'top-right',
                    bgColor: '#f1646c',
                    icon: 'error',
                    showHideTransition: 'fade',
                    loaderBg: '#ecf0f1'
                });
                return false;
            }
            //disable save button when form is not error
            var textValid = true;
            var comboValid = true;
            $('.required_text').each(function() {
                if ($(this).val() === '') {
                    textValid = false;
                    return; // skip remaining checks
                }
            });
            $('.required_combo').each(function() {
                if ($(this).val() === '') {
                    comboValid = false;
                    return; // skip remaining checks
                }
            });
            if (textValid == true && comboValid == true) {
                // $(this).prop("disabled", true);
            }
            $('#update-product-form').submit();
        });
        // $(document).on('change', '#category', function() {
        //     let id = $(this).val();
        //     let select = '<option value="">Select</option>'
        //     if (id !== '') {
        //         // let url = "{{ route('categories.get_sub_categories', ':id') }}";
        //         url = url.replace(':id', id);
        //         $.ajax({
        //             method: 'GET',
        //             url: url,
        //             success: function(response) {
        //                 $('#sub_category_id').empty().html(response);
        //             },
        //             error: function(response) {
        //                 $('#sub_category_id').empty();
        //             }
        //         });
        //     } else {
        //         $('#sub_category_id').empty();
        //     }
        // });
        $(document).ready(function() {
            $('.select2').select2();

            $('#category').on('change', function() {
                let selectedCategories = $(this).val();

                if (selectedCategories.length > 0) {
                    $.ajax({
                        url: '/get-subcategories',
                        type: 'GET',
                        data: {
                            category_ids: selectedCategories
                        },
                        success: function(response) {
                            let subCategorySelect = $('#sub_category_id');
                            subCategorySelect.empty();
                            $.each(response.subcategories, function(index, subcategory) {
                                subCategorySelect.append('<option value="' + subcategory
                                    .id + '">' + subcategory.sub_category_name +
                                    '</option>');
                            });
                        }
                    });
                } else {
                    $('#sub_category_id').empty();
                }
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var table = document.getElementById('attribute-table');
            var rowCountElement = document.getElementById('row-count');

            function updateRowCount() {
                var rowCount = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr').length;
                rowCountElement.textContent = +rowCount;
            }

            // Call the updateRowCount function initially and whenever the table content changes
            updateRowCount();
            table.addEventListener('DOMSubtreeModified', updateRowCount);
        });
    </script>
    <script>
        function addAllRows() {
            var firstRowInput = document.querySelector('#attribute-value-tbody input.variation-value');
            var allRowsInputs = document.querySelectorAll('#attribute-value-tbody input.variation-value');
            
            if (firstRowInput.value.trim() !== '') {
                allRowsInputs.forEach(function(input) {
                    input.value = firstRowInput.value;
                });
            } else {
                alert('Please enter a value in the first row.');
            }
        }
        </script>
    <script>
        $(document).on('click', 'button.apply-all', function(){
            // var val = $(this).closest('.input-group').find('input').val();
            var val = $('#cost').val();
            var target_class = $(this).data('target-class');
            $(this).closest('tbody').find('tr').each( function(){
                element =  $(this).find(target_class);
                element.val(val);
                element.change();
            });
        });
        $(document).on('click', 'button.apply-price', function(){
            // var val = $(this).closest('.input-group').find('input').val();
            var val = $('#price').val();
            var target_class = $(this).data('target-class');
            $(this).closest('tbody').find('tr').each( function(){
                element =  $(this).find(target_class);
                element.val(val);
                element.change();
            });
        });
        $(document).on('click', 'button.apply-qty', function() {
            var val = $('.qty').val(); 
            var target_class = $(this).data('target-class');
            $(this).closest('tbody').find('tr').each(function() {
                element = $(this).find(target_class);
                element.val(val);
                element.change();
            });
        });
        $(document).on('click', 'button.apply-edit-all', function(){
            var val = $('#unit_cost').val();
            var target_class = $(this).data('target-class');
            $(this).closest('tbody').find('tr').each( function(){
                element =  $(this).find(target_class);
                element.val(val);
                element.change();
            });
        });
        $(document).on('click', 'button.apply-edit-price', function() {
            var val = $('.price-edit').val();
            var target_class = $(this).data('target-class');
            $(this).closest('tbody').find('tr').each(function() {
                element = $(this).find(target_class);
                element.val(val);
                element.change();
            });
        });
        $(document).on('click', 'button.apply-edit-qty', function() {
            var val = $('#qty').val();
            var target_class = $(this).data('target-class');
            $(this).closest('tbody').find('tr').each(function() {
                element = $(this).find(target_class);
                element.val(val);
                element.change();
            });
        });
    </script>
@endsection