<?php 
//echo"<pre>";print_r($this->CheapPopularCity);die('shalvii');
if (!empty($this->CheapPopularCity)) {   
     ?>

   <style>
        .hhdc-item {
            min-height: 198px;
            background: #fff;
            border-radius: 8px;
            padding: 20px 20px 14px;
            box-shadow: 0 0.08rem 0.28rem rgb(0 0 0 / 60%);
            margin: 10px;
        }
        .hhdc-item-pc .item-line {
            margin-left: 0;
            height: 50px;
            border-left: 1px dashed var(--maincolor);
            position: relative;
            margin-right: 8px;
            top: 0px;
            float: left;
        }
        .hhdc-item-pc .item-line:before {
            display: block;
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            border: 1px solid var(--maincolor);
            transform: scale(.7);
            position: absolute;
            left: -3.5px;
        }
        .hhdc-item-pc .item-line:after {
            display: block;
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            border: 1px solid var(--maincolor);
            transform: scale(.7);
            position: absolute;
            left: -3.5px;
            bottom: -6px;
            background: var(--maincolor);
        }
        .hhdc-item-pc .item-iata {
            width: 140px;
        }
        .hhdc-item-pc .item-start-from {
            font-size: 12px;
            line-height: 18px;
            color: #948e84;
            padding-top: 0;
            margin-bottom: 0;
        }
        .hhdc-item .item-price {
            color: var(--maincolor);
            font-weight: 700;
            font-size: 24px;
            line-height: 34px;
        }
   </style>
<section class="popular-destinations">
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="df">
              <h2><?php if(trim($this->homeContentdata['whychooseusTitle']!=="")){echo $this->homeContentdata['whychooseusTitle'];}?></h2>
              <p>Cheap Domestic Flights to Popular Destinations</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
        <div class="owl-carousel" id="group-fare-destination">
                            <?php foreach ($this->CheapPopularCity as $key => $value) { ?>
                                <div>
                                    <div class="hhdc-item hhdc-item-pc">
                                        <p class="item-date"><?php echo ($value['expiryDate']) ?></p>
                                        <div class="flex align-center">
                                            <div class="item-line"></div>
                                            <div>
                                                <div class="item-title flex">
                                                    <p class="item-iata textEllipsis Mb20"><?php echo ($value['Fromcity']) ?></p>
                                                </div>
                                                <div class="item-title flex">
                                                    <p class="item-iata textEllipsis"><?php echo ($value['Tocity']) ?></p>
                                                </div>
                                            </div>
                                        </div>
                                        <p  class="item-start-from">Starting from
                                        </p>
                                        <div  class="item-price">₹ <?php echo ($value['price']) ?></div>
                                    </div>
                                </div>
                                <?php } ?>

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

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    $(function(){
        $('#group-fare-destination').owlCarousel({
            items: 5,
            loop: true,
            margin: 10,
            dots: true,
            slideSpeed: 4000,
            responsiveClass: true,
            responsive: {
                0: {
                    items: 1,
                    //nav: true,
                    dots: true
                },
                360: {
                    items: 2,
                    nav: false,
                    dots: true
                },
                600: {
                    items: 3,
                    nav: false,
                    dots: true
                },
                1000: {
                    items: 5,
                    margin: 20,
                    dots: true
                }
            }
        });
    })
</script>