@extends('frontend.layouts.app')
@section('title', 'Cart')
@section('content')
    <!-- ============================ header area ============================ -->
    @include('frontend.includes.headers.headerOne')
    <!-- ============================ header area end ============================ -->

    <!-- ==== banner section start ==== -->
    <section class="common-banner">
        <div class="container">
            <div class="row">
                <div class="common-banner__content text-center">
                    <span class="sub-title"><i class="icon-donation"></i>Start donating poor people</span>
                    <h2 class="title-animation">View Cart</h2>
                </div>
            </div>
        </div>
        <div class="banner-bg">
            <img src="{{ asset('assets/images/banner/banner-bg.png') }}" alt="Image">
        </div>
        <div class="shape">
            <img src="{{ asset('assets/images/shape.png') }}" alt="Image">
        </div>
        <div class="sprade" data-aos="zoom-in" data-aos-duration="1000">
            <img src="{{ asset('assets/images/sprade-base.png') }}" alt="Image" class="base-img">
        </div>
    </section>
    <!-- ==== / banner section end ==== -->
    <!-- ==== cart section start ==== -->
    <section class="cart-main">
        <div class="container">
            <div class="row gutter-60">
                <div class="col-12 col-xl-8">
                    <div class="cart__inner" data-aos="fade-up" data-aos-duration="1000">
                        <div class="cart-table">
                            <table>
                                <tr>
                                    <th>Product</th>
                                    <th>Price</th>
                                    <th>Quantity</th>
                                    <th>Subtotal</th>
                                </tr>
                                <tr class="cart-item-single">
                                    <td class="cart-product">
                                        <div class="cart-product-wrapper">
                                            <div class="thumb">
                                                <a href="{{ route('product.details') }}">
                                                    <img src="{{ asset('assets/images/shop/cart-three.png') }}" alt="Image">
                                                </a>
                                                <button aria-label="delete item" class="delete-item">
                                                    <i class="fa-solid fa-circle-xmark"></i>
                                                </button>
                                            </div>
                                            <div class="content">
                                                <p><a href="{{ route('product.details') }}">Apple Watch</a></p>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="price">$12.00</p>
                                    </td>
                                    <td>
                                        <div class="measure">
                                            <button aria-label="decrease item" class="quantity-decrease">
                                                <i class="fa-solid fa-minus"></i>
                                            </button>
                                            <span class="item-quantity">0</span>
                                            <button aria-label="add item" class="quantity-increase">
                                                <i class="fa-solid fa-plus"></i>
                                            </button>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="sub">$60.00</p>
                                    </td>
                                </tr>
                                <tr class="cart-item-single">
                                    <td class="cart-product">
                                        <div class="cart-product-wrapper">
                                            <div class="thumb">
                                                <a href="{{ route('product.details') }}">
                                                    <img src="{{ asset('assets/images/shop/cart-four.png') }}" alt="Image">
                                                </a>
                                                <button aria-label="delete item" class="delete-item">
                                                    <i class="fa-solid fa-circle-xmark"></i>
                                                </button>
                                            </div>
                                            <div class="content">
                                                <p><a href="{{ route('product.details') }}">Sumsang Hand Set</a></p>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="price">$67.00</p>
                                    </td>
                                    <td>
                                        <div class="measure">
                                            <button aria-label="decrease item" class="quantity-decrease">
                                                <i class="fa-solid fa-minus"></i>
                                            </button>
                                            <span class="item-quantity">0</span>
                                            <button aria-label="add item" class="quantity-increase">
                                                <i class="fa-solid fa-plus"></i>
                                            </button>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="sub">$67.00</p>
                                    </td>
                                </tr>
                                <tr class="cart-item-single">
                                    <td class="cart-product">
                                        <div class="cart-product-wrapper">
                                            <div class="thumb">
                                                <a href="{{ route('product.details') }}">
                                                    <img src="{{ asset('assets/images/shop/cart-two.png') }}" alt="Image">
                                                </a>
                                                <button aria-label="delete item" class="delete-item">
                                                    <i class="fa-solid fa-circle-xmark"></i>
                                                </button>
                                            </div>
                                            <div class="content">
                                                <p><a href="{{ route('product.details') }}">Tata Brand Car</a></p>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="price">$87.00</p>
                                    </td>
                                    <td>
                                        <div class="measure">
                                            <button aria-label="decrease item" class="quantity-decrease">
                                                <i class="fa-solid fa-minus"></i>
                                            </button>
                                            <span class="item-quantity">0</span>
                                            <button aria-label="add item" class="quantity-increase">
                                                <i class="fa-solid fa-plus"></i>
                                            </button>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="sub">$87.00</p>
                                    </td>
                                </tr>
                                <tr class="cart-item-single">
                                    <td class="cart-product">
                                        <div class="cart-product-wrapper">
                                            <div class="thumb">
                                                <a href="{{ route('product.details') }}">
                                                    <img src="{{ asset('assets/images/shop/cart-one.png') }}" alt="Image">
                                                </a>
                                                <button aria-label="delete item" class="delete-item">
                                                    <i class="fa-solid fa-circle-xmark"></i>
                                                </button>
                                            </div>
                                            <div class="content">
                                                <p><a href="{{ route('product.details') }}">Sumsang Hand Set</a></p>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="price">$99.00</p>
                                    </td>
                                    <td>
                                        <div class="measure">
                                            <button aria-label="decrease item" class="quantity-decrease">
                                                <i class="fa-solid fa-minus"></i>
                                            </button>
                                            <span class="item-quantity">0</span>
                                            <button aria-label="add item" class="quantity-increase">
                                                <i class="fa-solid fa-plus"></i>
                                            </button>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="sub">$99.00</p>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="update-cart">
                            <a href="{{ route('shop') }}">Return To Shop</a>
                            <a href="{{ route('cart') }}">Update Cart</a>
                        </div>
                        <div class="coupon-wrapper">
                            <div class="left-c">
                                <h6>Coupon Code</h6>
                            </div>
                            <div class="right-c">
                                <form action="#" method="post">
                                    @csrf
                                    <div class="input-single">
                                        <input type="text" required name="c-code" id="cCcode"
                                            placeholder="Enter Coupon">
                                    </div>
                                    <button type="submit" aria-label="subscribe to our newsletter"
                                        title="subscribe to our newsletter" class="btn--primary">Apply Coupon
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-xl-4">
                    <div class="cart-main__content">
                        <div class="cart-main__single" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                            <div class="intro">
                                <h6>Calculate Shipping</h6>
                            </div>
                            <div class="content">
                                <div class="content-single">
                                    <p>Country</p>
                                    <p>Australia</p>
                                </div>
                                <div class="content-single">
                                    <p>Street</p>
                                    <p>#67, Chunkook Street</p>
                                </div>
                                <div class="content-single">
                                    <p>Zip Code</p>
                                    <p>49870</p>
                                </div>
                                <a href="{{ route('checkout') }}" aria-label="Shipping" title="Shipping">Calculate Shiping</a>
                            </div>
                        </div>
                        <div class="cart-main__single" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300">
                            <div class="intro">
                                <h6>Total Cart</h6>
                            </div>
                            <div class="content">
                                <div class="content-single">
                                    <p>Subtotal</p>
                                    <p>$345.00</p>
                                </div>
                                <div class="content-single">
                                    <p>Total</p>
                                    <p>$450.00</p>
                                </div>
                                <a href="{{ route('checkout') }}" aria-label="Shipping" title="Shipping" class="total">Procced to
                                    checkout</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ==== cart section end ==== -->

    <!-- ========================== footer area ============================ -->
    @include('frontend.includes.footers.footerOne')
    <!-- ========================== footer area end ============================ -->
@endsection