@extends('Frontend.layouts.app')

@section('content')

    <div class="ecom-main ">

        <!-- cart items start -->
    <section class="cart-section pt-0 top-space xl-space">
        <div class="cart-box px-15">
            <a href="product.html" class="cart-img">
                <img src="assets/images/products/1.jpg" class="img-fluid" alt="">
            </a>





            
            <div class="cart-content">
                <a href="product.html">
                    <h4>Pink Hoodie t-shirt full </h4>
                </a>
                <h5 class="content-color">by Mango</h5>
                <div class="price">
                    <h4>$32.00 <del>$35.00</del><span>20%</span></h4>
                </div>
                <div class="select-size-sec">
                    <a href="javascript:void(0)" data-bs-toggle="offcanvas" data-bs-target="#selectQty" class="opion">
                        <h6>Qty: 1</h6><i class="iconly-Arrow-Down-2 icli"></i>
                    </a>
                    <a href="javascript:void(0)" data-bs-toggle="offcanvas" data-bs-target="#selectSize" class="opion">
                        <h6>Size: S</h6><i class="iconly-Arrow-Down-2 icli"></i>
                    </a>
                </div>
                <div class="cart-option">
                    <!-- <h5 data-bs-toggle="offcanvas" data-bs-target="#removecart"><i class="iconly-Heart icli"></i> Move
                        to
                        wishlist</h5>
                    <span class="divider-cls">|</span> -->
                    <h5 data-bs-toggle="offcanvas" data-bs-target="#removecart"><i class="iconly-Delete icli"></i>
                        Remove
                    </h5>
                </div>
            </div>
        </div>
        <div class="divider"></div>
        <div class="cart-box px-15">
            <a href="product.html" class="cart-img">
                <img src="assets/images/products/2.jpg" class="img-fluid" alt="">
            </a>
            <div class="cart-content">
                <a href="product.html">
                    <h4>Pink Hoodie t-shirt full </h4>
                </a>
                <h5 class="content-color">by Mango</h5>
                <div class="price">
                    <h4>$32.00 <del>$35.00</del><span>20%</span></h4>
                </div>
                <div class="select-size-sec">
                    <a href="javascript:void(0)" data-bs-toggle="offcanvas" data-bs-target="#selectQty" class="opion">
                        <h6>Qty: 1</h6><i class="iconly-Arrow-Down-2 icli"></i>
                    </a>
                    <a href="javascript:void(0)" data-bs-toggle="offcanvas" data-bs-target="#selectSize" class="opion">
                        <h6>Size: S</h6><i class="iconly-Arrow-Down-2 icli"></i>
                    </a>
                </div>
                <div class="cart-option">
                    <!-- <h5 data-bs-toggle="offcanvas" data-bs-target="#removecart"><i class="iconly-Heart icli"></i> Move
                        to
                        wishlist</h5>
                    <span class="divider-cls">|</span> -->
                    <h5 data-bs-toggle="offcanvas" data-bs-target="#removecart"><i class="iconly-Delete icli"></i>
                        Remove
                    </h5>
                </div>
            </div>
        </div>
        <div class="divider"></div>
        <div class="cart-box px-15">
            <a href="product.html" class="cart-img">
                <img src="assets/images/products/3.jpg" class="img-fluid" alt="">
            </a>
            <div class="cart-content">
                <a href="product.html">
                    <h4>Pink Hoodie t-shirt full </h4>
                </a>
                <h5 class="content-color">by Mango</h5>
                <div class="price">
                    <h4>$32.00 <del>$35.00</del><span>20%</span></h4>
                </div>
                <div class="select-size-sec">
                    <a href="javascript:void(0)" data-bs-toggle="offcanvas" data-bs-target="#selectQty" class="opion">
                        <h6>Qty: 1</h6><i class="iconly-Arrow-Down-2 icli"></i>
                    </a>
                    <a href="javascript:void(0)" data-bs-toggle="offcanvas" data-bs-target="#selectSize" class="opion">
                        <h6>Size: S</h6><i class="iconly-Arrow-Down-2 icli"></i>
                    </a>
                </div>
                <div class="cart-option">
                    <!-- <h5 data-bs-toggle="offcanvas" data-bs-target="#removecart"><i class="iconly-Heart icli"></i> Move
                        to
                        wishlist</h5>
                    <span class="divider-cls">|</span> -->
                    <h5 data-bs-toggle="offcanvas" data-bs-target="#removecart"><i class="iconly-Delete icli"></i>
                        Remove
                    </h5>
                </div>
            </div>
        </div>
        <div class="divider"></div>
    </section>
    <!-- cart items end -->


    <!-- you may also like section start -->
    <!-- <section class="pt-0 product-slider-section overflow-hidden">
        <div class="title-section px-15">
            <h2>You May also Like</h2>
        </div>
        <div class="product-slider slick-default pl-15">
            <div>
                <div class="product-box ratio_square">
                    <div class="img-part">
                        <a href="product.html"><img src="assets/images/products/9.jpg" alt="" class="img-fluid bg-img"></a>
                        <div class="wishlist-btn">
                            <i class="iconly-Heart icli"></i>
                            <i class="iconly-Heart icbo"></i>
                            <div class="effect-group">
                                <span class="effect"></span>
                                <span class="effect"></span>
                                <span class="effect"></span>
                                <span class="effect"></span>
                                <span class="effect"></span>
                            </div>
                        </div>
                    </div>
                    <div class="product-content">
                        <ul class="ratings">
                            <li><i class="iconly-Star icbo"></i></li>
                            <li><i class="iconly-Star icbo"></i></li>
                            <li><i class="iconly-Star icbo"></i></li>
                            <li><i class="iconly-Star icbo"></i></li>
                            <li><i class="iconly-Star icbo empty"></i></li>
                        </ul>
                        <a href="product.html">
                            <h4>Blue Denim Jacket</h4>
                        </a>
                        <div class="price">
                            <h4>$32.00 <del>$35.00</del><span>20%</span></h4>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="product-box ratio_square">
                    <div class="img-part">
                        <a href="product.html"><img src="assets/images/products/10.jpg" alt="" class="img-fluid bg-img"></a>
                        <div class="wishlist-btn">
                            <i class="iconly-Heart icli"></i>
                            <i class="iconly-Heart icbo"></i>
                            <div class="effect-group">
                                <span class="effect"></span>
                                <span class="effect"></span>
                                <span class="effect"></span>
                                <span class="effect"></span>
                                <span class="effect"></span>
                            </div>
                        </div>
                    </div>
                    <div class="product-content">
                        <ul class="ratings">
                            <li><i class="iconly-Star icbo"></i></li>
                            <li><i class="iconly-Star icbo"></i></li>
                            <li><i class="iconly-Star icbo"></i></li>
                            <li><i class="iconly-Star icbo"></i></li>
                            <li><i class="iconly-Star icbo empty"></i></li>
                        </ul>
                        <a href="product.html">
                            <h4>Blue Denim Jacket</h4>
                        </a>
                        <div class="price">
                            <h4>$32.00 <del>$35.00</del><span>20%</span></h4>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="product-box ratio_square">
                    <div class="img-part">
                        <a href="product.html"><img src="assets/images/products/8.jpg" alt="" class="img-fluid bg-img"></a>
                        <div class="wishlist-btn">
                            <i class="iconly-Heart icli"></i>
                            <i class="iconly-Heart icbo"></i>
                            <div class="effect-group">
                                <span class="effect"></span>
                                <span class="effect"></span>
                                <span class="effect"></span>
                                <span class="effect"></span>
                                <span class="effect"></span>
                            </div>
                        </div>
                    </div>
                    <div class="product-content">
                        <ul class="ratings">
                            <li><i class="iconly-Star icbo"></i></li>
                            <li><i class="iconly-Star icbo"></i></li>
                            <li><i class="iconly-Star icbo"></i></li>
                            <li><i class="iconly-Star icbo"></i></li>
                            <li><i class="iconly-Star icbo empty"></i></li>
                        </ul>
                        <a href="product.html">
                            <h4>Blue Denim Jacket</h4>
                        </a>
                        <div class="price">
                            <h4>$32.00 <del>$35.00</del><span>20%</span></h4>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="product-box ratio_square">
                    <div class="img-part">
                        <a href="product.html"><img src="assets/images/products/2.jpg" alt="" class="img-fluid bg-img"></a>
                        <div class="wishlist-btn">
                            <i class="iconly-Heart icli"></i>
                            <i class="iconly-Heart icbo"></i>
                            <div class="effect-group">
                                <span class="effect"></span>
                                <span class="effect"></span>
                                <span class="effect"></span>
                                <span class="effect"></span>
                                <span class="effect"></span>
                            </div>
                        </div>
                    </div>
                    <div class="product-content">
                        <ul class="ratings">
                            <li><i class="iconly-Star icbo"></i></li>
                            <li><i class="iconly-Star icbo"></i></li>
                            <li><i class="iconly-Star icbo"></i></li>
                            <li><i class="iconly-Star icbo"></i></li>
                            <li><i class="iconly-Star icbo empty"></i></li>
                        </ul>
                        <a href="product.html">
                            <h4>Blue Denim Jacket</h4>
                        </a>
                        <div class="price">
                            <h4>$32.00 <del>$35.00</del><span>20%</span></h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="divider"></div> -->
    <!-- you may also like section end -->


    <!-- coupon section -->
    <!-- <section class="px-15 pt-0">
        <h2 class="title">Coupons:</h2>
        <div class="coupon-section">
            <i class="iconly-Discount icli icon-discount"></i>
            <input class="form-control form-theme" placeholder="Apply Coupons">
            <i class="iconly-Arrow-Right-2 icli icon-right"></i>
        </div>
    </section>
    <div class="divider"></div> -->
    <!-- coupon end -->


    <!-- order details start -->
    <section id="order-details" class="px-15 pt-0">
        <h2 class="title">Order Details:</h2>
        <div class="order-details">
            <ul>
                <li>
                    <h4>Bag total <span>$220.00</span></h4>
                </li>
                <li>
                    <h4>Bag savings <span class="text-green">-$20.00</span></h4>
                </li>
                <li>
                    <h4>Coupon Discount <a href="coupons.html" class="theme-color">Apply Coupon</a></h4>
                </li>
                <li>
                    <h4>Delivery <span>$50.00</span></h4>
                </li>
            </ul>
            <div class="total-amount">
                <h4>Total Amount <span>$270.00</span></h4>
            </div>
            <div class="row">
                <div class="col-lg-8 col-md-8 col-sm-8">
                       
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4">
                        <div class="px-15 mt-4">
                        <a href="" class="btn btn-outline w-100 content-color">Request</a>
                        </div>
                </div>
            </div>
        </div>
    </section>
    <div class="divider"></div>
    <!-- order details end -->


    <!-- service section start -->
    <!-- <section class="service-wrapper px-15 pt-0">
        <div class="row">
            <div class="col-4">
                <div class="service-wrap">
                    <div class="icon-box">
                        <img src="assets/svg/returning.svg" class="img-fluid" alt="">
                    </div>
                    <span>7 Day Return</span>
                </div>
            </div>
            <div class="col-4">
                <div class="service-wrap">
                    <div class="icon-box">
                        <img src="assets/svg/24-hours.svg" class="img-fluid" alt="">
                    </div>
                    <span>24/7 Support</span>
                </div>
            </div>
            <div class="col-4">
                <div class="service-wrap">
                    <div class="icon-box">
                        <img src="assets/svg/wallet.svg" class="img-fluid" alt="">
                    </div>
                    <span>Secure Payment</span>
                </div>
            </div>
        </div>
    </section> -->
    <!-- service section end -->


    <!-- panel space start -->
    <section class="panel-space"></section>
    <!-- panel space end -->


    <!-- bottom panel start -->
    <div class="cart-bottom">
        <div>
            <div class="left-content">
                <h4>$270.00</h4>
                <a href="#order-details" class="theme-color">View details</a>
            </div>
            <a href="delivery.html" class="btn btn-solid">Place Order</a>
        </div>
    </div>
    <!-- bottom panel end -->


    <!-- select qty offcanvas start -->
    <div class="offcanvas offcanvas-bottom h-auto qty-canvas" id="selectQty">
        <div class="offcanvas-body small">
            <h4>Select Quanity:</h4>
            <div class="qty-counter">
                <div class="input-group">
                    <button type="button" class="btn quantity-left-minus" data-type="minus" data-field="">
                        <img src="assets/svg/minus-square.svg" class="img-fluid" alt="">
                    </button>
                    <input type="text" name="quantity" class="form-control form-theme qty-input input-number" value="1">
                    <button type="button" class="btn quantity-right-plus" data-type="plus" data-field="">
                        <img src="assets/svg/plus-square.svg" class="img-fluid" alt="">
                    </button>
                </div>
            </div>
            <a href="delivery.html" class="btn btn-solid w-100" data-bs-dismiss="offcanvas">Add to Bag</a>
        </div>
    </div>
    <!-- select qty offcanvas end -->


    <!-- select size offcanvas start -->
    <div class="offcanvas offcanvas-bottom h-auto qty-canvas" id="selectSize">
        <div class="offcanvas-body small">
            <h4>Select Size:</h4>
            <div class="size-detail mb-2 mt-2">
                <ul class="size-select">
                    <li>S</li>
                    <li>M</li>
                    <li>L</li>
                    <li class="disable">XL</li>
                </ul>
            </div>
            <div class="price mb-3">
                <h4>$32.00 <del>$35.00</del><span>20%</span></h4>
            </div>
            <a href="javascript:void(0)" class="btn btn-solid w-100" data-bs-dismiss="offcanvas">DONE</a>
        </div>
    </div>
    <!-- select size offcanvas end -->


    <!-- remove item canvas start -->
    <div class="offcanvas offcanvas-bottom h-auto removecart-canvas" id="removecart">
        <div class="offcanvas-body small">
            <div class="content">
                <h4>Remove Item:</h4>
                <p>Are you sure you want to remove or move this item from the cart?</p>
            </div>
            <div class="bottom-cart-panel">
                <div class="row">
                    <div class="col-7">
                        <a href="wishlist.html" class="title-color">MOVE TO WISHLIST</a>
                    </div>
                    <div class="col-5">
                        <a href="#" class="theme-color">REMOVE</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- remove item canvas end -->

    </div>
@endsection