Current File : /home/quantums/alhidayamaintenance.com/wp-content/themes/eyecraftersny-child/page-treatment.php
<?php
/**
 * The template name:blepharitis page
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

get_header();
?>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<section class="behabanner">
   <div class="container-fluid px-0">
      <div class="row align-items-center">
         <div class="col-sm-3">
            <div class="behatext ps-sm-5">
               <div class="img-box">
                  <img src="<?php echo home_url(); ?>/wp-content/uploads/2023/03/optilight-icon.png" alt="optilight-image" class="img-fluid w-50 mb-3">
                   <?php the_contnet(); ?>
               </div>
            </div>
         </div>
         <div class="col-md-9">
            <?php echo get_field('treatments_youtube_1'); ?>
         </div>
      </div>
   </div>
</section>

<section class="fivebox ttmnt py-5" style="background: url(<?php home_url(); ?>/wp-content/uploads/2023/03/optilight-elevating-bg.png); background-size: cover; background-position: center; background-repeat: no-repeat;">
   <div class="container">
      <div class="row row-cols-md-3 row-cols-sm-2 row-cols-1 justify-content-center gy-sm-4 bg-light p-sm-5">
         <div class="col-lg-12 text-center mb-5">
            <h3 class="text-danger"><?php echo get_field('optilight_treatment_title_name'); ?></h3>
            <h2><?php echo get_field('optilight_treatment_sub_title_name'); ?></h2>
         </div>
		 <?php if( have_rows('grid_section') ):
             while( have_rows('grid_section') ) : the_row();
			 $icon = get_sub_field('icon');
			 $content = get_sub_field('content');
		 ?>
         <div class="col">
            <div class="card p-3 text-center border-0 shadow rounded-0 h-100">
               <div class="img-area">
                  <img src="<?php echo $icon; ?>" alt="fimage" class="tmtcon">
               </div>
               <div class="card-body text-center">
                  <p class="text-dark"><?php echo $content;  ?></p>
               </div>
            </div>
         </div>
		 <?php endwhile; endif; ?>
      </div>
   </div>
</section>


<section class="evalutt py-5">
   <div class="container-fluid">
      <div class="row align-items-center">
         <div class="col-sm-3 px-sm-5">
            <div class="clinictext">
               <h2 class="">EVALUATE <br> YOURSELF</h2>
               <h5>do you suffer from signs of dry eye?</h5>
            </div>
         </div>
         <div class="col-sm-9 bg-red">
            <div class="d-flex align-items-start evatab">
                 <div class="nav flex-column nav-pills me-3 align-items-center" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                   <a class="nav-link active bg-light rounded-circle fs-4 text-danger" id="v-pills-one-tab" data-bs-toggle="pill" data-bs-target="#v-pills-one">1</a>
                   <a class="nav-link bg-light rounded-circle fs-4 text-danger" id="v-pills-two-tab" data-bs-toggle="pill" data-bs-target="#v-pills-two">2</a>
                   <a class="nav-link bg-light rounded-circle fs-4 text-danger" id="v-pills-three-tab" data-bs-toggle="pill" data-bs-target="#v-pills-three">3</a>
                   <a class="nav-link bg-light rounded-circle fs-4 text-danger" id="v-pills-four-tab" data-bs-toggle="pill" data-bs-target="#v-pills-four">4</a>
                   <a class="nav-link bg-light rounded-circle fs-4 text-danger" id="v-pills-five-tab" data-bs-toggle="pill" data-bs-target="#v-pills-five">5</a>
                 </div>
                 <div class="tab-content" id="v-pills-tabContent">
                   <div class="tab-pane fade show active" id="v-pills-one" role="tabpanel" aria-labelledby="v-pills-one-tab" tabindex="0">
                     <div class="freqtbox p-5">
                        <h2 class="text-white mb-4">How frequently do you suffer from burning, itching or gritty eyes?</h2>
                        <form action="">
                           <div class="form-check mb-3">
                             <input class="form-check-input" class="border-0" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                             <label class="form-check-label fw-bold text-white" for="flexRadioDefault1">
                               Rarely
                             </label>
                           </div>
                           <div class="form-check mb-3">
                             <input class="form-check-input" class="border-0" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
                             <label class="form-check-label fw-bold text-white" for="flexRadioDefault2">
                               Once a week or less
                             </label>
                           </div>
                           <div class="form-check mb-3">
                             <input class="form-check-input" class="border-0" type="radio" name="flexRadioDefault" id="flexRadioDefault3" checked>
                             <label class="form-check-label fw-bold text-white" for="flexRadioDefault3">
                               Several times a week
                             </label>
                           </div>
                           <div class="form-check mb-3">
                             <input class="form-check-input" class="border-0" type="radio" name="flexRadioDefault" id="flexRadioDefault4" checked>
                             <label class="form-check-label fw-bold text-white" for="flexRadioDefault4">
                               Every day
                             </label>
                           </div>
                        </form>
                        <button type="button" class="btn btn-dark nxtbtn fs-5 py-1 px-4 rounded-0 d-table ms-auto mt-5 rounded-pill">Next</button>
                     </div>
                   </div>
                   <div class="tab-pane fade" id="v-pills-two" role="tabpanel" aria-labelledby="v-pills-two-tab" tabindex="0">
                     <div class="freqtbox p-5">
                        <h2 class="text-white mb-4">How frequently do you suffer from burning, itching or gritty eyes?</h2>
                        <form action="">
                           <div class="form-check mb-3">
                             <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                             <label class="form-check-label fw-bold text-white" for="flexRadioDefault1">
                               Rarely
                             </label>
                           </div>
                           <div class="form-check mb-3">
                             <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
                             <label class="form-check-label fw-bold text-white" for="flexRadioDefault2">
                               Once a week or less
                             </label>
                           </div>
                           <div class="form-check mb-3">
                             <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault3" checked>
                             <label class="form-check-label fw-bold text-white" for="flexRadioDefault3">
                               Several times a week
                             </label>
                           </div>
                           <div class="form-check mb-3">
                             <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault4" checked>
                             <label class="form-check-label fw-bold text-white" for="flexRadioDefault4">
                               Every day
                             </label>
                           </div>
                        </form>
                        <button type="button" class="btn btn-dark nxtbtn fs-5 py-1 px-4 rounded-0 d-table ms-auto mt-5 rounded-pill">Next</button>
                     </div>
                   </div>
                   <div class="tab-pane fade" id="v-pills-three" role="tabpanel" aria-labelledby="v-pills-three-tab" tabindex="0">
                     <div class="freqtbox p-5">
                        <h2 class="text-white mb-4">How frequently do you suffer from burning, itching or gritty eyes?</h2>
                        <form action="">
                           <div class="form-check mb-3">
                             <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                             <label class="form-check-label fw-bold text-white" for="flexRadioDefault1">
                               Rarely
                             </label>
                           </div>
                           <div class="form-check mb-3">
                             <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
                             <label class="form-check-label fw-bold text-white" for="flexRadioDefault2">
                               Once a week or less
                             </label>
                           </div>
                           <div class="form-check mb-3">
                             <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault3" checked>
                             <label class="form-check-label fw-bold text-white" for="flexRadioDefault3">
                               Several times a week
                             </label>
                           </div>
                           <div class="form-check mb-3">
                             <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault4" checked>
                             <label class="form-check-label fw-bold text-white" for="flexRadioDefault4">
                               Every day
                             </label>
                           </div>
                        </form>
                        <button type="button" class="btn btn-dark nxtbtn fs-5 py-1 px-4 rounded-0 d-table ms-auto mt-5 rounded-pill">Next</button>

                     </div>
                   </div>
                   <div class="tab-pane fade" id="v-pills-four" role="tabpanel" aria-labelledby="v-pills-four-tab" tabindex="0">
                     <div class="freqtbox p-5">
                        <h2 class="text-white mb-4">How frequently do you suffer from burning, itching or gritty eyes?</h2>
                        <form action="">
                           <div class="form-check mb-3">
                             <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                             <label class="form-check-label fw-bold text-white" for="flexRadioDefault1">
                               Rarely
                             </label>
                           </div>
                           <div class="form-check mb-3">
                             <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
                             <label class="form-check-label fw-bold text-white" for="flexRadioDefault2">
                               Once a week or less
                             </label>
                           </div>
                           <div class="form-check mb-3">
                             <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault3" checked>
                             <label class="form-check-label fw-bold text-white" for="flexRadioDefault3">
                               Several times a week
                             </label>
                           </div>
                           <div class="form-check mb-3">
                             <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault4" checked>
                             <label class="form-check-label fw-bold text-white" for="flexRadioDefault4">
                               Every day
                             </label>
                           </div>
                        </form>
                        <button type="button" class="btn btn-dark nxtbtn fs-5 py-1 px-4 rounded-0 d-table ms-auto mt-5 rounded-pill">Next</button>

                     </div>
                   </div>
                   <div class="tab-pane fade" id="v-pills-five" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">
                     <div class="freqtbox p-5">
                        <h2 class="text-white mb-4">How frequently do you suffer from burning, itching or gritty eyes?</h2>
                        <form action="">
                           <div class="form-check mb-3">
                             <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                             <label class="form-check-label fw-bold text-white" for="flexRadioDefault1">
                               Rarely
                             </label>
                           </div>
                           <div class="form-check mb-3">
                             <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
                             <label class="form-check-label fw-bold text-white" for="flexRadioDefault2">
                               Once a week or less
                             </label>
                           </div>
                           <div class="form-check mb-3">
                             <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault3" checked>
                             <label class="form-check-label fw-bold text-white" for="flexRadioDefault3">
                               Several times a week
                             </label>
                           </div>
                           <div class="form-check mb-3">
                             <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault4" checked>
                             <label class="form-check-label fw-bold text-white" for="flexRadioDefault4">
                               Every day
                             </label>
                           </div>
                        </form>
                        <button type="button" class="btn btn-dark nxtbtn fs-5 py-1 px-4 rounded-0 d-table ms-auto mt-5 rounded-pill">Next</button>

                     </div>
                   </div>
                 </div>
               </div>
            </div>
      </div>
   </div>
</section>


<section class="fqss space" style="background: url(<?php echo home_url(); ?>/wp-content/uploads/2023/03/optilight-elevating-bg.png); background-size: cover; background-position: center; background-repeat: no-repeat;">
   <div class="container">
      <div class="row">
         <div class="col-sm-12">
            <div class="card bg-light border-0 p-5">
               <h2 class="text-danger mb-4 text-center">FAQs</h2>
               <div class="tabgroup">
                  <div class="accordion" id="accordionExample">
				  <?php if( have_rows('faqs') ): $countslider = 1;
						 while( have_rows('faqs') ) : the_row();
						 $faqs_title_name = get_sub_field('faqs_title_name');
						 $faqs_content = get_sub_field('faqs_content');
					 ?>
                    <div class="accordion-item border-0 border-bottom border-danger bg-transparent rounded-0">
                      <h2 class="accordion-header border-0" id="headingOne">
                        <button class="accordion-button text-danger border-0 bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                         <?php echo $faqs_title_name; ?>
                        </button>
                      </h2>
                      <div id="collapse<?php echo $countslider; ?>" class="accordion-collapse collapse <?php if($countslider == 1) { ?> show <?php } ?>" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                        <div class="accordion-body bg-transparent">
                         <p><?php echo $faqs_content; ?></p>
                        </div>
                      </div>
                    </div>
					 <?php endwhile; endif; ?>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

<section class="optvdo space">
   <div class="container">
      <div class="row align-items-center">
         <div class="col-sm-3">
            <h2> <?php echo get_field('the_optilight_title_name'); ?></h2>
         </div>
         <div class="col-sm-9">
           <?php echo get_field('the_optilight_youtube'); ?>
         </div>
      </div>
   </div>
</section>


<?php 
get_footer();
?>


<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>