@if($item->choice)
    @else
    @endif

<div x-data="cartItem({{ $item->carts_items_id }}, {{ $item->carts_items_count }}, '{{ $item->FK_products_id }}', '{{ $item->FK_products_choices_id ?? '' }}','{{$item->carts_items_price}}',`{{ $item->product->products_title ?? ''}}` )"
    class="{{ $stock <= 0 && $account->accounts_show_stocks == '1' ? 'background_5 client-auth-card' : '' }} card-with-border cart-item {{$dir}}">
    <div x-show="loading" x-cloak
        style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.7); z-index: 9999;"
        :class="loading ? 'd-flex align-items-center justify-content-center' : 'hidden' ">
        <div class="loader-icon " ></div>
    </div>


    <div class="card-body p-md-3 p-0 pb-1 position-relative ">
        <div class="row">
            <div class="col-auto">
                <a aria-label="go to product page" href="{{ route('product',['products_code'=>$item->product->products_code ,'products_slug'=>$item->product->trans[0]->products_slug  ?? $item->product->products_id]) }}" >

                        
                        <img src="{{  $cartImage ? $imagesBaseUrl.'uploads/'.env('accountId').'/products/medium/'. $cartImage : $imagesBaseUrl.'img/no-image.png'}}" alt="{{ $item->product->products_title }}" height="100px" width="100px" class="cover-img object-position-center rounded-sm mw-100 cart-item-img">

                </a>
            </div>

            <div class="col d-flex flex-column justify-content-between">
                <div>
                    @if($stock <= 0 && $account->accounts_show_stocks == '1')<del> @endif
                    <div class="d-flex align-items-center justify-content-between">
                        <a aria-label="go to product page" href="{{ route('product',['products_code'=>$item->product->products_code ,'products_slug'=>$item->product->trans[0]->products_slug  ?? $item->product->products_id]) }}" class="font-20 {{ $account->accounts_website_theme == 'theme6' ? 'text_4' : 'text_1' }} me-4 fb-500" > {{ $item->product->products_title }}</a>

                        @if(!isset($viewOnly) || $viewOnly == false)
                        <button type="button" @click="removeItem" class="text_3 remove-cart-item border-0 background_2 p-0"> <i class="polaris-max-icon-trash font-20"></i> </button>
                        @endif

                    </div>
                    {{-- <div class="font-16 text_3" > {{ getCategoriesName($item->product->FK_categories_id,$categoriesTree) }}</div> --}}

                    @if($item->choice)
                        @if($stock <= 0 && $account->accounts_show_stocks == '1')<del> @endif
                        <div class="font-16 {{ $account->accounts_website_theme == 'theme6' ? 'text_4' : 'text_1' }} mb-2" >
                            @if($item->choice->choices)
                            <span class="fb-400">
                                @foreach($item->choice->choices as $choice)
                                    <span class="text_1">{{ $choice->trans[0]->choices_title }} </span> @if($loop->last) @else , @endif
                                @endforeach
                            </span>
                            @endif
                        </div>
                        @if($stock <= 0 && $account->accounts_show_stocks == '1')</del> @endif
                    @endif

                    @if(isset($item->product_offer) && $item->product_offer && $item->product_offer != null && ($stock > 0 || $account->accounts_show_stocks != '1' ) )
                     <span class=" font-12 {{ $account && in_array($account->accounts_website_theme,['theme1','theme2']) ? 'background_4 text_5' : 'background_1 text_2 border-radius-50' }} py-1 ps-2 pe-3 offer-badge d-inline-block "> {{ $item->product_offer->trans[0]->offers_title }} </span>
                    @endif
                </div>

                <div class="d-flex align-items-center justify-content-between">
                    @if($stock <= 0 && $account->accounts_show_stocks == '1')</del> @endif
                    <div class="max-w-50" >
                        @if($stock <= 0 && $account->accounts_show_stocks == '1')<del> @endif
                        <span class="font-20 fb-700 {{ $account->accounts_website_theme == 'theme6' ? 'text_4' : 'text_1' }} {{ $stock <= 0 && $account->accounts_show_stocks == '1' ? '' : ' d-inline-block' }} ">
                            @include('components.currency',['price'=>format_price($item->carts_items_total,$account->accounts_number_decimal_digits) ])
                        </span>
                        @if($stock <= 0 && $account->accounts_show_stocks == '1')</del> @endif
                        @if($item->carts_items_price_before_sale && $item->carts_items_price_before_sale > 0)
                            <del class="font-16 text_3 ">
                                @include('components.currency',['price'=>format_price($item->carts_items_price_before_sale * $item->carts_items_count,$account->accounts_number_decimal_digits) ])
                            </del>
                        @endif

                    </div>
                    @if(!isset($viewOnly) || $viewOnly == false)
                        @if($stock > 0 || $account->accounts_show_stocks != '1')
                            <input type="hidden" name="products-id-{{ $item->carts_items_id }}" id="products-id-{{ $item->carts_items_id }}" value="{{ $item->FK_products_id }}">
                            <input type="hidden" name="products-choices-id-{{ $item->carts_items_id }}" id="products-choices-id-{{ $item->carts_items_id }}" value="{{ $item->FK_products_choices_id }}">
                            @if($item->product->products_type == 'weight' && $item->product->products_lowest_weight_available && $account->accounts_show_product_type)
                                <select class="form-control col-md-3 col-12 text-left select2 border-1" id="product-count-{{$item->carts_items_id}}"   onChange="changeWeight('{{ $item->carts_items_id }}')">
                                    @php $weight = $item->product->products_lowest_weight_available  @endphp
                                    @while ($weight <= 10)
                                        <option value="{{number_format($weight, 3, '.', ' ')}}" {{(double)$item->carts_items_count == $weight ? 'selected' : ''}}  >{{number_format($weight, 3, '.', ' ')}} {{__('lang.kg')}}</option>
                                        @php $weight +=  $item->product->products_lowest_weight_available     @endphp
                                    @endwhile
                                </select>
                            @else
                                <div class="input-group product-quantity">
                                    <input type="hidden" x-model="count">
                                    <button type="button" class="input-group-text minus main-btn border-radius-50 border-1" id="minus-btn-{{ $item->carts_items_id }}" @click="count <= 1 ? removeItem() : decrease()"><i class="font-20" :class="count <= 1 ? 'polaris-max-icon-trash' : 'polaris-max-icon-minus'"></i></button>
                                    <input x-model="count" type="text" class="form-control input-number {{ $account->accounts_website_theme == 'theme6' ? 'text_4' : 'text_1' }}" name="number" id="product-count-{{ $item->carts_items_id }}" value="{{ (int)$item->carts_items_count }}" @change="updateCart">
                                    <button type="button" class="input-group-text plus main-btn border-radius-50 border-1" id="plus-btn-{{ $item->carts_items_id }}" @click="increase" ><i class="polaris-max-icon-plus font-20"></i></button>
                                </div>
                            @endif
                        @else
                            <span class="out-stock text_5 font-12">{{ __('lang.outOfStock') }} </span>
                        @endif
                    @endif
                </div>
            </div>

        </div>

    </div>
    @if( !$loop->last) <hr class="my-0"> @endif
</div>

@push('css')
    <style>
        .loader-icon {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #333;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
@endpush

@push('js')
    <script>
        function cartItem(id, initialCount, productId, choiceId = null, price = null, product_name = null) {
            return {
                id,
                count: initialCount,
                productId,
                choiceId,
                price:price,
                product_name:product_name,
                loading: false,
                increase() {   
                    this.count++;
                    typeof trackAddToCart === 'function' && trackAddToCart(this.productId, this.product_name, this.price, this.count);
                    this.updateCart();
                },
                decrease() {
                    if (this.count > 1) {
                        this.count--;
                        typeof trackAddToCart === 'function' && trackAddToCart(this.productId, this.product_name, this.price, this.count);
                        this.updateCart();
                    }
                    // else{
                    //     this.removeItem();
                    // }
                },
                updateCart() {
                    this.loading = true;
                    let params = new URLSearchParams({
                        products_id: this.productId,
                        products_choices_id: this.choiceId,
                        products_count: this.count,
                        response: 'content',
                        view_path: 'cart.cart-content'
                    });

                    fetch(`{{ route('changeCart') }}?${params.toString()}`, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(res => {
                        const contentType = res.headers.get("content-type");
                        if (contentType && contentType.indexOf("application/json") !== -1) {
                            return res.json().then(data => ({type: 'json', data}));
                        }
                        return res.text().then(html => ({type: 'html', html}));
                    })
                    .then(result => {
                       
                        if(result.type == 'json'){
                            if(result.data.status == 'failed'){
                                if(result.data.error_code == 'CART_PAYMENT_CONFLICT'){
                                    showConfirmModal("{{ __('lang.failed') }}",result.data.msg,'error',"{{ __('lang.goToPaymentsPage') }}", "{{ route('purchase') }}")
                                }else{
                                    showErrorToastify(result.data.msg );
                                }
                            }
                        }else{
                            let cart = document.querySelector('#cart-content');
                            if (cart) cart.innerHTML = result.html;

                            setTimeout(() => {
                                const countField = document.getElementById('countCartField');
                                if(countField){
                                    document.querySelectorAll('.spanCart').forEach(span=>
                                        span.innerHTML = countField.value
                                    );
                                }
                            }, 50);
                        }
                        this.loading = false;
                    })
                    .catch(err => { console.error(err); this.loading = false; });
                },
                removeItem() {
                    typeof trackRemoveFromCart === 'function' && trackRemoveFromCart(this.productId, this.product_name, this.price, this.count);
                    this.loading = true;
                    let params = new URLSearchParams({
                        carts_items_id: this.id,
                        response: 'content',
                        view_path: 'cart.cart-content'
                    });

                    fetch(`{{ route('deleteFromCart') }}?${params.toString()}`, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(res => {
                        const contentType = res.headers.get("content-type");
                        if (contentType && contentType.indexOf("application/json") !== -1) {
                            return res.json().then(data => ({type: 'json', data}));
                        }
                        return res.text().then(html => ({type: 'html', html}));
                    })
                    .then(result => {
                        if(result.type == 'json'){
                            if(result.data.status == 'failed'){
                                if(result.data.error_code == 'CART_PAYMENT_CONFLICT'){
                                    if(result.data.order_id){
                                        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                                        showConfirmModal("{{ __('lang.failed') }}",result.data.msg,'error',"{{ __('lang.deleteAllPayments') }}", null, function(){
                                            fetch('{{ route('refundPayments') }}', {
                                                method: 'POST',
                                                headers: {
                                                    'X-Requested-With': 'XMLHttpRequest',
                                                    'Accept': 'application/json',
                                                    'Content-Type': 'application/json',
                                                    'X-CSRF-TOKEN': csrfToken
                                                },
                                                body: JSON.stringify({ orders_id: result.data.order_id, refund_all: 1 })
                                            }).then(r=>r.json()).then(d=>{
                                                if(d.status==200){ showSuccessToastify(d.message || '{{ __('lang.refundSuccessfully') }}'); window.location.reload(); }
                                                else{ showErrorToastify(d.message || '{{ __('lang.refundFailed') }}'); }
                                            }).catch(()=>{ showErrorToastify('{{ __('lang.refundFailed') }}'); });
                                        })
                                    }else{
                                        showConfirmModal("{{ __('lang.failed') }}",result.data.msg,'error',"{{ __('lang.goToPaymentsPage') }}", "{{ route('purchase') }}")
                                    }
                                }else{
                                    showErrorToastify(result.data.msg );
                                }
                                this.loading = false;
                            }else{
                                // Should be unreachable if success returns HTML, but just in case
                                this.loading = false;                            }
                        }else{
                             let cart = document.querySelector('#cart-content');
                            if (cart) cart.innerHTML = result.html;
                            setTimeout(() => {
                                const countField = document.getElementById('countCartField');
                                if(countField){
                                    document.querySelectorAll('.spanCart').forEach(span=>
                                        span.innerHTML = countField.value
                                    );
                                }
                            }, 50);
                            this.loading = false;
                        }
                    })
                    .catch(err => { console.error(err); this.loading = false; });
                },
                updateCartView(data) {

                    fetch(`{{ route('cart') }}?is_ajax=1`)
                        .then(res => res.text())
                        .then(html => {
                            let cart = document.querySelector('#cart-content');
                            if (cart) cart.innerHTML = html;
                        })
                        .catch(err => console.error(err));

                        document.querySelectorAll('.spanCart').forEach(span=>
                            span.innerHTML = data.cart && data.cart.carts_products_total_count ?  data.cart.carts_products_total_count : 0
                        );
                        this.loading = false;

                }
            }
        }
    </script>

@endpush