@php
    if($loop ?? false) {
        $index = $loop->index;

        if (isset($laser_quantity) && $laser_quantity) {
            $index = 'laser-'.$index;
        }
        if (isset($gift_quantity) && $gift_quantity) {
            $index = 'gift-'.$index;
        }
    } else {
        isset($modalType)?$index= $modalType: $index = 'laser-modal';
    }
    $modelIs = ($modelIs ?? 'cart');
    $cssClassPrefix = ($classPrefix ?? 'cart');

    $laserPriceValue = App\Models\Settings::where("key","laser_price")->first()->value;

    $isLaserQuantityBox = isset($laser_quantity) && $laser_quantity;
    $isGiftQuantityBox = isset($gift_quantity) && $gift_quantity;
    $isLTR = isset($ltr) && $ltr;

    $isAdmin = ($isAdmin ?? false);

    $refreshPage = ($refreshPage??false);

    $isInTableLayout = ($isInTableLayout ?? false);


@endphp
<style>
    @media (max-width: 990px){
        .item-quantity.form-control{
            margin-top: 5px;
        }
    }
</style>
<div class="{{ $isInTableLayout ? '' : 'row m-0' }}" dir="ltr">
    <div class="{{ $isInTableLayout ? '' : 'col-md-8' }} d-flex align-content-center {{ $isLTR ? 'offset-md-4 justify-content-end':'' }}">
        <div class="form-group d-inline-block">
            <label class="d-block">
                <!-- fake label -->&nbsp;</label>
            <button
                type="button"
                class="btn btn-sm btn-dark quantity-btn minus-btn"
                onclick="decQuantity('quantity-{{ $index }}', '{{ $item->id }}')">
                <i class="fa fa-minus text-light"></i>
            </button>
        </div>
        <div class="form-group text-right d-inline-block">
            <label
                for="quantity-{{ $index }}">{{ $label??'' }}</label>
            <input
                readonly
                dir="rtl"
                type="number"
                name="quantities[{{$item->id}}]"
                id="quantity-{{ $index }}"
                class="item-quantity form-control"
                data-index="{{ $index }}"
                data-itemid="{{$item->id}}"
                data-update_laser_price="{{$isLaserQuantityBox}}"
                data-should_check_availability_quantity="{{is_numeric($index) || $isLaserQuantityBox ? "true" : "false"}}"
                value="{{ (is_numeric($index) && !$isLaserQuantityBox) ? $item->quantity : (($index=='laser-modal'||($isLaserQuantityBox&&!$isGiftQuantityBox)) ? $item->laser_quantity : $item->gift_quantity) }}"
            />
        </div>
        <h1>
        </h1>
        <div class="form-group d-inline-block">
            <label class="d-block">
                <!-- fake label -->&nbsp;</label>
            <button
                type="button"
                class="btn btn-sm btn-dark quantity-btn plus-btn"
                onclick="incQuantity('quantity-{{ $index }}', '{{ $maxQuantity ?? '0' }}', '{{ $item->id }}')">
                <i class="fa fa-plus text-light"></i>
            </button>
        </div>
    </div>
</div>

<!-- unavailable-cart-items when old order has new checkout request and there are not enough quantities -->
@if(\Session::has('unavailableCartItems') && in_array($item->id, array_keys(\Session::get('unavailableCartItems'))))
    <div class="row alert-box-session-quantity" id="alert-box-session-quantity-{{ $index }}">
        <div class="col-md-4"></div>
        <div class="col-md-8 d-flex align-content-center">
            <div class="alert alert-warning text-right m-0">
                {{ (\Session::get('unavailableCartItems'))[$item->id] }}
            </div>
        </div>
    </div>
@endif

<div class="row alert-box-quantity" id="alert-box-quantity-{{ $index }}" hidden>
    <div class="col-12 d-flex align-content-center {{ $isLTR ? 'justify-content-start':'justify-content-end' }}">
        <div class="alert alert-warning text-right m-0">
            @if($item && $item->item_color && $item->item_color->preorder_quantity>0)
                لقد تخطيت الكمية المسموحة
            @else
                الكمية المطلوبه غير متوفره !
            @endif
        </div>
    </div>
</div>

@once
    @push('js-stack')
        <script>
            calculateTotalPricesWithQuantities();

            $('.item-quantity').on('change', function () {
                if ($(this).data('update_laser_price')) {
                    calculateLaserTotalWithQuantities($(this));
                } else {
                    calculateItemTotalWithQuantities($(this));
                }

                calculateTotalPricesWithQuantities();
            });

            function calculateItemTotalWithQuantities(qtyInput) {
                let cartItemPrice = qtyInput.closest('.{{$cssClassPrefix}}-item').find('.discounted-price');

                let price = cartItemPrice.val();
                let quantity = qtyInput.val();

                let relatedLaserField = $('#quantity-laser-' + qtyInput.data('index'));

                if (relatedLaserField.val() > quantity) {
                    relatedLaserField.val(quantity);
                    calculateLaserTotalWithQuantities(relatedLaserField);
                }

                let intl = new Intl.NumberFormat();
                qtyInput.closest('.{{$cssClassPrefix}}-item').find('.{{$cssClassPrefix}}-item-total-price').html(intl.format(parseInt(quantity * price)) + ' ₪');
            }

            function calculateLaserTotalWithQuantities(qtyInput) {
                let cartItemPrice = qtyInput.closest('.{{$cssClassPrefix}}-item').find('.laser-price');

                let price = '{{$laserPriceValue}}';
                let quantity = qtyInput.val();

                cartItemPrice.val(quantity * price);

                let intl = new Intl.NumberFormat();
                qtyInput.closest('.{{$cssClassPrefix}}-item').find('.{{$cssClassPrefix}}-item-total-laser-price').html(intl.format(parseInt(quantity * price)));
            }

            function incQuantity(input_filed_id, maxQuantity = 0, modelId = null) {

                if(input_filed_id.includes('laser')) {
                    $('#msg-laser').show()

                    $('.hideOnEdit').each(function(){
                        if($(this).text()!=''){
                            $('#msg-laser').hide()
                        }
                    })
                }
                if(input_filed_id.includes('gift')) {
                    $('#msg-gift').show()

                    $('.hideOnEditGift').each(function () {
                        if ($(this).text() != '') {
                            $('#msg-gift').hide()
                        }
                    })
                }
                toggleAvailabilityAlert(true, input_filed_id)
                let quantity = $(`#${input_filed_id}`).val();
                if (maxQuantity != 0 && quantity >= maxQuantity) {
                    return;
                }

                if (checkAvailabilityOrderQuantity(input_filed_id, (parseInt(quantity) + 1), modelId)) {
                    quantity++;
                }

                $(`#${input_filed_id}`).val(quantity);

                if(input_filed_id.includes('laser')){
                    console.log(input_filed_id,input_filed_id.includes('laser'),input_filed_id.includes('gift'))
                    console.log(quantity)
                    $('.hideOnEdit').hide()
                    $.ajax({
                        url: "{{route("update-laser-quan")}}",
                        type: "POST",
                        data: {id: modelId,quantity:quantity,modelType: '{{$modelIs}}',function:'incQuantity'},
                        traditional: true,
                        success: function (result) {
                            $(document).find('#appendTextLase').html(result)
                            additionalNote=[]
                            if(input_filed_id != 'quantity-laser-modal'&&input_filed_id != 'quantity-gift-modal'){
                                location.reload();
                            }
                        },
                        error: function () {
                            alert("Something went wrong");
                        }
                    });
                }else if (input_filed_id.includes('gift')) {
                    $('.hideOnEditGift').hide()
                    $.ajax({
                        url: "{{route("update-gift-quan")}}",
                        type: "POST",
                        data: {id: modelId,quantity:quantity,modelType: '{{$modelIs}}',function:'incQuantity'},
                        traditional: true,
                        success: function (result) {
                            $(document).find('#appendTextGift').html(result)
                            // $(document).find('#add-message').trigger('click')
                            additionalNoteGift=[]
                            if(input_filed_id != 'quantity-laser-modal' && input_filed_id != 'quantity-gift-modal'){
                                location.reload();
                            }
                        },
                        error: function () {
                            alert("Something went wrong");
                        }
                    });
                }else{
                    location.reload();
                }

                $('.item-quantity').trigger('change');
            }

            function toggleAvailabilityAlert(hiddenState, fieldId) {
                let alertBox = $(`#alert-box-${fieldId}`);
                alertBox.attr('hidden', hiddenState);
            }

            function decQuantity(input_filed_id, modelId = null,type = null) {
                additionalNote=[]
                additionalNoteGift=[]
                toggleAvailabilityAlert(true, input_filed_id)
                let quantity = $(`#${input_filed_id}`).val();

                if (quantity <= 1) {
                    return;
                }

                let laserPrice = "{{ $laserPriceValue }}";

                quantity--;

                if(input_filed_id!='quantity-gift-modal'){
                    let itemLaserQuantity = $(`#laser-quantity-${modelId}`);
                    let itemTotalLaserPrice = $(`#total-laser-price-${modelId}`);

                    if (quantity < $(`#laser-quantity-input-${modelId}`).val()) {
                        itemLaserQuantity.html(quantity);
                        itemTotalLaserPrice.html(laserPrice * quantity);

                        $(`#laser-${modelId}`).val((laserPrice * quantity));

                        if (quantity <= 1) {
                            itemLaserQuantity.closest('div').attr('hidden', true);
                        } else {
                            itemLaserQuantity.closest('div').attr('hidden', false);
                        }
                    }
                }

                checkAvailabilityOrderQuantity(input_filed_id, quantity, modelId);

                $(`#${input_filed_id}`).val(quantity);

                if (input_filed_id.includes('gift')){
                    $('.hideOnEditGift').hide()
                    updateGift(modelId,quantity,input_filed_id)
                }else if(input_filed_id.includes('laser')){
                    $('#msg-laser').hide()
                    $('.hideOnEdit').hide()
                    updateLaser(modelId,quantity,input_filed_id)
                }else{
                    updateLaser(modelId,quantity,input_filed_id)
                    updateGift(modelId,quantity,input_filed_id)
                }

                $('.item-quantity').trigger('change');

            }

            function checkAvailabilityOrderQuantity(fieldId, quantity, modelId = null) {
                let checkAvailability = $(`#${fieldId}`).data('should_check_availability_quantity');

                if (!checkAvailability) {
                    return true;
                }


                let alertWithSessionBox = $(`#alert-box-session-${fieldId}`);

                let isAvailable;

                let model = '{{ $modelIs }}';

                let isAdmin = '{{ $isAdmin }}';

                let updateOrderPrices = '{{ ($modelIs == 'order_item') }}';
                let updateLaserPrice = $(`#${fieldId}`).data('update_laser_price');

                $.ajax({
                    async: false,
                    url: '{{route("check-availability-quantity")}}',
                    type: 'get',
                    data: {quantity, modelId, model, updateOrderPrices, updateLaserPrice, isAdmin},
                    isAvailable: true,
                    success: function (response) {
                        if (response.status == 'not-available') {

                            if (! updateLaserPrice) {
                                toggleAvailabilityAlert(false, fieldId);
                            }

                            isAvailable = false;
                        } else if (response.status == 'available') {
                            if(Boolean('{{$refreshPage}}')) {
                                window.location.reload();
                            }

                            showAlertQuantityUpdated();

                            if (response.total) {
                                let intl = new Intl.NumberFormat();

                                let total = intl.format(response.total);
                                let installment_value = intl.format(parseInt(response.total / response.months));

                                if(response.delivery && response.delivery > 0) {
                                    $(`#with_delivery`).html(response.delivery);
                                } else if(response.delivery == 0) {
                                    $(`#with_delivery`).html('مجاني');
                                }

                                $(`#total`).html(total)
                                $('#installment_value').html(installment_value);
                                $('#installment_months').html(response.months);
                            }

                            toggleAvailabilityAlert(true, fieldId)
                            isAvailable = true;

                        } else if (response.status == 'laser-exceed-quantity') {
                            isAvailable = false;
                        } else {
                            console.log(response.status);
                        }

                        if (alertWithSessionBox.length) {
                            alertWithSessionBox.attr('hidden', true);
                        }
                    }
                });

                return isAvailable;
            }

            function calculateTotalPricesWithQuantities() {
                let totalNoneDiscountedPrice = 0;

                $('.none-discounted-price').each(function (index, value) {

                    let quantity = $(`#quantity-${index}`).val();
                    let price = $(value).val();

                    totalNoneDiscountedPrice += (quantity * price);

                });

                let totalDiscountedPrice = 0;

                $('.discounted-price').each(function (index, value) {

                    let quantity = $(`#quantity-${index}`).val();
                    let price = $(value).val();

                    totalDiscountedPrice += (quantity * price);

                });




                let totalLaserPrice = 0;
                let bundleDiscount = 0;

                bundleDiscount = $("#bundleDiscount").val();

                $('.laser-price').each(function (index, value) {
                    let price = $(value).val();

                    totalLaserPrice += parseInt(price);
                    // totalLaserPrice += (quantity * price);
                });

                let intl = new Intl.NumberFormat();

                $('#none_discounted_price').html(intl.format(parseInt(totalNoneDiscountedPrice)));
                $('#total_laser_price').html(intl.format(parseInt(totalLaserPrice)));
                $('#discounted_price').html(intl.format(parseInt(totalDiscountedPrice + totalLaserPrice - bundleDiscount)));
                $('#before_discounted_price').html(intl.format(parseInt(totalDiscountedPrice + totalLaserPrice)));
            }

            function showAlertQuantityUpdated() {
                $("#alert").fadeIn();

                setTimeout(() => {
                    $("#alert").fadeOut();
                }, 1000)
            }

            function updateLaser(modelId,quantity,input_filed_id){
                $.ajax({
                    url: "{{route("update-laser-quan")}}",
                    type: "POST",
                    data: {id: modelId,quantity:quantity,modelType: '{{$modelIs}}',function:'decQuantity'},
                    traditional: true,
                    success: function (result) {
                        $(document).find('#appendTextLase').html(result)
                        if(input_filed_id!='quantity-gift-modal'&&input_filed_id!='quantity-laser-modal'){
                            window.location.reload();
                        }
                    },
                    error: function () {
                        alert("Something went wrong");
                    }
                });
            }

            function updateGift(modelId,quantity,input_filed_id){
                $.ajax({
                    url: "{{route("update-gift-quan")}}",
                    type: "POST",
                    data: {id: modelId,quantity:quantity,modelType: '{{$modelIs}}',function:'decQuantity'},
                    traditional: true,
                    success: function (result) {
                        $(document).find('#appendTextGift').html(result)
                        if(input_filed_id!='quantity-gift-modal'&&input_filed_id!='quantity-laser-modal'){
                            window.location.reload();
                        }
                    },
                    error: function () {
                        alert("Something went wrong");
                    }
                });
            }
        </script>
    @endpush
@endonce