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

<div class="page">

    <div class="container p-0">

        <h3 class="bold mt-4 mb-3 "> Product name reviews </h3>


        <div class="card">

            <div class="row">

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

                    <p class="lead font-medium"> Rating </p>

                    <div class="flex-start">

                        <div class="d-block w-150px 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 gap-2 mb-2">

                            <!-- rating 5 stars -->
                            <div class="flex-start gap-2">
                                <p class="m-0 w-15px text-center"> 5 </p>
                                <i class="icon icon-star color-warning" style="margin-bottom: 3px;"></i>
                                <div class="progress progress-sm w-100">
                                    <div class="progress-bar bg-warning" role="progressbar" style="width: 80%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <p class="text-end m-0"> (22) </p>
                            </div>


                            <!-- rating 4 stars -->
                            <div class="flex-start gap-2">
                                <p class="m-0 w-15px text-center"> 4 </p>
                                <i class="icon icon-star color-warning" style="margin-bottom: 3px;"></i>
                                <div class="progress progress-sm w-100">
                                    <div class="progress-bar bg-warning" role="progressbar" style="width: 20%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <p class="text-end m-0"> (22) </p>
                            </div>


                            <!-- rating 3 stars -->
                            <div class="flex-start gap-2">
                                <p class="m-0 w-15px text-center"> 3 </p>
                                <i class="icon icon-star color-warning-dark" style="margin-bottom: 3px;"></i>
                                <div class="progress progress-sm w-100">
                                    <div class="progress-bar bg-warning-dark" role="progressbar" style="width: 60%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <p class="text-end m-0"> (22) </p>
                            </div>

                            <!-- rating 2 stars -->
                            <div class="flex-start gap-2">
                                <p class="m-0 w-15px text-center"> 2 </p>
                                <i class="icon icon-star color-danger-light" style="margin-bottom: 3px;"></i>
                                <div class="progress progress-sm w-100">
                                    <div class="progress-bar bg-danger-light" role="progressbar" style="width: 30%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <p class="text-end m-0"> (22) </p>
                            </div>

                            <!-- rating 1 star -->
                            <div class="flex-start gap-2">
                                <p class="m-0 w-15px text-center"> 1 </p>
                                <i class="icon icon-star color-danger" style="margin-bottom: 3px;"></i>
                                <div class="progress progress-sm w-100">
                                    <div class="progress-bar bg-danger" role="progressbar" style="width: 10%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <p class="text-end m-0"> (22) </p>
                            </div>

                        </div> <!-- d-block -->




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


                    <div class="d-block w-75 ms-auto gap-2 mb-2">

                        <?php foreach (range(1, 5) as $i) { ?>
                            <div class="flex-start gap-2 mb-2">
                                <div class="w-20px h-10px border-radius-sm overflow-hidden">
                                    <div class="shimmer"></div>
                                </div>
                                <div class="w-20px h-10px border-radius-sm overflow-hidden">
                                    <div class="shimmer"></div>
                                </div>
                                <div class="w-100 h-10px border-radius-sm overflow-hidden">
                                    <div class="shimmer"></div>
                                </div>
                                <div class="w-30px h-10px border-radius-sm overflow-hidden">
                                    <div class="shimmer"></div>
                                </div>
                            </div>
                        <?php } ?>



                    </div> <!-- d-block -->


                </div> <!-- col-lg-6 -->

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

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

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

                        <?php foreach (range(0, 20) 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>
            </div>

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

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