<?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="card">

                    <div class="flex-between flex-lg-row flex-column mb-4">

                        <p class="lead font-medium m-0 mb-3 mb-lg-0"> Purchased cards </p>

                        <div class="form-group m-0 input-with-start-icon">
                            <div class="relative">
                                <input type="text" class="form-control" placeholder="Search here">
                                <i class="icon icon-search start-icon icon-lg"></i>
                            </div>
                        </div>


                    </div> <!-- flex-between -->

                    <div class="row row-gap-4">

                        <div class="col-lg-4">

                            <div class="voucher-card-wide">

                                <div class="top mb-1">
                                    <div class="start">

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

                                    </div>
                                    <div class="end">

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

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

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

                                    </div>
                                </div>

                                <div class="bottom">

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


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


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

                                </div>

                            </div>

                        </div>

                        <?php foreach (range(0, 11) as $index) { ?>

                            <div class="col-lg-4">
                                <?php include 'shared-html/voucher-card-wide.php' ?>
                            </div>
                        <?php } ?>

                    </div>




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

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

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

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

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

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













<div class="modal fade" id="review-voucher" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body p-0">

                <div class="p-4">

                    <div class="base-border base-border-radius p-3 mb-3">

                        <p class="lead font-medium text-center mb-1"> Rate the service </p>


                        <div class="feedback-wrapper">
                            <div class="feedback">
                                <div class="rating">
                                    <input type="radio" name="delivery-rating" id="delivery-rating-5" value="5">
                                    <label for="delivery-rating-5"></label>
                                    <input type="radio" name="delivery-rating" id="delivery-rating-4" value="4">
                                    <label for="delivery-rating-4"></label>
                                    <input type="radio" name="delivery-rating" id="delivery-rating-3" value="3">
                                    <label for="delivery-rating-3"></label>
                                    <input type="radio" name="delivery-rating" id="delivery-rating-2" value="2">
                                    <label for="delivery-rating-2"></label>
                                    <input type="radio" name="delivery-rating" id="delivery-rating-1" value="1">
                                    <label for="delivery-rating-1"></label>
                                </div>
                            </div>
                        </div>

                        <div class="flex-between px-3">
                            <p class="small color-gray font-light m-0">Not Satisfied</p>
                            <p class="small color-gray font-light m-0">Very Satisfied</p>
                        </div>

                    </div>

                    <p class="mb-3"> Help others who want to buy this product with feedback </p>

                    <div class="form-group mb-3">
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Write your feedback"></textarea>
                    </div>

                    <a href="#" class="btn btn-primary btn-block"> Send </a>

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