@extends('Layout.master')
@section('content')
<style>
    .shape-1 {
        position: absolute;
        left: 120px;
        top: 120px;
        background-image: url("{{ asset('assets/images/shape/shape-176.png') }}");
        transform: rotate(0deg);
    }

    .shape-2 {
        position: absolute;
        top: 180px;
        right: 170px;
        background-image: url("{{ asset('assets/images/shape/shape-56.png') }}");
        animation: float-bob-y 2s infinite;
    }

    .shape-3 {
        position: absolute;
        left: 0;
        bottom: 0;
        background-image: url("{{ asset('assets/images/shape/shape-189.png') }}");
    }

    section {
        margin-bottom: 20px;
    }

    .cart-items-container {
        max-height: 300px;
        /* Set the desired height for the cart items */
        overflow-y: auto;
        /* Enable vertical scrolling */
        margin-bottom: 20px;
        border: 1px solid #ddd;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th,
    td {
        padding: 15px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }

    .cart-totals-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }

    .coupon-code {
        display: flex;
        margin-right: auto;
    }

    .coupon-code input {
        flex: 1;
        padding: 8px;
    }

    .coupon-code button {
        padding: 8px 15px;
        background-color: #eee;
        cursor: pointer;
        border: 1px solid #ddd;
    }

    .cart-totals {
        text-align: right;
    }

    .cart-totals table {
        width: auto;
    }

    .cart-totals td {
        padding: 8px 15px;
    }

    .checkout-btn {
        background-color: #ff6f00;
        color: white;
        padding: 7px;
        text-align: center;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }

    .checkout-btn:hover {
        background-color: #e65c00;
    }
</style>

<!-- Page Title -->
<section class="page-title p_relative centred">
    <div class="pattern-layer">
        <div class="shape-1"></div>
        <div class="shape-2"></div>
        <div class="shape-3"></div>
    </div>
    <div class="auto-container">
        <div class="content-box">
            <h1 class="d_block fs_60 lh_70 fw_bold mb_10">Cart Page</h1>
            <ul class="bread-crumb p_relative d_block mb_8 clearfix">
                <li class="p_relative d_iblock fs_16 lh_25 fw_sbold font_family_inte mr_20">
                    <a href="{{ url('index.html') }}">Home</a>
                </li>
                <li class="current p_relative d_iblock fs_16 lh_25 fw_sbold font_family_inte">Cart Page</li>
            </ul>
        </div>
    </div>
</section>
<!-- End Page Title -->

<!-- cart section -->

<!-- Products Section -->
<section id="cart-items" class="container">
    <div class="cart-items-container">
        <table>
            <thead>
                <tr>
                    <th>Product Name</th>
                    <th>Price</th>
                    <th>Quantity</th>
                    <th>Subtotal</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Lenovo IdeaPad Slim 250U 15.6" Laptop</td>
                    <td><del>$70.30</del> $70.30</td>
                    <td><input type="number" value="1" min="1"></td>
                    <td>$70.30</td>
                </tr>
                <tr>
                    <td>Dell Optiplex 3060 Core i5 8th Gen</td>
                    <td><del>$50.00</del> $50.00</td>
                    <td><input type="number" value="1" min="1"></td>
                    <td>$50.00</td>
                </tr>
                <tr>
                    <td>Apple TV 4K 32GB 6th Gen TV Box</td>
                    <td><del>$85.00</del> $85.00</td>
                    <td><input type="number" value="1" min="1"></td>
                    <td>$85.00</td>
                </tr>
                <!-- Add more products here -->
            </tbody>
        </table>
    </div>
</section>

<!-- Cart Totals Section with Coupon Code and Checkout Button -->
<section class="cart-totals-container container">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-4">
                <!-- Coupon Code Section -->
                <div id="coupon-code">
                    <div class="coupon-code">
                        <input type="text" style="border:1px #8080804a solid" placeholder="Coupon code...">
                        <button>Apply</button>
                    </div>
                </div>

            </div>

            <div class="col-md-6">
            </div>

            <div class="col-md-2">
                <!-- Cart Totals Section -->
                <div id="cart-totals" class="cart-totals mr-3">
                    <table>
                        <tr>
                            <td>Subtotal:</td>
                            <td>$150.50</td>
                        </tr>
                        <tr>
                            <td>Order Total:</td>
                            <td><strong>$150.50</strong></td>
                        </tr>
                    </table>
                </div>

                <!-- Checkout Button Section -->
                <div id="checkout" class="mt-2">
                    <button class="checkout-btn">Proceed To Checkout</button>
                </div>
            </div>
        </div>

</section>

<!-- cart section end -->

@endsection