@if ($products->count() > 0)
    @foreach ($products as $product)
        <tr>
            <td>{{$product->id}}</td>
            <td>
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <img src="{{asset($product->thumbnail_image)}}" alt="" class="avatar-sm">
                    </div>
                </div>
            </td>
            <td>{{ $product->name }}</td>
            <td>{{ $product->unit_price }}</td>
            <td>
                @php
                    $userDiscount = $product->userDiscounts->where('user_id', $user->id)->first();
                @endphp

                <input type="number" class="form-control" name="discounts[{{$product->id}}]" value="{{ $userDiscount ? $userDiscount->discount : $product->unit_price }}" placeholder="Discount" required>
            </td>
        </tr>
        <tr>
            <td colspan="5">
                <div class="row">
                    <div class="col-md-12 d-flex justify-content-end">
                        {{--  add more button  --}}
                        <button type="button" class="btn btn-sm btn-primary addMoreBtn">Add Wholesale Price</button>
                    </div>
                    <div class="col-md-12 wholeSalePriceContainer">
                        @php
                            $wholesale_prices = $product->wholesalePrices()->where('user_id', $user->id)->get();
                            if(count($wholesale_prices) == 0){
                                $wholesale_prices = $product->wholesalePrices()->where('user_id', null)->get();
                            }
                        @endphp
                       @if ($wholesale_prices->count() > 0)
                            @foreach ($wholesale_prices as $p_wholesale_price)
                            <div class="row singleWholeSalePriceRow">
                                <div class="col-md-3">
                                    <label for="min_qty">Min Qunatity</label>
                                    <input type="number" class="form-control min_quantity" name="min_quantity[{{$product->id}}][]"  placeholder="Min Qunatity" value="{{ $p_wholesale_price->min_quantity }}" required>
                                </div>
                                <div class="col-md-3">
                                    <label for="max_qty">Max Qunatity</label>
                                    <input type="number" class="form-control max_quantity" name="max_quantity[{{$product->id}}][]"  placeholder="Max Qunatity" value="{{ $p_wholesale_price->max_quantity }}" required>
                                </div>
                                <div class="col-md-3">
                                    <label for="price">Price</label>
                                    <input type="number" class="form-control" name="price_per_unit[{{$product->id}}][]"  placeholder="Price Per Unit" value="{{ $p_wholesale_price->price_per_unit }}" required>
                                </div>
                                {{--  delete btn  --}}

                                <div class="col-md-3 d-flex justify-content-start align-items-center">
                                    <a href="#" class="text-danger d-inline-block d-flex mt-3 align-items-center remove-item-btn removeWholesalePriceBtn">
                                        <i class="ri-delete-bin-5-fill fs-2"></i>
                                    </a>
                                </div>
                            </div>
                            @endforeach
                       @endif
                    </div>
                </div>
            </td>
        </tr>
    @endforeach
@endif
<script>
    $(document).ready(function() {
        let singleHtml = `<div class="row singleWholeSalePriceRow">
            <div class="col-md-3">
                <label for="min_qty">Min Qunatity</label>
                <input type="number" class="form-control min_quantity" name="min_quantity[{{$product->id}}][]"  placeholder="Min Qunatity" required>
            </div>
            <div class="col-md-3">
                <label for="max_qty">Max Qunatity</label>
                <input type="number" class="form-control max_quantity" name="max_quantity[{{$product->id}}][]"  placeholder="Max Qunatity" required>
            </div>
            <div class="col-md-3">
                <label for="price">Price</label>
                <input type="number" class="form-control" name="price_per_unit[{{$product->id}}][]"  placeholder="Price" required>
            </div>
            <div class="col-md-3">
                <a href="#" class="text-danger d-inline-block d-flex mt-4 align-items-center remove-item-btn removeWholesalePriceBtn">
                    <i class="ri-delete-bin-5-fill fs-2"></i>
                </a>
            </div>
        </div>`;
        $('.addMoreBtn').on('click',function(){
            let wholeSalePriceContainer = $(this).parent().parent().find('.wholeSalePriceContainer');
            wholeSalePriceContainer.append(singleHtml);
        })

        $(document).on('change', '.min_quantity', function (e) {
            e.preventDefault();
            const minQty = $(this).val();
            console.log('min qty changed');
            let wholeSalePriceContainer = $(this).closest('.wholeSalePriceContainer');

            let minQtyElements = wholeSalePriceContainer.find('.min_quantity');
            if(minQtyElements.length == 1){
                //min qty must be 2
                let minQty = minQtyElements.val();
                if(minQty < 2){
                    $(this).val('');
                    fireError('Min quantity must be greater than 1', 'error');
                }
            }else{
                validateAllWholeSalePrices(minQty, $(this));
            }

        });

        $(document).on('change', '.max_quantity', function (e) {
            e.preventDefault();
            const maxQty = $(this).val();
            let wholeSalePriceContainer = $(this).closest('.wholeSalePriceContainer');

            let maxQtyElements = wholeSalePriceContainer.find('.max_quantity');
            if(maxQtyElements.length == 1){
               //max qty should be greater than closestw min qty
                 let minQty = wholeSalePriceContainer.find('.min_quantity').val();
                    if(maxQty > minQty){
                        $(this).val('');
                        fireError('Max quantity must be greater than ' + minQty, 'error');
                    }
            }else{
                validateAllWholeSalePrices(maxQty, $(this));
            }


        });

        function validateAllWholeSalePrices(requiredQty, targetElement) {
            //action can be min_quantity or max_quantity
            requiredQty = parseInt(requiredQty);
            let isValid = true;
            allMaxQtys = [];
            allMinQts = [];

            let wholeSalePriceContainer = targetElement.closest('.wholeSalePriceContainer');
            let minQtyElements = wholeSalePriceContainer.find('.min_quantity');
            let maxQtyElements = wholeSalePriceContainer.find('.max_quantity');

            minQtyElements.each(function (index, element) {
                let minQty = $(element).val();
                if (minQty) {
                    allMinQts.push(parseInt(minQty));
                }
            });

            maxQtyElements.each(function (index, element) {
                let maxQty = $(element).val();
                if (maxQty) {
                    allMaxQtys.push(parseInt(maxQty));
                }
            });

            //check if target element is min_quantity element
            if (targetElement.hasClass('min_quantity')) {
                allMinQts.pop();
            }else{
                allMaxQtys.pop();
            }

            console.log(allMinQts, allMaxQtys);

            const maxFromMaxQts = allMaxQtys.length > 0 ? Math.max(...allMaxQtys) : 0;
            const maxFromMinQts = allMinQts.length > 0 ? Math.max(...allMinQts) : 0;

            const maximumNoFromMinAndMax = Math.max(maxFromMaxQts, maxFromMinQts);

            console.log(maximumNoFromMinAndMax, requiredQty, maxFromMinQts, maxFromMaxQts);

            if (requiredQty <= maximumNoFromMinAndMax) {
                isValid = false;
                targetElement.val('');
                fireError('Required quantity must be greater than ' + maximumNoFromMinAndMax, 'error');
            }

        }


        function fireError(message= '', type='error'){
            Swal.fire({
                icon: type,
                title: 'Oops...',
                text: message,
            });
        }

        $(document).delegate('.removeWholesalePriceBtn', 'click', function(){
            $(this).closest('.singleWholeSalePriceRow').remove();
        })
    });
</script>