<?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 mb-3">

                    <div class="col-xl-9 user-info-wrapper mb-2 mb-xl-0">

                        <div class="card p-4">

                            <div class="user-progress-wrapper me-4">
                                <div class="progress-circle" data-finished="40" data-type="success"></div>
                                <img src="assets/img/thumbs/users/01.jpg" class="img-fluid user-image">
                            </div>

                            <div class="user-info">

                                <h2 class="bold mb-1"> Hany Helal</h2>

                                <p class="lead color-warning bold mb-3"> Complete your profile </p>

                                <div class="mb-3">

                                    <a href="profile-edit-profile.php" type="button" class="btn btn-outline-secondary btn-sm me-3">Edit Profile</a>

                                    <a href="#" data-toggle="modal" data-target="#qr-code-modal"> <img src="assets/img/icons/qr-code-1.svg" class="qr-code-image"></a>

                                </div>

                            </div><!-- user-info -->

                            <div class="view-as-button">

                                <a href="#" class="color-text-light-400">
                                    <i class="icon icon-view me-1"></i> View as
                                </a>

                            </div><!-- view-as-button -->

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

                    <div class="col-xl-3 account-info-wrapper">

                        <div class="card mb-2 p-2">
                            <div class="num-with-label text-center w-100">
                                <h5 class="color-primary mb-0" style="line-height: 1;"> 13 </h5>
                                <p class="m-0 lead color-text-light-400"> Shares </p>
                            </div><!-- num-with-label -->
                        </div> <!-- card -->

                        <div class="card mb-2 p-2">
                            <div class="num-with-label text-center w-100">
                                <h5 class="color-primary mb-0" style="line-height: 1;"> 1.03k </h5>
                                <p class="m-0 lead color-text-light-400"> Following </p>
                            </div><!-- num-with-label -->
                        </div> <!-- card -->

                        <div class="card mb-2 mb-lg-0 p-2">
                            <div class="num-with-label text-center w-100">
                                <h5 class="color-primary mb-0" style="line-height: 1;"> 1.03k </h5>
                                <p class="m-0 lead color-text-light-400"> Followers </p>
                            </div><!-- num-with-label -->
                        </div> <!-- card -->
                    </div>

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





                <div class="card admin-card mb-3">

                    <p class="lead font-medium mb-3"> My Store </p>

                    <p class="lead font-medium mb-1"> Approval Status </p>

                    <p class="mb-3 color-gray"> Rejected for store is not good </p>

                    <div class="flex-between">

                        <span class="badge badge-sm badge-rejected"> Rejected </span>

                        <div class="flex-center gap-2">

                            <a href="#" class="btn btn-outline-primary min-w-100 btn-sm"> <i class="icon icon-details me-2"></i> Dashboard </a>

                            <a href="#" class="btn btn-primary min-w-100 btn-sm"> Edit </a>

                        </div>

                    </div>

                </div>





                <div class="card admin-card mb-3">
                    <div class="card-header">

                        <div class="start">
                            <div class="d-flex align-items-center">
                                <div class="icon">
                                    <i class="icon icon-wallet-2 icon-xxl color-primary me-3"></i>
                                </div>
                                <div class="d-block">
                                    <p class="title"> My Wallet </p>
                                    <h3 class="value"> 255 KWD </h3>
                                </div>
                            </div>
                        </div>

                        <div class="end">
                            <div class="d-flex align-items-center">
                                <a href="#" class="btn btn-sm btn-gray me-2"> <i class="icon icon-withdraw color-primary icon-lg me-2"></i> Withdraw </a>
                                <a href="#" class="btn btn-sm btn-gray"> <i class="icon icon-details-arrow color-primary icon-lg me-2"></i> Details </a>
                            </div>
                        </div>

                    </div>

                    <div class="card-body mb-0">

                        <div class="d-flex justify-content-between align-items-center py-3">
                            <p class="font-regular lead m-0"> Last transactions </p>
                        </div>

                        <div class="table-responsive mb-0">

                            <table class="table table-sm custom-table vertical-align-middle">

                                <!-- Shimmer 1 -->
                                <div class="w-100 h-15px rounded overflow-hidden mb-2">
                                    <div class="shimmer"></div>
                                </div>

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

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

                                <!-- Shimmer 2-->

                                <tr>
                                    <td>
                                        <div class="w-100 h-15px rounded overflow-hidden">
                                            <div class="shimmer"></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="w-100 h-15px rounded overflow-hidden">
                                            <div class="shimmer"></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="w-100 h-15px rounded overflow-hidden">
                                            <div class="shimmer"></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="w-100 h-15px rounded overflow-hidden">
                                            <div class="shimmer"></div>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <td>
                                        <div class="w-100 h-15px rounded overflow-hidden">
                                            <div class="shimmer"></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="w-100 h-15px rounded overflow-hidden">
                                            <div class="shimmer"></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="w-100 h-15px rounded overflow-hidden">
                                            <div class="shimmer"></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="w-100 h-15px rounded overflow-hidden">
                                            <div class="shimmer"></div>
                                        </div>
                                    </td>

                                </tr>

                                <tr>
                                    <td>
                                        <div class="w-100 h-15px rounded overflow-hidden">
                                            <div class="shimmer"></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="w-100 h-15px rounded overflow-hidden">
                                            <div class="shimmer"></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="w-100 h-15px rounded overflow-hidden">
                                            <div class="shimmer"></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="w-100 h-15px rounded overflow-hidden">
                                            <div class="shimmer"></div>
                                        </div>
                                    </td>

                                </tr>

                                <!-- Data -->

                                <tr>
                                    <td>
                                        <span class="p-2 flex-center base-border-radius w-50px h-50px btn-gray">
                                            <i class="color-gray icon icon-post-payment icon-xl"></i>
                                        </span>
                                    </td>
                                    <td>
                                        <span class="color-danger me-2"> 0.5 KWD </span>
                                        <span class="badge badge-xxs badge-danger-faded">
                                            <i class="icon icon-up-right icon-xxs"></i>
                                        </span>
                                    </td>
                                    <td>
                                        <span> Post payment </span>
                                    </td>
                                    <td>
                                        <span class="color-gray font-light"> 4 Sep, 2024 </span>
                                    </td>
                                </tr>

                                <tr>
                                    <td>
                                        <span class="p-2 flex-center base-border-radius w-50px h-50px btn-gray">
                                            <i class="color-gray icon icon-budget-increase icon-xl"></i>
                                        </span>
                                    </td>
                                    <td>
                                        <span class="color-danger me-2"> 0.5 KWD </span> <span class="badge badge-xxs badge-danger-faded"> <i class="icon icon-up-right icon-xxs"></i> </span>
                                    </td>
                                    <td>
                                        <span> budget increase </span>
                                    </td>
                                    <td>
                                        <span class="color-gray font-light"> 4 Sep, 2024 </span>
                                    </td>
                                </tr>

                                <tr>
                                    <td>
                                        <span class="p-2 flex-center base-border-radius w-50px h-50px btn-gray">
                                            <i class="color-gray icon icon-share icon-lg"></i>
                                        </span>
                                    </td>
                                    <td>
                                        <span class="color-success me-2"> 0.5 KWD </span> <span class="badge badge-xxs badge-success-faded"> <i class="icon icon-down-left icon-xxs"></i> </span>
                                    </td>
                                    <td>
                                        <span> Share </span>
                                    </td>
                                    <td>
                                        <span class="color-gray font-light"> 4 Sep, 2024 </span>
                                    </td>
                                </tr>

                                <tr>
                                    <td>
                                        <span class="p-2 flex-center base-border-radius w-50px h-50px btn-gray">
                                            <i class="color-gray icon icon-view" style="font-size: 22px;"></i>
                                        </span>
                                    </td>
                                    <td>
                                        <span class="color-success me-2"> 0.5 KWD </span> <span class="badge badge-xxs badge-success-faded"> <i class="icon icon-down-left icon-xxs"></i> </span>
                                    </td>
                                    <td>
                                        <span> View </span>
                                    </td>
                                    <td>
                                        <span class="color-gray font-light"> 4 Sep, 2024 </span>
                                    </td>
                                </tr>



                                <tr>
                                    <td>
                                        <span class="p-2 flex-center base-border-radius w-50px h-50px btn-gray">
                                            <i class="color-gray icon icon-order-purchased" style="font-size: 21px;"></i>
                                        </span>
                                    </td>
                                    <td>
                                        <span class="color-danger me-2"> 0.5 KWD </span> <span class="badge badge-xxs badge-danger-faded"> <i class="icon icon-up-right icon-xxs"></i> </span>
                                    </td>
                                    <td>
                                        <span> Order purchased </span>
                                    </td>
                                    <td>
                                        <span class="color-gray font-light"> 4 Sep, 2024 </span>
                                    </td>
                                </tr>

                            </table>

                        </div>

                        <div class="no-data">
                            <img src="assets/img/no-data.svg" class="no-data-image">
                            <p class="m-0"> No Transactions here </p>
                        </div>

                    </div>

                </div>

                <div class="card admin-card card-swiper">

                    <div class="card-header no-border">

                        <div class="start d-flex align-items-center justify-content-center">

                            <p class="title mb-0 me-3"> Latest orders </p>

                            <div class="swiper-arrows-wrapper gap-2">
                                <div class="swiper-arrow swiper-button-prev" id="latest-orders-button-prev">
                                    <div class="icon icon-left-square icon-xl"></div>
                                </div>
                                <div class="swiper-arrow swiper-button-next" id="latest-orders-button-next">
                                    <div class="icon icon-right-square icon-xl"></div>
                                </div>
                            </div>

                        </div>

                        <div class="end">
                            <a href="#" class="btn btn-sm btn-link"> All Orders </a>
                        </div>

                    </div>

                    <div class="card-body mb-0">

                        <div class="swiper-slider-wrapper">

                            <div class="swiper-container swiper-custom"
                                data-per-view="2.3"
                                data-per-view-md="2.3"
                                data-per-view-sm="1.3"
                                data-per-view-xs="1.2"
                                data-space-between="5"
                                data-next-button="latest-orders-button-next"
                                data-prev-button="latest-orders-button-prev">

                                <div class="swiper-wrapper">

                                    <div class="swiper-slide">

                                        <div class="order-card">

                                            <div class="order-header gap-2 mb-3">

                                                <div class="start w-75 h-50px flex-column flex-center justify-content-between">
                                                    <div class="w-100 h-10px rounded overflow-hidden mb-1">
                                                        <div class="shimmer"></div>
                                                    </div>
                                                    <div class="w-100 h-10px rounded overflow-hidden mb-1">
                                                        <div class="shimmer"></div>
                                                    </div>
                                                    <div class="w-100 h-10px rounded overflow-hidden">
                                                        <div class="shimmer"></div>
                                                    </div>
                                                </div>
                                                <div class="end w-25 h-50px">
                                                    <div class="w-100 h-100 rounded overflow-hidden mb-2">
                                                        <div class="shimmer"></div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="order-products">
                                                <div class="product-card-wide w-100">

                                                    <div class="start w-75px h-75px">
                                                        <div class="w-100 h-100 rounded overflow-hidden">
                                                            <div class="shimmer"></div>
                                                        </div>
                                                    </div>

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

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

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

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

                                                        <div class="w-100 h-10px rounded overflow-hidden">
                                                            <div class="shimmer"></div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>

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

                                    </div> <!-- swiper-slide -->


                                    <?php foreach (range(0, 7) as $i) { ?>

                                        <div class="swiper-slide">

                                            <div class="order-card">

                                                <div class="order-header">
                                                    <div class="start">
                                                        <p class="mb-0"> Order : 4345464 </p>
                                                        <p class="mb-0 color-gray small"> Friday, 13 Aug - 03 : 23 AM </p>
                                                        <p class="mb-0 small color-success"> 23.000 KWD </p>
                                                    </div>
                                                    <div class="end">
                                                        <span class="badge badge-primary badge-sm placed"> Placed </span>
                                                    </div>
                                                </div>

                                                <div class="order-products products-scrollable">

                                                    <?php foreach (range(1, 7) as $i) { ?>
                                                        <?php include 'shared-html/product-card-wide.php' ?>
                                                    <?php } ?>

                                                </div>


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

                                        </div> <!-- swiper-slide -->

                                    <?php } ?>

                                </div> <!-- swiper-wrapper -->

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

                        </div> <!-- swiper-slider-wrapper -->

                        <div class="no-data">
                            <img src="assets/img/no-data.svg" class="no-data-image">
                            <p class="m-0"> No Orders here </p>
                        </div>

                    </div>

                </div>

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

        </div>

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

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

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

<script>
    $(function() {
        circularProgress();
    });
</script>

<!-- Modal -->
<div class="modal fade" id="qr-code-modal" tabindex="-1">

    <div class="modal-dialog modal-sm">

        <div class="modal-content">

            <div class="modal-body">

                <div class="qr-code-gradient-wrapper">

                    <div class="qr-code-gradient mb-3" style="background-image: url(assets/img/qr-code-bg.svg);">
                        <img src="assets/img/thumbs/users/02.jpg" class="user-image">
                        <img src="assets/img/qr-code.png" class="qr-code">
                        <p class="user-name"> Hany Helal </p>
                    </div>

                    <a href="#" class="btn btn-primary-faded w-100"> share QR Code </a>


                </div>

            </div> <!-- modal-body -->

        </div> <!-- modal-content -->
    </div>
</div>