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

<div class="page">

    <div class="container p-0">

        <div class="product-details-layout mt-4 mb-3">

            <div class="start">

                <div class="product-images-wrapper">

                    <div class="products-gallery-wrapper">

                        <div class="active-gallery-image">

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

                        </div>

                        <div class="thumbs-wrapper w-100">

                            <div class="row">

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

                                    <div class="col-3">

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

                                    </div>
                                <?php } ?>

                            </div>

                        </div>

                    </div>

                </div>

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

            <div class="end">

                <div class="card mb-3">

                    <div class="d-block mb-3">

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

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

                    </div>

                    <div class="d-block mb-3">

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

                        <div class="price-wrapper flex-start align-items-end gap-2">

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

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

                        </div>

                    </div>

                    <div class="d-block mb-3">


                        <div class="w-80px h-15px border-radius-sm overflow-hidden mb-3">
                            <div class="shimmer shimmer-gray"></div>
                        </div>


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

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

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

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

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

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

                        </div>



                    </div>

                    <div class="d-block mb-3">

                        <div class="w-80px h-15px border-radius-sm overflow-hidden mb-3">
                            <div class="shimmer shimmer-gray"></div>
                        </div>

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

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

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

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

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

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

                        </div>

                    </div>



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

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


                <div class="card mb-3">

                    <div class="w-250px h-15px border-radius-sm overflow-hidden mb-4">
                        <div class="shimmer shimmer-gray"></div>
                    </div>

                    <div class="flex-between">


                        <div class="w-160px h-160px border-radius-sm overflow-hidden mb-4">
                            <div class="shimmer shimmer-gray"></div>
                        </div>

                        <div class="w-160px h-160px border-radius-sm overflow-hidden mb-4">
                            <div class="shimmer shimmer-gray"></div>
                        </div>

                        <div class="w-160px h-160px border-radius-sm overflow-hidden mb-4">
                            <div class="shimmer shimmer-gray"></div>
                        </div>


                    </div>

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

                </div>


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

        </div> <!-- product-details-layout -->












































        <div class="product-details-layout mt-4 mb-3">

            <div class="start">
                <div class="product-images-wrapper" id="pin">
                    <?php include '_product-gallery.php' ?>
                </div>
            </div><!-- start -->

            <div class="end">

                <div id="trigger">

                    <div class="card mb-3">

                        <div class="d-flex mb-3">
                            <h1 class="h3">
                                PLAYSTATION STORE GIFT CARD - 60 EUR (Croatia)
                                <span class="rate"> <i class="icon icon-star color-warning"></i> </span>
                                <span class="h6"> 4.5 <span class="color-gray"> ( 35 ) </span> </span>
                            </h1>
                        </div> <!-- d-flex -->

                        <div class="color-success"> In stock </div>

                        <div class="price-wrapper flex-start align-items-end gap-2 mb-3">
                            <p class="h2 font-medium product-price"> 310.000 KWD </p>
                            <p class="lead font-medium product-old-price mb-1"> 429.000 KWD </p>
                        </div>

                        <!-- <div class="d-block mb-3">
                            <p class="lead font-medium mb-1"> Count ( not finished in figma انا حاطتها من عندي ) </p>
                            <div class="change-quantity-wrapper ">
                                <div class="counter">
                                    <span class="down" onclick="decreaseCount(event, this)"> <i class="icon icon-minus"></i> </span>
                                    <input type="text" value="4">
                                    <span class="up" onclick="increaseCount(event, this)"> <i class="icon icon-plus"></i></span>
                                </div>
                            </div>
                        </div> -->

                        <div class="d-block mb-3">

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

                            <div class="custom-radio-wrapper images-radio-wrapper">

                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="customRadioInline1" name="colors" class="custom-control-input" checked>
                                    <label class="custom-control-label" for="customRadioInline1">
                                        <img src="assets/img/select-1.png" class="radio-image" alt="">
                                    </label>
                                </div>

                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="customRadioInline2" name="colors" class="custom-control-input">
                                    <label class="custom-control-label" for="customRadioInline2">
                                        <img src="assets/img/select-2.png" class="radio-image" alt="">
                                    </label>
                                </div>


                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="customRadioInline3" name="colors" class="custom-control-input">
                                    <label class="custom-control-label" for="customRadioInline3">
                                        <img src="assets/img/select-3.png" class="radio-image" alt="">
                                    </label>
                                </div>


                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="customRadioInline4" name="colors" class="custom-control-input">
                                    <label class="custom-control-label" for="customRadioInline4">
                                        <img src="assets/img/select-4.png" class="radio-image" alt="">
                                    </label>
                                </div>


                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="customRadioInline5" name="colors" class="custom-control-input disabled">
                                    <label class="custom-control-label" for="customRadioInline5">
                                        <img src="assets/img/select-3.png" class="radio-image" alt="">
                                    </label>
                                </div>

                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="customRadioInline6" name="colors" class="custom-control-input disabled">
                                    <label class="custom-control-label" for="customRadioInline6">
                                        <img src="assets/img/select-5.png" class="radio-image" alt="">
                                    </label>
                                </div>


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



                        </div>

                        <div class="d-block mb-3">

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

                            <div class="attributes-options default">

                                <label class="option-container option-inline">
                                    <input type="radio" checked="checked" name="size" value="1">
                                    <span class="checkmark"> X large </span>
                                </label>

                                <label class="option-container option-inline">
                                    <input type="radio" name="size" value="2">
                                    <span class="checkmark"> Large </span>

                                </label>

                                <label class="option-container option-inline">
                                    <input type="radio" name="size" value="3" class="disabled">
                                    <span class="checkmark"> Small </span>

                                </label>

                                <label class="option-container option-inline">
                                    <input type="radio" name="size" value="4" disabled="disabled">
                                    <span class="checkmark"> Extra Small </span>
                                </label>

                            </div> <!-- share-options-wrapper -->

                        </div>

                        <div class="d-block mb-3">

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

                            <div class="attributes-options default">

                                <label class="option-container option-inline">
                                    <input type="radio" checked="checked" name="skin" value="1">
                                    <span class="checkmark"> Matte </span>
                                </label>

                                <label class="option-container option-inline">
                                    <input type="radio" name="skin" value="2">
                                    <span class="checkmark"> Glossy </span>
                                </label>

                                <label class="option-container option-inline">
                                    <input type="radio" name="skin" value="3" disabled="disabled">
                                    <span class="checkmark"> Transparent </span>
                                </label>

                            </div>

                        </div>

                        <div class="d-block">
                            <a href="product-checkout.php" class="btn btn-primary w-100"> Add to Cart </a>
                        </div>

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

                    <div class="card mb-3">

                        <p class="lead font-medium"> Always Bought with these products </p>







                        <div class="always-bought-with-items-wrapper mb-3 always-bought-together-wrapper active" data-products-url="https://test.kashkom.com/products/camera/always_bought_together">
                            <div class="custom-control custom-checkbox custom-control-inline always-bought-with-item">

                                <input type="checkbox" class="custom-control-input" id="product-38" value="38" data-price="40" checked="">

                                <label class="custom-control-label" for="product-38"></label>

                                <a href="https://test.kashkom.com/products/camera_2" wire:navigate="">
                                    <img src="https://kashkom-test.s3.me-south-1.amazonaws.com/public/uploads/ZyV6DatZQkzIm69zfZR4bZIAmKZ3ISW5RdnyqMlQ.jpg" class="image w-100px h-100px cover">
                                    <div class="text">
                                        <p class="color-primary bold m-0"> 40.000 KWD </p>
                                        <p class="small m-0 show-lines-2"> Camera</p>
                                    </div>
                                </a>
                            </div>


                            <div class="custom-control custom-checkbox custom-control-inline always-bought-with-item">

                                <input type="checkbox" class="custom-control-input" id="product-40" value="40" data-price="50" checked="">

                                <label class="custom-control-label" for="product-40"></label>

                                <a href="https://test.kashkom.com/products/camera_4" wire:navigate="">
                                    <img src="https://kashkom-test.s3.me-south-1.amazonaws.com/public/uploads/RzL83SisRbrfLxPuIukpKNhaWslACK3tHbXAD9lG.jpg" class="image w-100px h-100px cover">
                                    <div class="text">
                                        <p class="color-primary bold m-0"> 50.000 KWD </p>
                                        <p class="small m-0 show-lines-2"> Camera</p>
                                    </div>
                                </a>
                            </div>


                            <div class="custom-control custom-checkbox custom-control-inline always-bought-with-item">

                                <input type="checkbox" class="custom-control-input" id="product-39" value="39" data-price="50" checked="">

                                <label class="custom-control-label" for="product-39"></label>

                                <a href="https://test.kashkom.com/products/camera_3" wire:navigate="">
                                    <img src="https://kashkom-test.s3.me-south-1.amazonaws.com/public/uploads/SLIV2DfiZKoKR8xUJD2SJgMjmkC2b1nwIuWElBdS.jpg" class="image w-100px h-100px cover">
                                    <div class="text">
                                        <p class="color-primary bold m-0"> 50.000 KWD </p>
                                        <p class="small m-0 show-lines-2"> 222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p>
                                    </div>
                                </a>
                            </div>

                        </div>


                        <div class="always-bought-with-items-wrapper d-none">

                            <div class="flex-start align-items-start me-3">

                                <div class="w-70px h-70px border-radius-sm overflow-hidden me-2">
                                    <div class="shimmer shimmer-gray"></div>
                                </div>

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


                            </div>


                            <div class="flex-start align-items-start me-3">

                                <div class="w-70px h-70px border-radius-sm overflow-hidden me-2">
                                    <div class="shimmer shimmer-gray"></div>
                                </div>

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


                            </div>


                            <div class="flex-start align-items-start">

                                <div class="w-70px h-70px border-radius-sm overflow-hidden me-2">
                                    <div class="shimmer shimmer-gray"></div>
                                </div>

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


                            </div>



                        </div>


                        <div class="always-bought-with-items-wrapper gap-3 mb-3 d-none">

                            <div class="custom-control custom-checkbox custom-control-inline always-bought-with-item">

                                <input type="checkbox" class="custom-control-input" id="customCheck1" data-price="10" checked>
                                <label class="custom-control-label" for="customCheck1"></label>

                                <a href="product-details.php">
                                    <img src="assets/img/thumbs/products/01.jpg" class="image border-radius-sm">
                                    <div class="text">
                                        <p class="color-primary bold m-0"> 10 KWD </p>
                                        <p class="small m-0 show-lines-2"> Xbox Joystick - the 4th edition edition edition </p>
                                    </div>
                                </a>

                            </div>

                            <div class="custom-control custom-checkbox custom-control-inline always-bought-with-item">

                                <input type="checkbox" class="custom-control-input" id="customCheck1" data-price="10" checked>
                                <label class="custom-control-label" for="customCheck1"></label>

                                <a href="product-details.php">
                                    <img src="assets/img/thumbs/products/01.jpg" class="image border-radius-sm">
                                    <div class="text">
                                        <p class="color-primary bold m-0"> 10 KWD </p>
                                        <p class="small m-0 show-lines-2"> Xbox Joystick - the 4th edition edition edition </p>
                                    </div>
                                </a>

                            </div>

                            <div class="custom-control custom-checkbox custom-control-inline always-bought-with-item">

                                <input type="checkbox" class="custom-control-input" id="customCheck1" data-price="10" checked>
                                <label class="custom-control-label" for="customCheck1"></label>

                                <a href="product-details.php">
                                    <img src="assets/img/thumbs/products/01.jpg" class="image border-radius-sm">
                                    <div class="text">
                                        <p class="color-primary bold m-0"> 10 KWD </p>
                                        <p class="small m-0 show-lines-2"> Xbox Joystick - the 4th edition edition edition </p>
                                    </div>
                                </a>

                            </div>


                        </div>



                        <div class="always-bought-with-items-wrapper gap-3 mb-3 d-none">

                            <div class="custom-control custom-checkbox custom-control-inline always-bought-with-item">
                                <input type="checkbox" class="custom-control-input" id="customCheck1" data-price="10" checked>
                                <label class="custom-control-label" for="customCheck1">
                                    <img src="assets/img/thumbs/products/01.jpg" class="image">
                                    <div class="text">
                                        <p class="color-primary bold m-0"> 10 KWD </p>
                                        <p class="small m-0 show-lines-2"> Xbox Joystick - the 4th edition edition edition </p>
                                    </div>

                                </label>
                            </div>

                            <div class="custom-control custom-checkbox custom-control-inline always-bought-with-item">
                                <input type="checkbox" class="custom-control-input" id="customCheck2" data-price="15" checked>
                                <label class="custom-control-label" for="customCheck2">
                                    <img src="assets/img/thumbs/products/02.jpg" class="image">
                                    <div class="text">
                                        <p class="color-primary bold m-0"> 15 KWD </p>
                                        <p class="small m-0 show-lines-2"> Xbox Joystick - the 4th edition </p>
                                    </div>

                                </label>
                            </div>

                            <div class="custom-control custom-checkbox custom-control-inline always-bought-with-item">
                                <input type="checkbox" class="custom-control-input" id="customCheck3" data-price="35" checked>
                                <label class="custom-control-label" for="customCheck3">
                                    <img src="assets/img/thumbs/products/03.jpg" class="image">
                                    <div class="text">
                                        <p class="color-primary bold m-0"> 35 KWD </p>
                                        <p class="small m-0 show-lines-2"> Xbox Joystick - the 4th edition </p>
                                    </div>

                                </label>
                            </div>

                        </div>



                        <a href="#" class="btn btn-outline-primary always-bought-with-item-button"> Buy these items for 60 KWD </a>

                        <input class="always-bought-with-item-price-input d-none" type="text">
                        <input class="always-bought-with-item-ids-input d-none" type="text">

                    </div>

                    <div class="card mb-3">
                        <div class="flex-between">

                            <div class="flex-start gap-2">
                                <img src="assets/img/thumbs/stores/04.png" class="w-50px h-50px base-border-radius base-border">
                                <div class="d-block">
                                    <p class="lead bold m-0"> 2B Technology </p>
                                    <p class="color-gray font-light m-0"> 236 Products </p>
                                </div>
                            </div>

                            <a href="store-details.php" class="btn btn-primary-faded btn-sm"> Browse store </a>

                        </div>
                    </div>

                    <div class="card mb-3">
                        <div class="flex-start">

                            <div class="flex-center d-inline-flex flex-column me-4">
                                <div class="badge badge-primary-faded w-90px h-90px px-0 mb-1">
                                    <img src="assets/img/badges/delivery-by-kashkom.png">
                                </div>
                                <p class="small color-black font-light text-wrap-auto m-0 w-90px text-center"> delivered by Kashkom</p>
                            </div>

                            <div class="flex-center d-inline-flex flex-column me-4">
                                <div class=" badge badge-primary-faded w-90px h-90px px-0 mb-1">
                                    <img src="assets/img/badges/high-rated-seller.png">
                                </div>
                                <p class="small color-black font-light text-wrap-auto m-0 w-90px text-center"> High rated seller</p>
                            </div>

                            <div class="flex-center d-inline-flex flex-column me-4">
                                <div class=" badge badge-primary-faded w-90px h-90px px-0 mb-1">
                                    <img src="assets/img/badges/eligible-for-returns.png">
                                </div>
                                <p class="small color-black font-light text-wrap-auto m-0 w-90px text-center"> Eligible for returns</p>
                            </div>

                            <div class="flex-center d-inline-flex flex-column">
                                <div class=" badge badge-primary-faded w-90px h-90px px-0 mb-1">
                                    <img src="assets/img/badges/secure-transaction.png">
                                </div>
                                <p class="small color-black font-light text-wrap-auto m-0 w-90px text-center"> Secure transaction </p>
                            </div>
                        </div>
                    </div>


                    <div class="card mb-3">
                        <div class="flex-start">
                            <img src="assets/img/get-it-at-time.png" class="w-50px me-2">
                            <p class="lead m-0"> Get it at <span class="color-success font-medium"> Wednesday 23 July </span> </p>
                        </div>
                    </div>

                    <div class="card mb-4">

                        <p class="lead font-medium"> 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 17 reviews </p>
                            </div>
                        </div>

                        <div class="d-block w-100 mb-3">
                            <?php foreach (range(0, 3) as $i) { ?>
                                <div class="review-card">

                                    <div class="flex-between mb-1">
                                        <div class="flex-center gap-2">
                                            <p class="m-0  "> Hady Hellal </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">

                                        <?php
                                        switch ($i) {
                                            case  1:
                                                print  'Lorem ipsum dolor sit amet';
                                                break;
                                            case  2:
                                                print ' consectetur. Eget lobortis adipisci  consectetur. Eget lobortis adipisc  consectetur. Eget lobortis adipisc i ';
                                                break;
                                            default:
                                                print ' consectetur. Eget lobortis adipisci adipisci ';
                                                break;
                                        } ?>

                                    </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" data-toggle="modal" data-target="#report-review-modal"> Report Review </a>
                                    </div> <!-- flex-between -->

                                </div> <!-- review-card -->
                            <?php } ?>
                        </div> <!-- d-block -->

                        <div class="d-block w-100">
                            <a href="#" class="btn btn-outline-primary btn-block" data-toggle="modal" data-target="#all-reviews-modal"> See all Reviews </a>
                        </div> <!-- d-block -->

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

                    <div class="card p-0 pt-1 mb-4">

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

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

                                <ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">

                                    <li class="nav-item" role="presentation">
                                        <button class="w-100px nav-link active" id="overview-tab" data-toggle="tab" data-target="#overview"> Overview </button>
                                    </li>

                                    <li class="nav-item" role="presentation">
                                        <button class="w-100px nav-link" id="specs-tab" data-toggle="tab" data-target="#specs"> Specs </button>
                                    </li>

                                </ul>

                            </div>

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

                                <div class="tab-pane p-3 fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
                                    <ul>
                                        <li>This pre-owned product has been professionally inspected, tested, and cleaned.</li>
                                        <li>There will be no visible cosmetic imperfections when held at an arms length.</li>
                                        <li>Products with batteries will exceed 80% capacity relative to new.</li>
                                        <li>Accessories may not be original but will be compatible and fully functional. The product may come in a generic box.</li>
                                        <li>This pre-owned product has been professionally inspected, tested, and cleaned been professionally inspected, tested, and cleaned.</li>
                                        <li>There will be no visible cosmetic imperfections when held at an</li>
                                        <li>Products with batteries will exceed 80% capacity relative to new.</li>
                                    </ul>

                                    <img src="assets/img/thumbs/products/product-overview.jpg" alt="Overview" class="w-100">

                                </div>

                                <div class="tab-pane p-3 fade" id="specs" role="tabpanel" aria-labelledby="specs-tab">

                                    <table class="table table-striped">

                                        <tbody>

                                            <tr>
                                                <td>Ram</td>
                                                <td class="text-end">2 GB</td>
                                            </tr>
                                            <tr>
                                                <td>Color</td>
                                                <td class="text-end">Yellow</td>
                                            </tr>
                                            <tr>
                                                <td>Height</td>
                                                <td class="text-end">40 Cm</td>
                                            </tr>
                                            <tr>
                                                <td>Length</td>
                                                <td class="text-end">20 Cm</td>
                                            </tr>
                                            <tr>
                                                <td>Depth</td>
                                                <td class="text-end">3 Cm</td>
                                            </tr>
                                            <tr>
                                                <td>Weight</td>
                                                <td class="text-end">139 Gram</td>
                                            </tr>

                                        </tbody>

                                    </table>

                                </div>

                            </div>

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


                    </div>


                    <div class="d-block">

                        <h6 class="mb-2 bold"> Related Products </h6>

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

                            <div class="swiper-container swiper-custom"
                                data-per-view="2.5"
                                data-per-view-md="2.5"
                                data-per-view-sm="1.5"
                                data-per-view-xs="1.5"
                                data-space-between="10">

                                <div class="swiper-wrapper">


                                    <?php foreach (range(1, 3) as $inner_i) { ?>
                                        <div class="swiper-slide">
                                            <div class="product-card-square">

                                                <div class="top">

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

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

                                                <div class="bottom">

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

                                                    <div class="w-100 h-10px border-radius-sm overflow-hidden mb-2">
                                                        <div class="shimmer shimmer-gray"></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 shimmer-gray"></div>
                                                            </div>
                                                            <div class="w-100 h-10px border-radius-sm overflow-hidden mb-2">
                                                                <div class="shimmer shimmer-gray"></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 shimmer-gray"></div>
                                                            </div>
                                                        </div>
                                                    </div>

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

                                            </div>
                                        </div>
                                    <?php } ?>



                                    <?php foreach (range(0, 20) as $inner_i) { ?>

                                        <div class="swiper-slide">
                                            <?php include 'shared-html/product-card-square.php' ?>
                                        </div>

                                    <?php } ?>

                                </div>

                            </div>

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

                    </div>


                </div> <!-- trigger -->

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

        </div> <!-- product-details-layout -->

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

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

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

<div class="modal fade" id="report-review-modal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title center"> Report review </h5>
                <i class="icon icon-close-circle close-modal" data-dismiss="modal"></i>
            </div>

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

                    <p class="text-center color-gray"> Are you sure you want report this review? </p>

                    <div class="review-card">

                        <div class="flex-between mb-1">
                            <div class="flex-center gap-2">
                                <p class="m-0  "> Hady Hellal </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">

                            <?php
                            switch ($i) {
                                case  1:
                                    print  'Lorem ipsum dolor sit amet';
                                    break;
                                case  2:
                                    print ' consectetur. Eget lobortis adipisci  consectetur. Eget lobortis adipisc  consectetur. Eget lobortis adipisc i ';
                                    break;
                                default:
                                    print ' consectetur. Eget lobortis adipisci adipisci ';
                                    break;
                            } ?>

                        </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" data-toggle="modal" data-target="#report-review-modal"> Report Review </a>
                        </div> <!-- flex-between -->

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

                    <div class="flex-center gap-2">
                        <a href="#" class="btn btn-primary min-w-170"> Yes, report </a>
                        <a href="#" class="btn btn-outline-primary min-w-170"> Cancel </a>
                    </div>

                </div> <!-- p-4 -->
            </div> <!-- modal-body -->
        </div> <!-- modal-content -->
    </div>
</div>