@extends('frontend.master')

@section('title')
    Cart Page
@endsection

@section('content')
    <main class="main cart">
        <!-- Start of Breadcrumb -->
        <nav class="breadcrumb-nav">
            <div class="container">
                <ul class="breadcrumb shop-breadcrumb bb-no">
                    <li class="active"><a href="{{ route('home') }}">Home</a></li>
                    <li class="active"><a href="">Cart Page</a></li>
                </ul>
            </div>
        </nav>
        <!-- End of Breadcrumb -->

        <!-- Start of PageContent -->
        <div class="page-content">
            <div class="container">
                <div class="row gutter-lg mb-10">
                    <div class="col-lg-7 pr-lg-4 mb-6">
                        <table class="shop-table cart-table">
                            <thead>
                                <tr>
                                    <th class="product-name"><span>Product</span></th>
                                    <th></th>
                                    <th class="product-price"><span>Price</span></th>
                                    <th class="product-quantity"><span>Qty</span></th>
                                    <th class="product-subtotal"><span>Product Total</span></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (Cart::content() as $cartItem)
                                    <tr>
                                        @php
                                            $product = App\Models\Admin\Product::find($cartItem->id);
                                            $productImage = App\Models\Admin\ProductImage::where(
                                                'product_id',
                                                $cartItem->id,
                                            )->first();
                                        @endphp
                                        <td class="product-thumbnail">
                                            <div class="p-relative">
                                                <a href="{{ route('product.details', $product->slug) }}">
                                                    <figure>
                                                        <img src="{{ asset('/uploads/product/gallery/' . $productImage->image) }}"
                                                            alt="product" width="300" height="338">
                                                    </figure>
                                                </a>
                                                <button class="btn btn-close" type="button">
                                                    <a href="{{ route('cart.remove.item', $cartItem->rowId) }}">
                                                        <i class="fas fa-times"></i>
                                                    </a>
                                                </button>
                                            </div>
                                        </td>

                                        <td class="product-name">
                                            <a href="{{ route('product.details', $product->slug) }}">
                                                {{ $product->name }}
                                                <br>
                                                Size: {{ $cartItem->options['size'] }}
                                            </a>
                                        </td>
                                        <td class="product-price"><span class="amount">{{ $cartItem->price }}</span></td>
                                        <td class="product-quantity">
                                            <div class="input-group">
                                                <input class="form-control qty" type="number"
                                                    data-id="{{ $cartItem->rowId }}" readonly value="{{ $cartItem->qty }}">
                                                <button class="incrementBtn w-icon-plus"></button>
                                                <button class="decrementBtn w-icon-minus"></button>
                                            </div>
                                        </td>

                                        <td class="product-subtotal">
                                            <span class="amount" style="font-weight: normal;">
                                                {{ $cartItem->price * $cartItem->qty }}
                                            </span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <div class="cart-action mb-6">
                            <a href="{{ route('home') }}"
                                class="btn btn-dark btn-rounded btn-icon-left btn-shopping mr-auto"><i
                                    class="w-icon-long-arrow-left"></i>Continue Shopping</a>

                            <a href="{{ route('cart.clear') }}" class="btn btn-rounded btn-default btn-clear"
                                name="clear_cart" value="Clear Cart">Clear Cart</a>
                        </div>
                    </div>

                    <div class="col-lg-5 sticky-sidebar-wrapper">
                        <div class="sticky-sidebar">
                            <div class="cart-summary mb-4">
                                <h3 class="cart-title text-center">Cart Totals</h3>
                                <div class="cart-subtotal d-flex align-items-center justify-content-between"
                                    style="font-weight: normal; margin-top: 40px;">
                                    <label class="ls-25">Subtotal</label>
                                    @php
                                        $subtotal = cartTotalPrice();
                                    @endphp
                                    <span>{{ $subtotal }}</span>
                                </div>

                                <hr class="divider">

                                <form class="coupon" method="POST" action="{{ route('cart.coupon.apply') }}">
                                    @csrf

                                    <div class="row align-items-center">
                                        <div class="col-lg-9">
                                            <input type="text" name="coupon" class="form-control mb-4"
                                                placeholder="Enter coupon code here..." required />
                                        </div>

                                        <div class="col-lg-3">
                                            <button class="btn btn-sm btn-dark" type="submit">Apply</button>
                                        </div>
                                    </div>
                                </form>


                                <hr class="divider mb-6">
                                <div class="order-total d-flex justify-content-between align-items-center">
                                    <label style="font-weight: normal;">Discount</label>
                                    <span class="ls-50" style="font-weight: normal;">
                                        @if (session()->has('coupon'))
                                            @php
                                                $discountAmount = session()->get('coupon')['discount'] ?? 0;
                                            @endphp
                                        @else
                                            @php
                                                $discountAmount = 0;
                                            @endphp
                                        @endif
                                        {{ $discountAmount }}
                                    </span>
                                </div>

                                @php
                                    $total = $subtotal - $discountAmount;
                                @endphp

                                <div class="order-total d-flex justify-content-between align-items-center">
                                    <label style="font-weight: normal;">Total</label>
                                    <span class="ls-50" style="font-weight: normal;">{{ $total }}</span>
                                </div>

                                <a href="{{ route('checkout') }}"
                                    class="btn btn-block btn-dark btn-icon-right btn-rounded  btn-checkout">
                                    Proceed to checkout<i class="w-icon-long-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of PageContent -->
    </main>
    <!-- End of Main -->
@endsection

@push('scripts')
    <script>
        // increment
        $('.incrementBtn').on('click', function() {
            let quantity = $(this).siblings('.qty');
            let rowId = quantity.data('id');
            let currentQuantity = parseInt(quantity.val());
            quantity.val(currentQuantity + 1);

            cartQuantityUpdate(rowId, quantity.val(), function(data) {
                quantity.val(data.quantity);
            });
        });

        // decrement
        $('.decrementBtn').on('click', function() {
            let quantity = $(this).siblings('.qty');
            let rowId = quantity.data('id');
            let currentQuantity = parseInt(quantity.val());
            if (currentQuantity > 1) {
                quantity.val(currentQuantity - 1);
            }

            cartQuantityUpdate(rowId, quantity.val(), function(data) {
                quantity.val(data.quantity);
            });
        });

        // update cart
        function cartQuantityUpdate(rowId, quantity, callback) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: 'POST',
                url: '{{ route('cart.quantity.update') }}',
                data: {
                    _token: "{{ csrf_token() }}",
                    rowId: rowId,
                    quantity: quantity
                },
                beforeSend: function() {
                    showLoader();
                },
                success: function(data) {
                    if (callback && typeof callback === 'function') {
                        callback(data);
                    }

                    if (data.status == 'error') {
                        toastr.error(data.message);
                    }

                    if (data.status == 'success') {
                        location.reload();
                        toastr.success(data.message);
                    }
                },
                error: function(xhr, status, error) {
                    hideLoader();
                    let errorMessage = xhr.responseJSON.message;
                    toastr.error(errorMessage);
                },
                complete: function() {
                    hideLoader();
                }
            })
        }
    </script>
@endpush