@extends('front.layout.app')
@section('title', 'Cart')
@section('content')
<style>

    .loader_cart {
        position: absolute;
        top: 30%;
        left: 48%;
        transform: translate(-50%, -50%);
        background-color: transparent;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: none;
        border-top: 3px solid #FFFFFF;
        border-right: 3px solid transparent;
        box-sizing: border-box;
        animation: rotation 1s linear infinite;
        z-index: 9999;
    }

    button {
        position: relative;
    }

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

    <section class="check-out-section">
        <div class="container">
            <div class="check-out-form check-out-2">
                <h2 class="primary-heading">Confirm Your Purchase</h2>

                <div class="col-12 offset-lg-1 col-lg-10">
                    @if($cartItems->isEmpty())
                        <div class="row">
                            <div class="col-12 text-center">
                                <h4>No Cart Item</h4>
                            </div>
                        </div>
                    @else
                        @foreach($cartItems as $cartItem)

                        <div id="cart-item-{{ $cartItem->rowId }}"  class="row card-row">
                            <div class="col-md-2">
                                <a href="product-detail.php" class="card-hover">
                                    <figure>
                                        <img src="{{ $cartItem->options->image ?? asset('upload/No-Image.png') }}" alt="{{ $cartItem->name }}">
                                    </figure>
                                </a>
                            </div>
                            <div class="col-md-5">
                                <a href="product-detail.php">
                                    <h4 class="red">{{ $cartItem->name }}</h4>
                                </a>
                            </div>
                            <div class="col-md-2">
                                <span class="price red" >USD {{ number_format($cartItem->price) }}</span>

                                <!--<span class="price red" id="total-price-{{ $cartItem->rowId }}" >USD {{ number_format($cartItem->price * $cartItem->qty, 2) }}</span>-->
                                    {{-- <span id="total-price-{{ $cartItem->rowId }}" class="item-total-price">USD {{ number_format($cartItem->price * $cartItem->qty, 2) }}</span> <!-- Total price (updated dynamically) --> --}}

                            </div>
                            <div class="col-md-2">
                                <div class="shop-details">
                                    <div class="numberone">

                                        <span class="minus">-</span>
                                        <input type="text" class="quantity-input" value="{{ $cartItem->qty }}" data-cart-id="{{ $cartItem->rowId }}">
                                        <span class="plus">+</span>

                                    </div>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <a href="javascript:void(0)" class="delete-cart-item" data-row-id="{{ $cartItem->rowId }}">
                                    <svg class="svg-inline--fa fa-trash-alt fa-w-14" aria-hidden="true" data-prefix="far"
                                        data-icon="trash-alt" role="img" xmlns="http://www.w3.org/2000/svg"
                                        viewBox="0 0 448 512">
                                        <path fill="currentColor"
                                            d="M192 188v216c0 6.627-5.373 12-12 12h-24c-6.627 0-12-5.373-12-12V188c0-6.627 5.373-12 12-12h24c6.627 0 12 5.373 12 12zm100-12h-24c-6.627 0-12 5.373-12 12v216c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12V188c0-6.627-5.373-12-12-12zm132-96c13.255 0 24 10.745 24 24v12c0 6.627-5.373 12-12 12h-20v336c0 26.51-21.49 48-48 48H80c-26.51 0-48-21.49-48-48V128H12c-6.627 0-12-5.373-12-12v-12c0-13.255 10.745-24 24-24h74.411l34.018-56.696A48 48 0 0 1 173.589 0h100.823a48 48 0 0 1 41.16 23.304L349.589 80H424zm-269.611 0h139.223L276.16 50.913A6 6 0 0 0 271.015 48h-94.028a6 6 0 0 0-5.145 2.913L154.389 80zM368 128H80v330a6 6 0 0 0 6 6h276a6 6 0 0 0 6-6V128z">
                                        </path>
                                    </svg>
                                </a>

                            </div>
                        </div>
                        @endforeach
                    @endif

                    <div class="row">
                        <div class="offset-1 col-lg-10 offset-1">
                            <div class="row fields-row mt-60">
                                <div class="col-12">
                                    <div id="loader_cart">
                                        <span class="loader_cart"></span>
                                    </div>
                                    <!-- <button class="themeBtn w-100" id="proceed-to-pay"
                                            onclick="window.location.href='{{ route('checkout.index') }}'"
                                            @if($cartItems->isEmpty()) disabled @endif>
                                        @if($cartItems->isEmpty())
                                            Your Cart is Empty
                                        @else
                                            PROCEED TO PAY
                                        @endif
                                    </button> -->
                                    <!-- <div id="loader_cart" style="display: flex;">
                                     <span class="loader_cart"></span>
                                    </div> -->

                                    <button class="themeBtn w-100" id="proceed-to-pay" 
                                        @if($cartItems->isEmpty()) disabled @endif>
                                        @if($cartItems->isEmpty())
                                            Your Cart is Empty
                                        @else
                                            <span id="button-text">PROCEED TO PAY</span>
                                            <span id="button-loader" class="loader_cart"></span>
                                        @endif
                                    </button>

                                </div>

                                {{-- <div class="col-12 shipping-billing-col mt-50">
                                    <ul>
                                        <li>
                                            <svg class="svg-inline--fa fa-map-marker-alt fa-w-12" aria-hidden="true"
                                                data-prefix="fas" data-icon="map-marker-alt" role="img"
                                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"
                                                data-fa-i2svg="">
                                                <path fill="currentColor"
                                                    d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z">
                                                </path>
                                            </svg><!-- <i class="fas fa-map-marker-alt"></i> -->
                                        </li>
                                        <li>
                                            <p class="">123 Flint Street, Atlanta, GA <br> Georgia, 00000</p>
                                        </li>
                                        <li>
                                            <a href="">edit</a>
                                        </li>
                                    </ul>
                                    <ul>
                                        <li>
                                            <svg class="svg-inline--fa fa-phone fa-w-16" aria-hidden="true"
                                                data-prefix="fas" data-icon="phone" role="img"
                                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
                                                data-fa-i2svg="">
                                                <path fill="currentColor"
                                                    d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z">
                                                </path>
                                            </svg><!-- <i class="fas fa-phone"></i> -->
                                        </li>
                                        <li>
                                            <p class=""> <a href="tel:+8004000234">(800) 4000-234</a></p>
                                        </li>
                                        <li>
                                            <a href="">edit</a>
                                        </li>
                                    </ul>
                                    <ul>
                                        <li>
                                            <svg class="svg-inline--fa fa-envelope-open-text fa-w-16" aria-hidden="true"
                                                data-prefix="fas" data-icon="envelope-open-text" role="img"
                                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
                                                data-fa-i2svg="">
                                                <path fill="currentColor"
                                                    d="M176 216h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16H176c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16zm-16 80c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16H176c-8.84 0-16 7.16-16 16v16zm96 121.13c-16.42 0-32.84-5.06-46.86-15.19L0 250.86V464c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V250.86L302.86 401.94c-14.02 10.12-30.44 15.19-46.86 15.19zm237.61-254.18c-8.85-6.94-17.24-13.47-29.61-22.81V96c0-26.51-21.49-48-48-48h-77.55c-3.04-2.2-5.87-4.26-9.04-6.56C312.6 29.17 279.2-.35 256 0c-23.2-.35-56.59 29.17-73.41 41.44-3.17 2.3-6 4.36-9.04 6.56H96c-26.51 0-48 21.49-48 48v44.14c-12.37 9.33-20.76 15.87-29.61 22.81A47.995 47.995 0 0 0 0 200.72v10.65l96 69.35V96h320v184.72l96-69.35v-10.65c0-14.74-6.78-28.67-18.39-37.77z">
                                                </path>
                                            </svg>
                                        </li>
                                        <li>
                                            <p class=""><a
                                                    href="mailto:support@yourdomain.tld">support@yourdomain.tld</a>
                                            </p>
                                        </li>
                                        <li>
                                            <a href="">edit</a>
                                        </li>
                                    </ul>
                                </div> --}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    


$(document).ready(function() {
    $('#proceed-to-pay').on('click', function (e) {
    e.preventDefault();

    const routeUrl = '{{ route('checkout.index') }}';
    const $text = $('#button-text');
    const $button = $(this);
    
    $text.hide();
    $('.loader_cart').css('display', 'inline-block');


    $.ajax({
        url: routeUrl,
        type: 'GET',
        success: function (response) {
            setTimeout(function () {
                $('.loader_cart').css('display', 'none');

                $text.show('PROCEED TO PAY');
                window.location.href = routeUrl;

            }, 500);
        },
        error: function (xhr, status, error) {
            console.error('Error:', error);
            toastr.error('An error occurred. Please try again');

            setTimeout(function () {
                $('.loader_cart').css('display', 'none');
                $text.show();
            }, 500);
        }
    });
});



    $(document).on('click', '.minus, .plus', function() {
        var $quantityInput = $(this).siblings('.quantity-input');
        var quantity = parseInt($quantityInput.val());
        var cartId = $quantityInput.data('cart-id');
        var price = parseFloat($quantityInput.data('price'));
        var unitPrice = parseFloat($quantityInput.data('unit-price'));

        var newQuantity = quantity;

        if ($(this).hasClass('minus') && quantity > 1) {
            newQuantity = quantity - 1;
            toastr.success('Cart updated successfully!');
        } else if ($(this).hasClass('plus')) {
            newQuantity = quantity + 1;
            toastr.success('Cart updated successfully!');
        }

        $quantityInput.val(newQuantity);

        $(this).siblings('.minus').prop('disabled', newQuantity <= 1);

        var newTotalPrice = unitPrice * newQuantity;

        $('#total-price-' + cartId).text('USD ' + newTotalPrice.toFixed(2));

        $.ajax({
            url: '{{ route('cart.update') }}',
            type: 'POST',
            data: {
                cart_id: cartId,
                quantity: newQuantity,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    $('#cart-total').text('USD ' + response.updated_cart_total);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr, status, error) {
                console.error(error);
                toastr.error('An error occurred. Please try again.');
            }
        });
    });
});



$(document).on('click', '.delete-cart-item', function (e) {
    e.preventDefault();

    const rowId = $(this).data('row-id');

    $.ajax({
        url: '{{ route("cart.remove") }}',
        type: 'POST',
        data: {
            rowId: rowId,
            _token: '{{ csrf_token() }}',
        },
        success: function (response) {
            if (response.success) {
                $(`#cart-item-${rowId}`).remove();
                $('#cart-total').text(`USD ${response.cartTotal}`);

                $(document).trigger('cart:updated', [response.cartCount]);

                toastr.success('Product removed from cart successfully!');
            } else {
                toastr.error('Failed to remove the item. Please try again.');
            }
        },
        error: function () {
            toastr.error('An error occurred while removing the item.');
        },
    });
});

$(document).ready(function() {
    function checkCartStatus(cartCount) {
        var $proceedButton = $('#proceed-to-pay');

        if (cartCount === 0) {
            $proceedButton.prop('disabled', true);
            $proceedButton.text('Your Cart is Empty');
        } else {
            $proceedButton.prop('disabled', false);
            $proceedButton.text('PROCEED TO PAY');
        }
    }

    checkCartStatus({{ $cartItems->count() }});

    $(document).on('cart:updated', function(event, cartCount) {
        checkCartStatus(cartCount);
    });
});



    </script>
@endsection