@extends('layouts.master')
@section('content')
    <!-- Breadcum Start -->
    @include('components.breadcum')
    <!-- Breadcum End -->
    <!-- Card Section Start -->
    <div class="card-section v1 pt-50 pb-50 pt-md-70 pb-md-70 pt-xl-100 pb-xl-100">
        <div class="container">
            <p class="text-para-1">In Your shopping cart: <span class="color-orange">{{ count($cartItems) }} product</span>
            </p>
            <div class="cart-content mt-30">
                <div class="cart-table">
                    <ul class="cart-table-head">
                        <li>
                            <p class="text-para-2 text-para-xl-1 text-bold">Product Name</p>
                        </li>
                        <li>
                            <p class="text-para-2 text-para-xl-1 text-bold">Price</p>
                        </li>
                        <li>
                            <p class="text-para-2 text-para-xl-1 text-bold">Quantity</p>
                        </li>
                        <li>
                            <p class="text-para-2 text-para-xl-1 text-bold">Total</p>
                        </li>
                    </ul>
                    <ul class="cart-table-body">
                        @forelse ($cartItems as $cartItem)
                            <li class="wow animate__fadeInUp" data-wow-delay="0.1s" data-wow-offset="20"
                                data-wow-duration="0.8s">
                                <div class="product-img">
                                    <img width="100" src="{{ asset('uploads/products/' . $cartItem->options->image) }}"
                                        alt="product">
                                    <div class="product-text">
                                        <p class="text-para-2 text-para-xl-1 text-bold">{{ limitText($cartItem->name, 20) }}
                                        </p>
                                        <p class="text-para-2 text-para-xl-1 text-reguler">
                                            {{ $cartItem->options->category }}</p>
                                    </div>
                                </div>
                                <p class="price-text text-para-2 text-para-xl-1 text-bold">
                                    {{ formatAmount($cartItem->price, $settings) }}</p>
                                <div class="quan-card">
                                    <div class="quantity-count w-100">
                                        <button class="count-down-btn product-decrement"><i class="my-icon icon-minus"></i>
                                        </button>
                                        <input readonly class="product-qty w-25" data-rowid="{{ $cartItem->rowId }}"
                                            type="text" min="1" max="100" value="{{ $cartItem->qty }}" />
                                        <button class="count-plus-btn product-increment"><i class="my-icon icon-plus"></i>
                                        </button>
                                    </div>
                                </div>
                                <p class="tPrice-text text-para-2 text-para-xl-1 text-bold color-orange"
                                    id="{{ $cartItem->rowId }}">
                                    {{ formatAmount($cartItem->price * $cartItem->qty, $settings) }}
                                </p>
                                <a href="{{ route('cart.remove', $cartItem->rowId) }}" class="delete-item"><i
                                        class="my-icon icon-close"></i>
                                </a>
                            </li>
                        @empty
                        @endforelse

                    </ul>
                </div>
            </div>
            <p class="text-para-2 text-para-xl-1 text-bold mt-30 wow animate__fadeInUp" data-wow-delay="0.1s"
                data-wow-offset="20" data-wow-duration="0.8s">Discount Code</p>
            <div class="discount-update mt-30 wow animate__fadeInUp" data-wow-delay="0.1s" data-wow-offset="20"
                data-wow-duration="0.8s">
                <form id="coupon_form" class="coupon-form">
                    <input type="text" name="coupon_code" placeholder="Coupon Code"
                        value="{{ session()->has('coupon') ? session()->get('coupon')['code'] : '' }}">
                    <button type="submit" class="btn-anime v1 round-border-small">Apply</button>
                </form>
                <a href="#" class="btn-anime v1 round-border-small clear_cart">Clear Cart</a>
                <a href="{{ route('products') }}" class="btn-anime v1 round-border-small">Update Cart</a>
            </div>
            <div class="cart-total mt-30 mt-xl-50 wow animate__fadeInUp" data-wow-delay="0.1s" data-wow-offset="20"
                data-wow-duration="0.8s">
                <p class="text-para-1 text-bold total-title">Cart Total</p>
                <ul class="pirce-list mt-10">
                    <li>
                        <p class="text-para-2 text-para-xl-1 text-reguler total-subTitle">Subtotal:</p>
                        <p class="text-para-2 text-para-xl-1 text-bold total-price" id="sub_total">
                            {{ formatAmount(cartSubTotal(), $settings) }}</p>
                    </li>
                    <li>
                        <p class="text-para-2 text-para-xl-1 text-reguler total-subTitle">Discount(-):</p>
                        <p class="text-para-2 text-para-xl-1 text-bold total-price" id="discount">
                            {{ formatAmount(calculateCouponDiscount(), $settings) }}</p>
                    </li>
                    <li>
                        <p class="text-para-2 text-para-xl-1 text-reguler total-subTitle">Total:</p>
                        <p class="text-para-2 text-para-xl-1 text-bold total-price" id="total">
                            {{ formatAmount(getTotalWithAppliedCoupon(), $settings) }}</p>
                    </li>
                </ul>
                <a href="{{ route('checkout') }}" class="link-anime v2">Proceed To Checkout</a>
            </div>
        </div>
    </div>
    <!-- Card Section End -->
@endsection
@push('scripts')
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            // Increment product quantity
            $('.product-increment').on('click', function() {
                let input = $(this).siblings('.product-qty');
                let quantity = parseInt(input.val()) + 1;
                let rowId = input.data('rowid');
                input.val(quantity);
                $.ajax({
                    url: "{{ route('cart.update.quantity') }}",
                    method: 'POST',
                    data: {
                        rowId: rowId,
                        quantity: quantity
                    },
                    success: function(response) {
                        if (response.status == 'success') {
                            let productId = '#' + rowId;
                            let totalAmount = "{{ $settings->currency_icon }}" + number_format(
                                response
                                .product_total);
                            $(productId).text(totalAmount);
                            cartSubTotal()
                            calculateCouponDiscount()
                            toastr.success(response.message)
                        } else if (response.status == 'stock_out') {
                            toastr.error(response.message)
                        } else if (response.status == 'qty_out') {
                            toastr.error(response.message)
                        }
                    },
                    error: function(error) {}
                })
            })
            // Decrement product quantity
            $('.product-decrement').on('click', function() {
                let input = $(this).siblings('.product-qty');
                let quantity = parseInt(input.val()) - 1;
                let rowId = input.data('rowid');
                if (quantity < 1) {
                    quantity = 1
                    toastr.error('Quantity can not be less than 1');
                    return false;
                }
                input.val(quantity);
                $.ajax({
                    url: "{{ route('cart.update.quantity') }}",
                    method: 'POST',
                    data: {
                        rowId: rowId,
                        quantity: quantity
                    },
                    success: function(response) {
                        if (response.status == 'success') {
                            let productId = '#' + rowId;
                            let totalAmount = "{{ $settings->currency_icon }}" + number_format(
                                response
                                .product_total);
                            $(productId).text(totalAmount);
                            cartSubTotal()
                            calculateCouponDiscount()
                            toastr.success(response.message)
                        }
                    },
                    error: function(error) {}
                })
            })

            function cartSubTotal() {
                $.ajax({
                    method: "GET",
                    url: "{{ route('cart.subtotal') }}",
                    success: function(response) {
                        $('#sub_total').text('{{ $settings->currency_icon }}' + number_format(
                            response));
                    },
                    error: function(error) {
                        console.log(error)
                    }
                })
            }

            // apply coupon on cart
            $('#coupon_form').on('submit', function(e) {
                e.preventDefault();
                // alert('working');
                let formData = $(this).serialize();
                $.ajax({
                    method: "GET",
                    url: "{{ route('cart.apply.coupon') }}",
                    data: formData,
                    success: function(response) {
                        // console.log(response)
                        if (response.status === 'error') {
                            toastr.error(response.message);
                        } else if (response.status === 'success') {
                            calculateCouponDiscount();
                            toastr.success(response.message);
                        }
                    },
                    error: function(error) {
                        console.log(error)
                    }
                })
            })

            function calculateCouponDiscount() {
                $.ajax({
                    method: "GET",
                    url: "{{ route('cart.calculate.coupon.discount') }}",
                    success: function(response) {
                        // console.log(response)
                        if (response.status === 'success') {
                            $('#discount').text('{{ $settings->currency_icon }}' + number_format(
                                response.discount))

                            $('#total').text('{{ $settings->currency_icon }}' + number_format(
                                response.total
                            ))
                        }
                    },
                    error: function(error) {
                        console.log(error)
                    }
                })
            }

            // Clear Cart
            $('.clear_cart').on('click', function(e) {
                e.preventDefault();
                Swal.fire({
                    title: "Are you sure?",
                    text: "This action will clear your cart. You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, clear it!"
                }).then((result) => {
                    if (result.isConfirmed) {

                        $.ajax({
                            type: 'get',
                            url: "{{ route('cart.clear') }}",

                            success: function(data) {
                                if (data.status == 'success') {
                                    toastr.success(data.message);
                                    // setTimeout(function() {
                                    //     window.location.reload();
                                    // }, 2000);
                                    window.location.reload();

                                }
                            },
                            error: function(xr, status, error) {
                                console.log(error);
                            }
                        });



                    }
                });
            })

        })
    </script>
@endpush