<?php
get_header(); ?>

<div class="wrap single-merchandise">
  <div class="container-fluid">
    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

      <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
      <?php $description = $product->get_description();?>

        <section class="SinglePage boxsection">
          <div class="row">
            <div class="col-md-12">

              <div class="buttons">
                <div class="leftSection">
                  <div class="backbtn">
                    <a href="<?php echo get_home_url() ?>"><i class="fa fa-arrow-left"></i> Back to Plans</a>
                  </div>
                </div>

                <div class="rightSection">
                  <a class="primaryBtn" href="<?php echo get_field('product_button_link'); ?>" target="_blank">Buy Now</a>
                </div>
              </div>

              
            </div>
          </div>
         <div class="row">
           <div class="col-md-12">
             <div class="topOverview">
               <div class="featured">
                   <div class="thumbnail">
                       <img src="<?php the_post_thumbnail_url('full') ?>" alt=" <?php the_title(); ?> ">
                   </div>
                   <h3> <?php the_title(); ?> </h3>
                   <div class="shortDesc">
                     <?php echo $description; ?>
                   </div>
                   <div class="headTitle">
                       <div class="pricing"><?php the_field('product_price'); ?></div>
                   </div>
               </div>
             </div>
           </div>
         </div>
         </section>



         <div class="row">
           <div class="col-md-6">

            <!-- highlights section -->
             <div class="highlights boxsection">
              <div class="title">Highlights</div>
              <div id="owl-demo" class="owl-carousel highlightsSlider">
               <?php $campaign_section_box = get_field('campaign_section_box'); 
                foreach ($campaign_section_box as $Items) { ?>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="items">
                        <div class="thumbnail">
                          <?php 
                          if ($Items['campaign_image']) { ?>
                             <img src="<?php echo $Items['campaign_image'];  ?>" alt="<?php the_title(); ?>">
                           <?php } else { ?>
                              <img src="<?php echo get_template_directory_uri() ?>/images/highlights.png" alt="<?php the_title(); ?>">
                          <?php } ?>                          
                        </div>
                        <div class="except">
                           <div class="highTitle"><?php echo $Items['campaign_title']; ?></div>
                           <div class="except"><?php echo $Items['campaign_short_description']; ?></div>
                        </div>
                      </div>
                    </div>
                  </div>
                <?php } ?>
                </div> <!-- owl-carousel -->
             </div>
             <!-- highlights section -->

             <!-- GALLERY section -->
             <div class="galleries boxsection">
              <div class="title">Gallery</div>
              <div id="owl-demo" class="owl-carousel gallerySlider">
               <?php $gallery_box_area = get_field('gallery_box_area'); 
                foreach ($gallery_box_area as $gall) { ?>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="items">
                        <div class="thumbnail">
                          <?php 
                          if ($gall['gallery_image']) { ?>
                             <img src="<?php echo $gall['gallery_image'];  ?>" alt="<?php the_title(); ?>">
                           <?php } else { ?>
                              <img src="<?php echo get_template_directory_uri() ?>/images/highlights.png" alt="<?php the_title(); ?>">
                          <?php } ?>                          
                        </div>
                        <div class="except">
                           <div class="highTitle"><?php echo $gall['gallery_title']; ?></div>
                           <div class="except"><?php echo $gall['gallery_description']; ?></div>
                        </div>
                      </div>
                    </div>
                  </div>
                <?php } ?>
                </div> <!-- owl-carousel -->
             </div>
             <!-- GALLERY section -->

             <!-- REVIEWS section -->
             <div class="reviews boxsection">
              <div class="title">Verified Reviews</div>
              <div id="owl-demo" class="owl-carousel reviewsSlider">
               <?php $verified_reviews_box_area = get_field('verified_reviews_box_area'); 
                foreach ($verified_reviews_box_area as $rev) { ?>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="items">
                        <div class="thumbnail">
                          <?php 
                          if ($rev['person_image']) { ?>
                             <img src="<?php echo $rev['person_image'];  ?>" alt="<?php the_title(); ?>">
                           <?php } else { ?>
                              <img src="<?php echo get_template_directory_uri() ?>/images/highlights.png" alt="<?php the_title(); ?>">
                          <?php } ?>                          
                        </div>
                        <div class="except">
                           <div class="highTitle"><?php echo $rev['person_name']; ?></div>
                           <div class="except"><?php echo $rev['person_review']; ?></div>
                        </div>
                      </div>
                    </div>
                  </div>
                <?php } ?>
                </div> <!-- owl-carousel -->
             </div>
             <!-- REVIEWS section -->





           </div>
           <div class="col-md-6">

            <!-- inforMation -->
            <section class="inforMation boxsection">
              <div class="title">Information</div>
              <div class="row">
                <div class="col-md-12">
                  <?php echo get_field('describe_ads_information');?>
                </div>
              </div>
            </section>
            <!-- inforMation -->

            <!-- casestudies section -->
            <div class="casestudies boxsection">
             <div class="title">Case Studies</div>
             <div id="owl-demo" class="owl-carousel casestudiesSlider">
              <?php $case_studies_box_area = get_field('case_studies_box_area'); 
               foreach ($case_studies_box_area as $case) { ?>
                 <div class="row">
                   <div class="col-md-12">
                     <div class="items">
                       <div class="thumbnail">
                        <a href="<?php echo $case['case_studies_pdf']; ?>#toolbar=0" target="_blank">
                          <img src="<?php echo get_template_directory_uri() ?>/images/icon-pdf.webp" alt="<?php the_title(); ?>">
                        </a>
                       </div>
                       <div class="except">
                          <div class="highTitle"><?php echo $case['case_studies_title']; ?></div>
                          <div class="except"><?php echo $case['case_studies_description']; ?></div>
                       </div>
                     </div>
                   </div>
                 </div>
               <?php } ?>
               </div> <!-- owl-carousel -->
            </div>
            <!-- casestudies section -->

            <!-- faqsection section -->
            <section class="faqsection boxsection">
              <div class="title">FAQ</div>
               <accordion>
                  <div class="accordion-container">
                     <?php
                        $faq_box_area = get_field('faq_box_area');
                        
                        foreach($faq_box_area as $faq) { ?>
                     <div class="set">
                        <a href="javascript:void(0)">
                        <?php echo $faq['faq_title']; ?>
                        </a>
                        <div class="content">
                           <?php echo $faq['faq_content']; ?>
                        </div>
                     </div>
                     <?php } ?>
                  </div>
               </accordion>
            </section>
            <!-- faqsection section -->

            


           </div> <!-- END RIGHT col-md-6 -->
         </div> <!-- MAIN ROW END -->
      </div><!-- #post-## -->

      

    <?php endwhile; // end of the loop. ?>
  </div>
  <!-- #content --> 
</div>
<!-- #container -->
<?php get_footer(); ?>