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

<div class="page">

    <div class="container p-0">

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

            <div class="start">

                <div id="pin">

                    <div class="card text-center">
                        <div class="flex-center w-100">
                            <img src="assets/img/thumbs/cards/01.jpg" class="w-100 contain aspect-ratio-1-1">
                        </div>
                    </div>

                </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 -->

                        <h2 class="mb-3"> 429.000 KWD </h2>

                        <div class="d-block mb-3">
                            <p class="lead font-medium mb-1"> Overview </p>
                            <p class="m-0"> Lorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risus nunc elementum purus oLorem ipsum dolor sit amet consectetur. Eget lobortis adipiscing sed arcu risus nunc elementum purus o </p>
                        </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">
                                    <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">
                            <a href="card-checkout.php" class="btn btn-primary w-100"> Buy now </a>
                        </div>

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


                    <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, 7) 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"> Report Review </a>
                                    </div>


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

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

                    </div>

                    <div class="d-block">

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

                        <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="2"
                                data-per-view-xs="2"
                                data-space-between="5">

                                <div class="swiper-wrapper">

                                    <?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>

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

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

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