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

<div class="page store-details">

    <div class="container p-0">

        <div class="store-header mb-3">

            <div class="banner-wrapper" style="background-image: url(assets/img/stores/01.jpg);">

                <div class="action-buttons">
                    <a href="#"> <i class="icon icon-heart icon-heart-fill liked icon-lg"></i> </a>
                    <a href="#" data-toggle="modal" data-target="#share-modal"> <i class="icon icon-share icon-lg"></i> </a>
                </div> <!-- action-buttons -->

            </div> <!-- banner-wrapper -->

            <div class="details-wrapper d-lg-block showing-in-lg-screens">

                <div class="card">

                    <div class="flex-between gap-4">

                        <div class="flex-start gap-2 align-items-stretch w-60">
                            <img src="assets/img/thumbs/stores/01.png" class="w-85px h-85px">
                            <div class="d-block">
                                <div class="d-flex align-items-start gap-2">
                                    <h6 class="lead bold"> 2B Technology </h6>
                                    <i class="icon icon-star color-warning"></i>
                                    <span class="small"> 4.5 </span>
                                </div>
                                <p class="show-lines-2 m-0"> Lorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risus nunc elementum purus o Lorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risus nunc elementum purus o</p>
                                <p class="color-gray font-light m-0"> Created at 13 September 2019 </p>
                            </div>
                        </div> <!-- flex-start -->

                        <div class="d-flex gap-3 w-40">
                            <d class="block text-center col">
                                <p class="m-0 font-medium"> 33k </p>
                                <p class="m-0 font-light color-gray"> Follow </p>
                            </d>

                            <d class="block text-center col">
                                <p class="m-0 font-medium"> 23k </p>
                                <p class="m-0 font-light color-gray"> Shares </p>
                            </d>

                            <d class="block text-center col">
                                <p class="m-0 font-medium"> 13k </p>
                                <p class="m-0 font-light color-gray"> Likes </p>
                            </d>

                            <div class="d-block col">
                                <a href="#" class="btn btn-primary btn-sm min-w-100"> Follow</a>
                            </div>

                        </div>

                    </div> <!-- flex-start -->

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

            </div><!-- details-wrapper -->

            <div class="details-wrapper d-block d-lg-none showing-in-sm-screens">

                <div class="store-image-wrapper flex-center flex-column gap-2 mb-2">
                    <img src="assets/img/thumbs/stores/01.png" class="w-130px h-130px">
                </div>

                <h6 class="store-name lead bold text-center mb-2"> 2B Technology </h6>

                <div class="d-flex bg-black p-2 base-border-radius color-white gap-2 mb-2" style="width: 60px !important;margin: auto;">
                    <i class="icon icon-star color-warning"></i>
                    <span class="small"> 4.5 </span>
                </div>

                <div class="flex-center gap-4 mb-3">
                    <d class="block text-center ">
                        <p class="m-0 font-medium"> 33k </p>
                        <p class="lead m-0 font-light color-gray"> Follow </p>
                    </d>

                    <d class="block text-center ">
                        <p class="m-0 font-medium"> 23k </p>
                        <p class="lead m-0 font-light color-gray"> Shares </p>
                    </d>

                    <d class="block text-center ">
                        <p class="m-0 font-medium"> 13k </p>
                        <p class="lead m-0 font-light color-gray"> Likes </p>
                    </d>

                </div>


                <div class="d-block text-center ">
                    <a href="#" class="btn btn-primary btn-sm min-w-100"> Follow</a>
                </div>



            </div><!-- details-wrapper -->

        </div> <!-- store-header -->

        <div class="products-list-layout">

            <div class="start">

                <?php include '_products-filter.php' ?>

            </div><!-- start -->

            <div class="end">

                <div class="card p-3">

                    <div class="custom-tabs-wrapper style2 mb-3">

                        <div class="nav-tabs-wrapper">

                            <ul class="nav nav-tabs justify-content-start align-items-start" id="myTab" role="tablist">

                                <li class="nav-item" role="presentation">
                                    <button class="nav-link pt-0 pb-1 active" id="productsTab-tab" data-toggle="tab" data-target="#productsTab"> Products </button>
                                </li>

                                <li class="nav-item" role="presentation">
                                    <button class="nav-link pt-0 pb-1" id="infoTab-tab" data-toggle="tab" data-target="#infoTab"> Info </button>
                                </li>

                            </ul>

                        </div>

                    </div> <!-- custom-tabs-wrapper -->

                    <div class="tab-content" id="myTabContent">

                        <div class="tab-pane products fade " id="productsTab" role="tabpanel" aria-labelledby="productsTab-tab">

                            <p class="font-medium mb-1 color-gray"> Categories </p>

                            <div class="custom-tabs-wrapper style4">

                                <div class="nav-tabs-wrapper">

                                    <ul class="nav nav-tabs justify-content-start">

                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link nav-link-sm active" id="category1-tab" data-toggle="tab" data-target="#category1"> category1 00 </button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link nav-link-sm" id="category2-tab" data-toggle="tab" data-target="#category2"> category2 </button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link nav-link-sm" id="category3-tab" data-toggle="tab" data-target="#category3"> category3 </button>
                                        </li>

                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link nav-link-sm"> test test test test </button>
                                        </li>

                                        <?php foreach (range(0, 10) as $i) { ?>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link nav-link-sm"> test </button>
                                            </li>
                                        <?php } ?>

                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link nav-link-sm"> test final test </button>
                                        </li>
                                    </ul>

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

                                </div>

                                <div class="tab-content" id="myTabContent">

                                    <div class="tab-pane fade show active" id="category1" role="tabpanel" aria-labelledby="category1-tab">

                                        <div class="row my-3">

                                            <?php foreach (range(1, 8) as $i) { ?>

                                                <div class="col-6 col-md-3 mb-3 ">

                                                    <div class="product-card-square">

                                                        <div class="top">

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

                                                        </div><!-- top -->

                                                        <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="flex-between align-items-end">
                                                                <div class="d-block w-50">
                                                                    <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>
                                                                <div class="d-flex align-items-center justify-content-end w-25">

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

                                                        </div><!-- bottom -->

                                                    </div><!-- product-card-square -->

                                                </div>

                                            <?php } ?>


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




                                                <?php $productType = 1 ?>

                                                <div class="col-6 col-md-3 mb-3">
                                                    <?php include 'shared-html/product-card-square.php' ?>
                                                </div>

                                            <?php } ?>

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

                                    </div>

                                    <div class="tab-pane fade" id="category2" role="tabpanel" aria-labelledby="category2-tab">

                                        222
                                    </div>

                                    <div class="tab-pane fade" id="category3" role="tabpanel" aria-labelledby="category3-tab">
                                        333
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="tab-pane info fade show active" id="infoTab" role="tabpanel" aria-labelledby="infoTab-tab">

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

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

                                <div class="flex-start gap-2 mb-3">
                                    <div class="d-block">
                                        <p class="h1 line-height-1 m-0 bold">4.3</p>
                                    </div>
                                    <div class="d-block">
                                        <div class="d-flex gap-1 mb-1">
                                            <i class="icon icon-star icon-sm color-warning"></i>
                                            <i class="icon icon-star icon-sm color-warning"></i>
                                            <i class="icon icon-star icon-sm color-warning"></i>
                                            <i class="icon icon-star icon-sm color-gray-light-200"></i>
                                            <i class="icon icon-star icon-sm color-gray-light-200"></i>
                                        </div>
                                        <p class="m-0 small">Based on 77 reviews</p>
                                    </div>
                                </div>

                                <!-- Review Cards -->
                                <div class="d-block w-100 mb-3">

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


                                    <div class="review-card">
                                        <div class="flex-between mb-2">
                                            <div class="flex-center gap-2">
                                                <div class="w-300px h-10px border-radius-lg overflow-hidden">
                                                    <div class="shimmer"></div>
                                                </div>
                                            </div>
                                            <div class="w-100px h-10px border-radius-lg overflow-hidden">
                                                <div class="shimmer"></div>
                                            </div>
                                        </div>



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



                                        <div class="flex-between">
                                            <div class="w-100px h-10px border-radius-lg overflow-hidden">
                                                <div class="shimmer"></div>
                                            </div>
                                            <div class="w-100px h-10px border-radius-lg overflow-hidden">
                                                <div class="shimmer"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <?php foreach (range(0, 2) as $i) { ?>
                                        <div class="review-card">
                                            <div class="flex-between mb-1">
                                                <div class="flex-center gap-2">
                                                    <p class="m-0">Hady H****</p>
                                                    <div class="d-flex gap-2">
                                                        <i class="icon icon-star icon-xs color-warning"></i>
                                                        <i class="icon icon-star icon-xs color-warning"></i>
                                                        <i class="icon icon-star icon-xs color-warning"></i>
                                                        <i class="icon icon-star icon-xs color-gray-light-200"></i>
                                                        <i class="icon icon-star icon-xs color-gray-light-200"></i>
                                                    </div>
                                                </div>
                                                <p class="m-0">18 Apr, 2021</p>
                                            </div>

                                            <p class="mb-1 color-gray font-light show-lines-1">Lorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu</p>

                                            <div class="flex-between">
                                                <p class="m-0 color-success"><i class="icon icon-check-2 color-success icon-xs"></i> Trusted Purchase</p>
                                                <a href="#" class="m-0 color-warning">Report Review</a>
                                            </div>
                                        </div>
                                    <?php } ?>
                                </div>

                                <div class="d-block w-100">
                                    <a href="#" class="btn btn-outline-primary btn-block">See all Reviews</a>
                                </div>

                            </div><!-- Info Sections -->

                            <div class="info-sections mt-4">

                                <!-- Return Options -->
                                <div class="block-wrapper base-border p-3 base-border-radius mb-3">
                                    <p class="font-medium mb-0 color-primary">Return Options</p>
                                    <p class="font-light color-gray m-0 show-lines-2 text">Lorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit rLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit rLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit rLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit rLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit rLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit rLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit rLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit rLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit rLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit rLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit r</p>
                                    <a class="btn-link color-gray btn-sm p-0 font-medium toggle-read-more">Read more</a>
                                </div>

                                <!-- Shipping Information -->
                                <div class="block-wrapper base-border p-3 base-border-radius mb-3">
                                    <p class="font-medium mb-0 color-primary">Shipping Information</h6>
                                    <p class="font-light color-gray mb-0 show-lines-2 text"> Lorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit rLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit rLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit rLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit rLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit rLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit rLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit rLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit rLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit rLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit rLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risit r </p>
                                    <a class="btn-link color-gray btn-sm p-0 font-medium toggle-read-more">Read more</a>
                                </div>

                                <!-- Privacy Information -->
                                <div class="block-wrapper base-border p-3 base-border-radius">
                                    <p class="font-medium mb-0 color-primary">Privacy Information</p>
                                    <p class="font-light color-gray m-0 show-lines-2 text"> Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur .</p>
                                    <a class="btn-link color-gray btn-sm p-0 font-medium toggle-read-more">Read more</a>
                                </div>
                            </div>

                        </div>

                    </div> <!-- tab-content -->

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

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

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

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

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

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



<div class="modal fade" id="share-modal" tabindex="-1">
    <div class="modal-dialog modal-md">
        <div class="modal-content">


            <div class="modal-body p-0">


                <div class="share-modal-wrapper flex-center flex-column p-3 p-lg-5">

                    <img src="assets/img/share-modal-image.png" class="w-200px mb-4">

                    <div class="flex-center gap-3 mb-3">

                        <a href="#" class="flex-center flex-column">
                            <img src="assets/img/share-icons/facebook.svg" class="w-50px mb-2">
                            <span class="font-light"> Facebook </span>
                        </a>

                        <a href="#" class="flex-center flex-column">
                            <img src="assets/img/share-icons/whatsapp.svg" class="w-50px mb-2">
                            <span class="font-light"> Whatsapp </span>
                        </a>

                        <a href="#" class="flex-center flex-column">
                            <img src="assets/img/share-icons/messenger.svg" class="w-50px mb-2">
                            <span class="font-light"> Messenger </span>
                        </a>

                        <a href="#" class="flex-center flex-column">
                            <img src="assets/img/share-icons/twitter-x.svg" class="w-50px mb-2">
                            <span class="font-light"> X </span>
                        </a>

                        <a href="#" class="flex-center flex-column">
                            <img src="assets/img/share-icons/instagram.svg" class="w-50px mb-2">
                            <span class="font-light"> Instagram </span>
                        </a>
                    </div>

                    <div class="copy-link-wrapper w-100 px-0 px-lg-5">

                        <div class="form-group w-100 m-0">
                            <div class="relative w-100">
                                <input id="store-link-input" type="text" class="form-control light-gray no-border w-100" placeholder="Store Link" value="https://kashkom.com/stores/alderwazah" disabled>
                                <div class="end-content">
                                    <a id="copy-link" href="#">
                                        <img src="assets/img/share-icons/copy.svg" class="w-25px">
                                    </a>
                                </div>
                            </div>
                        </div>

                    </div>


                </div>



            </div>

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


<script>
    // Toggle "Read more" functionality
    $(document).on('click', '.toggle-read-more', function(e) {
        e.preventDefault();
        $(this).closest('.block-wrapper').find('.text').toggleClass('show-lines-2');
    });

    // Hide "Read more" button if lines are less than 2
    $(document).ready(function() {
        $('.text').each(function() {
            var $text = $(this);
            var lineHeight = parseFloat($text.css('line-height'));
            var lines = Math.round($text[0].scrollHeight / lineHeight);
            if (lines <= 2) {
                $text.siblings('.toggle-read-more').hide();
            }
        });
    });
</script>