@extends('front.layout.app')
@section('content')

<style>
.cluse{
    color: #fff;
    background: transparent;
    border: 0;
    user-select: none;
    pointer-events: none; 
}
.tot {
    /*position: absolute;*/
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    margin-top: 12px;
    font-weight: 500;
}
.head {
    margin-right: 7px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}
input[type=number] {
  cursor: default;
  color: transparent;
  text-shadow: 0px 0px black;
}
</style>
<main>

    <section class="main-banner">
        <div class="banner-img">
            <div class="img-main">
                <img class="img-fluid" src="https://fitkatiekarr.com/assets/admin/uploads/recent_upload_page/9bb6181fa7c066eae82ec469a8d47366.png" alt="">
            </div>

            <div class="content">
                <h2 data-aos="fade-left" data-aos-delay="200" data-aos-duration="1500">Add to cart</h2>
                <p data-aos="fade-right" data-aos-delay="200" data-aos-duration="1500">Add to cart</p>
            </div>
        </div>
    </section>
    
    <!--<section class="main-banner katie">-->
    <!--    <div class="banner-img">-->
    <!--        <div class="img-box">-->
    <!--            <img class="img-fluid" src="https://fitkatiekarr.com/assets/front/images/katie-banner.jpg" alt="">-->
    <!--        </div>-->
    <!--        <div class="content">-->
    <!--            <h2>Coming Soon!</h2>-->
    <!--            <p data-aos="fade-right" data-aos-delay="200" data-aos-duration="1000" class="aos-init aos-animate"></p><p>Get a&nbsp;sneak peek into my&nbsp;world of raw, real&nbsp;adult content at Fit Katie Karr.&nbsp;Indulge in the many flavors of high-quality products that I offer as you embark on a&nbsp;journey of desire and satisfaction.&nbsp;😘</p><p></p>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</section>-->

  <section class="cart-sec chel comunity-sec">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-11 col-12 px-lg-4">
                    <div class="cart-content">
                        <h6>Your cart items</h6>
                        <div class="table-responsive">
                            
                            <table class="table cart-table">
                                <thead>
                                    <tr>
                                        <th scope="col">Sno.</th>
                                        <th scope="col">Image</th>
                                        <th scope="col">Title</th>
                                        <th scope="col">Price</th>
                                        <th scope="col">Quantity</th>
                                        <th scope="col">Sub Total</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                    @php $total = 0 @endphp
                                     @if(session('cart'))
                                     @foreach(session('cart') as $id => $details)
                                     @php $total += $details['price'] * $details['quantity'] @endphp
                                     
                                    <tr data-id="{{ $id }}">
                                        <th scope="row">1</th>
                                        <td><img class="img-fluid" src="{{ $details['image'] }}" alt=""></td>
                                        <td>{{ $details['title'] }}</td>
                                        <td data-th="Price">${{ $details['price'] }}</td>
                                        <td data-th="Quantity">
                                            <div class="qty">
                                                <!--<button data-func="-" class="update-cart" >-</button>-->
                                                    <input value="{{ $details['quantity'] }}" disabled type="text" style="color: #fff;" class="update-cart quantity">
                                                <!--<button data-func="+" class="update-cart">+</button>-->
                                            </div>
                                        </td>
                                        <td>${{ $details['price'] * $details['quantity'] }}</td>
                                        <td><button class="remove remove-from-cart"><i class="fa-solid fa-trash"></i></button></td>
                                    </tr>
                                    
                                    @endforeach
                                 @endif
                                 
                                
                                </tbody>
                            </table>
                            
                            <div class="btn-cart d-flex position-relative">
                                <a href="{{ url('/') }}">continue shopping</a>
                                <a href="{{ url('/checkout') }}"> Proceed to Checkout</a>
                                <div class="tot"><div class="head">Total:</div> <span id="total">$ {{ $total }}</span><div/>
                            </div>
                            
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
@section('script')  



<script type="text/javascript">
  
    $(".update-cart").change(function (e) {
        e.preventDefault();
        
        var ele = $(this);
    
        $.ajax({
            url: '{{ route('update.cart') }}',
            method: "patch",
            data: {
                _token: '{{ csrf_token() }}', 
                id: ele.parents("tr").attr("data-id"), 
                quantity: ele.parents("tr").find(".quantity").val()
            },
            success: function (response) {
               window.location.reload();
            }
        });
    });
  
    $(".remove-from-cart").click(function (e) {
        e.preventDefault();
        
        var ele = $(this);
  
        $.ajax({
            url: '{{ route('remove.from.cart') }}',
            method: "DELETE",
            data: {
                _token: '{{ csrf_token() }}', 
                id: ele.parents("tr").attr("data-id")
            },
            success: function (response) {
                toastr.success(response.msg);
                ele.parent().parent().remove();
                $('#cart-count').text(response.qty);
                $('#total').text(response.total);
            }
        });
    });
    
    
    /// btn add minus script //
    
// $("#add_btn").click(() => {
//   let addData = document.getElementById("number_section");
//   let numData = parseInt(addData.innerText);
//   const addNumData = numData + 1;
//   addData.innerText = addNumData;
//   console.log("addNumDAta", addNumData);
// });

// $("#minus_btn").click(() => {
//   let addData = document.getElementById("number_section");
//   if (addData.innerText != 0) {
//     let numData = parseInt(addData.innerText);
//     const addNumData = numData - 1;
//     addData.innerText = addNumData;
//   }
// });

//   $(".qty button").click(function(){
//   let inpQty = $(this).parents(".qty").find("input[type='number']")
//   if($(this).data("func") == "+"){
//     $(inpQty).val(parseInt($(inpQty).val()) + 1)
//   }
//   else if($(this).data("func") == "-" && $(inpQty).val() > 1){
//     $(inpQty).val(parseInt($(inpQty).val()) - 1)
//   }
// })
  
</script>


@endsection
@endsection