@extends('layouts.new-layout')
@section('title', 'Cart')
@section('content')
<!-- <section class="bg-bb1 pb-5">
<div class="container">
<div class="text-center padding-top-section"><h1 class="text-white">Cart</h1></div></div>
</section> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
      @media (min-width: 768px) {
    .image-list-cart {
        width: 15%;
        display: inline-block;
    }
    .cart-product-name {
        width: 40%;
        display: inline-block;
    }
}
    .item-dates{
        color: #f9aa06;font-style: italic;font-size: 11px;font-weight: 600; 
    }
  .btn-blue3 {
    width: 100%;
}
.btn-blue4 {
    width: 100%; 
}
.related-items-scroll {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 10px;
    padding-bottom: 10px;
    max-width: 100%;
    white-space: nowrap;
}

.related-items-scroll .col-md-3 {
    flex: 0 0 auto;
    width: 250px; /* Adjust width as needed */
}

.related-items-scroll .img-fluid {
    width: 100%;
    height: 200px; /* Set a consistent height */
    object-fit: cover; /* Keeps image aspect ratio while fitting the container */
}

.related-items-scroll::-webkit-scrollbar {
    height: 10px;
}

.related-items-scroll::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

.related-items-scroll::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 5px;
}

.related-items-scroll::-webkit-scrollbar-thumb:hover {
    background: #555; 
}


  </style>
  
  @include('partials.parallaxSlider', ['title' => 'Cart'])


<!-- ============================================-->
<!-- ============================================-->
<section class="padding-top">
<div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="toastMessage" class="toast align-items-center text-white bg-danger border-0" role="alert"
            aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                    aria-label="Close"></button>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <h1 class="py-2 mb-5 text-capitalize">Cart</h1>
        <div class="row">
            <!-- Cart Items -->
            <div class="col-lg-8 col-md-12">
                <div class="mb-3 p-2 bg-white card">
                    <div class="mb-2 w-100  table">
                        <div class="items" style="max-height: 70vh; overflow-y:auto;">
                            @if($cartItems)
                            @foreach($cartItems as $cartItem)
                            
                  
                                <div class="position-relative selected-product d-md-flex items-align-center"
                                    id="cart_row-3143">
                                  
                                    <div class="item-thumbnail image-list-cart">
                                    @if(isset($cartItem->attributes['variant']) && !empty($cartItem->attributes['variant']['image']))
                                        <!-- Show the variant image -->
                                        <a href="#">
                                            <img class="object-scale-down" src="{{ asset('storage/' . $cartItem->attributes['variant']['image']) }}" 
                                                width="80" height="80" data-max-width="80" data-max-height="80" alt="Variant Image">
                                        </a>
                                    @elseif($cartItem->associatedModel->image)
                                        <!-- Show the associated product image if no variant image -->
                                        <a href="#">
                                            <img class="object-scale-down" src="{{ asset('storage/' . $cartItem->associatedModel->image) }}" 
                                                width="80" height="80" data-max-width="80" data-max-height="80" alt="Product Image">
                                        </a>
                                    @else
                                        <!-- Fallback image if neither product nor variant image is available -->
                                        <a href="#">
                                            <img class="object-scale-down" src="/new-assets/img/gallery/shaker-maple-natural1.png" 
                                                width="80" height="80" data-max-width="80" data-max-height="80" alt="Default Image">
                                        </a>
                                    @endif
                                    </div>
                                    <div class="item-info align-middle cart-product-name">
                                        <a href="">
                                            <h6 class="item-title" @if($cartItem->attributes['item_type'] == "buy") style="margin-top: 24px; margin-left: 33px;" @else style="margin-top: 14px;" @endif>{{ $cartItem->name }} </h6>
                                            @if($cartItem->attributes['item_type'] == "rent")
                                            <p class="item-dates">  Dropoff : <span>{{ \Carbon\Carbon::parse($cartItem->attributes['start_date'])->setTimezone(config('app.timezone'))->format('d M Y') }}</span> <b> -> </b>
                                             Pickup : <span>{{ \Carbon\Carbon::parse($cartItem->attributes['end_date'])->setTimezone(config('app.timezone'))->format('d M Y') }}</span><br>
                                            </p>
                                            @endif
                                        </a>
                                    </div>
                                    <div class="item-qty mt-2 align-middle cart-qunatity">
                                        <div class="product-quantity justify-content-center d-flex mt-3">
                                            <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 }}" min="0" name="quantity" value="{{ $cartItem->quantity }}">
                                                <span class="increase" onclick="increaseQuantity('{{ $cartItem->id }}' , {{$cartItem->associatedModel->max_purchase_qty}})"> <i
                                                        class="fas fasu fa-plus"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        <div class="mrp">
                                            <span>Price:</span>
                                            <span><i class="fas fa-dollar-sign"></i>{{ $cartItem->price }}</span>
                                        </div>
                                        <div>
                                            <span>Subtotal: </span>
                                            <span><i class="fas fa-dollar-sign"></i><strong data-label="subtotal"
                                                    data-cart="{{ $cartItem->id }}">{{ $cartItem->price * $cartItem->quantity }}</strong> </span>
                                        </div>
                                    </div>
                                    <div class="align-middle delet-cart end-0 position-absolute ps-2 mt-3 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>
                                    </div>
                                </div>
                            @endforeach
                            @endif
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4 col-md-4">
                            <div class="text-start p-2">
                                <b>Total Items:
                                    <span id="total_cart_items" class="">
                                    {{ count($cartItems)}}</span>
                                </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-center p-2">
                                    <a style="color:#fff;" href="{{ route('welcome')}}" class="shopping-btn">Continue
                                        Shopping</a>
                                </div>
                                <!-- <div class="text-center p-2">
                                    <form method="POST" action="">
                                        <input type="hidden" name="_token"
                                            value="FFQGnuzjzA1iG1LiszORNetu5SRWI3kkzWk7MZNq"> <button
                                            class="remove-cart-btn">Empty Cart</button>
                                    </form>
                                </div> -->
                                <div class="text-center 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>
            <!-- Cart Summary -->
             @if($total != 0)
            <div class="col-md-12 col-lg-4 ">
                <div class="p-4 bg-blue-light">
                    <ul class="p-0 sub-total">
                        <li class="subtotal">
                            <h5>Subtotal: <span class="cart-subtotal total"><i class="fas fa-dollar-sign"></i>
                                    <strong>{{$total}}</strong></span></h5>
                                    <!-- <p>You Saved: <span class="cart-subtotal"> 
                                    <i class="fas fa-dollar-sign"></i> <span id="total-save"></span>
                                    (<span id="save-percentage"></span>% off) 
                                </span></p> -->

                        </li>
                        {{-- <li style="font-size: 14px;" 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> --}}

                        <div class="estimator py-3" data-deferred="1" data-shipping-cost="375">
                        <h4>Total: <span class="cart-subtotal total"><i class="fas fa-dollar-sign"></i>
                        <strong>{{$total}}</strong></span></h4>
                           
                        </div>
                        <li class="main-button">

                            <a href="{{ route('select.address')}}" class="cart-checkout-btn checkout-btn text-center">Go to
                                checkout</a>
                        </li>

                    </ul>
                </div>
            </div>
            @endif
        </div>
    
    
   @if($relatedItems->isNotEmpty())
    <div class="row mt-5">
        <h6 class="py-0 text-blue text-uppercase">
            See Our
            <div class="line mb-0"></div>
        </h6>
        <h1 class="py-2 mb-5 text-capitalize">Related <span class="text-blue h1">Product</span></h1>

        <!-- Scrollable container for related items -->
        <div class="related-items-scroll ">
            @foreach($relatedItems as $relatedItem)
                <div class="col-md-3 p-1">
                    <div class="border-0 immb">
                        <div class="position-relative imm active">
                            <img class="img-fluid img1" src="{{ asset('storage/' . $relatedItem->image) ?? '/new-assets/img/gallery/upload.webp' }}">
                            <div class="image-over pt-0 pb-3">
                                <div class="main-text-img">
                                    <div class="line1"></div>
                                    @if($relatedItem->selling_type == 'buy')
                                        <p class="mb-0">From ${{ number_format($relatedItem->price, 0) }}</p>
                                    @elseif($relatedItem->selling_type == 'rent')
                                        <p class="mb-0">From ${{ number_format($relatedItem->rental_weekend, 0) }}</p>
                                    @endif
                                    <h3 class="mb-0">{{ $relatedItem->name }}</h3>
                                </div>
                            </div>
                        </div>
                        @if($relatedItem->selling_type == 'buy')
                        <div class="col-12 mb-2">
                            <a class="btn-blue3 text-center button-481" href="{{ route('product-detail',['id' => $relatedItem->id, 'type' => 'buy'])}}">
                                <span>BUY <i class="fa fa-shopping-cart" aria-hidden="true"></i></span>
                            </a>
                        </div>
                        @elseif($relatedItem->selling_type == 'rent')
                        <div class="col-12 mb-2">
                            <a class="btn-blue4 text-center button-481" href="{{ route('product-detail',['id' => $relatedItem->id, 'type' => 'rent'])}}">
                                <span>RENT <i class="fa fa-tag" aria-hidden="true"></i></span>
                            </a> 
                        </div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endif


    </div>
    </div>
    <!-- end of .container-->

</section>
<!-- ============================================-->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> -->




<script>
  // document.addEventListener('DOMContentLoaded', function() {
  //       var toastEl = document.getElementById('toastMessage');
  //       if (toastEl) {
  //         @if(session('error'))
  //           var toast = new bootstrap.Toast(toastEl);
  //           // Show the toast
  //           toast.show();
  //           // Set timeout to hide the toast after 60 seconds (60000 milliseconds)
  //           setTimeout(function() {
  //               toast.hide();
  //         }, 100000); // 60000 ms = 1 minute
  //         @endif
  //     }
  //           });

function increaseQuantity(cartId, max_purchase_qty) {

    const quantity = document.getElementById('quantity-' + cartId).value;
    // if (quantity >= max_purchase_qty) {
    //     alert('You cannot increase the quantity beyond ' + max_purchase_qty);
    //     return; // Prevent the request if it exceeds max quantity
    // }

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

        console.log(obj);

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

          let totalElements = document.querySelectorAll('.total');
          Array.from(totalElements).forEach(totalElement => {
            totalElement.innerHTML = `<i class="fas fa-dollar-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;
          // Update individual product subtotal
          const currentProductSubtotal = document.querySelector(`[data-label="subtotal"][data-cart="${cartId}"]`);
         // console.log(currentProductSubtotal);
                currentProductSubtotal.innerText = obj.new.price;
        }
        else {
          //alert('ko');
                // Handle error message from the server
                alert(obj.new.message); // Show the error message
            }
      },
      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-dollar-sign"></i><b>${obj.new.price}</b>`;

            let totalElements = document.querySelectorAll('.total');
            Array.from(totalElements).forEach(totalElement => {
              totalElement.innerHTML = `<i class="fas fa-dollar-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;
            // Update individual product subtotal
            const currentProductSubtotal = document.querySelector(`[data-label="subtotal"][data-cart="${cartId}"]`);
                    currentProductSubtotal.innerText = obj.new.price;
          }
        },
        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) {
        if (!data.success) {
                // Show toast with error message if only one item left
                var toastEl = document.getElementById('toastMessage');
                if (toastEl) {
                document.querySelector('.toast-body').textContent = data.error;
                var toast = new bootstrap.Toast(toastEl, { autohide: false }); // Set autohide to false for manual control
                toast.show();
                
                // Set timeout to hide the toast after 60 seconds (60000 milliseconds)
                setTimeout(function() {
                    toast.hide();
                }, 60000); // 60000 ms = 1 minute
            }
                return;
            }
        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-dollar-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 = '/'
        }

        Array.from(document.querySelectorAll('#cart_no')).forEach(element => {
          element.textContent = data.count;
        });

        window.location.reload();
      },
      complete: function() {},
      error: function() {},
    });
  }
    </script>

@endsection