@extends('layouts.default')
@section('content')
<section class="headerPage">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="{{ asset('assets/images/slidehero.png') }}" class="d-block w-100" alt="slide">
                <div class="carousel-caption">
                    <h5>We Give You,</h5>
                    <h2>Explore All Categories</h2>
                    <p class="mb-0">Enjoy an entirely new level of driving experience with our in-depth selection of superior car bulbs, brake pads, spark plugs, and other automotive parts and accessories designed to keep your car running at its absolute best.</p>
                </div>
            </div>
        </div>
</section>

@php
    $data = Cookie::get('cartdata');
    $cataData = json_decode($data, true);
    if (isset($cataData['items'])) {
        $cartItems = $cataData['items'];
    }

    $subtotal = 0;

@endphp

{{-- @dd($cartItems); --}}
{{-- @dd($cart); --}}

<div>
<h4 class="message" style="color: green;"> </h4>
</div>
<section class="cartMain sectionSpac">
    <div class="container">
        <h3 class="sectionTitle mb-4 text-center"><span class="me-1">my</span>Cart</h3>
        <div class="table-responsive cartTable">
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">Image</th>
                        <th scope="col">Product Title</th>
                        <th scope="col">Price</th>
                        <th scope="col">Quantity</th>
                        <th scope="col">SKU</th>
                        <th scope="col">Total Price</th>
                        <th scope="col">Action</th>
                    </tr>
                </thead>
                <tbody>

                @auth
                    @if (!empty($cart))
                        @foreach ($cart as $item)
                        {{-- @dd($item->item->images[0]['file_name']) --}}
                            <tr class="cartId" data-id="{{$item->item->id}}">
                                <td class="prdImage"><img src="{{ asset('images/'. $item->item->images[0]['file_name']) }}" alt="item" class="producths"></td>
                                <td class="prdTitle">{{$item->item->item_title}}</td>
                                <td class="prdPrice">${{$item->item->price}}</td>
                                <td class="quantityWrap">
                                    {{-- @if ($item->qty > 0) --}}
                                        @php
                                            $counterStyle = 'display: block';
                                            $buttonStyle = 'display: none';

                                            $cookieItemQty = 1;
                                        @endphp
                                    {{-- @endif --}}
                                    {{-- @foreach ($cartItems as $cartItem)
                                            @if (isset($cartItem['id']))

                                                @if ($cartItem['id'] == $item->id)
                                                    @php
                                                        $cookieItemQty = $cartItem['quantity'];
                                                    @endphp
                                                @endif

                                            @endif

                                    @endforeach --}}

                                    <button style="{{$buttonStyle}}" class="btnMain qunatityShow px-3 py-2 text-uppercase">Add<i class="addQty fa-solid fa-plus ms-4"></i></button>
                                    <div class="counter" style="{{$counterStyle}}">
                                        <div class="counterwrap d-flex align-items-center">
                                            <span class="MinusValue counterPrice"><i class="fa-solid fa-minus"></i></span>
                                            <input type="number" class="counterValue border-0" value="{{$item->qty}}"/>
                                            <span class="PlusValue counterPrice"><i class="fa-solid fa-plus"></i></span>
                                        </div>
                                    </div>
                                </td>
                                <td class="prdSku">{{$item->item->sku}}</td>
                                @php
                                    $itemPrice = $item->item->price * $item->qty;
                                    $subtotal += $itemPrice;
                                @endphp

                                {{-- @php
                                    $itemPrice = $item->price * $cookieItemQty;
                                    $subtotal += $itemPrice;
                                @endphp --}}
                                {{-- <td class="prdTotal">${{$itemPrice}}</td> --}}
                                <td class="prdTotal">${{$item->qty * $item->item->price}}</td>
                                <td class="prdAction"><div class="removeCartItem pointer"><i data-id="{{$item->item->id}}" class="cartItemRemove fa-regular fa-circle-xmark"></i></div></td>
                            </tr>
                        @endforeach
                    @endif
                @endauth


                @guest
                    @if(!empty($cart))
                        @foreach ($cart as $item)
                        {{-- @dd($item->item->images[0]['file_name']) --}}
                            <tr class="cartId" data-id="{{$item->id}}">
                                <td class="prdImage"><img src="{{ asset('images/'. $item->images[0]['file_name']) }}" alt="item" class="producths"></td>
                                <td class="prdTitle">{{$item->item_title}}</td>
                                <td class="prdPrice">${{$item->price}}</td>
                                <td class="quantityWrap">
                                    {{-- @if ($item->qty > 0) --}}
                                        @php
                                            $counterStyle = 'display: block';
                                            $buttonStyle = 'display: none';

                                            $cookieItemQty = 1;
                                        @endphp
                                    {{-- @endif --}}
                                    {{-- @foreach ($cartItems as $cartItem)
                                            @if (isset($cartItem['id']))

                                                @if ($cartItem['id'] == $item->id)
                                                    @php
                                                        $cookieItemQty = $cartItem['quantity'];
                                                    @endphp
                                                @endif
                                            @endif

                                    @endforeach --}}

                                    <button style="{{$buttonStyle}}" class="btnMain qunatityShow px-3 py-2 text-uppercase">Add<i class="addQty fa-solid fa-plus ms-4"></i></button>
                                    <div class="counter" style="{{$counterStyle}}">
                                        <div class="counterwrap d-flex align-items-center">
                                            <span class="MinusValue counterPrice"><i class="fa-solid fa-minus"></i></span>
                                            <input type="number" class="counterValue border-0" value="{{$cookieItemQty}}"/>
                                            <span class="PlusValue counterPrice"><i class="fa-solid fa-plus"></i></span>
                                        </div>
                                    </div>
                                </td>
                                <td class="prdSku">{{$item->sku}}</td>
                                {{-- @php
                                    $itemPrice = $item->item->price * $item->qty;
                                    $subtotal += $itemPrice;
                                @endphp --}}

                                @php
                                    $itemPrice = $item->price * $cookieItemQty;
                                    $subtotal += $itemPrice;
                                @endphp
                                {{-- <td class="prdTotal">${{$itemPrice}}</td> --}}
                                <td class="prdTotal">${{$item->price}}</td>
                                <td class="prdAction"><div class="removeCartItem pointer"><i data-id="{{$item->id}}" class="cartItemRemove fa-regular fa-circle-xmark"></i></div></td>
                            </tr>
                        @endforeach
                        @endif
                    @endguest
                </tbody>
            </table>
        </div>
        <div class="mt-4 cartTotalPrices d-flex align-items-start justify-content-between flex-column flex-md-row">
                <div class="d-flex mb-4 flex-column flex-lg-row">
                    {{-- <button type="button" class="btnMain me-3 px-md-5 mb-3">Update cart</button> --}}
                    <a href="products" target="_blank" class="btnMain px-md-5 mb-3">Continue Shopping</a>
                </div>

                <div class="cartTotalwrap text-md-end mt-3 mb-4">
                    <p class="mx-3"><span class="me-5 cartTitlesub">cart subtotal</span><span class="subtotal">${{$subtotal}}</span></p>
                    <p class="mx-3"><span class="me-5 cartTitlesub">Shipping Cost</span><span>$19.50</span></p>
                    <p class="mt-4 mx-3 pt-4 totalPrice"><span class="me-5 cartTitlesub">Total</span><span class="total">${{$subtotal + 19.50}} </span></p>
                    <a id="start-payment-button" class="btnMain mt-4 px-md-5 py-md-3 checkout">Proceed To Checkout</a>
                </div>
        </div>
    </div>
</section>
<section class="productsWrap mt-md-5">
    <div class="container">
        <h3 class="sectionTitle mb-4"><span class="me-1">You May</span>Also like</h3>
        <div class="row productList pt-2">
            <div class="singlePrdList col-lg-3 col-md-6 mb-4">
                <div class="homePrdWrap">
                    <a href="singleproduct" target="_blank" class="overflow-hidden d-block prodimgWrap">
                        <img src="{{ asset('assets/images/product4.jpg') }}" alt="item" class="producths">
                    </a>
                    <div class="productDet p-4">
                        <span class="prodCat mb-1">Filters</span>
                        <p class="mb-2 prodName">Premium Quality Air Filters</p>
                        <div class="prodRating mb-3">
                            <div class="ratingStars">
                                <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                            </div>
                            <div class="ratingReviews">
                                (3 Reviews)
                            </div>
                        </div>
                        <p class="listText d-none">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis amet voluptas assumenda est, omnis dolor repellendus quis nostrum. Temporibus autem quibusdam et aut officiis debitis aut rerum dolorem necessitatibus saepe eveniet ut et neque porro quisquam est, qui...</p>
                    <p class="productPrice mb-3">
                            <span class="d-inline-block me-2">Price:</span>$89.00
                        </p>
                        <button data-bs-toggle="modal" data-bs-target="#cartModal" class="btnMain w-100">Add To Cat</button>
                    </div>
                </div>
            </div>
            <!-- end of product div -->
            <div class="singlePrdList col-lg-3 col-md-6 mb-4">
                <div class="homePrdWrap">
                    <a href="singleproduct" target="_blank" class="overflow-hidden d-block prodimgWrap">
                        <img src="{{ asset('assets/images/product3.jpg') }}" alt="item" class="producths">
                    </a>
                    <div class="productDet p-4">
                        <span class="prodCat mb-1">Filters</span>
                        <p class="mb-2 prodName">Premium Quality Air Filters</p>
                        <div class="prodRating mb-3">
                            <div class="ratingStars">
                                <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                            </div>
                            <div class="ratingReviews">
                                (3 Reviews)
                            </div>
                        </div>
                        <p class="listText d-none">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis amet voluptas assumenda est, omnis dolor repellendus quis nostrum. Temporibus autem quibusdam et aut officiis debitis aut rerum dolorem necessitatibus saepe eveniet ut et neque porro quisquam est, qui...</p>
                    <p class="productPrice mb-3">
                            <span class="d-inline-block me-2">Price:</span>$89.00
                        </p>
                        <button data-bs-toggle="modal" data-bs-target="#cartModal" class="btnMain w-100">Add To Cat</button>
                    </div>
                </div>
            </div>
            <!-- end of product div -->
            <div class="singlePrdList col-lg-3 col-md-6 mb-4">
                <div class="homePrdWrap">
                    <a href="singleproduct" target="_blank" class="overflow-hidden d-block prodimgWrap">
                        <img src="{{ asset('assets/images/product1.jpg') }}" alt="item" class="producths">
                    </a>
                    <div class="productDet p-4">
                        <span class="prodCat mb-1">Filters</span>
                        <p class="mb-2 prodName">Premium Quality Air Filters</p>
                        <div class="prodRating mb-3">
                            <div class="ratingStars">
                                <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                            </div>
                            <div class="ratingReviews">
                                (3 Reviews)
                            </div>
                        </div>
                        <p class="listText d-none">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis amet voluptas assumenda est, omnis dolor repellendus quis nostrum. Temporibus autem quibusdam et aut officiis debitis aut rerum dolorem necessitatibus saepe eveniet ut et neque porro quisquam est, qui...</p>
                    <p class="productPrice mb-3">
                            <span class="d-inline-block me-2">Price:</span>$89.00
                        </p>
                        <button data-bs-toggle="modal" data-bs-target="#cartModal" class="btnMain w-100">Add To Cat</button>
                    </div>
                </div>
            </div>
            <!-- end of product div -->
            <div class="singlePrdList col-lg-3 col-md-6 mb-4">
                <div class="homePrdWrap">
                    <a href="singleproduct" target="_blank" class="overflow-hidden d-block prodimgWrap">
                        <img src="{{ asset('assets/images/product2.jpg') }}" alt="item" class="producths">
                    </a>
                    <div class="productDet p-4">
                        <span class="prodCat mb-1">Filters</span>
                        <p class="mb-2 prodName">Premium Quality Air Filters</p>
                        <div class="prodRating mb-3">
                            <div class="ratingStars">
                                <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                            </div>
                            <div class="ratingReviews">
                                (3 Reviews)
                            </div>
                        </div>
                        <p class="listText d-none">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis amet voluptas assumenda est, omnis dolor repellendus quis nostrum. Temporibus autem quibusdam et aut officiis debitis aut rerum dolorem necessitatibus saepe eveniet ut et neque porro quisquam est, qui...</p>
                    <p class="productPrice mb-3">
                            <span class="d-inline-block me-2">Price:</span>$89.00
                        </p>
                        <button data-bs-toggle="modal" data-bs-target="#cartModal" class="btnMain w-100">Add To Cat</button>
                    </div>
                </div>
            </div>
            <!-- end of product div -->
        </div>
    </div>
</section>
@endsection
@push('scripts')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).ready(function(){
            // cartPage()
            addItemsToCart()
            // updateCartQty()
        });

        // function cartPage(){
        //     $(document).on('click', '.cartItemRemove', function(e){
        //         e.preventDefault();
        //         let cartId = $(this).data('id');
        //         $.ajax({
        //             type:'DELETE',
        //             url: "{{ route('add-to-cart.destroy', ['add_to_cart' => ':cartId']) }}".replace(':cartId', cartId),
        //             success:function(data) {
        //                 if(data.success === true){
        //                     $('.cartCount').text(data.qty_count);
        //                     $('.subtotal').text(data.subtotal);
        //                     $('.total').text(data.total_price)
        //                 }
        //             }
        //         });
        //     });
        // }


        function addItemsToCart(){
            $(document).on('focusout', '.counterwrap', function(){
                let tr = $(this).parent().parent().parent();
                // console.log(tr);
                let cartId = tr.getAttribute('data-id');
                let qty = $(this)[0].children[1];

                $.ajax({
                    type:'PUT',
                    url: "{{ route('add-to-cart.update', ['add_to_cart' => ':cartId']) }}".replace(':cartId', cartId),
                    data:{
                        cartId: cartId,
                        qty: qty.value
                    },
                    success:function(data) {
                        if(data.success === true){
                            $('.cartCount').text(data.qty_count);
                            $('.subtotal').text('$'+data.subtotal+'');
                            $('.total').text(data.total_price);
                            tr.children[5].innerHTML = '$'+data.cart_total_price+'';
                        }
                    }
                });
            });
        }

        // function updateCartQty(){
        //     $(document).on('focusout', '.counterwrap', function(){
        //         let tr = $(this).parent().parent().parent();
        //         // console.log(tr);
        //         let cartId = tr.getAttribute('data-id');
        //         let qty = $(this)[0].children[1];

        //         $.ajax({
        //             type:'PUT',
        //             url: "{{ route('add-to-cart.update', ['add_to_cart' => ':cartId']) }}".replace(':cartId', cartId),
        //             data:{
        //                 cartId: cartId,
        //                 qty: qty.value
        //             },
        //             success:function(data) {
        //                 if(data.success === true){
        //                     $('.cartCount').text(data.qty_count);
        //                     $('.subtotal').text('$'+data.subtotal+'');
        //                     $('.total').text(data.total_price);
        //                     tr.children[5].innerHTML = '$'+data.cart_total_price+'';
        //                 }
        //             }
        //         });
        //     });
        // }

    </script>
@endpush


@push('scripts')
<script>

    $(document).ready(function() {

    //     $("#start-payment-button").on("click", function() {

    //         // alert("Payment started");

    //         $.ajax({
    //         type: "POST",
    //         url: "{{route('pay')}}",
    //         data: { amount: "100", currency: "NGN" },
    //         success: function (data) {
    //             // Handle the successful response data here
    //             console.log(data);
    //         },
    //         error: function (xhr, status, error) {
    //             // Handle errors here
    //             console.log(status);
    //             console.log(xhr.responseText);
    //         },
    //     });
    // });


    // Cart Value Change on Plus Button cart code
    $('.PlusValue').on('click', function() {
        // let tr = $(this).parent().parent().parent().parent()[0];

        let tr = $(this).closest('tr');
        let itemId = tr.attr('data-id');
        // console.log(itemId);

        let qty = parseInt($(this).parent().find('input').val());
        console.log(qty);

        let price = $(this).closest('tr').find('.prdPrice').text();
        price = price.replace(/[$,]/g, '');
        let total = (parseFloat(price) * qty);

        $(this).closest('tr').find('.prdTotal').text('$'+total);

        // calculate total price for all tds
        let totalPrice = 0;
        $('table tr').each(function() {
        let priceText = $(this).find('.prdTotal').text().trim();
        if(priceText)
        {
            priceText = priceText.replace(/[$,]/g, '');
            console.log("Cleaned price text:", priceText);
            let price = parseFloat(priceText);
            totalPrice += price;
        }
        });
        $('.subtotal').text('$' + totalPrice);
        $('.total').text('$' + (totalPrice + 19.50));

        $.ajax({
                type:'PUT',
                url: "{{ route('add-to-cart.update', ['add_to_cart' => ':itemId']) }}".replace(':itemId', itemId),
                data:{
                    qty: qty
                },
                success:function(data) {
                    if(data.success === true){
                        console.log(data);
                        // $('.cartCount').text(data.qty_count);
                        // $('.subtotal').text('$'+data.subtotal+'');
                        // $('.total').text(data.total_price);
                        // tr.children[5].innerHTML = '$'+data.cart_total_price+'';
                    }
                }
            });
    });

      // Cart Value Change on Minus Button cart code
      $('.MinusValue').on('click', function() {
        // let tr = $(this).parent().parent().parent().parent()[0];

        let tr = $(this).closest('tr');
        let itemId = tr.attr('data-id');
        // console.log(itemId);

        let qty = parseInt($(this).parent().find('input').val());
        console.log(qty);

        let price = $(this).closest('tr').find('.prdPrice').text();
        price = price.replace(/[$,]/g, '');
        let total = (parseFloat(price) * qty);

        $(this).closest('tr').find('.prdTotal').text('$'+total);

        // calculate total price for all tds
        let totalPrice = 0;
        $('table tr').each(function() {
        let priceText = $(this).find('.prdTotal').text().trim();
        if(priceText)
        {
            priceText = priceText.replace(/[$,]/g, '');
            console.log("Cleaned price text:", priceText);
            let price = parseFloat(priceText);
            totalPrice += price;
        }
        });
        $('.subtotal').text('$' + totalPrice);
        $('.total').text('$' + (totalPrice + 19.50));

        $.ajax({
                type:'PUT',
                url: "{{ route('add-to-cart.update', ['add_to_cart' => ':itemId']) }}".replace(':itemId', itemId),
                data:{
                    qty: qty
                },
                success:function(data) {
                    if(data.success === true){
                        console.log(data);
                    }
                }
            });
        });


    // Cart Value Change on Plus Button Old code
    // $('.PlusValue').on('click', function() {

    //     let tr = $(this).parent().parent().parent().parent()[0];
    //     tr.attr('data-id');
    //     console.log(tr);

    //     let value = parseInt($(this).parent().find('input').val());
    //     let price = ($('.prdPrice').text());
    //     // let price = ($(this).closest('tr').find('.prdPrice').text());
    //     price = parseFloat(price.replace("$", ""));
    //     let cartId = $('.cartId').attr('data-id');
    //     $.ajax({
    //             type:'PUT',
    //             url: "{{ route('add-to-cart.update', ['add_to_cart' => ':cartId']) }}".replace(':cartId', cartId),
    //             data:{
    //                 cartId: cartId,
    //                 qty: value
    //             },
    //             success:function(data) {
    //                 if(data.success === true){
    //                     $('.cartCount').text(data.qty_count);
    //                     $('.subtotal').text('$'+data.subtotal+'');
    //                     $('.total').text(data.total_price);
    //                     tr.children[5].innerHTML = '$'+data.cart_total_price+'';
    //                 }
    //             }
    //         });
    // });

    // Cart Value Change on Minus Button old code
    // $('.MinusValue').on('click', function() {
    //     let tr = $(this).parent().parent().parent().parent()[0];
    //     let value = parseInt($(this).parent().find('input').val());
    //     let price = ($('.prdPrice').text());
    //     price = parseFloat(price.replace("$", ""));
    //     let total = parseFloat(price) * parseInt(value);
    //     let cartId = $('.cartId').attr('data-id');

    //     $.ajax({
    //             type:'PUT',
    //             url: "{{ route('add-to-cart.update', ['add_to_cart' => ':cartId']) }}".replace(':cartId', cartId),
    //             data:{
    //                 cartId: cartId,
    //                 qty: value
    //             },
    //             success:function(data) {
    //                 if(data.success === true){
    //                     $('.cartCount').text(data.qty_count);
    //                     $('.subtotal').text('$'+data.subtotal+'');
    //                     $('.total').text(data.total_price);
    //                     tr.children[5].innerHTML = '$'+data.cart_total_price+'';
    //                 }
    //             }
    //         });
    // });



    });

        // Removing item from cookie
        $(document).on('click', '.cartItemRemove ', function(e){
        let itemId = $(this).data('id');
        $.ajax({
                type:'DELETE',
                url: "{{ route('add-to-cart.destroy', ['add_to_cart' => ':itemId']) }}".replace(':itemId', itemId),
                // data: { itemId: itemId},
                success:function(data) {
                    if(data.success === true){
                        if(data.data && data.data.items)
                        {
                            $('#cartcountval').text(data.data.items.length - 1);
                        }

                    }
                }
            });
        });


        $(document).on('click', '.checkout ', function(e){
        $.ajax({
                type:'GET',
                url: "{{ route('proceedToCheckout') }}",
                success:function(data) {
                    if (data.status === true) {
                        if (data.data.status == "success") {

                            console.log(data.data.link);

                            window.location.href = data.data.data.link;
                            // console.log(data.data.data.link);
                        }
                        // console.log(data.data.status == "success");
                    }
                    else
                    {
                        $('.message').text(data.message);
                        window.location.href = data.redirect;
                    }
                    // console.log(data);
                    // if(data.success === true){

                    // }
                }
            });
        });


// $('.PlusValue').click(function() {
//     let value = $(this).parent().val();
//     console.log(value);
//     // alert(value);

// });

</script>
@endpush