<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;
    }

  }



  @media screen and (min-width: 992px) {

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      /* margin-top: 0px !important; */
      /* margin-top: 350px !important; */
      margin-top: 191px !important;

    }
  }

  @media screen and (max-width: 1026px) {

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      margin-top: -381px !important;
      /* margin-top: 281px !important; */
    }
  }

  @media screen and (max-width: 1024px) {

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      /* margin-top: -381px !important; */
      /* margin-top: 281px !important; */
      margin-top: 2891px !important;
    }
  }

  @media screen and (max-width: 992px) {

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      /* margin-top: 500px!important; */
      /* margin-top: 191px !important; */
      /* margin-top: 420px !important; */

    }
  }
 @media screen and (max-width: 992px) {
.carousel-control-prev-icon,
    .carousel-control-next-icon {
      /* margin-top: 500px!important; */
      margin-top: 159px !important;
      /* margin-top: 420px !important; */

    }
 }
  @media screen and (max-width: 853px) {

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      /* margin-top: -256px !important; */
    }
  }

  @media screen and (max-width: 822px) {

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      /* margin-top: -158px !important; */
      /* margin-top: 558px !important; */
    }
  }

  @media screen and (max-width: 769px) {

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      margin-top: -29px !important;
    }
  }

  @media screen and (max-width: 762px) {

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      /* margin-top: 500px!important; */
      /* margin-top: 65px !important; */
      /* margin-top: 292px !important; */
      margin-top: 522px !important;

    }
  }

  @media screen and (max-width: 555px) {

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      margin-top: 106px !important;
      /* margin-top: 226px !important; */
      /* margin-top: 502px !important; */
    }
  }

  @media only screen and (max-width: 500px) {
    .slider-image {
      width: 100%;
      height: 164px;
    }
  }

  @media screen and (max-width: 476px) {

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      /* margin-top: 278px !important; */
      margin-top: 502px !important;

    }
  }

  @media screen and (max-width: 440px) {

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      /* margin-top: 50px !important; */
      margin-top: 78px !important;
      /* margin-top: 478px !important; */
    }
  }

  @media screen and (max-width: 400px) {

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      /* margin-top: 113px !important; */
      margin-top: 143px !important
        /* margin-top: 513px !important; */
    }
  }

  @media screen and (max-width: 380px) {

    .carousel-control-prev-icon,
    .carousel-control-next-icon {

      margin-top: 372px !important;
      /* margin-top: 536px !important; */
    }
  }

  @media screen and (max-width: 360px) {

    .carousel-control-prev-icon,
    .carousel-control-next-icon {

      margin-top: 282px !important;
      /* margin-top: 537px !important; */
    }
  }

  @media screen and (max-width: 346px) {

    .carousel-control-prev-icon,
    .carousel-control-next-icon {

      /* margin-top: 52px !important; */
      margin-top: 154px !important;
      /* margin-top: 528px !important; */
    }
  }

  @media screen and (max-width: 300px) {

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      /* margin-top: 500px!important; */
      /* margin-top: 6px !important; */
      /* margin-top: 372px !important; */
      margin-top: 543px !important;

    }
  }

  @media screen and (max-width: 290px) {

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      /* margin-top: 500px!important; */
      /* margin-top: 6px !important; */
      margin-top: 539px !important;

    }
  }

  @media screen and (max-width: 265px) {

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      /* margin-top: 500px!important; */
      margin-top: 452px !important;

    }

    .slider-image {
      width: 100%;
      height: 118px;
    }
  }
</style>

<?php
// var_dump($on_going_activities);
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: 17px; 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) {
            if ($value['link'] == "68188904d7730103ed36ce0a") {
              $evtData = ReturnDataFilterByID($value['link'], $partishipent_events);
              if (!empty($evtData)) {
                //  echo $evtData['_id'];
          ?>
                <a href="javaScript:void(0);" onclick="checkLoginStatus('partishipent_events','<?= $evtData['refDataName'] ?>','<?= $evtData['_id'] ?>','<?= $evtData['maxCount'] ?>','<?= $evtData['startDate'] ?>','<?= $evtData['endDate'] ?>')" class="flashy-text text-dark">
                  &nbsp;🔔 <?= $value['refDataName'] . '  '; ?>
                </a>
              <?php
              }
            } else {
              ?>
              <a href="<?= !empty($value['link']) ? $value['link'] : 'javaScript:void(0);' ?>" class="flashy-text text-dark" <?= !empty($value['link']) ? 'target="_blank"' : '' ?>>
                &nbsp;🔔 <?= $value['refDataName'] . '  '; ?>
              </a>
            <?php
            }
            ?>


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

        <?php $is_valid_banner = filterValidData($item);

        if ($is_valid_banner == 1) { ?>
          <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) { ?>

      <?php $is_valid_banner = filterValidData($item);

      if ($is_valid_banner == 1) { ?>

        <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="m-0 p-0 banner-left-side" style="background-image: url('<?= base_url('assets/img/slr.jpg') ?>'); background-size: 100% 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>
                <?php if ($item['bannerButtonLink'] != '') { ?>
                  <div style="height: 7vh;float: right;">


                    <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 ;"><?= isset($item['bannerButtonText']) && !empty(trim($item['bannerButtonText'])) ? $item['bannerButtonText'] : 'Read More'; ?></a>


                  </div>
                <?php } else {
                ?>
                  <div style="height: 2vh;float: right;"></div>
                <?php
                } ?>
              </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>
                <?php if ($item['bannerButtonLink'] != '') { ?>
                  <div style="height: 7vh;float: right;">


                    <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 ;">Read More</a> -->
                    <a href="<?= $item['bannerButtonLink'] == '' ? 'javaScript:void(0)' : $item['bannerButtonLink']; ?>" class="btn btn-outline-danger" style="background-color:#AC0106;color: #fff;margin-right:50px ;"><?= isset($item['bannerButtonText']) && !empty(trim($item['bannerButtonText'])) ? $item['bannerButtonText'] : 'Read More'; ?></a>


                  </div>
                <?php } else {
                ?>
                  <div style="height: 2vh;float: right;"></div>
                <?php
                } ?>
              </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 class="m-0 p-0 banner-left-side" style="background-image: url('<?= base_url('assets/img/slr.jpg') ?>'); 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'] ?>">
                  <!-- <img src="<?= base_url('assets/img/sl1.jpg') ?>" 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> -->
                          <a href="<?= $item['bannerButtonLink'] == '' ? 'javaScript:void(0)' : $item['bannerButtonLink']; ?>" class="btn btn-outline-danger" style="background-color:#AC0106;color: #fff;margin-right:50px ;"><?= isset($item['bannerButtonText']) && !empty(trim($item['bannerButtonText'])) ? $item['bannerButtonText'] : 'Read More'; ?></a>
                        </div>
                      </div>
                    <?php } ?>


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