<link rel="stylesheet" type="text/css" href="<?=base_url('assets/css/slider.css');?>">

<?php
$on_going_activities = getWebSyncsData('Ongoing Activity News', 'ongoingActivityNews', 'ACTIVE');


$on_going_activities = sortBySequenceId($on_going_activities);
?>

<style type="text/css">
  .carousel-item {
    transition: transform 2s ease-in-out!important;
  }
	@media (max-width: 768px) {
        .carousel-inner {
            height: auto; 
        }
			
    }

</style>

<?php if (isset($on_going_activities) && !empty($on_going_activities)) { ?>
  <div class="row">
    <div class="col-md-3" style="display: flex; background: radial-gradient(#ffc43f, transparent); justify-content: center; padding-right: 0px; font-size: 20px; border-right: 18px solid #ffcd5c; font-weight: 800; align-items: stretch; flex-wrap: wrap; align-content: space-around; margin-right: 0px;">Special Announcement</div>
    <div class="col-md-9 m-0 p-0">
     <div style="border-top: 2px dotted yellow; border-bottom: 2px dotted yellow;display: flex;justify-content: center;"><marquee style="padding: 5px; font-weight: bold!important;" onmouseover="this.stop();" onmouseout="this.start();">
      <?php foreach ($on_going_activities as $key => $value) { ?>

        <a href="<?=$value['link']?>" target="_blank">
          &nbsp;<?=$value['refDataName'].'  '; ?>
        </a>

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


<section style="padding: 0;">
  <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel" data-interval="50000">
    <div class="carousel-indicators">

      <?php $i=1; $j=0; foreach($slider_image as $item){ ?>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="<?=$j?>" <?= $i==1 ? 'class="active" aria-current="true"' : ''; ?>  aria-label="Slide <?=$i?>" hidden></button>
        <?php $i++; $j++;} ?>


      </div>
      <div class="carousel-inner" style="background-image: url('<?=base_url('assets/img/elegant-background-with-mandala.png')?>');    background-size: initial;flex: 0 0 auto;">
        <?php $i=1; foreach($slider_image as $item){ ?>


         <div class="carousel-item <?= $i=='1' ? 'active': ''?>">

          <!-- ******************************************************************* -->
          <?php if ($item['bannerType'] == 'IMAGE LEFT TEXT RIGHT') { ?>
            <div class="row m-0 p-0 sliderHeight" >


             <div class="m-0 p-0 banner-left-side" style="background-image: url('<?= ApiBaseUrl()['url'].$item['refDataName']?>'); background-size: auto 100%; background-repeat: no-repeat; height: auto;background-position: center;"></div>



             <div class="banner-right-side m-0 p-4" >



              <div class='scrolldiv'>
                <div class='scrolldiv-content'>

                  <div class="mb-3 p-0" style="display: flex; align-items: center; flex-direction: column;">
                    <h2 class="mb-0" style="text-shadow: 1px 1px 3px #f6d700; font-weight: bold!important; font-size: 3em; font-style: normal;">
                      <?=camelCase(CheckEmptyNullVar(@$item['bannerHeading']));?>
                    </h2>
                    <div style="display: flex; justify-content: center;">
                      <img src="<?=base_url('assets/img/border.png');?>" class="img-fluid" style="width: 25%; max-width: 30%;">
                    </div>
                  </div>

                  <h5 class="fw-bold"><?=CheckEmptyNullVar(@$item['bannerSubHeading']);?></h5>
                  <p><pre style="font-family: 'Amaranth', sans-serif;font-size:19px;white-space: pre-wrap;"><?=CheckEmptyNullVar(@$item['bannerDesc']);?></pre></p>



                </div>
              </div>
              <div style="height: 7vh;float: right;">

                <?php if ($item['bannerButtonLink'] != '') { ?>
                  <span style="border-top: 1px dotted gray;padding-top: 10px;"></span>


                  <a href="<?= $item['bannerButtonLink'] == '' ? 'javascript:void(0)' : $item['bannerButtonLink']; ?>" class="btn btn-outline-danger" style="background-color:#AC0106;color: #fff;margin-right:50px ;">Book Now</a>

                <?php } ?>
              </div>


            </div>
          </div>

        <?php } ?>
        <!-- ******************************************************************* -->




        <!-- ******************************************************************* -->
        <?php if ($item['bannerType'] == 'IMAGE RIGHT TEXT LEFT') {?>
          <div class="row  sliderHeight m-0 p-0">
            <div class="banner-right-side m-0 p-4" style="background-image: url('<?=base_url('assets/img/banner-bg.png')?>');    background-size: cover;overflow: auto!important;">

              <div class='scrolldiv'>
                <div class='scrolldiv-content'>

                  <div class="mb-3 p-0" style="display: flex; align-items: center; flex-direction: column;">
                    <h2 class="mb-0" style="text-shadow: 1px 1px 3px #f6d700; font-weight: bold!important; font-size: 3em; font-style: normal;">
                      <?=camelCase(CheckEmptyNullVar(@$item['bannerHeading']));?>
                    </h2>
                    <div style="display: flex; justify-content: center;">
                      <img src="<?=base_url('assets/img/border.png');?>" class="img-fluid" style="width: 25%; max-width: 30%;">
                    </div>
                  </div>


                  <h5 class="fw-bold"><?=CheckEmptyNullVar(@$item['bannerSubHeading']);?></h5>
                  <p><pre style="font-family: 'Amaranth', sans-serif;font-size:19px;white-space: pre-wrap;"><?=CheckEmptyNullVar(@$item['bannerDesc']);?></pre></p>
                </div>
              </div>

              <div style="height: 7vh;float: right;">

                <?php if ($item['bannerButtonLink'] != '') { ?>
                  <span style="border-top: 1px dotted gray;padding-top: 10px;"></span>


                  <a href="<?= $item['bannerButtonLink'] == '' ? 'javascript:void(0)' : $item['bannerButtonLink']; ?>" class="btn btn-outline-danger" style="background-color:#AC0106;color: #fff;margin-right:50px ;">Book Now</a>

                <?php } ?>
              </div>

            </div>
            <div class="m-0 p-0 banner-left-side" style="background-image: url('<?= ApiBaseUrl()['url'].$item['refDataName']?>'); background-size: 100% 100%; background-repeat: no-repeat; height: auto;"></div>
          </div>
        <?php } ?>
        <!-- ******************************************************************* -->


        <!-- ******************************************************************* -->
        <?php if (@$item['bannerType'] == 'ONLY IMAGE') { ?>
          <a href="<?= $item['bannerButtonLink'] == '' ? 'javascript:void(0)' : $item['bannerButtonLink']; ?>" <?= $item['bannerButtonLink'] == '' ? '' : 'target="_blank"'; ?>>
            <div class="row sliderHeight m-0 p-0">
              <div class="col-md-12 m-0 p-0" style="background-image: url('<?=base_url('assets/img/banner-bg.png')?>');    background-size: cover;">

               <img src="<?= ApiBaseUrl()['url'].$item['refDataName']?>" class="d-block w-100 slider-image" alt="<?=$item['bannerHeading']?>">
             </div>
           </div>
         </a>
       <?php }?>
       <!-- ******************************************************************* -->


       <!-- ******************************************************************* -->
       <?php if ($item['bannerType'] == 'IMAGE WITH BOTTOM TEXT') { ?> 
        <img src="<?= ApiBaseUrl()['url'].$item['refDataName']?>" class="d-block w-100 slider-image" alt="<?=$item['bannerHeading']?>">

        <div class="carousel-caption d-none d-md-block">

          <div class="row" style="overflow:auto!important;">
            <?php 

            $itemBannerButtonLink = CheckEmptyNullVar(@$item['bannerButtonLink']);

            if (!empty($itemBannerButtonLink)) {?>
              <div class="col-md-10 text-center">
              <?php }else{ ?>
                <div class="col-md-12 text-center">
                <?php } ?>

                <span>
                  <div class="mb-3 p-0" style="display: flex; align-items: center; flex-direction: column;">
                    <h2 class="mb-0" style="text-shadow: 1px 1px 3px #f6d700; font-weight: bold!important; font-size: 3em; font-style: normal;">
                      <?=camelCase(CheckEmptyNullVar(@$item['bannerHeading']));?>
                    </h2>
                    <div style="display: flex; justify-content: center;">
                      <img src="<?=base_url('assets/img/border.png');?>" class="img-fluid" style="width: 25%; max-width: 30%;">
                    </div>
                  </div>


                  <h5 class="fw-bold" style="margin: 0!important;padding: 0!important"><?=CheckEmptyNullVar(@$item['bannerSubHeading']);?></h5>
                  <p><pre style="font-family: 'Amaranth', sans-serif;font-size:19px;white-space: pre-wrap;"><?=CheckEmptyNullVar(@$item['bannerDesc']);?></pre></p>
                </span>
              </div>


              <?php 
              if (!empty($itemBannerButtonLink)) {?>
                <div class="col-md-2">
                  <br>
                  <div>
                    <a href="<?=$item['bannerButtonLink'] == '' ? 'javascript:void(0)' : $item['bannerButtonLink']; ?>"  class="btn btn-outline-danger" style="background-color:#AC0106;color: #fff;margin-right:50px ;">Book Now</a>
                  </div>
                </div>
              <?php } ?>


            </div>     
          </div>
        <?php   }?>
        <!-- ******************************************************************* -->

      </div>

      <?php $i++; } ?>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>

</section><!-- End Hero -->
