<?php
error_reporting(0);
$discountPercentage = round((($data->bundile_main_price - $data->bundile_price) / $data->bundile_main_price) * 100);
?>
<section class="pt-1 pb-1 top-bar">
   <div class="container-fluid">
      <div class="row d-flex align-items-center">
         <div class="col-sm-2">
            <div class="bg-danger">
               <div class="countdown-container">
                  <div id="countdown" class="time"></div>
               </div>
            </div>
         </div>
         <div class="col-sm-7">
            <h4 class="mb-0"><b style="color:var(--theme-color-3)">SAVE <?php echo $discountPercentage; ?>% OFF</b> on <?php echo $data->bundile_name; ?> -Limited Time Deal!</h4>
         </div>
         <div class="col-sm-3">
            <button class="btn main-button text-white">
               &#x20B9;<?php echo $data->bundile_price; ?> - Get Course Bundle Now
            </button>
         </div>
      </div>
   </div>
</section>
<div>
   <div class="mainSection" style="background:#102349 !important;">
      <div class="sptb pb-5">
         <div class="header-text1 mb-0">
            <div class="container">
               <div class="row border-main d-flex justify-content-center">
                  <div class="col-xl-9 col-lg-9 col-md-9 text-center">
                     <div>
                        <h3 class="font-weight-semibold text-white mb-5 main-sub-heading"><?php echo $data->bundile_sub_title; ?></h3>
                        <h1 class="display-4 font-weight-semibold text-white"><?php echo $data->bundile_title; ?></h1>
                        <div class="top-desc">
                           <p class="text-white"><?php echo $data->bundile_description; ?></p>
                        </div>
                        <div class="main-button">
                           <div>
                              <button class="btn text-white main-button">
                                 &#x20B9;<?php echo $data->bundile_price; ?> - Get Course Bundle Now
                              </button>
                           </div>
                           <div class="pt-3 discount-title">
                              <b class="text-white"><del class="text-white">Normally &#x20B9;<?php echo $data->bundile_main_price; ?></del> <span class="price_off">Now <?php echo $discountPercentage; ?>% OFF - <?php echo $data->bundile_money_back_title ?></span></b>
                           </div>
                        </div>
                        <div class="d-lg-flex align-items-center justify-content-center mb-4 mt-5 header-main-grid">
                           <span class="text-warning heading-icon-title">
                              <div class="text-center">
                                 <div class="fs-14 mb-2 main-short-icon"><img src="<?php echo base_url(); ?>assets/slider/5-Star Reviews.png"></div>
                                 <div class="fs-10"><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i></div>
                                 <div class=" fs-14">5-Star Reviews</div>
                              </div>
                           </span>
                           <span class="text-warning heading-icon-title ms-5">
                              <div class="text-center">
                                 <div class="fs-14 mb-2 main-short-icon"><img src="<?php echo base_url(); ?>assets/slider/9200+ Students.png"></div>
                                 <div class="fs-14">9200+</div>
                                 <div class=" fs-14">Students</div>
                              </div>
                           </span>
                           <span class="text-warning heading-icon-title ms-5">
                              <div class="text-center">
                                 <div class="fs-14 mb-2 main-short-icon"><img src="<?php echo base_url(); ?>assets/slider/Last Updated August 2024.png"></div>
                                 <div class="fs-14">Last Updated</div>
                                 <div class=" fs-14"><?php echo date('F', strtotime($data->bundile_update_date)) ?> <?php echo date('Y', strtotime($data->bundile_update_date)) ?></div>
                              </div>
                           </span>
                           <span class="text-warning heading-icon-title ms-5">
                              <div class="text-center">
                                 <div class="fs-14 mb-2 main-short-icon"><img src="<?php echo base_url(); ?>assets/slider/money-back-2.png"></div>
                                 <div class="fs-14">60-Day </div>
                                 <div class=" fs-14">Money Back</div>
                              </div>
                           </span>
                           <span class="text-warning heading-icon-title ms-5">
                              <div class="text-center">
                                 <div class="fs-14 mb-2 main-short-icon"><img src="<?php echo base_url(); ?>assets/slider/free-updates-2.png"></div>
                                 <div class="fs-14">Free Lifetime</div>
                                 <div class=" fs-14">Updates</div>
                              </div>
                           </span>
                           <span class="text-warning heading-icon-title ms-5">
                              <div class="text-center">
                                 <div class="fs-14 mb-2 main-short-icon"><img src="<?php echo base_url(); ?>assets/slider/digital-marketing-certification-2.png"></div>
                                 <div class="fs-14">Online</div>
                                 <div class=" fs-14">Certification</<div>
                                 </div>
                           </span>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <?php
   $all_course = json_decode($data->bundile_courses, true);
   $this->db->where_in('course_id', $all_course);
   $all_course = $this->db->get('course_new')->result();
   $courseID = [];
   foreach ($all_course  as $key => $main_course) {
      $courseID[] = $main_course->course_id;
   }
   $this->db->where_in('course_id', $courseID);
   $all_lessions = $this->db->get('lesson')->num_rows();
   ?>
   <section class="sptb bg-white">
      <div class="container bg-style">
         <div class="section-title text-center">
            <div>
               <h2>The <?php echo $data->bundile_name; ?> Full Course Includes</h2>
               <p class="fs-22 lead"><span class="course_color_change"><?php echo count($all_course); ?></span> Courses <span class="course_color_change"><?php echo $all_lessions; ?></span> Lessons <span class="course_color_change">2</span> Certifications <span class="course_color_change"><?php echo $discountPercentage; ?>% OFF</span></p>
            </div>
            <div class="line-with-circle mt-4">
               <div class="line"></div>
               <div class="circle"></div>
            </div>
         </div>
         <div class="row ">
            <div class="col-md-12 col-lg-12 col-sm-12">
               <div class="row ">
                  <?php
                  $a = 1;
                  foreach ($all_course as $key => $course): ?>
                     <div class="col-md-4 col-12 col-lg-4">
                        <div class="card">
                           <div class="card-body course-body-height">
                              <div class="d-flex justify-content-between mb-3">
                                 <div class="course-small-image">
                                    <img src="<?php echo base_url(); ?><?php echo $course->course_small_image; ?>">
                                 </div>
                                 <div>
                                    <div class="course_status">Updated</div>
                                 </div>
                              </div>
                              <div class="course-content-details">
                                 <h4 class="course-title"><a href="#course_main_<?php echo $course->course_id ?>"><?php echo $course->course_heading; ?></a></h4>
                                 <p class="mt-4"><?php echo $course->course_sub_heading_2; ?></p>
                              </div>
                              <div class="d-flex justify-content-between">
                                 <div class="course-link">
                                    <a href="#course_main_<?php echo $course->course_id ?>">Course Content</a>
                                 </div>
                                 <div>
                                    <span class="badge bg-success"><?php echo $a; ?> / <?php echo count($all_course); ?></span>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  <?php $a++;
                  endforeach; ?>
               </div>
            </div>
         </div>
      </div>
   </section>
   <?php include VIEWPATH . 'front/bundle_course_components/cta.php'; ?>
   <?php
   $headingData = json_decode($data->bundile_page_heading, true);
   foreach ($headingData as $key => $heading) {
      include VIEWPATH . 'front/bundle_course_components/' . $key . '.php';
      
   }
   ?>
</div>
<section class="bottom-bar d-lg-none">
   <div class="bg-danger">
      <div class="countdown-container">
         <div id="countdownMobile" class="time"></div>
      </div>
   </div>
   <h4 class="mb-0 text-center bg-danger text-white mobile-save-button"><b class="text-white">SAVE <?php echo $discountPercentage; ?>% OFF</b> - Limited Time Deal!</h4>
</section>
<script>
   $(document).ready(function() {

      const targetDateMobile = new Date(new Date().getTime() + 4 * 60 * 1000);
      const intervalMobile = setInterval(function() {
         const nowMobile = new Date().getTime();
         const distanceMobile = targetDateMobile - nowMobile;
         const minutesMobile = Math.floor((distanceMobile % (60 * 60 * 1000)) / (60 * 1000));
         const secondsMobile = Math.floor((distanceMobile % (60 * 1000)) / 1000);
         document.getElementById('countdownMobile').innerHTML =
            '<div class="time-unit">00<div class="timeMode">Hours</div></div>' +
            '<div class="time-unit">' + minutesMobile.toString().padStart(2, '0') + '<div class="timeMode">Minutes</div></div>' +
            '<div class="time-unit">' + secondsMobile.toString().padStart(2, '0') + '<div class="timeMode">Seconds</div></div>';
         if (distanceMobile < 0) {
            clearInterval(intervalMobile);
            document.getElementById('countdownMobile').innerHTML = "EXPIRED";
         }
      }, 1000);

      const targetDate = new Date(new Date().getTime() + 4 * 60 * 1000);
      const interval = setInterval(function() {
         const now = new Date().getTime();
         const distance = targetDate - now;
         const minutes = Math.floor((distance % (60 * 60 * 1000)) / (60 * 1000));
         const seconds = Math.floor((distance % (60 * 1000)) / 1000);
         document.getElementById('countdown').innerHTML =
            '<div class="time-unit">00<div class="timeMode">Hours</div></div>' +
            '<div class="time-unit">' + minutes.toString().padStart(2, '0') + '<div class="timeMode">Minutes</div></div>' +
            '<div class="time-unit">' + seconds.toString().padStart(2, '0') + '<div class="timeMode">Seconds</div></div>';
         if (distance < 0) {
            clearInterval(interval);
            document.getElementById('countdown').innerHTML = "EXPIRED";
         }
      }, 1000);

   });

   $(document).ready(function() {
      var topBar = $('.top-bar');
      var offset = topBar.offset().top;

      $(window).scroll(function() {
         if ($(window).scrollTop() > offset) {
            topBar.addClass('fixed-top');
         } else {
            topBar.removeClass('fixed-top');
            topBar.addClass('fixed-top-2');
         }
      });
   });
</script>
<style>
   .line-with-circle {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
   }

   .line {
      height: 2px;
      background-color: var(--theme-color-3);
      width: 40%;
   }

   .circle {
      width: 25px;
      height: 25px;
      background-color: var(--theme-color-3);
      border-radius: 50%;
      position: absolute;
      border: 5px solid #f3f2f2;
   }

   .sptb {
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
   }

   .bg-style {
      background-color: #eeededb0 !important;
      padding: 20px;
      border-radius: 20px;
      overflow: hidden;
   }

   .sst .team-section .team-img img {
      box-shadow: 0 0 0 1px #dce3ec, 0 8px 16px 0 #dce3ec;
      display: inline;
      height: 150px;
      width: auto;
   }

   .company-img img {
      display: inline !important;
      height: 40px;
      width: auto;
   }

   .test-placement {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #31354a;
      font-weight: 800;
      font-size: .8rem;
      margin-top: 20px;
   }

   .test-placement img {
      /* width: 70px; */
   }

   .placements_batch {
      background-color: #ddd;
      margin-top: 15px;
      padding: 5px 0px 5px 0px;
   }

   .learning-step {
      background: var(--theme-color-1);
      width: 40px;
      height: 40px;
      text-align: center;
      padding: 9px;
      border-radius: 50px;
      margin: -42px auto 10px auto;
      color: #fff;
      font-weight: 600;
   }

   .bg-blue {
      background-color: var(--theme-color-1) !important;
   }

   .discount-title del {
      color: #000
   }

   .border-cta {
      border: 1px solid rgb(196, 43, 25);
      border-radius: 20px;
      padding: 20px;
      background-color: rgb(196, 43, 25, 0.2);
   }

   .bg-success {
      background-color: var(--theme-color-1) !important;
      font-weight: 700;
   }

   .course-body-height {
      height: 240px;
   }

   .course-link a {
      font-weight: 700;
      color: var(--theme-color-3);
      font-size: 16px;
   }

   .course-title a {
      color: #000;
      font-weight: 700;
   }

   .course_status {
      background: #ddd;
      padding-left: 10px;
      padding-right: 10px;
      border-radius: 10px;
   }

   .course-small-image {
      width: 30px;
      height: 30px;
      margin-bottom: 10px;
   }

   .course_color_change {
      color: var(--theme-color-3);
      font-weight: 700;
   }

   .fs-22 {
      font-size: 22px !important;
   }

   .main-short-icon img {
      width: 30px;
   }

   .discount-title {
      font-size: 17px;
   }

   .price_off {
      color: var(--theme-color-3);
   }

   .main-button .btn {
      font-size: 20px;
      font-weight: 700;
      padding-left: 30px;
      padding-right: 30px;
   }

   .top-desc {
      display: block;
      font-weight: 400;
      font-size: 20px;
      line-height: 28px;
      letter-spacing: -.25px;
      width: 100%;
      margin: 0 auto;
      margin-top: 30px;
   }

   .border-main {
      border: 1px solid #fff;
      border-radius: 20px;
      padding: 20px;
   }

   .header-main,
   .newsletter-new,
   .footer-main {
      display: none;
   }

   .countdown-container {
      text-align: center;
      font-size: 20px;
      color: #fff;
   }

   .time {
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
   }

   .time-unit {
      margin: 0 5px;
      padding-top: 3px;
      padding-bottom: 3px;
      font-family: Helvetica;
      font-size: 25px;
      color: #fff;
      font-weight: 900;
      line-height: 1.2;
   }

   .timeMode {
      font-size: 12px;
      font-weight: 600;
   }

   .bg-danger {
      background-color: #f00 !important;
   }

   .top-bar button {
      width: 100%;
      font-size: 15px;
      font-weight: 700;
   }

   .fixed-top {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 9999;
      background-color: #fff;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      display: block !important;
   }

   .fixed-top-2 {
      width: 100%;
      z-index: 9999;
      background-color: #fff;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      display: block !important;
   }

   .top-bar {
      display: none;
   }

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

      #fees {
         padding-bottom: 0 !important;
      }

      .course_details_nav {
         padding: 15px;
      }

      .price-content {
         padding-bottom: 10px;
      }

      .main-sub-heading {
         font-size: 17px;
         text-align: center;
      }

      .course-details .wideget-user-tab.wideget-user-tab3 .tabs-menu1 ul li a {
         padding: 8px !important;
         padding-right: 8px;
         padding-left: 8px;
      }

      .details2 .wideget-user-tab.wideget-user-tab3 .tabs-menu1 ul li .active {
         border-radius: 50px !important;
         padding-left: 20px !important;
         padding-right: 20px !important;
      }

      .course-details {
         padding: 0;
      }

      .sptb {
         padding-top: 20px;
         padding-bottom: 20px;
      }

      .mainSection h1 {
         font-size: 25px;
         text-align: center;
         margin-bottom: 20px;
      }

      @media (max-width: 480px) {
         .tabs-menu1 ul li {
            width: inherit !important;
            margin: 2px;
         }
      }

      .heading-icon-title {
         font-size: 15px;
         /* margin-top: 20px; */
      }

      .heading-icon-title .fa {
         font-size: 17px;
      }

      .mainSection p {
         font-size: 16px;
         text-align: center;
      }

      .btn {
         font-size: 14px
      }

      .section-title {
         padding-bottom: 1rem;
         text-align: center;
      }

      .section-title h2 {
         font-size: 22px;
         text-align: center;
      }

      .section-title p {
         font-size: 16px !important;
         text-align: center;
      }

      .lead {
         font-size: 16px;
         font-weight: 300;
      }

      .course-slider img {
         height: auto;
      }

      .col-auto {
         -ms-flex: 0 0 auto;
         flex: 0 0 auto;
         width: inherit;
         max-width: none;
      }

      .sticky-pin {
         box-shadow: inherit;
      }

      .callusbtn {
         display: none;
      }

      .horizontal-header .smllogo {
         display: inline-block;
         margin-top: 9px;
         margin-left: inherit !important;
      }

      #stickyBar {
         position: fixed;
         top: 0;
         z-index: 999;
         width: 100%;
         display: none;
         border: 0;
         box-shadow: 2px 3px 4.7px .3px rgba(92, 89, 143, 0.2);
      }

      .menu-bar {
         text-align: center;
      }

      body .horizontalMenucontainer .header-absolute {
         display: none !important;
      }

      .mobile-padding-bottom {
         margin-bottom: 20px;
      }

      .main-button .btn {
         font-size: inherit;
      }

      .display-6 {
         font-size: 1.5rem;
      }

      .top-desc {
         margin-top: 10px;
      }

      .fs-20 {
         font-size: 15px !important;
      }

      .discount-title {
         font-size: 13px;
      }

      .border-main {
         border: inherit;
         padding-bottom: 0;
      }

      .header-main-grid {
         grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
         max-width: 100%;
         margin: 40px auto 0 auto;
         grid-gap: 10px;
         display: grid;
      }

      .header-main-grid .ms-5 {
         margin-left: 0 !important;
      }

      .header-main-grid .heading-icon-title {
         border: 1px solid #fff;
         border-radius: 5px;
         padding: 8px;
         font-size: 13px;
      }

      .section-cta {
         padding-left: 20px;
         padding-right: 20px;
      }

      .section-cta .main-button .btn {
         padding-left: 10px;
         padding-right: 10px;
      }

      .blueprint_section h3 {
         text-align: center;
      }

      .top-bar {
         display: none !important;
      }

      .center-in-mobile {
         text-align: center;
      }

      .main-button-2
      {
         font-size: 12px!important;
      }

      .countdown-container {
         text-align: center;
         font-size: 20px;
         color: #fff;
      }

      .time {
         display: flex;
         justify-content: center;
         align-items: center;
         font-weight: bold;
      }

      .time-unit {
         margin: 0 5px;
         padding-top: 3px;
         padding-bottom: 3px;
         font-family: Helvetica;
         font-size: 20px;
         color: #fff;
         font-weight: 900;
         line-height: 1.2;
      }

      .timeMode {
         font-size: 10px;
         font-weight: 600;
      }
      .bg-danger
      {
         background-color: #be1502!important ;
      }

      .mobile-save-button
      {
         font-size: 16px;
         padding: 20px;
         padding-top: 5px;
         padding-bottom: 5px;
      }

      .bottom-bar
      {
         position: fixed;
         bottom: 0;
         width: 100%;
         z-index: 9999;
      }
   }
</style>