<script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
<section class="margin-top-xs-55" style="background: #fff;position: relative;
">
   <div class="header-text mb-0">
      <div>
         <div class="row ">
            <div class="col-lg-12 col-md-12 col-sm-12 text-center">
               <svg style="width:100%;height: 450px;" viewBox="0 0 1280 679" preserveAspectRatio="none" width="100%" height="100%">
                  <defs>
                     <g id="shape">
                        <path d="M0 0H1280V544.882C1280 544.882 1115 679 640 679C165 679 0 544.882 0 544.882V0Z" fill="#D9D9D9"></path>
                        <path d="M0 0H1280V544.882C1280 544.882 1115 679 640 679C165 679 0 544.882 0 544.882V0Z" fill="url(#gradient)"></path>
                     </g>
                     <radialGradient id="gradient" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(640 -261.197) rotate(90) scale(815.683 664.92)">
                        <stop stop-color="#4169E1"></stop>
                        <stop offset="1" stop-color="#071A34"></stop>
                     </radialGradient>
                  </defs>
                  <use href="#shape"></use>
               </svg>
               <div class="frame-image">
                  <div style="position: absolute; border-radius: inherit; inset: 0px;" data-framer-background-image-wrapper="true"><img decoding="async" sizes="100vw" src="<?php echo base_url(); ?>assets/lSHGuRrPALnsNPFyY1JslN8so.png" alt="" style="display: block; width: 100%; height: 100%; border-radius: inherit; object-position: center center; object-fit: cover;"></div>
               </div>
               <div class="text-body main-header-text">
                  <h1 class="mb-1 leading-tight text-white text-white-mobile slider-mobile-text"><?php echo $slider->heading; ?></h1>
                  <p class="pt-lg-5 text-white text-white-mobile"><?php echo $slider->content; ?></p>
                  <div class="d-flex justify-content-center" style="margin-top: 30px;">
                     <a href="<?php echo $slider->button_link; ?>" class="btn btn-xl btn-primary button-slider"><?php echo $slider->button_title; ?></a>
                  </div>
               </div>
            </div>

            <div class="floating-icons">
               <i class="icon-facebook"></i>
               <i class="icon-adwords"></i>
               <i class="icon-seo"></i>
               <i class="icon-instagram"></i>
               <i class="icon-activecampaign"></i>
               <i class="icon-wordpress"></i>
               <i class="icon-shopify"></i>
               <i class="icon-youtube"></i>
               <i class="icon-analytics"></i>
               <i class="icon-kk"></i>
            </div>
         </div>
      </div>
   </div>
</section>


<section class="bg-white">
   <div class="container course-cat-section">
      <div class="row">
         <div class="col-sm-12 d-lg-none">
            <div class="mb-4 category-title-name text-center"><?php echo $heading->flag_course ?></div>
         </div>
         <div class="col-md-3 order-2 order-sm-1 mt-sm-1 mt-5">
            <div class="mb-4 category-title-name d-lg-block d-none"><?php echo $heading->flag_course ?></div>
            <ul class="list-group category-list">
               <li class="list-group-item" onclick="selectCategory(this, 'All')">
                  <div class="program-acc-head active">
                     <div class="div-icon"></div>
                     <div class="cat-name">All Courses</div>
                     <span class="program-acc__arrow"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
                  </div>
               </li>
               <?php foreach ($category_all as $key => $category): ?>
                  <li class="list-group-item" onclick="selectCategory(this, '<?php echo $category->id; ?>')">
                     <div class="program-acc-head">
                        <div class="div-icon"></div>
                        <div class="cat-name"><?php echo $category->name; ?></div>
                        <span class="program-acc__arrow"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
                     </div>
                  </li>
               <?php endforeach; ?>
            </ul>
         </div>

         <!-- Programs Section -->
         <div class="col-md-9 order-1 order-sm-2">
            <div class="mb-4 popular-list__title">
               <span class="popular-list__title-text" id="course_cat_name">All Courses</span>
            </div>
            <div class="row g-3 program-cards-container" id="course_div">
               <div class="text-center" id="loader" style="display: none;">
                  <i class="fa fa-spinner fa-spin fa-3x text-primary"></i>
                  <p>Loading...</p>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

<section class="bg-white p-5">
   <div class="container">
      <div class="row">
         <div class="col-sm-3 text-sm-start text-center">
            <div class="section-heading"><?php echo $heading->are_you ?></div>
            <div class="section-description">
               <p><?php echo $heading->about_heaing ?></p>
               <div class="abroad_banner__cta track-click-mp">
                  <button href="<?php echo base_url(); ?>mc/master-class" class="btn btn-lg btn-join-master-class btn-primary">Join Free Master Class</button>
               </div>
            </div>
         </div>
         <div class="col-md-9 order-1 order-sm-2">
            <div class="mb-4 popular-list__title">
               <span class="popular-list__title-text" id="course_cat_name_special">Specialist Courses</span>
            </div>
            <div class="row g-3 program-cards-container" id="course_div_special">
               <div class="text-center" id="loader" style="display: none;">
                  <i class="fa fa-spinner fa-spin fa-3x text-primary"></i>
                  <p>Loading...</p>
               </div>
            </div>
         </div>
         <!--<div class="col-sm-9">-->
         <!--   <div class="row">-->
         <!--      <ul class="university-tiles">-->
         <!--         <?php //foreach ($get_all_company_logo as $key => $company_logo) : 
                        ?>-->
         <!--            <li class="university-tiles__item">-->
         <!--               <div class="university-tiles__image-wrapper">-->
         <!--                  <img class="img university-tiles__image" src="<?php //echo base_url() 
                                                                              ?><?php //echo $company_logo->image 
                                                                                 ?>" alt="<?php //echo $company_logo->name 
                                                                                          ?>">-->
         <!--               </div>-->
         <!--            </li>-->
         <!--         <?php //endforeach; 
                        ?>-->
         <!--      </ul>-->
         <!--   </div>-->
         <!--</div>-->
      </div>
   </div>
</section>
<section class="bg-white">
   <div class="container">
      <a class="section-body abroad_banner-body" href="<?php echo $about_us->button_link; ?>">
         <div class="abroad_banner-img">
            <img class="abroad_banner__image-bg " src="https://d1vwxdpzbgdqj.cloudfront.net/home-new-variant/blue-banner-bg.png" src="" alt="profile">
            <img class="abroad_banner__image" src="<?php echo base_url($about_us->image); ?>" src="" alt="profile">
         </div>
         <div class="abroad_banner">
            <div class="abroad_banner-content section-description">
               <div class="section-heading"><?php echo $about_us->heading; ?></div>
               <p class="abroad_banner__subtitle"><?php echo $about_us->content; ?></p>
            </div>
            <div class="abroad_banner__cta track-click-mp">
               <button href="#" class="btn btn-lg btn-join-master-class btn-primary"><?php echo $about_us->button_name; ?></button>
            </div>
         </div>
      </a>

   </div>
</section>
<section class="bg-white p-5">
   <div class="container">
      <div class="row d-flex justify-content-center align-items-center">
         <div class="col-sm-8 ">
            <div class="section-heading text-center"><?php echo $heading->upcoming_batches_heading ?></div>
         </div>
      </div>
      <div class="row text-center">
         <?php foreach ($get_all_counting as $key => $counting) : ?>
            <div class="col-lg-3 col-md-6 col-6">
               <div class="counter-status md-mb-0">
                  <h2 class="counter mb-0"><?php echo $counting->number ?></h2>
                  <h5 class="stats-list__title"><?php echo $counting->title ?></h5>
               </div>
            </div>
         <?php endforeach; ?>
      </div>
   </div>
</section>
<?php if ($all_testimonials): ?>
   <section class="bg-yellows video-section-div">
      <div class="container">
         <div class="row">
            <div class="col-sm-12">
               <div class="owl-carousel video-with-quots">
                  <!-- Loop through testimonials -->
                  <?php foreach ($all_testimonials as $key => $testimonials): ?>
                     <div class="slider-item">
                        <div class="quote-section">
                           <div class="section-heading">
                              “<?php echo $testimonials->t_c_name; ?>”
                           </div>
                           <div class="description"><?php echo $testimonials->t_c_title; ?></div>
                           <div class="author mb-0"><?php echo $testimonials->t_c_sub_title; ?></div>
                        </div>

                        <?php
                        // Extract YouTube video ID
                        $video = $testimonials->t_c_video;

                        if (strpos($video, 'youtu.be') !== false) {
                           $video_id = explode("youtu.be/", $video)[1];
                           $video_id = explode("?", $video_id)[0];
                        } elseif (strpos($video, 'youtube.com/watch') !== false) {
                           $video_id = explode("?v=", $video)[1];
                           $video_id = explode("&", $video_id)[0];
                        }

                        // Generate the thumbnail URL
                        $thumbnail = "http://img.youtube.com/vi/" . $video_id . "/maxresdefault.jpg";
                        $headers = @get_headers($thumbnail);
                        $thumbnailExists = $headers && strpos($headers[0], '200') !== false;

                        // Use the thumbnail if it exists; otherwise, use a custom image
                        $finalThumbnail = $thumbnailExists ? $thumbnail : front_css() . 'youtube_thumble.jpg';
                        ?>

                        <div class="image-section">
                           <!-- Thumbnail Image -->
                           <img id="thumbnail-image-<?php echo $key; ?>" src="<?php echo $finalThumbnail; ?>" alt="Thumbnail">

                           <!-- Watch Story Button -->
                           <div class="overlay-slider-button">
                              <span class="video__desc-button">
                                 <button id="watch-story-btn-<?php echo $key; ?>" class="watch-btn" data-index="<?php echo $key; ?>">
                                    <i class="fa fa-play" aria-hidden="true"></i> &nbsp;&nbsp;Watch Course
                                 </button>
                              </span>
                           </div>

                           <!-- YouTube Player -->
                           <div class="w-100" id="player-container-<?php echo $key; ?>" style="display: none;">
                              <div id="player-<?php echo $key; ?>" data-plyr-provider="youtube" data-plyr-embed-id="<?php echo $video_id; ?>"></div>
                           </div>
                        </div>
                     </div>
                  <?php endforeach; ?>
               </div>

            </div>
         </div>
      </div>
   </section>
<?php endif; ?>
<section class="pt-5 bg-white" id="stories">
   <div class="container">
      <div class="section-title text-center">
         <div class="section-heading">Where Our Graduates Shine</div>
         <div class="section-sub-heading">Discover the Top Companies and Roles Secured by Our SEO Training Alumni</div>
      </div>
      <div class="row">
         <div class="col-md-12">
            <div id="myCarousel2" class="owl-carousel placement_testimonials">
               <?php foreach ($all_current_op as $key => $current_op) : ?>
                  <div class="item">
                     <div class="card mb-0">
                        <div class="card-body sst">
                           <div class="team-section text-center">
                              <div class="team-img d-flex justify-content-center">
                                 <img src="<?php echo base_url(); ?><?php echo $current_op->placements_image ?>" alt="<?php echo $current_op->placements_name ?>" height="150">
                              </div>
                              <h4 class="dark-grey-text mt-4"><?php echo $current_op->placements_name ?></h4>
                              <div class="mt-3 company-img text-center d-flex justify-content-center">
                                 <img src="<?php echo base_url(); ?><?php echo $current_op->placements_company_img ?>" alt="<?php echo $current_op->placements_name ?>" height="30">
                              </div>
                              <h5 class="placements_batch mt-3"><?php echo $current_op->placements_batch ?></h5>
                              <div class="test-placement">
                                 <div class="d-inline-block">
                                    <p class="mb-0">Computer Science</p>
                                 </div>
                                 <div class="d-inline-block"><img src="<?php echo base_url(); ?>assets/Testimonial_CTA.png" width="90px"></div>
                                 <div class="d-inline-block">
                                    <p class="mb-0">SEO Executive</p>
                                 </div>
                              </div>

                           </div>
                        </div>
                     </div>
                  </div>
               <?php endforeach; ?>
            </div>
         </div>
      </div>
   </div>
</section>
<section class="bg-white pt-5">
   <div class="container">
      <a class="section-body abroad_banner-body track-click-mp" href="<?php echo $section_2->button_link; ?>">
         <div class="abroad_banner-img">
            <img class="abroad_banner__image-bg " src="https://d1vwxdpzbgdqj.cloudfront.net/home-new-variant/blue-banner-bg.png" src="" alt="profile">
         </div>
         <div class="abroad_banner second_abroad_banner">
            <div class="abroad_banner-content section-description">
               <p class="abroad_banner__overline mb-0"><?php echo $section_2->url; ?></p>
               <div class="section-heading"><?php echo $section_2->heading; ?></div>
               <p class="abroad_banner__subtitle"><?php echo $section_2->description; ?></p>
            </div>
            <div class="abroad_banner__cta track-click-mp">
               <button href="<?php echo base_url(); ?>mc/master-class" class="btn btn-lg btn-join-master-class btn-primary"><?php echo $section_2->button_name; ?></button>
            </div>
         </div>
      </a>

   </div>
</section>
<section class="bg-white p-5">
   <div class="container">
      <div class="row d-flex align-items-center justify-content-center">
         <div class="col-sm-8">
            <div class="row">
               <div class="col-sm-12 text-center">
                  <div class="section-heading"><?php echo $heading->upcoming_batches_description ?></div>
               </div>
            </div>
            <div class="row">
               <ul class="advantage-tiles__list">
                  <?php foreach ($get_all_stacks as $key => $programme): ?>
                     <li class="advantage-tiles__item">
                        <div class="advantage-tiles__image-wrapper">
                           <img class="advantage-tiles__image  fadeIn" src="<?php echo base_url($programme->fafa_icon); ?>" alt="card image" title="THE BEST-IN-CLASS INSTRUCTORS" data-loaded="true">
                        </div>
                        <div class="advantage-tiles__content">
                           <div class="advantage-tiles__title"><?php echo $programme->title; ?></div>
                           <div class="section-description">
                              <p><?php echo $programme->content; ?></p>
                           </div>
                        </div>
                     </li>
                  <?php endforeach; ?>
               </ul>
            </div>
         </div>
      </div>
   </div>
</section>
<section class="bg-white p-5">
   <div class="container">
      <div class="row d-flex align-items-center justify-content-center">
         <div class="col-sm-8">
            <div class="row">
               <div class="col-sm-12 text-center">
                  <div class="section-heading"><?php echo $heading->training_title ?></div>
               </div>
            </div>
            <div class="row">
               <div class="col-sm-12">
                  <div class="section-body company-section__body">
                     <ul class="company__list1">
                        <?php foreach ($get_all_company_logo as $key => $company_logo) : ?>
                           <li class="company__item">
                              <div class="company__image-wrapper">
                                 <img class="company__image fadeIn" src="<?php echo base_url($company_logo->image); ?>" alt="<?php echo $company_logo->name; ?>" title="company logo" data-loaded="true">
                              </div>
                              <div class="company__image-wrapper">
                                 <img class="company__image fadeIn" src="<?php echo base_url($company_logo->image); ?>" alt="<?php echo $company_logo->name; ?>" title="company logo" data-loaded="true">
                              </div>
                           </li>
                        <?php endforeach; ?>
                     </ul>

                     <ul class="company__list2">
                        <?php foreach ($get_all_company_logo as $key => $company_logo) : ?>
                           <li class="company__item">
                              <div class="company__image-wrapper">
                                 <img class="company__image fadeIn" src="<?php echo base_url($company_logo->image); ?>" alt="<?php echo $company_logo->name; ?>" title="company logo" data-loaded="true">
                              </div>
                              <div class="company__image-wrapper">
                                 <img class="company__image fadeIn" src="<?php echo base_url($company_logo->image); ?>" alt="<?php echo $company_logo->name; ?>" title="company logo" data-loaded="true">
                              </div>
                           </li>
                        <?php endforeach; ?>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
<section class="bg-white p-5">
   <div class="container">
      <div class="row d-flex align-items-center justify-content-center">
         <div class="col-sm-8">
            <div class="row">
               <a class="section-body mid_banner-body track-click-mp" href="<?php echo $section_3->btn_title; ?>">
                  <div class="mid_banner-img">
                     <img class="mid_banner__image-bg lazy gl-lazy-loaded fadeIn" data-src="https://d1vwxdpzbgdqj.cloudfront.net/home-new-variant/study-abroad-bg.png" src="https://d1vwxdpzbgdqj.cloudfront.net/home-new-variant/study-abroad-bg.png" alt="profile" data-loaded="true">
                  </div>
                  <div class="mid_banner">
                     <div class="mid_banner-content">
                        <div class="section-heading"><?php echo $section_3->title_1; ?></div>
                        <div class="section-sub-heading"><?php echo $section_3->title_2; ?></div>
                     </div>
                     <div class="mid_banner__cta "><button href="#" class="btn btn-lg btn-join-master-class btn-primary"><?php echo $section_3->title_3; ?></button>
                     </div>
                  </div>
               </a>
            </div>
         </div>
      </div>
   </div>
</section>
<section class="bg-white p-5">
   <div class="container">
      <div class="row">
         <div class="col-sm-12 text-center">
            <div class="section-heading"><?php echo $heading->training_description ?></div>
         </div>
         <div class="col-sm-12">
            <div class="owl-carousel media-spot-light free-flow-list">
               <?php foreach ($get_all_award as $key => $award): ?>
                  <!-- <div class="free-flow__item slider-item">
                     <a href="<?php echo isset($award->media_link) ? $award->media_link : '#'; ?>" target="_blank" class="track-click-mp"> -->
                  <div class="media-mention-card gl-card">
                     <div class="media-card__head">
                        <img src="<?php echo base_url(isset($award->media_image) ? $award->media_image : $award->awards_image); ?>"
                           class="lazy shimmer media-card__image gl-lazy-loaded fadeIn" data-loaded="true">
                        <div class="media-card__title">
                           <?php echo isset($award->media_content) ? $award->media_content : $award->awards_description; ?>
                        </div>
                     </div>
                     <div class="media-card__footer d-flex justify-content-between">
                        <div>
                           <i class="fa fa-calendar"></i>
                           <?php
                           echo isset($award->media_date) ? date('d-m-Y', strtotime($award->media_date)) : date('d-m-Y', strtotime($award->awards_date));
                           ?>
                        </div>
                        <?php if (isset($award->awards_place)): ?>
                           <div>
                              <i class="fa fa-map-marker"></i> <?php echo $award->awards_place; ?>
                           </div>
                        <?php endif; ?>
                     </div>
                  </div>
                  <!-- </a>
                  </div> -->
               <?php endforeach; ?>
            </div>

         </div>
      </div>
   </div>
</section>
<section class="bg-white p-5">
   <div class="container">
      <div class="row d-flex align-items-center justify-content-center">
         <div class="col-sm-8">
            <div class="row">
               <a class="section-body mid_banner-body" data-event-type="Explore Programs" data-title="Explore Programs" href="https://api.whatsapp.com/send?phone=<?php echo $app_setting->whatsapp_no; ?>" title="" target="_blank">
                  <div class="mid_banner-img">
                     <img class="mid_banner__image-bg lazy gl-lazy-loaded fadeIn" data-src="https://d1vwxdpzbgdqj.cloudfront.net/home-new-variant/study-abroad-bg.png" src="https://d1vwxdpzbgdqj.cloudfront.net/home-new-variant/study-abroad-bg.png" alt="profile" data-loaded="true">
                  </div>
                  <div class="mid_banner">
                     <div class="mid_banner-content">
                        <div class="section-heading"><?php echo $section_4->heading; ?></div>
                        <div class="section-sub-heading"><?php echo $section_4->des; ?></div>
                     </div>

                     <div class="mid_banner__cta "><button style="background-color:#25d366!important;border:none;color:#000" href="https://api.whatsapp.com/send?phone=<?php echo $app_setting->whatsapp_no; ?>" class="btn btn-lg  btn-primary"><i class="fa fa-whatsapp"></i>&nbsp;Chat Now</button>
                     </div>
                  </div>
               </a>
            </div>
         </div>
      </div>
   </div>
</section>
<div class="modal fade" id="browchureModel" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body" style="padding: 40px;">
            <h3 class="modal_heading">Please enter your Details to get the Course Brochure</h3>
            <form id="download_bowchure" method="post">
               <div class="mb-3">
                  <label class="col-form-label">Your Full Name <span class="text-danger">*</span></label>
                  <input type="text" id="name" class="form-control form-field" required placeholder="Enter Your Full Name" name="lead_name">
               </div>
               <div class="mb-3">
                  <label class="col-form-label">Your Email ID <span class="text-danger">*</span></label>
                  <input type="email" id="email" class="form-control form-field" required placeholder="Enter Your Email ID" name="lead_email">
               </div>
               <div class="mb-4">
                  <label class="col-form-label">Your Mobile No. <span class="text-danger">*</span></label>
                  <input type="text" id="phone" class="form-control form-field" required placeholder="Enter Your Mobile No." name="lead_mobile">
               </div>

               <div class="mb-3">
                  <label class="col-form-label">Occupation <span class="text-danger">*</span></label>
                  <select id="occupation" class="form-control form-field" name="lead_occupation" required>
                     <option value="" disabled selected>Select Your Occupation</option>
                     <option value="Student">Student</option>
                     <option value="Working Professional">Working Professional</option>
                     <option value="House Wife">House Wife</option>
                     <option value="Business Owner">Business Owner</option>
                  </select>
               </div>

               <!-- Education Field -->
               <div class="mb-3">
                  <label class="col-form-label">Education <span class="text-danger">*</span></label>
                  <select id="education" class="form-control form-field" name="lead_education" required>
                     <option value="" disabled selected>Select Your Education</option>
                     <option value="Below 10th">Below 10th</option>
                     <option value="Below 12th">Below 12th</option>
                     <option value="12th Pass">12th Pass</option>
                     <option value="BA">BA</option>
                     <option value="BCA">BCA</option>
                     <option value="B.com">B.com</option>
                     <option value="BAF">BAF</option>
                     <option value="BMS">BMS</option>
                     <option value="BBA">BBA</option>
                     <option value="MBA">MBA</option>
                     <option value="M.com">M.com</option>
                     <option value="Mass communication">Mass communication</option>
                     <option value="Other">Other</option>
                  </select>
               </div>

               <div class="mb-3 form-check">
                  <input type="checkbox" class="form-check-input" id="tac_updates" name="tac_updates" checked>
                  <label class="form-check-label" for="tac_updates">I have read and agree to the <a href="<?php echo base_url(); ?>p/privacy-policy"><u>Privacy Policy</u></a> and <a href="<?php echo base_url(); ?>p/terms-conditions"><u>Terms & Conditions.</u></a></label>
               </div>

               <div class="mb-3 form-check">
                  <input type="checkbox" class="form-check-input" id="whatsapp_updates" name="whatsapp_updates" checked>
                  <label class="form-check-label" for="whatsapp_updates">Send me updates on WhatsApp</label>
               </div>

               <div class="mb-4">
                  <div id="recaptcha-container"></div>
               </div>

               <input type="hidden" class="form-control" required placeholder="Enter Your Mobile No." name="lead_course" id="leadCourse">

               <input type="hidden" class="form-control" value="Download Brochure" required placeholder="Enter Your Mobile No." name="lead_mode">

               <div class="mt-5">
                  <button disabled id="sendOtpButton" type="button" class="btn w-full text-white" style="font-size: 15px;font-weight: 700;">
                     <span class="loginButtonText">Submit Now</span>
                     <span class="loginButtonLoaderMain">Process....</span>
                  </button>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>

<div class="modal fade" id="otpModel" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-sm">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body">
            <div class="d-flex justify-content-center align-items-center container">
               <div class="py-3 px-3" style="margin-top: -60px;">
                  <h5 class="m-0">Mobile phone verification</h5>
                  <span class="mobile-text">Enter the code we just send on your mobile phone
                     <b class="text-danger" id="otp_mobile">+91 86684833</b>
                  </span>
                  <div class="otp-inputs">
                     <div class="d-flex flex-row ">
                        <input type="text" class="form-control otp-input" maxlength="1" autofocus="">
                        <input type="text" class="form-control otp-input" maxlength="1">
                        <input type="text" class="form-control otp-input" maxlength="1">
                        <input type="text" class="form-control otp-input" maxlength="1">
                        <input type="text" class="form-control otp-input" maxlength="1">
                        <input type="text" class="form-control otp-input" maxlength="1">
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<style>
   .programm-card-width {
      position: relative;
   }

   .tranding-course-badge {
      position: absolute;
      top: 10px;
      z-index: 9;
      right: 20px;
   }
</style>
<script>
   $(document).ready(function() {


      $('.placement_testimonials').owlCarousel({
         loop: true,
         margin: 10,
         nav: true,
         dots: true,
         autoplay: false,
         autoplayTimeout: 5000,
         navText: [
            '<span>&#9664;</span>',
            '<span>&#9654;</span>'
         ],
         responsive: {
            0: {
               items: 1
            },
            600: {
               items: 1
            },
            1000: {
               items: 4
            }
         }
      });
      $('.video-with-quots').owlCarousel({
         loop: true,
         margin: 10,
         nav: true,
         dots: true,
         autoplay: false,
         autoplayTimeout: 5000,
         navText: [
            '<span>&#9664;</span>',
            '<span>&#9654;</span>'
         ],
         responsive: {
            0: {
               items: 1
            },
            600: {
               items: 1
            },
            1000: {
               items: 1
            }
         }
      });
      $('.media-spot-light').owlCarousel({
         loop: true,
         margin: 10,
         nav: true,
         dots: true,
         autoplay: false,
         autoplayTimeout: 5000,
         navText: [
            '<span>&#9664;</span>',
            '<span>&#9654;</span>'
         ],
         responsive: {
            0: {
               items: 1
            },
            600: {
               items: 2
            },
            1000: {
               items: 4
            }
         }
      });
   });
   // Initialize Plyr when the page is ready
   document.addEventListener('DOMContentLoaded', function() {
      // Initialize Plyr for all players
      const players = {};

      // Loop through all testimonials
      document.querySelectorAll('.slider-item').forEach((item, index) => {
         const playerElement = document.getElementById(`player-${index}`);
         const thumbnailImage = document.getElementById(`thumbnail-image-${index}`);
         const watchButton = document.getElementById(`watch-story-btn-${index}`);
         const playerContainer = document.getElementById(`player-container-${index}`);

         // Initialize Plyr for this player
         players[index] = new Plyr(playerElement);

         // Handle the "Watch story" button click
         watchButton.addEventListener('click', function() {
            // Hide the thumbnail and button
            thumbnailImage.style.transition = 'opacity 0.5s ease';
            thumbnailImage.style.opacity = 0;
            watchButton.style.transition = 'opacity 0.5s ease';
            watchButton.style.opacity = 0;

            // After fade-out, show the player container
            setTimeout(() => {
               thumbnailImage.style.display = 'none';
               watchButton.style.display = 'none';

               playerContainer.style.display = 'block';
               playerContainer.style.opacity = 0;
               playerContainer.style.transition = 'opacity 0.5s ease';
               playerContainer.style.opacity = 1;

               // Start video playback
               players[index].play();
            }, 500);
         });
      });
   });

   function selectCategory(element, catID) {
      // Manage active category styling
      const items = document.querySelectorAll('.category-list .list-group-item .program-acc-head');
      items.forEach(item => item.classList.remove('active'));
      const programAccHead = element.querySelector('.program-acc-head');
      if (programAccHead) {
         programAccHead.classList.add('active');
      }

      // Show loader and hide content during data fetch
      $('#course_div').html('<div id="loader"><i class="fa fa-spinner fa-spin fa-3x text-primary"></i><p>Loading...</p></div>');

      // AJAX call to fetch data
      $.ajax({
         url: '<?php echo base_url("home/getProgramsByCategory"); ?>',
         type: 'POST',
         data: {
            category_id: catID
         },
         success: function(response) {
            // console.log(response);
            var objJSON = JSON.parse(response);
            console.log(objJSON);
            if (objJSON.html) {
               $('#course_div').html(objJSON.html);
            } else {
               $('#course_div').html('<div class="col-md-4 programm-card-width"><div class="card program-card"><b>Oops! No Course Found</b></div></div>');
            }

            $('#course_cat_name').html(objJSON.category);
         },
         error: function(e) {
            console.log(e.responseText);
            $('#course_div').html('<p class="text-danger">Failed to load data.</p>');
         }
      });
   }

   // Call "All Courses" on page load
   $(document).ready(function() {
      selectCategory(document.querySelector('.category-list .list-group-item'), 'All');
      selectCategory_special();
   });

   function selectCategory_special() {

      var catID = <?php echo json_encode($all_specialist_cat); ?>;
      if (Array.isArray(catID) && catID.length > 0) {
         // Show loader and hide content during data fetch
         $('#course_div_special').html('<div id="loader"><i class="fa fa-spinner fa-spin fa-3x text-primary"></i><p>Loading...</p></div>');

         // AJAX call to fetch data
         $.ajax({
            url: '<?php echo base_url("home/getProgramsByCategory"); ?>',
            type: 'POST',
            data: {
               category_id: catID
            },
            success: function(response) {
               // console.log(response);
               var objJSON = JSON.parse(response);

               // Populate data and hide loader
               $('#course_div_special').html(objJSON.html);
               $('#course_cat_name_special').html(objJSON.category);
            },
            error: function(e) {
               console.log(e.responseText);
               $('#course_div').html('<p class="text-danger">Failed to load data.</p>');
            }
         });
      } else {
         $('#course_div_special').html('<div class="col-md-4 programm-card-width"><div class="card program-card"><b>Oops! No Course Found</b></div></div>');
      }
   }

   var coursePdfURL;

   function openDownloadBrochureModal(e, url) {
      console.log("hello")
      $('#browchureModel').modal('show');
      $('#leadCourse').val(e);
      coursePdfURL = url;
   }

   $(document).ready(function() {

      var confirmationResult;
      const firebaseConfig = {
         apiKey: "AIzaSyAlfb-Z0KUHo66Z5de-Dm9HEtJE6Oq8H30",
         authDomain: "dotcom-vidya-f38f2.firebaseapp.com",
         projectId: "dotcom-vidya-f38f2",
         storageBucket: "dotcom-vidya-f38f2.appspot.com",
         messagingSenderId: "839557496405",
         appId: "1:839557496405:web:4bc23c520256c6340ededc"
      };

      // Run validation on field changes
      $('.form-field').on('input', function() {
         validateForm();
      });

      function validateForm() {
         var phone = $('#phone').val().trim();
         var name = $('#name').val().trim();
         var email = $('#email').val().trim();

         var nameValid = name.split(' ').length > 1;
         var phoneValid = /^\d{10}$/.test(phone);
         var emailValid = validateEmail(email);

         if (phoneValid && nameValid && emailValid) {
            $('#sendOtpButton').prop('disabled', false);
            $('.loginButtonText').text('Send Verification Code');
         } else {
            $('#sendOtpButton').prop('disabled', true);
            $('.loginButtonText').text('Submit Now');
         }
      }

      function validateEmail(email) {
         return email.match(
            /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
         );
      }

      document.getElementById('sendOtpButton').addEventListener('click', function() {
         $('.loginButtonLoaderMain').show();
         $('.loginButtonText').hide();
         $('#sendOtpButton').prop('disabled', true);

         var phoneNumber = $('#phone').val();
         firebase.initializeApp(firebaseConfig);

         // Initialize reCAPTCHA verifier
         var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
            size: 'invisible',
            callback: function(response) {
               // reCAPTCHA solved
            },
            'expired-callback': function() {
               $('.loginButtonLoaderMain').hide();
               $('.loginButtonText').show();
               $('#sendOtpButton').prop('disabled', false);
            }
         });

         appVerifier.render().then(function(widgetId) {
            window.recaptchaWidgetId = widgetId;
         });

         firebase.auth().signInWithPhoneNumber('+91' + phoneNumber, appVerifier)
            .then(function(result) {
               confirmationResult = result; // Set the global confirmationResult
               $('#otp_mobile').html(phoneNumber);
               $('#browchureModel').modal('hide');
               $('#otpModel').modal('show');
               // swal({
               //    title: "Done!",
               //    text: "OTP Send To Your Mobile No.",
               //    icon: "success",
               // });
            })
            .catch(function(error) {
               console.error('Error during signInWithPhoneNumber', error);
               $('.loginButtonLoaderMain').hide();
               $('.loginButtonText').show();
               $('#sendOtpButton').prop('disabled', false);
               swal({
                  title: "Oops!",
                  text: "OTP Sending Failed. Please try Again.",
                  icon: "error",
               });
            });
      });

      // Function to validate OTP
      function validateOTP() {
         var otp = '';
         $('.otp-input').each(function() {
            otp += $(this).val();
         });

         if (otp.length === 6) {
            if (!confirmationResult) {
               swal({
                  title: "Oops!",
                  text: "OTP verification is not initialized. Please try again.",
                  icon: "error",
               });
               return;
            }

            $("#ajax-preloader").show();
            confirmationResult.confirm(otp).then(function(result) {
               var user = result.user;
               $('#otpMessage').html(''); // Clear any existing message
               $.ajax({
                  beforeSend: function() {
                     $("#ajax-preloader").show();
                  },
                  url: '<?php echo base_url(); ?>/home/submit_lead',
                  method: 'POST',
                  data: $('form#download_bowchure').serialize(),
                  success: function(response) {
                     if (response) {
                        swal({
                           title: "Wow!",
                           text: "Brochure Download Successfully",
                           icon: "success",
                        });
                        window.open(coursePdfURL, '_blank');
                        setTimeout(
                           function() {
                              location.reload();
                           }, 2000);
                     } else {
                        swal({
                           title: "Oops!",
                           text: "Please Try Again ",
                           icon: "error",
                        });
                     }
                     $("#ajax-preloader").hide();
                  },
                  error: function(xhr, status, error) {
                     console.error('Error:', error);
                     $("#ajax-preloader").hide();
                  }
               });
            }).catch(function(error) {
               $("#ajax-preloader").hide();
               console.error('Error during confirmationResult.confirm', error);
               swal({
                  title: "Oops!",
                  text: "Invalid OTP. Please Enter Correct OTP",
                  icon: "error",
               });
            });
         }
      }

      // Handle OTP input focus and backspace
      $('.otp-input').on('input', function() {
         if (this.value.length === this.maxLength) {
            $(this).next('.otp-input').focus();
         }
         validateOTP();
      }).on('keydown', function(e) {
         if (e.key === 'Backspace' && this.value.length === 0) {
            $(this).prev('.otp-input').focus().val('').trigger('input');
         }
      });
   });
</script>