@extends('layouts.app')
@php
    $userID = auth()->user() ? auth()->id() : 1;
@endphp
@section('content')
    <section class="pt-lg-5 pt-md-5 mt-lg-5 mt-md-5 pb-0 cart-sec">
        <div class="container-fluid">
            @if($cartItems->count() > 0)
                <div class="row mx-lg-5 mt-lg-0  my-4">
                    <div class="col-12">
                        <h3 class="mb-3">My Cart</h3>
                    </div>
                    <div class="col-lg-8 col-md-12">
                        <div class="mb-3 p-2 bg-white">
                            <div class="mb-2 w-100  table">
                                <div class="items" style="max-height: 70vh; overflow-y:auto;">
                                    @forelse($cartItems as $cartItem)
                                        <x-cart-item :cartItem="$cartItem"/>
                                    @empty
                                        <div>
                                            <div>No Items in the cart</div>
                                        </div>
                                    @endforelse
                                    <div class="position-relative selected-product d-md-flex items-align-center"
                                    id="cart_row-">
                                    <div class="item-thumbnail image-list-cart">
                                        <a href="{{ route('item.show', $cartItem['associatedModel']) }}">
                                            <img class="object-scale-down" src="
                                            " width="80" height="80" data-max-width="80"
                                                data-max-height="80" alt="{{ $cartItem->name }}'s Image">
                                        </a>
                                    </div>
                                    <div class="item-info align-middle cart-product-name">
                                        <a href="{{ route('item.show', $cartItem['associatedModel']) }}">
                                            <h6 class="item-title">{{ $cartItem->name }}</h6>
                                        </a>
                                        @if(!empty($cartItem->size))
                                            <p class="item-title">
                                                Size: <span>{{ $cartItem->size}}</span>
                                                <span class="fw-bold m-3"> | </span>
                                                <span> Color: {{ empty($cartItem->color) ? '' : $cartItem->color }}</span>
                                            </p>
                                        @endif
                                    </div>
                                    <div class="item-qty mt-2 align-middle cart-qunatity">
                                        <div class="product-quantity justify-content-center d-flex">
                                            <div class="quantity quantity-2 YK-quantity">
                                                <span class="decrease"
                                                    onclick="decreaseQuantity('{{ $cartItem->id }}')">
                                                    <i class="fas fasu fa-minus"></i>
                                                </span>
                                                <input class="qty-input no-focus YK-qty"
                                                    data-page="product-view" title="Available Quantity"
                                                    type="text" id="quantity-{{ $cartItem->id }}"
                                                    name="quantity" max="10" min="1"
                                                    value="{{ $cartItem->quantity }}" readonly="">
                                                <span class="increase"
                                                    onclick="increaseQuantity('{{ $cartItem->id }}')"> <i
                                                        class="fas fasu fa-plus"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cart-price-container">
                                        <div class="mrp">
                                            @if(isset($cartItem->attributes['variant']->mrp) )
                                                <span>MRP</span>
                                                <span><i class="fas fa-rupee-sign" style=" font-size: 12px; font-weight: 600; "></i> {{ $cartItem->attributes['variant']->mrp }}</span>
                                            @else
                                                <span>MRP</span>
                                                <span><i class="fas fa-rupee-sign" style=" font-size: 12px; font-weight: 600; "></i> {{ $cartItem->associatedModel->price }}</span>
                                            @endif
                                        </div>
                                        <div class="saleprice" id="price-{{ $cartItem->id }}">
                                            <span>Our Price</span>
                                            <span><i class="fas fa-rupee-sign" style=" font-size: 12px; font-weight: 600; "></i> {{ Cart::session(cartSessionId())->get($cartItem->id)->price }}
                                                @if(!empty($offer_type))
                                                    @if($cartItem->id == $offer->item_id)
                                                        @if($offer_type =='flat')
                                                            (RS. {{$offer_amount}} OFF)
                                                        @else
                                                        ({{$offer_amount}}% OFF)
                                                        @endif
                                                    @endif
                                                @endif
                                                                                        </span>
                                        </div>
                                        <div>
                                            <span>Subtotal </span>
                                            <span><i class="fas fa-rupee-sign" style=" font-size: 12px; font-weight: 600; "></i><strong
                                                    data-label="subtotal"
                                                    data-cart="{{ $cartItem->id}}">  {{ $cartItem->getPriceSum()}}</strong>  </span>
                                        </div>
                                    </div>
                                    <div class="align-middle delet-cart end-0 position-absolute ps-2 text-end top-0 w-auto">
                                        <button class="border-0 cart-trash"
                                                onclick="remove_item('{{ $cartItem->id }}')"><i
                                                class="fa fa-trash green-text" aria-hidden="true"></i>
                                        </button>
                                        {{-- <form method="POST" action="{{ route('remove.item.from.cart') }}">
                                        @csrf
                                        <input type="hidden" name="cart_id" value="{{ $cartItem->id }}" />
                                        <button class="border-0"><i class="fa fa-trash green-text" aria-hidden="true"></i></button>
                                        </form> --}}
                                    </div>
                                </div>

                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-4 col-md-4">
                                    <div class="text-start p-2">
                                        <b>Total Items:
                                            @if(auth()->check())
                                                <span id="total_cart_items"
                                                      class=''>{{ Cart::session(cartSessionId())->getContent()->count() }}</span>
                                            @else
                                                <span id="total_cart_items"
                                                      class=''>{{ Cart::session(cartSessionId())->getContent()->count() }}</span>
                                            @endif</b>
                                    </div>
                                </div>
                                <div class="col-lg-8 col-md-12">
                                    <div class="d-flex justify-content-lg-end justify-content-md-end">
                                        <div class="text-end p-2">
                                            <a style="color:#fff;" href="{{ route('search.index') }}" class="btn-pink">Continue
                                                Shopping</a>
                                        </div>

                                        <div class="text-end p-2">
                                            @if($cartItems->count() > 0)
                                                <form method="POST" action="{{ route('remove.from.cart') }}">
                                                    @csrf
                                                    <button class="remove-cart-btn">Empty Cart</button>
                                                </form>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 col-lg-4 ">
                        <div class="p-4 sidebgdonta">
                            <ul class="p-0 sub-total">
                                <li class="subtotal">
                                    <h5>Subtotal: <span class="cart-subtotal total"><i
                                                class="fas fa-rupee-sign"></i> <strong>{{ number_format($total, 2) }}</strong></span></h5>
                                    <p>You Saved: <span class="cart-subtotal"> <i class="fas fa-rupee-sign"></i>
                                            <span id="total-save">{{ number_format($totalSave, 2) }}</span> (<span
                                                id="save-percentage">{{number_format($savePercentage, 2)}}</span>% off)
                                            </span>
                                        </p>

                                </li>
                                @if(session('location.pincode') && \App\Models\Shipping::where('status', 1)->where('pincode', session('location.pincode'))->exists())
                                    <li class="order-modifier SHIPPING-modifier shipping-code-modifier">
                                        Shipping Cost:
                                        <small class="cart-subtotal"
                                               style="font-size: 10px;color: #958c8c;margin: 5px 0;">
                                            <i class="fas fa-rupee-sign"></i> {{  \App\Models\Shipping::where('status', 1)->where('pincode', session('location.pincode'))->first()->price }}
                                        </small>
                                    </li>
                                @else
                                    <li class="order-modifier SHIPPING-modifier shipping-code-modifier">
                                        Service Fee / Shipping Cost:
                                        <small class="cart-subtotal"
                                               style="font-size: 10px;color: #958c8c;margin: 5px 0;">Calculated on Next
                                            Page</small>
                                    </li>
                                @endif

                                <div class="estimator py-3" data-deferred="1" data-shipping-cost="375">
                                    <h4 class="cart-subtotal total">Total: &nbsp; <i
                                            class="fas fa-rupee-sign"></i> {{ number_format($total, 2) }}</h4>
                                </div>
                                <li class="main-button">
                                    {{-- <a href="#" class="checkout-btn text-center">
                                            Go to checkout
                                            </a> --}}
                                    <a href="{{ route('select.address') }}" class="cart-checkout-btn checkout-btn text-center">Go to
                                        checkout</a>
                                </li>
                                <!-- <li class="d-inline-block w-100 text-center mt-2">
                                            <div class="small">
                                                <a class="white-text" href="">
                                                    Have a Cash Card or Discount Coupon?
                                                </a>
                                            </div>
                                     </li> -->
                            </ul>
                        </div>
                    </div>
                </div>
            @else
                <div class="text-center">
                    <img src="{{ asset('images/empty-cart.png') }}" width="400" height="300">
                    <h2>Your Shopping Cart is Empty!!!</h2>
                    <a class="btn btn-lg btn-dark mt-3" href="/search">View Products</a>
                </div>
            @endif
        </div>
    </section>
@endsection

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function() {
        // window.addEventListener('beforeunload', function(e) {
        //     window.location.replace(window.location.origin + '/index.php/logout');
        // });
        // const timeout = 300000;

        // let idleTimer = null;
        // $('*').
        //     bind(
        //         'beforeunload mousemove click mouseup mousedown keydown keypress keyup submit change mouseenter scroll resize dblclick',
        //         function() {
        //             clearTimeout(idleTimer);
        //             //  console.log(timeout);
        //             idleTimer = setTimeout(function() {
        //                 window.location.replace(window.location.origin + '/index.php/logout');
        //             }, timeout);
        //         });
        // $('body').trigger('mousemove');
    });

    function increaseQuantity(cartId) {
        const quantity = document.getElementById('quantity-' + cartId).value;

        $.ajax({
            type: 'GET',
            url: '{{route('add_cart_quantity')}}',
            datatype: 'json',
            data: {
                'cart_id': cartId,
                'quantity': quantity,
            },
            success: function(data) {
                const obj = JSON.parse(data);

                if (obj.new.code == 1) {
                    $('#quantity-' + cartId).val(obj.new.quantity);
                    // let priceElement = document.getElementById(`price-${cartId}`);
                    // priceElement.innerHTML = `<i class="fas fa-rupee-sign"></i><b>${obj.new.price}</b>`;

                    let totalElements = document.querySelectorAll('.total');
                    Array.from(totalElements).forEach(totalElement => {
                        totalElement.innerHTML = `<i class="fas fa-rupee-sign"></i> <strong>${obj.new.subtotal}</strong>`;
                    });

                    document.getElementById('total-save').innerText = obj.new.total_save;
                    document.getElementById('save-percentage').innerText = obj.new.save_percentage;
                    const newSubtotal = obj.new.price;

                    const currentProductSubtotal = document.querySelector(`[data-label="subtotal"][data-cart="${cartId}"]`);
                    currentProductSubtotal.innerText = newSubtotal;
                }
            },
            complete: function() {
            },
            error: function() {
            },
        });
    }

    function decreaseQuantity(cartId) {
        const quantity = document.getElementById('quantity-' + cartId).value;

        if (quantity > 1) {
            $.ajax({
                type: 'GET',
                url: '{{route('minus_cart_quantity')}}',
                datatype: 'json',
                data: {
                    'cart_id': cartId,
                    'quantity': quantity,
                },
                success: function(data) {
                    const obj = JSON.parse(data);

                    if (obj.new.code == 1) {
                        $('#quantity-' + cartId).val(obj.new.quantity);
                        // let priceElement = document.getElementById(`price-${id}`);
                        // priceElement.innerHTML = `<i class="fas fa-rupee-sign"></i><b>${obj.new.price}</b>`;

                        let totalElements = document.querySelectorAll('.total');
                        Array.from(totalElements).forEach(totalElement => {
                            totalElement.innerHTML = `<i class="fas fa-rupee-sign"></i> <strong>${obj.new.subtotal}</strong>`;
                        });

                        document.getElementById('total-save').innerText = obj.new.total_save;
                        document.getElementById('save-percentage').innerText = obj.new.save_percentage;
                        const newSubtotal = obj.new.price;

                        const currentProductSubtotal = document.querySelector(`[data-label="subtotal"][data-cart="${cartId}"]`);
                        currentProductSubtotal.innerText = newSubtotal;
                    }
                },
                complete: function() {
                },
                error: function() {
                },
            });
        }
    }

    function remove_item(id) {
        $.ajax({
            type: 'POST',
            url: '{{route('remove.item.from.cart')}}',
            datatype: 'json',
            data: {
                '_token': "{{ csrf_token() }}",
                'cart_id': id,
            },
            success: function(data) {
                const cartItems = document.querySelectorAll('#cart_row-' + id);
                cartItems.forEach(item => {
                    item.remove();
                });

                const cartItem = document.getElementById('cart_row-' + id);
                if (cartItem) {
                    cartItem.classList.add('d-none');
                }

                let totalElements = document.querySelectorAll('.total');
                Array.from(totalElements).forEach(totalElement => {
                    totalElement.innerHTML = `<i class="fas fa-rupee-sign"></i> <strong>${data.subtotal}</strong>`;
                });

                let totalItemCountElement = document.getElementById('total_cart_items');
                if(totalItemCountElement){
                    totalItemCountElement.textContent = data.count;
                }

                let saveElement = document.getElementById('total-save');
                if(saveElement){
                    saveElement.textContent = data.save_total;
                }

                let savePercentage = document.getElementById('save-percentage');
                if(savePercentage){
                    savePercentage.textContent = data.save_percentage;
                }

                if (data.count === 0) {
                    window.location.reload();
                }

                Array.from(document.querySelectorAll('#cart_no')).forEach(element => {
                    element.textContent = data.count;
                });
            },
            complete: function() {
            },
            error: function() {
            },
        });
    }
</script>