import Navbar from "../../components/Elements/Navbar";
import Footer from "../../components/Elements/Footer";
const Cart = () => {

    return (
        <>
            <div className="comtainer ">
                <Navbar name="Cart"></Navbar>
                <section class="bg-white antialiased  ">
                    <div class="mx-auto ">
                        <div class="mt-5 md:gap-6 lg:flex lg:items-start xl:gap-8 mb-2">
                            <div class="mx-auto w-full flex-none lg:max-w-2xl xl:max-w-4xl">
                                <div class="space-y-4">
                                    {/* card */}
                                    <div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm  md:p-6">
                                        <div class="space-y-4 md:flex md:items-center md:justify-between md:gap-6 md:space-y-0  ">
                                            <a href="#" class="shrink-0 md:order-1 flex justify-center">
                                                <img class="h-32 w-20" src="/image/produk.png" alt="imac image" />
                                            </a>
                                            <label for="counter-input" class="sr-only">Choose quantity:</label>
                                            <div class="flex items-center justify-between md:order-3 md:justify-end">
                                                <div class="flex items-center">
                                                    <button type="button" id="decrement-button-4" data-input-counter-decrement="counter-input-4" class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-100 ">
                                                        <svg class="h-2.5 w-2.5 text-gray-900 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2">
                                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16" />
                                                        </svg>
                                                    </button>
                                                    <input type="text" id="counter-input-4" data-input-counter class="w-10 shrink-0 border-0 bg-transparent text-center text-sm font-medium text-gray-900 focus:outline-none focus:ring-0 " placeholder="" value="1" required />
                                                    <button type="button" id="increment-button-4" data-input-counter-increment="counter-input-4" class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-100 ">
                                                        <svg class="h-2.5 w-2.5 text-gray-900 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
                                                        </svg>
                                                    </button>
                                                </div>
                                                <div class="text-end md:order-4 md:w-32">
                                                    <p class="text-base font-bold text-gray-900 ">$699</p>
                                                </div>
                                            </div>
                                            <div class="w-full min-w-0 flex-1  md:order-2 md:max-w-md">
                                                <p class="text-base  text-gray-900 font-medium">Tablet APPLE iPad Pro 12.9" 6th Gen, 128GB, Wi-Fi, Gold</p>
                                                <p class="text-base  text-black opacity-50 ">1 Box Savva Teh Tarik Caramel Flavour (20g x 15 sachets)</p>
                                                <button type="button" class="inline-flex items-center text-sm font-medium text-red-600 hover:underline mt-5">
                                                    <svg class="me-1.5 h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6" />
                                                    </svg>
                                                    Remove
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    {/* end card */}
                                    {/* card */}
                                    <div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm  md:p-6">
                                        <div class="space-y-4 md:flex md:items-center md:justify-between md:gap-6 md:space-y-0  ">
                                            <a href="#" class="shrink-0 md:order-1 flex justify-center">
                                                <img class="h-32 w-20" src="/image/produk.png" alt="imac image" />
                                            </a>
                                            <label for="counter-input" class="sr-only">Choose quantity:</label>
                                            <div class="flex items-center justify-between md:order-3 md:justify-end">
                                                <div class="flex items-center">
                                                    <button type="button" id="decrement-button-4" data-input-counter-decrement="counter-input-4" class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-100 ">
                                                        <svg class="h-2.5 w-2.5 text-gray-900 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2">
                                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16" />
                                                        </svg>
                                                    </button>
                                                    <input type="text" id="counter-input-4" data-input-counter class="w-10 shrink-0 border-0 bg-transparent text-center text-sm font-medium text-gray-900 focus:outline-none focus:ring-0 " placeholder="" value="1" required />
                                                    <button type="button" id="increment-button-4" data-input-counter-increment="counter-input-4" class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-100 ">
                                                        <svg class="h-2.5 w-2.5 text-gray-900 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
                                                        </svg>
                                                    </button>
                                                </div>
                                                <div class="text-end md:order-4 md:w-32">
                                                    <p class="text-base font-bold text-gray-900 ">$699</p>
                                                </div>
                                            </div>
                                            <div class="w-full min-w-0 flex-1  md:order-2 md:max-w-md">
                                                <p class="text-base  text-gray-900 font-medium">Tablet APPLE iPad Pro 12.9" 6th Gen, 128GB, Wi-Fi, Gold</p>
                                                <p class="text-base  text-black opacity-50 ">1 Box Savva Teh Tarik Caramel Flavour (20g x 15 sachets)</p>
                                                <button type="button" class="inline-flex items-center text-sm font-medium text-red-600 hover:underline mt-5">
                                                    <svg class="me-1.5 h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6" />
                                                    </svg>
                                                    Remove
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    {/* end card */}
                                    {/* card */}
                                    <div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm  md:p-6">
                                        <div class="space-y-4 md:flex md:items-center md:justify-between md:gap-6 md:space-y-0  ">
                                            <a href="#" class="shrink-0 md:order-1 flex justify-center">
                                                <img class="h-32 w-20" src="/image/produk.png" alt="imac image" />
                                            </a>
                                            <label for="counter-input" class="sr-only">Choose quantity:</label>
                                            <div class="flex items-center justify-between md:order-3 md:justify-end">
                                                <div class="flex items-center">
                                                    <button type="button" id="decrement-button-4" data-input-counter-decrement="counter-input-4" class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-100 ">
                                                        <svg class="h-2.5 w-2.5 text-gray-900 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2">
                                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16" />
                                                        </svg>
                                                    </button>
                                                    <input type="text" id="counter-input-4" data-input-counter class="w-10 shrink-0 border-0 bg-transparent text-center text-sm font-medium text-gray-900 focus:outline-none focus:ring-0 " placeholder="" value="1" required />
                                                    <button type="button" id="increment-button-4" data-input-counter-increment="counter-input-4" class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-100 ">
                                                        <svg class="h-2.5 w-2.5 text-gray-900 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
                                                        </svg>
                                                    </button>
                                                </div>
                                                <div class="text-end md:order-4 md:w-32">
                                                    <p class="text-base font-bold text-gray-900 ">$699</p>
                                                </div>
                                            </div>
                                            <div class="w-full min-w-0 flex-1  md:order-2 md:max-w-md">
                                                <p class="text-base  text-gray-900 font-medium">Tablet APPLE iPad Pro 12.9" 6th Gen, 128GB, Wi-Fi, Gold</p>
                                                <p class="text-base  text-black opacity-50 ">1 Box Savva Teh Tarik Caramel Flavour (20g x 15 sachets)</p>
                                                <button type="button" class="inline-flex items-center text-sm font-medium text-red-600 hover:underline mt-5">
                                                    <svg class="me-1.5 h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6" />
                                                    </svg>
                                                    Remove
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    {/* end card */}
                                    {/* card */}
                                    <div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm  md:p-6">
                                        <div class="space-y-4 md:flex md:items-center md:justify-between md:gap-6 md:space-y-0  ">
                                            <a href="#" class="shrink-0 md:order-1 flex justify-center">
                                                <img class="h-32 w-20" src="/image/produk.png" alt="imac image" />
                                            </a>
                                            <label for="counter-input" class="sr-only">Choose quantity:</label>
                                            <div class="flex items-center justify-between md:order-3 md:justify-end">
                                                <div class="flex items-center">
                                                    <button type="button" id="decrement-button-4" data-input-counter-decrement="counter-input-4" class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-100 ">
                                                        <svg class="h-2.5 w-2.5 text-gray-900 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2">
                                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16" />
                                                        </svg>
                                                    </button>
                                                    <input type="text" id="counter-input-4" data-input-counter class="w-10 shrink-0 border-0 bg-transparent text-center text-sm font-medium text-gray-900 focus:outline-none focus:ring-0 " placeholder="" value="1" required />
                                                    <button type="button" id="increment-button-4" data-input-counter-increment="counter-input-4" class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-100 ">
                                                        <svg class="h-2.5 w-2.5 text-gray-900 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
                                                        </svg>
                                                    </button>
                                                </div>
                                                <div class="text-end md:order-4 md:w-32">
                                                    <p class="text-base font-bold text-gray-900 ">$699</p>
                                                </div>
                                            </div>
                                            <div class="w-full min-w-0 flex-1  md:order-2 md:max-w-md">
                                                <p class="text-base  text-gray-900 font-medium">Tablet APPLE iPad Pro 12.9" 6th Gen, 128GB, Wi-Fi, Gold</p>
                                                <p class="text-base  text-black opacity-50 ">1 Box Savva Teh Tarik Caramel Flavour (20g x 15 sachets)</p>
                                                <button type="button" class="inline-flex items-center text-sm font-medium text-red-600 hover:underline mt-5">
                                                    <svg class="me-1.5 h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6" />
                                                    </svg>
                                                    Remove
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    {/* end card */}
                                    {/* card */}
                                    <div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm  md:p-6">
                                        <div class="space-y-4 md:flex md:items-center md:justify-between md:gap-6 md:space-y-0  ">
                                            <a href="#" class="shrink-0 md:order-1 flex justify-center">
                                                <img class="h-32 w-20" src="/image/produk.png" alt="imac image" />
                                            </a>
                                            <label for="counter-input" class="sr-only">Choose quantity:</label>
                                            <div class="flex items-center justify-between md:order-3 md:justify-end">
                                                <div class="flex items-center">
                                                    <button type="button" id="decrement-button-4" data-input-counter-decrement="counter-input-4" class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-100 ">
                                                        <svg class="h-2.5 w-2.5 text-gray-900 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2">
                                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16" />
                                                        </svg>
                                                    </button>
                                                    <input type="text" id="counter-input-4" data-input-counter class="w-10 shrink-0 border-0 bg-transparent text-center text-sm font-medium text-gray-900 focus:outline-none focus:ring-0 " placeholder="" value="1" required />
                                                    <button type="button" id="increment-button-4" data-input-counter-increment="counter-input-4" class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-100 ">
                                                        <svg class="h-2.5 w-2.5 text-gray-900 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
                                                        </svg>
                                                    </button>
                                                </div>
                                                <div class="text-end md:order-4 md:w-32">
                                                    <p class="text-base font-bold text-gray-900 ">$699</p>
                                                </div>
                                            </div>
                                            <div class="w-full min-w-0 flex-1  md:order-2 md:max-w-md">
                                                <p class="text-base  text-gray-900 font-medium">Tablet APPLE iPad Pro 12.9" 6th Gen, 128GB, Wi-Fi, Gold</p>
                                                <p class="text-base  text-black opacity-50 ">1 Box Savva Teh Tarik Caramel Flavour (20g x 15 sachets)</p>
                                                <button type="button" class="inline-flex items-center text-sm font-medium text-red-600 hover:underline mt-5">
                                                    <svg class="me-1.5 h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6" />
                                                    </svg>
                                                    Remove
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    {/* end card */}
                                </div>
                                <div className="flex justify-center items-center border py-2 rounded-lg border-t-transparent">
                                    <a href="" className="text-[#AFA0D7] font-bold text-lg underline">EMPTY CART</a>
                                </div>
                            </div>
                            {/* detail order */}
                            <div class="mx-auto mt-6 max-w-4xl flex-1 space-y-6 lg:mt-0 lg:w-full ">
                                <div class="space-y-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm sm:p-6 ">
                                    <form class="space-y-4">
                                        <div>
                                            <label for="voucher" class="mb-2 block text-sm font-medium text-gray-900 "> Do you have a voucher or gift card? </label>
                                            <input type="text" id="voucher" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900   " placeholder="" required />
                                        </div>
                                        <button type="submit" class="flex w-full items-center justify-center rounded-lg bg-[#AFA0D7] px-5 py-2.5 text-md  text-white font-semibold  focus:outline-none focus:ring-4  ">Apply Code</button>
                                    </form>
                                </div>
                                {/* detail order */}
                                <div class="space-y-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm  sm:p-6">
                                    <p class="text-xl font-semibold text-gray-900 ">Order summary</p>
                                    <div class="space-y-4">
                                        <div class="space-y-2">
                                            <dl class="flex items-center justify-between gap-4">
                                                <dt class="text-base font-normal text-gray-500 ">Original price</dt>
                                                <dd class="text-base font-medium text-gray-900 ">$7,592.00</dd>
                                            </dl>

                                            <dl class="flex items-center justify-between gap-4">
                                                <dt class="text-base font-normal text-gray-500 ">Savings</dt>
                                                <dd class="text-base font-medium text-green-600">-$299.00</dd>
                                            </dl>
                                            <dl class="flex items-center justify-between gap-4">
                                                <dt class="text-base font-normal text-gray-500 ">Store Pickup</dt>
                                                <dd class="text-base font-medium text-gray-900 ">$99</dd>
                                            </dl>

                                            <dl class="flex items-center justify-between gap-4">
                                                <dt class="text-base font-normal text-gray-500 ">Tax</dt>
                                                <dd class="text-base font-medium text-gray-900 ">$799</dd>
                                            </dl>
                                        </div>
                                        <dl class="flex items-center justify-between gap-4 border-t border-gray-200 pt-2 ">
                                            <dt class="text-base font-bold text-gray-900 ">Total</dt>
                                            <dd class="text-base font-bold text-gray-900 ">$8,191.00</dd>
                                        </dl>

                                        <button type="submit" class="flex w-full items-center justify-center rounded-lg bg-[#AFA0D7]  py-2.5 text-md font-semibold text-white  focus:outline-none focus:ring-4  ">Checkout</button>
                                    </div>
                                </div>
                                {/* end detail order */}
                            </div>
                            {/* end detail produt */}
                        </div>
                            <Footer></Footer>
                    </div>
                </section>
            </div>
        </>
    )
}

export default Cart