<?php include 'header.php'; ?>
<?php include '_top-header.php'; ?>

<div class="page">

    <div class="container p-0">

        <div class="profile-layout">

            <div class="start">
                <?php include '_profile-layout-side-menu.php' ?>
            </div><!-- start -->

            <div class="end">

                <div class="row  d-none">

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

                        <div class="card">

                            <div class="mb-3">

                                <div class="w-100 h-15px border-radius-lg overflow-hidden mb-2">
                                    <div class="shimmer"></div>
                                </div>

                                <div class="w-100 h-15px border-radius-lg overflow-hidden mb-2">
                                    <div class="shimmer"></div>
                                </div>

                            </div> <!-- mb-3 -->

                            <div class="products-list ">

                                <?php for ($i = 1; $i <= 4; $i++) { ?>

                                    <div class="product-card-wide-cancel flex-column mb-3">

                                        <div class="flex-start gap-3">

                                            <div class="start">


                                                <div class="w-90px h-90px border-radius-lg overflow-hidden">
                                                    <div class="shimmer"></div>
                                                </div>

                                            </div>

                                            <div class="end d-flex flex-column justify-content-between">
                                                <div class="d-block">


                                                    <div class="w-100 h-15px border-radius-lg overflow-hidden mb-2">
                                                        <div class="shimmer"></div>
                                                    </div>


                                                    <div class="w-100 h-15px border-radius-lg overflow-hidden mb-2">
                                                        <div class="shimmer"></div>
                                                    </div>


                                                    <div class="w-100 h-15px border-radius-lg overflow-hidden mb-2">
                                                        <div class="shimmer"></div>
                                                    </div>


                                                </div>

                                            </div>

                                        </div>

                                    </div>


                                <?php } ?>


                            </div> <!-- products-list -->

                        </div> <!-- card -->
                    </div> <!-- col -->

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

                        <div class="card mb-4">

                            <div class="order-summary m-0">



                                <!-- Payment Method -->
                                <div class="payment-method mb-1">
                                    <div class="flex-between">

                                        <div class="w-25 h-15px border-radius-lg overflow-hidden mb-2">
                                            <div class="shimmer"></div>
                                        </div>

                                        <div class="w-25 h-15px border-radius-lg overflow-hidden mb-2">
                                            <div class="shimmer"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="w-100 h-15px border-radius-lg overflow-hidden mb-3">
                                    <div class="shimmer"></div>
                                </div>

                                <div class="w-100 h-40px border-radius-sm overflow-hidden ">
                                    <div class="shimmer "></div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div> <!-- row -->

                <div class="row">

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

                        <div class="card">

                            <div class="mb-3">
                                <h5 class="mb-0 font-medium"> Cancel items </h5>
                                <p class="lead m-0"> Products to be cancelled </p>
                            </div> <!-- mb-3 -->

                            <div class="products-list ">

                                <?php for ($i = 1; $i <= 4; $i++) { ?>
                                    <div class="<?php if ($i < 4) { ?> mb-3 <?php } ?>">
                                        <?php include 'shared-html/product-card-wide-cancel-confirmation.php' ?>
                                    </div>

                                    <?php if ($i < 4) { ?>
                                        <hr />
                                    <?php } ?>

                                <?php } ?>


                            </div> <!-- products-list -->

                        </div> <!-- card -->
                    </div> <!-- col -->

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

                        <div class="card mb-4">

                            <div class="order-summary">
                                <h6 class="mb-3">Cancellation Refund</h6>

                                <div class="flex-between">
                                    <p class="lead m-0 font-medium"> Total </p>
                                    <p class="lead font-medium color-success m-0">23.000 KWD</p>
                                </div>

                                <hr>

                                <!-- Payment Method -->
                                <div class="payment-method mb-1">
                                    <div class="flex-between">
                                        <p class="m-0">Payment method</p>
                                        <p class="m-0"><img src="assets/img/knet.png" class="w-20px me-2"><span>K-NET</span></p>
                                    </div>
                                </div>

                                <p class="m-0 small color-gray mb-3"> The order will be 80.000 KWD </p>

                                <a href="order-details.php" class="btn btn-primary w-100"> Confirm </a>

                            </div>
                        </div>
                    </div>

                </div> <!-- row -->

            </div> <!-- end -->

        </div> <!-- profile-layout -->

    </div> <!-- container -->

</div> <!-- page -->

<?php include 'footer.php'; ?>