<!doctype html>
<html lang="en">
    <head>
        <?php $title = "Shopping Cart"; include('./partials/title-meta.php'); ?> <?php include('./partials/head-css.php'); ?>
    </head>

    <body>
        <!-- Begin page -->
        <div class="wrapper">
            <?php include('./partials/topbar.php'); ?> <?php include('./partials/sidenav.php'); ?>

            <!-- ============================================================== -->
            <!-- Start Main Content -->
            <!-- ============================================================== -->

            <div class="content-page">
                <div class="container-fluid">
                    <?php $subtitle = "Ecommerce"; $title = "Cart"; include('./partials/page-title.php'); ?>

                    <div class="container-xxl">
                        <!-- Free Shipping Progress -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="alert alert-info border border-info border-opacity-25">
                                    <h6 class="mb-2">Buy <span class="fw-bold text-warning">$250</span> more to get <span class="fw-semibold">Free Shipping</span></h6>
                                    <div class="progress" style="height: 4px">
                                        <div class="progress-bar bg-warning" style="width: 70%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Cart Layout -->
                        <div class="row">
                            <!-- Cart Items -->
                            <div class="col-lg-8">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title flex-grow-1">Shopping Cart</h4>
                                        <a href="#" class="text-decoration-underline link-offset-2 fw-medium">Clear cart</a>
                                    </div>

                                    <div class="card-body">
                                        <!-- Cart Table -->
                                        <div class="table-responsive">
                                            <table class="table table-custom align-middle mb-0">
                                                <thead class="bg-light align-middle bg-opacity-25 thead-sm">
                                                    <tr class="text-uppercase fs-xxs">
                                                        <th>Product</th>
                                                        <th>Price</th>
                                                        <th>Quantity</th>
                                                        <th>Total</th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <!-- Product 1 -->
                                                    <tr>
                                                        <td class="d-flex align-items-center">
                                                            <img src="assets/images/products/1.png" class="me-3 rounded" width="60" alt="iPhone" />
                                                            <div>
                                                                <h6 class="mb-1 fs-sm">Apple iPhone 14 128GB</h6>
                                                                <small class="text-muted d-block">Color: White</small>
                                                                <small class="text-muted d-block">Model: 128GB</small>
                                                            </div>
                                                        </td>
                                                        <td>$899.00</td>
                                                        <td>
                                                            <div class="input-group" data-touchspin style="max-width: 130px">
                                                                <button type="button" class="btn btn-primary floating" data-minus>
                                                                    <i class="ti ti-minus"></i>
                                                                </button>
                                                                <input type="number" class="form-control form-control-sm border-0" value="1" max="800000" />
                                                                <button type="button" class="btn btn-primary floating" data-plus>
                                                                    <i class="ti ti-plus"></i>
                                                                </button>
                                                            </div>
                                                        </td>
                                                        <td class="fw-semibold">$899.00</td>
                                                        <td>
                                                            <a href="#" class="text-muted"><i class="ti ti-x fs-lg"></i></a>
                                                        </td>
                                                    </tr>

                                                    <!-- Product 2 -->
                                                    <tr>
                                                        <td class="d-flex align-items-center">
                                                            <img src="assets/images/products/2.png" class="me-3 rounded" width="60" alt="iPad" />
                                                            <div>
                                                                <span class="badge bg-danger-subtle text-danger mb-1">-10%</span>
                                                                <h6 class="mb-1 fs-sm">Tablet Apple iPad Pro M2</h6>
                                                                <small class="text-muted d-block">Color: Black</small>
                                                                <small class="text-muted d-block">Model: 256GB</small>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <span class="fw-semibold">$989.00</span><br />
                                                            <small class="text-decoration-line-through text-muted">$1,099.00</small>
                                                        </td>
                                                        <td>
                                                            <div class="input-group" data-touchspin style="max-width: 130px">
                                                                <button type="button" class="btn btn-primary floating" data-minus>
                                                                    <i class="ti ti-minus"></i>
                                                                </button>
                                                                <input type="number" class="form-control form-control-sm border-0" value="3" max="800000" />
                                                                <button type="button" class="btn btn-primary floating" data-plus>
                                                                    <i class="ti ti-plus"></i>
                                                                </button>
                                                            </div>
                                                        </td>
                                                        <td class="fw-semibold">$989.00</td>
                                                        <td>
                                                            <a href="#" class="text-muted"><i class="ti ti-x fs-lg"></i></a>
                                                        </td>
                                                    </tr>

                                                    <!-- Product 3 -->
                                                    <tr>
                                                        <td class="d-flex align-items-center">
                                                            <img src="assets/images/products/3.png" class="me-3 rounded" width="60" alt="Watch" />
                                                            <div>
                                                                <h6 class="mb-1 fs-sm">Smart Watch Series 7</h6>
                                                                <small class="text-muted d-block">Color: White</small>
                                                                <small class="text-muted d-block">Model: 44mm</small>
                                                            </div>
                                                        </td>
                                                        <td>$429.00</td>
                                                        <td>
                                                            <div class="input-group" data-touchspin style="max-width: 130px">
                                                                <button type="button" class="btn btn-primary floating" data-minus>
                                                                    <i class="ti ti-minus"></i>
                                                                </button>
                                                                <input type="number" class="form-control form-control-sm border-0" value="2" max="800000" />
                                                                <button type="button" class="btn btn-primary floating" data-plus>
                                                                    <i class="ti ti-plus"></i>
                                                                </button>
                                                            </div>
                                                        </td>
                                                        <td class="fw-semibold">$429.00</td>
                                                        <td>
                                                            <a href="#" class="text-muted"><i class="ti ti-x fs-lg"></i></a>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>

                                        <!-- Continue Shopping -->
                                        <div class="mt-4">
                                            <a href="apps-ecommerce-products-grid.php" class="fw-medium d-inline-flex align-items-center gap-1"> <i class="ti ti-arrow-left"></i> Continue Shopping </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Order Summary -->
                            <div class="col-lg-4">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Order Summary</h4>
                                    </div>
                                    <div class="card-body">
                                        <ul class="list-unstyled mb-3">
                                            <li class="d-flex justify-content-between mb-2">
                                                <span class="text-muted">Subtotal (3 items):</span>
                                                <span>$2,427.00</span>
                                            </li>
                                            <li class="d-flex justify-content-between mb-2">
                                                <span class="text-muted">Saving:</span>
                                                <span class="text-danger">- $110.00</span>
                                            </li>
                                            <li class="d-flex justify-content-between mb-2">
                                                <span class="text-muted">Tax collected:</span>
                                                <span>$73.40</span>
                                            </li>
                                            <li class="d-flex justify-content-between border-bottom pb-3 mb-3">
                                                <span class="text-muted">Shipping:</span>
                                                <span>Calculated at checkout</span>
                                            </li>
                                            <li class="d-flex justify-content-between">
                                                <h6 class="text-uppercase text-muted">Estimated total:</h6>
                                                <h5 class="fw-bold">$2,390.40</h5>
                                            </li>
                                        </ul>

                                        <a href="apps-ecommerce-checkout.php" class="btn btn-lg btn-danger w-100 mb-3"> Proceed to Checkout </a>
                                        <p class="text-muted text-center mb-0"><a href="#" class="fw-semibold">Create an account</a> and get 239 bonuses</p>
                                    </div>
                                </div>

                                <!-- Apply Promo Code -->
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Apply Coupon Code</h4>
                                    </div>
                                    <div class="card-body">
                                        <div class="alert alert-warning fs-xs py-2">Use <span class="fw-bold">ADMINPRO</span> to get 10% off.</div>
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="Enter code" />
                                            <button class="btn btn-primary" type="button">Apply</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- container -->

                <?php include('./partials/footer.php'); ?>
            </div>

            <!-- ============================================================== -->
            <!-- End of Main Content -->
            <!-- ============================================================== -->
        </div>
        <!-- END wrapper -->

        <?php include('./partials/customizer.php'); ?> <?php include('./partials/footer-scripts.php'); ?>
    </body>
</html>
