@extends('layouts.landing', ['title' => 'Checkout v.2 - Shopping Cart'])

@section('content')
    @include('layouts.partials/offcanvas')

    <!-- Delivey options offcanvas -->
    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="deliveryOptions" tabindex="-1"
        aria-labelledby="deliveryOptionsLabel" style="width: 500px">

        <!-- Header with nav tabs -->
        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
            <div class="d-flex align-items-center justify-content-between w-100 pb-xl-1 mb-4">
                <h4 class="offcanvas-title" id="deliveryOptionsLabel">Delivery options</h4>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <ul class="nav nav-pills nav-justified w-100" role="tablist">
                <li class="nav-item" role="presentation">
                    <button type="button" class="nav-link active" id="delivery-tab" data-bs-toggle="tab"
                        data-bs-target="#delivery-tab-pane" role="tab" aria-controls="delivery-tab-pane"
                        aria-selected="true">
                        <i class="ci-shopping-bag fs-base ms-n1 me-2"></i>
                        Delivery
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button type="button" class="nav-link" id="pickup-tab" data-bs-toggle="tab"
                        data-bs-target="#pickup-tab-pane" role="tab" aria-controls="pickup-tab-pane"
                        aria-selected="false">
                        <i class="ci-box fs-base ms-n1 me-2"></i>
                        Pickup
                    </button>
                </li>
            </ul>
        </div>

        <div class="offcanvas-body tab-content py-2 py-sm-3">

            <!-- Delivery tab -->
            <div class="tab-pane fade show active" id="delivery-tab-pane" role="tabpanel" aria-labelledby="delivery-tab">

                <!-- Address options collapse -->
                <div class="collapse delivery-address show" id="deliveryAddressOptions">
                    <div class="mt-n3">
                        <div class="form-check border-bottom py-4 m-0">
                            <input type="radio" class="form-check-input" id="address-1" name="delivery-address" checked>
                            <label for="address-1" class="form-check-label text-dark-emphasis fw-semibold">567 Cherry Lane
                                Apt B12 Sacramento, 95829</label>
                        </div>
                        <div class="form-check border-bottom py-4 m-0">
                            <input type="radio" class="form-check-input" id="address-2" name="delivery-address">
                            <div class="d-flex w-100">
                                <label for="address-2" class="form-check-label text-dark-emphasis me-3">1901 Thornridge Cir.
                                    Shiloh, Hawaii, 81063</label>
                                <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
                                    data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove"></button>
                            </div>
                        </div>
                        <div class="form-check border-bottom py-4 m-0">
                            <input type="radio" class="form-check-input" id="address-3" name="delivery-address">
                            <div class="d-flex w-100">
                                <label for="address-3" class="form-check-label text-dark-emphasis me-3">3517 W. Gray St.
                                    Utica, Pennsylvania, 57867</label>
                                <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
                                    data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove"></button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Add new address collapse -->
                <div class="collapse delivery-address" id="deliveryAddressAdd">
                    <div class="nav mb-4">
                        <a class="nav-link animate-underline p-0" href=".delivery-address" data-bs-toggle="collapse"
                            aria-expanded="true" aria-controls="deliveryAddressOptions deliveryAddressAdd">
                            <i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
                            <span class="animate-target">Back to my addresses</span>
                        </a>
                    </div>
                    <div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
                        <h5 class="h6 mb-0 me-3">Add an address to start ordering</h5>
                        <a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
                            <i class="ci-map-pin fs-base ms-n1 me-1"></i>
                            Find on map
                        </a>
                    </div>
                    <div class="mb-3 mb-lg-4">
                        <label class="form-label">State *</label>
                        <select class="form-select form-select-lg rounded-pill"
                            data-select='{
                "classNames": {
                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
                }
              }'
                            aria-label="Large pill select">
                            <option value="">Select state</option>
                            <option value="Arizona">Arizona</option>
                            <option value="California">California</option>
                            <option value="Montana">Montana</option>
                            <option value="Nevada">Nevada</option>
                            <option value="New Mexico">New Mexico</option>
                            <option value="Texas">Texas</option>
                        </select>
                    </div>
                    <div class="mb-3 mb-lg-4">
                        <label for="my-postcode" class="form-label">Postcode *</label>
                        <input type="text" class="form-control form-control-lg rounded-pill" id="my-postcode">
                    </div>
                    <div class="mb-3 mb-lg-4">
                        <label class="form-label">City *</label>
                        <select class="form-select form-select-lg rounded-pill"
                            data-select='{
                "classNames": {
                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
                }
              }'
                            aria-label="Large pill select">
                            <option value="">Select city</option>
                            <option value="Austin">Austin</option>
                            <option value="Helena">Helena</option>
                            <option value="Sacramento">Sacramento</option>
                            <option value="Santa Fe">Santa Fe</option>
                            <option value="Las Vegas">Las Vegas</option>
                            <option value="Phoenix">Phoenix</option>
                        </select>
                    </div>
                    <label for="my-address" class="form-label">Street address *</label>
                    <input type="text" class="form-control form-control-lg rounded-pill" id="my-address">
                </div>

                <!-- Add address collapse toggle -->
                <div class="nav">
                    <a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
                        href=".delivery-address" data-bs-toggle="collapse" aria-expanded="false"
                        aria-controls="deliveryAddressOptions deliveryAddressAdd">
                        <span class="animate-target">Add delivery address</span>
                        <i class="ci-plus fs-base ms-1"></i>
                    </a>
                </div>
            </div>

            <!-- Pickup tab -->
            <div class="tab-pane fade" id="pickup-tab-pane" role="tabpanel" aria-labelledby="pickup-tab">

                <!-- Pickup store options collapse -->
                <div class="collapse pickup-options show" id="pickupStoreOptions">
                    <div class="mt-n3">
                        <div class="form-check border-bottom py-4 m-0">
                            <input type="radio" class="form-check-input" id="store-1" name="pickup-store" checked>
                            <div>
                                <div class="d-flex w-100 pb-2 mb-1">
                                    <label for="store-1"
                                        class="form-check-label text-dark-emphasis fw-semibold me-3">Sacramento
                                        Supercenter</label>
                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
                                        aria-label="Remove"></button>
                                </div>
                                <div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-check border-bottom py-4 m-0">
                            <input type="radio" class="form-check-input" id="store-2" name="pickup-store">
                            <div>
                                <div class="d-flex w-100 pb-2 mb-1">
                                    <label for="store-2"
                                        class="form-check-label text-dark-emphasis fw-semibold me-3">West Sacramento
                                        Supercenter</label>
                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
                                        aria-label="Remove"></button>
                                </div>
                                <div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-check border-bottom py-4 m-0">
                            <input type="radio" class="form-check-input" id="store-3" name="pickup-store">
                            <div>
                                <div class="d-flex w-100 pb-2 mb-1">
                                    <label for="store-3"
                                        class="form-check-label text-dark-emphasis fw-semibold me-3">Rancho Cordova
                                        Supercenter</label>
                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
                                        aria-label="Remove"></button>
                                </div>
                                <div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Add new pickup store collapse -->
                <div class="collapse pickup-options" id="pickupStoreAdd">
                    <div class="nav mb-4">
                        <a class="nav-link animate-underline p-0" href=".pickup-options" data-bs-toggle="collapse"
                            aria-expanded="true" aria-controls="pickupStoreOptions pickupStoreAdd">
                            <i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
                            <span class="animate-target">Back to my stores</span>
                        </a>
                    </div>
                    <div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
                        <h5 class="h6 mb-0 me-3">Select a suitable store</h5>
                        <a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
                            <i class="ci-map-pin fs-base ms-n1 me-1"></i>
                            Find on map
                        </a>
                    </div>
                    <div class="mb-3 mb-lg-4">
                        <label class="form-label">State *</label>
                        <select class="form-select form-select-lg rounded-pill"
                            data-select='{
                "classNames": {
                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
                }
              }'
                            aria-label="Large pill select">
                            <option value="">Select state</option>
                            <option value="Arizona">Arizona</option>
                            <option value="California" selected>California</option>
                            <option value="Montana">Montana</option>
                            <option value="Nevada">Nevada</option>
                            <option value="New Mexico">New Mexico</option>
                            <option value="Texas">Texas</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label class="form-label">City *</label>
                        <select class="form-select form-select-lg rounded-pill"
                            data-select='{
                "classNames": {
                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
                }
              }'
                            aria-label="Large pill select">
                            <option value="">Select city</option>
                            <option value="Austin">Austin</option>
                            <option value="Helena">Helena</option>
                            <option value="Sacramento" selected>Sacramento</option>
                            <option value="Santa Fe">Santa Fe</option>
                            <option value="Las Vegas">Las Vegas</option>
                            <option value="Phoenix">Phoenix</option>
                        </select>
                    </div>
                    <div class="fs-xs fw-medium text-uppercase text-body-secondary">Found stores:</div>
                    <div class="form-check border-bottom py-4 m-0">
                        <input type="radio" class="form-check-input" id="store-4" name="found-store">
                        <div>
                            <label for="store-4"
                                class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Sacramento
                                Supercenter</label>
                            <div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-check border-bottom py-4 m-0">
                        <input type="radio" class="form-check-input" id="store-5" name="found-store">
                        <div>
                            <label for="store-5" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">West
                                Sacramento Supercenter</label>
                            <div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-check border-bottom py-4 m-0">
                        <input type="radio" class="form-check-input" id="store-6" name="found-store">
                        <div>
                            <label for="store-6" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Rancho
                                Cordova Supercenter</label>
                            <div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Add address collapse toggle -->
                <div class="nav">
                    <a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
                        href=".pickup-options" data-bs-toggle="collapse" aria-expanded="false"
                        aria-controls="pickupStoreOptions pickupStoreAdd">
                        <span class="animate-target">Add store address</span>
                        <i class="ci-plus fs-base ms-1"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div class="offcanvas-header">
            <button type="button" class="btn btn-lg btn-primary w-100 rounded-pill">Confirm address</button>
        </div>
    </div>

    <!-- Site menu offcanvas -->
    @include('layouts.partials/menu-offcanvas')

    @include('layouts.partials/checkout-navbar')

    <main class="content-wrapper">

        <!-- Breadcrumb -->
        <nav class="container pt-1 pt-md-0 my-3 my-md-4" aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'grocery']) }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop</a></li>
                <li class="breadcrumb-item active" aria-current="page">Cart</li>
            </ol>
        </nav>


        <!-- Items in the cart + Order summary -->
        <section class="container pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
            <h1 class="h3 mb-4">Shopping cart</h1>
            <div class="row">

                <!-- Items list + Delivery / pickup tabs -->
                <div class="col-lg-8">
                    <div class="pe-lg-2 pe-xl-3 me-xl-3">

                        <!-- Delivery / pickup tabs -->
                        <ul class="nav nav-pills nav-justified flex-nowrap flex-column flex-sm-row pb-md-2 mb-4"
                            role="tablist">
                            <li class="nav-item" role="presentation">
                                <button type="button"
                                    class="nav-link justify-content-start text-start p-3 px-md-4 px-lg-3 px-xl-4 rounded-4 active"
                                    id="cart-delivery-tab" data-bs-toggle="pill" data-bs-target="#delivery"
                                    role="tab" aria-controls="delivery" aria-selected="true">
                                    <span
                                        class="d-flex align-items-center justify-content-center flex-shrink-0 bg-success-subtle text-dark-emphasis rounded-circle"
                                        style="width: 3rem; height: 3rem">
                                        <i class="ci-shopping-bag fs-xl"></i>
                                    </span>
                                    <span class="ps-3">
                                        <span class="h6 d-block mb-1">Delivery</span>
                                        <span class="fs-xs fw-normal text-body lh-base">All products are available</span>
                                    </span>
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button type="button"
                                    class="nav-link justify-content-start text-start p-3 px-md-4 px-lg-3 px-xl-4 rounded-4"
                                    id="cart-pickup-tab" data-bs-toggle="pill" data-bs-target="#pickup" role="tab"
                                    aria-controls="pickup" aria-selected="false">
                                    <span
                                        class="d-flex align-items-center justify-content-center flex-shrink-0 bg-info-subtle text-dark-emphasis rounded-circle"
                                        style="width: 3rem; height: 3rem">
                                        <i class="ci-package fs-xl"></i>
                                    </span>
                                    <span class="ps-3">
                                        <span class="h6 d-block mb-1">Pickup</span>
                                        <span class="fs-xs fw-normal text-body lh-base">All products are available</span>
                                    </span>
                                </button>
                            </li>
                        </ul>


                        <!-- Table of items -->
                        <table class="table position-relative z-2 mb-4">
                            <thead>
                                <tr>
                                    <th scope="col" class="fs-sm fw-normal py-3 ps-0"><span
                                            class="text-body">Product</span></th>
                                    <th scope="col" class="text-body fs-sm fw-normal py-3 d-none d-xl-table-cell"><span
                                            class="text-body">Price</span></th>
                                    <th scope="col" class="text-body fs-sm fw-normal py-3 d-none d-md-table-cell"><span
                                            class="text-body">Quantity</span></th>
                                    <th scope="col" class="text-body fs-sm fw-normal py-3 d-none d-md-table-cell"><span
                                            class="text-body">Total</span></th>
                                    <th scope="col" class="py-0 px-0">
                                        <div class="nav justify-content-end">
                                            <button type="button"
                                                class="nav-link d-inline-block text-decoration-underline text-nowrap py-3 px-0">Clear
                                                cart</button>
                                        </div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="align-middle">

                                <!-- Item -->
                                <tr>
                                    <td class="py-3 ps-0">
                                        <div class="d-flex align-items-center">
                                            <a class="position-relative flex-shrink-0" href="{{ route('second', ['shop', 'product-grocery']) }}">
                                                <span
                                                    class="badge text-bg-danger position-absolute top-0 start-0">-$2.79</span>
                                                <img src="/img/shop/grocery/thumbs/01.png" width="110"
                                                    alt="Thumbnail">
                                            </a>
                                            <div class="ps-2 ps-xl-3">
                                                <h5 class="lh-sm mb-2">
                                                    <a class="hover-effect-underline fs-sm fw-medium"
                                                        href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh orange Klementina, Spain</a>
                                                </h5>
                                                <ul class="list-unstyled gap-1 fs-xs mb-0">
                                                    <li><span class="text-body-secondary">Portion:</span> <span
                                                            class="text-dark-emphasis fw-medium">1kg</span></li>
                                                    <li class="d-xl-none"><span class="text-body-secondary">Price:</span>
                                                        <span class="text-dark-emphasis fw-medium">$3.12 <del
                                                                class="text-body-tertiary fw-normal">$4.05</del></span>
                                                    </li>
                                                </ul>
                                                <div class="count-input rounded-pill d-md-none mt-3">
                                                    <button type="button" class="btn btn-sm btn-icon" data-decrement
                                                        aria-label="Decrement quantity">
                                                        <i class="ci-minus"></i>
                                                    </button>
                                                    <input type="number" class="form-control form-control-sm"
                                                        value="3" readonly>
                                                    <button type="button" class="btn btn-sm btn-icon" data-increment
                                                        aria-label="Increment quantity">
                                                        <i class="ci-plus"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="h6 py-3 d-none d-xl-table-cell">$3.12 <del
                                            class="text-body-tertiary fs-sm fw-normal">$4.05</del></td>
                                    <td class="py-3 d-none d-md-table-cell">
                                        <div class="count-input rounded-pill">
                                            <button type="button" class="btn btn-icon" data-decrement
                                                aria-label="Decrement quantity">
                                                <i class="ci-minus"></i>
                                            </button>
                                            <input type="number" class="form-control" value="3" readonly>
                                            <button type="button" class="btn btn-icon" data-increment
                                                aria-label="Increment quantity">
                                                <i class="ci-plus"></i>
                                            </button>
                                        </div>
                                    </td>
                                    <td class="h6 py-3 d-none d-md-table-cell">$9.36</td>
                                    <td class="text-end py-3 px-0">
                                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
                                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
                                            aria-label="Remove from cart"></button>
                                    </td>
                                </tr>

                                <!-- Item -->
                                <tr>
                                    <td class="py-3 ps-0">
                                        <div class="d-flex align-items-center">
                                            <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-grocery']) }}">
                                                <img src="/img/shop/grocery/thumbs/02.png" width="110"
                                                    alt="Thumbnail">
                                            </a>
                                            <div class="ps-2 ps-xl-3">
                                                <h5 class="lh-sm mb-2">
                                                    <a class="hover-effect-underline fs-sm fw-medium"
                                                        href="{{ route('second', ['shop', 'product-grocery']) }}">Pesto sauce Barilla with basil,
                                                        Italy</a>
                                                </h5>
                                                <ul class="list-unstyled gap-1 fs-xs mb-0">
                                                    <li><span class="text-body-secondary">Portion:</span> <span
                                                            class="text-dark-emphasis fw-medium">200g</span></li>
                                                    <li class="d-xl-none"><span class="text-body-secondary">Price:</span>
                                                        <span class="text-dark-emphasis fw-medium">$3.95</span>
                                                    </li>
                                                </ul>
                                                <div class="count-input rounded-pill d-md-none mt-3">
                                                    <button type="button" class="btn btn-sm btn-icon" data-decrement
                                                        aria-label="Decrement quantity">
                                                        <i class="ci-minus"></i>
                                                    </button>
                                                    <input type="number" class="form-control form-control-sm"
                                                        value="1" readonly>
                                                    <button type="button" class="btn btn-sm btn-icon" data-increment
                                                        aria-label="Increment quantity">
                                                        <i class="ci-plus"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="h6 py-3 d-none d-xl-table-cell">$3.95</td>
                                    <td class="py-3 d-none d-md-table-cell">
                                        <div class="count-input rounded-pill">
                                            <button type="button" class="btn btn-icon" data-decrement
                                                aria-label="Decrement quantity">
                                                <i class="ci-minus"></i>
                                            </button>
                                            <input type="number" class="form-control" value="1" readonly>
                                            <button type="button" class="btn btn-icon" data-increment
                                                aria-label="Increment quantity">
                                                <i class="ci-plus"></i>
                                            </button>
                                        </div>
                                    </td>
                                    <td class="h6 py-3 d-none d-md-table-cell">$3.95</td>
                                    <td class="text-end py-3 px-0">
                                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
                                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
                                            aria-label="Remove from cart"></button>
                                    </td>
                                </tr>

                                <!-- Item -->
                                <tr>
                                    <td class="py-3 ps-0">
                                        <div class="d-flex align-items-center">
                                            <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-grocery']) }}">
                                                <img src="/img/shop/grocery/thumbs/03.png" width="110"
                                                    alt="Thumbnail">
                                            </a>
                                            <div class="ps-2 ps-xl-3">
                                                <h5 class="lh-sm mb-2">
                                                    <a class="hover-effect-underline fs-sm fw-medium"
                                                        href="{{ route('second', ['shop', 'product-grocery']) }}">Steak salmon fillet with
                                                        rosmary</a>
                                                </h5>
                                                <ul class="list-unstyled gap-1 fs-xs mb-0">
                                                    <li><span class="text-body-secondary">Portion:</span> <span
                                                            class="text-dark-emphasis fw-medium">1kg</span></li>
                                                    <li class="d-xl-none"><span class="text-body-secondary">Price:</span>
                                                        <span class="text-dark-emphasis fw-medium">$27.00</span>
                                                    </li>
                                                </ul>
                                                <div class="count-input rounded-pill d-md-none mt-3">
                                                    <button type="button" class="btn btn-sm btn-icon" data-decrement
                                                        aria-label="Decrement quantity">
                                                        <i class="ci-minus"></i>
                                                    </button>
                                                    <input type="number" class="form-control form-control-sm"
                                                        value="2" readonly>
                                                    <button type="button" class="btn btn-sm btn-icon" data-increment
                                                        aria-label="Increment quantity">
                                                        <i class="ci-plus"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="h6 py-3 d-none d-xl-table-cell">$27.00</td>
                                    <td class="py-3 d-none d-md-table-cell">
                                        <div class="count-input rounded-pill">
                                            <button type="button" class="btn btn-icon" data-decrement
                                                aria-label="Decrement quantity">
                                                <i class="ci-minus"></i>
                                            </button>
                                            <input type="number" class="form-control" value="2" readonly>
                                            <button type="button" class="btn btn-icon" data-increment
                                                aria-label="Increment quantity">
                                                <i class="ci-plus"></i>
                                            </button>
                                        </div>
                                    </td>
                                    <td class="h6 py-3 d-none d-md-table-cell">$54.00</td>
                                    <td class="text-end py-3 px-0">
                                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
                                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
                                            aria-label="Remove from cart"></button>
                                    </td>
                                </tr>

                                <!-- Item -->
                                <tr>
                                    <td class="py-3 ps-0">
                                        <div class="d-flex align-items-center">
                                            <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-grocery']) }}">
                                                <img src="/img/shop/grocery/thumbs/04.png" width="110"
                                                    alt="Thumbnail">
                                            </a>
                                            <div class="ps-2 ps-xl-3">
                                                <h5 class="lh-sm mb-2">
                                                    <a class="hover-effect-underline fs-sm fw-medium"
                                                        href="{{ route('second', ['shop', 'product-grocery']) }}">Sprite soda lemon lime, can</a>
                                                </h5>
                                                <ul class="list-unstyled gap-1 fs-xs mb-0">
                                                    <li><span class="text-body-secondary">Portion:</span> <span
                                                            class="text-dark-emphasis fw-medium">330ml</span></li>
                                                    <li class="d-xl-none"><span
                                                            class="text-body-secondary">Price:</span>
                                                        <span class="text-dark-emphasis fw-medium">$0.80</span>
                                                    </li>
                                                </ul>
                                                <div class="count-input rounded-pill d-md-none mt-3">
                                                    <button type="button" class="btn btn-sm btn-icon" data-decrement
                                                        aria-label="Decrement quantity">
                                                        <i class="ci-minus"></i>
                                                    </button>
                                                    <input type="number" class="form-control form-control-sm"
                                                        value="2" readonly>
                                                    <button type="button" class="btn btn-sm btn-icon" data-increment
                                                        aria-label="Increment quantity">
                                                        <i class="ci-plus"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="h6 py-3 d-none d-xl-table-cell">$0.80</td>
                                    <td class="py-3 d-none d-md-table-cell">
                                        <div class="count-input rounded-pill">
                                            <button type="button" class="btn btn-icon" data-decrement
                                                aria-label="Decrement quantity">
                                                <i class="ci-minus"></i>
                                            </button>
                                            <input type="number" class="form-control" value="2" readonly>
                                            <button type="button" class="btn btn-icon" data-increment
                                                aria-label="Increment quantity">
                                                <i class="ci-plus"></i>
                                            </button>
                                        </div>
                                    </td>
                                    <td class="h6 py-3 d-none d-md-table-cell">$1.60</td>
                                    <td class="text-end py-3 px-0">
                                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
                                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
                                            aria-label="Remove from cart"></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <div class="nav position-relative z-2 mb-4 mb-lg-0">
                            <a class="nav-link animate-underline px-0" href="{{ route('second', ['shop', 'catalog-grocery']) }}">
                                <i class="ci-chevron-left fs-lg me-1"></i>
                                <span class="animate-target">Continue shopping</span>
                            </a>
                        </div>
                    </div>
                </div>


                <!-- Order summary (sticky sidebar) -->
                <aside class="col-lg-4" style="margin-top: -115px">
                    <div class="position-sticky top-0" style="padding-top: 115px">
                        <div class="alert alert-success text-dark-emphasis fs-sm border-0 rounded-4 mb-4"
                            role="alert">
                            Congratulations 🎉 You have added more than <span class="fw-semibold">$50</span> to your cart.
                            <span class="fw-semibold">Delivery is free</span> for you!
                        </div>
                        <h2 class="h5 border-bottom pb-4 mb-4 me-3">Order summary</h2>
                        <div class="tab-content">

                            <!-- Delivery tab -->
                            <div class="tab-pane show active" id="delivery" role="tabpanel"
                                aria-labelledby="cart-delivery-tab">
                                <ul class="list-unstyled fs-sm gap-3 mb-0">
                                    <li class="d-flex justify-content-between">
                                        Subtotal (8 items):
                                        <span class="text-dark-emphasis fw-medium">$71.70</span>
                                    </li>
                                    <li class="d-flex justify-content-between">
                                        Saving:
                                        <span class="text-danger fw-medium">-$2.79</span>
                                    </li>
                                    <li class="d-flex justify-content-between">
                                        Delivery:
                                        <span class="text-dark-emphasis fw-medium">Free</span>
                                    </li>
                                </ul>
                                <div class="border-top pt-4 mt-4">
                                    <div class="d-flex justify-content-between mb-3">
                                        <span class="fs-sm">Estimated total:</span>
                                        <span class="h5 mb-0">$68.91</span>
                                    </div>
                                    <a class="btn btn-lg btn-primary w-100 rounded-pill"
                                        href="{{ route('second', ['checkout', 'v2-delivery']) }}'">
                                        Proceed to checkout
                                        <i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
                                    </a>
                                </div>
                            </div>

                            <!-- Pickup tab -->
                            <div class="tab-pane" id="pickup" role="tabpanel" aria-labelledby="cart-pickup-tab">
                                <ul class="list-unstyled fs-sm gap-3 mb-0">
                                    <li class="d-flex justify-content-between">
                                        Subtotal (8 items):
                                        <span class="text-dark-emphasis fw-medium">$71.70</span>
                                    </li>
                                    <li class="d-flex justify-content-between">
                                        Saving:
                                        <span class="text-danger fw-medium">-$2.79</span>
                                    </li>
                                </ul>
                                <div class="border-top pt-4 mt-4">
                                    <div class="d-flex justify-content-between mb-3">
                                        <span class="fs-sm">Estimated total:</span>
                                        <span class="h5 mb-0">$68.91</span>
                                    </div>
                                    <a class="btn btn-lg btn-primary w-100 rounded-pill" href="{{ route('second', ['checkout', 'v2-pickup']) }}">
                                        Proceed to checkout
                                        <i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </aside>
            </div>
        </section>
    </main>

    @include('layouts.partials/footer2')
@endsection

@section('scripts')
@endsection