@extends('template.main-template')

@section('content')
    <div class="container margin_30">
        <div class="page_header">
            {{-- <div class="breadcrumbs">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li>Cart</li>
                </ul>
            </div> --}}
            <h1>Cart</h1>
        </div>
        <!-- /page_header -->
        @if (Cart::content()->count() > 0)
            <table class="table table-striped table-hover cart-list cart-area">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Price</th>
                        <th>Quantity</th>
                        <th>Subtotal</th>
                        <th>

                        </th>
                    </tr>
                </thead>
                <tbody>

                    @foreach ($cartItems as $item)
                        {{-- {{dd($item)}} --}}
                        <tr>
                            <input type="hidden" value="{{ $item->rowId }}">
                            <td>
                                <div class="thumb_cart">
                                    @if (count($item->productData->images) > 0)
                                        <img src="{{ Storage::url($item->productData->images[0]->file) }}"
                                            data-src="{{ Storage::url($item->productData->images[0]->file) }}"
                                            class="lazy img-responsive" alt="">
                                    @else
                                        <img src="{{ asset('shop/images/products/no-image.png') }}"
                                            data-src="{{ asset('shop/images/products/no-image.png') }}"
                                            class="lazy img-responsive" alt="No Image">
                                    @endif

                                </div>
                                <div style="display: flex; flex-direction: column;">
                                    <span class="item_cart">{{ $item->name }}</span>
                                    <span class="text-secondary">
                                        <ul>
                                            @foreach ($item->options as $key => $option)
                                                <li>
                                                    <strong>{{ $key }}: {{ $option }}</strong>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <strong>{{ formatMoney($item->price, true) }}</strong>
                            </td>
                            <td>
                                <div class="numbers-row cart-qt">
                                    <input type="text" value="{{ $item->qty }}" id="quantity_1" class="qty2"
                                        name="quantity_1" readonly>
                                    <div class="inc button_inc" onclick="cart.incrementProductQty(this)">+</div>
                                    <div class="dec button_inc" onclick="cart.decrementProductQty(this)">-</div>
                                </div>
                            </td>
                            <td>
                                <strong>{{ formatMoney($item->price * $item->qty, true) }}</strong>
                            </td>
                            <td class="options">
                                <a href="{{ route('cart.remove', $item->rowId) }}" ><i class="ti-trash"></i></a>
                            </td>
                        </tr>
                    @endforeach

                </tbody>
            </table>

            <div class="row add_top_30 flex-sm-row-reverse cart_actions">
                <div class="col-sm-4 text-end">
                    <a href="{{ route('cart.index') }}" class="btn_1 gray">Update Cart</a>
                </div>
                <div class="col-sm-8">
                    <div class="apply-coupon">
                        <div class="form-group">
                            <div class="row g-2">
                                <div class="col-md-6">
                                    <input type="text" name="coupon-code" value=""
                                        placeholder="Promo code" class="form-control" id="inputCoupon">
                                    </div>
                                <div class="col-md-4">
                                    <button type="button" class="btn_1 outline" onclick="coupon.handleApply()">Apply Coupon</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        @else
            <div class="alert alert-info">Your shopping cart is empty. <a href="{{route('product.all')}}">Click here to go shopping!</a></div>
        @endif
    </div>
    <!-- /container -->
    @if (Cart::content()->count() > 0)
        <div class="box_cart">
            <div class="container">
                <div class="row justify-content-end">
                    <div class="col-xl-4 col-lg-4 col-md-6">
                        <ul>
                            <li style="display: flex; align-items: center; justify-content: space-between;">
                                <span>Subtotal: </span>
                                <span id="cart-subtotal" style="flex: 1; display: flex; justify-content: flex-end;">${{ Cart::subtotal(2, '.', ',') }}</span><br>
                            </li>

                            {{-- <li id="tax-display" style="margin: 5px 0px; display: none; align-items: center; justify-content: space-between;">
                                <span>Tax:</span>
                                <span id="tax-value">{{formatMoney(session('tax'), true)}}</span>
                            </li> --}}

                            {{-- <li id="tax-input" style="margin: 5px 0px; display: none; align-items: center; justify-content: space-between;">
                                <input type="number" id="tax_input" class="form-control" placeholder="Type your zipcode">
                                <button class="btn_1 outline" onclick="cart.handleTax()">Calculate</button>
                            </li> --}}

                            <li id="li-coupon-price" style="display: none; align-items: center; justify-content: space-between;">
                                <span id="discountText"></span>
                                <div>
                                    <span id="couponCode" style="flex: 1; display: flex; justify-content: flex-end;"></span> &nbsp;
                                    <span id="couponValue" style="flex: 1; display: flex; justify-content: flex-end;"></span>
                                </div>
                            </li>
                            <li id="li-shipping-price" style="display: flex; align-items: center; justify-content: space-between;">
                                <span>Shipping: </span>
                                <span id="shippingValue" style="flex: 1; display: flex; justify-content: flex-end;">$0.00</span>
                            </li>
                            <li class="total-area" style="display: flex; align-items: center; justify-content: space-between;">
                                <span>Total</span> <span class="total">$</span>
                            </li>
                        </ul>

                        <a href="{{ route('cart.finish-order') }}"  id="finish-button" class="btn_1 full-width cart" >Proceed to Checkout</a>

                    </div>
                </div>
            </div>
        </div>
    @endif
    <!-- /box_cart -->
    @csrf
@endsection

@push('javascript')
    <script src="{{ asset('shop/js/storage.js') }}"></script>
    <script src="{{ asset('shop/js/cart.js') }}"></script>
    <script src="{{ asset('shop/js/coupon.js') }}"></script>
    <script>
        cart.setCartTotal()
        cart.handleShownTax()
        storage.init()
        coupon.init()
    </script>
@endpush

@push('css')
    <link href="{{ asset('template/css/cart.css') }}" rel="stylesheet">
@endpush