<?php
/*
   * Template Name: campaign Page
   */


get_header("home");

$header_text = get_field('header_text', $post->ID, true);
$header_image = get_field('header_image', $post->ID, true);
$header_tag_line = get_field('header_tag_line', $post->ID, true);
$product_sub_text = get_field('product_sub_text', $post->ID, true);


$header_part_1 = get_field('header_part_1', $post->ID, true);
$header_part_2 = get_field('header_part_2', $post->ID, true);
$header_part_3 = get_field('header_part_3', $post->ID, true);
$header_part_4 = get_field('header_part_4', $post->ID, true);
$header_part_5 = get_field('header_part_5', $post->ID, true);
$header_part_6 = get_field('header_part_6', $post->ID, true);

$header_array = array($header_part_1, $header_part_2, $header_part_3, $header_part_4, $header_part_5, $header_part_6);

//shuffle($header_array);
?>

<div id="homecontent" class="home-content campaign" style="border-top:14px #939598 solid;">
   <div style="max-width: 1018px;margin: auto;" class="header_tag_line"><?php echo  $header_tag_line; ?></div>

   <div class="campaign-head">
      <?php
      $index = 0;
      foreach ($header_array as $header_id) {
         $header_part_text = get_field('home_text', $header_id, true);
         $header_part_image = get_field('header_image', $header_id, true);
         $header_part_colour = get_field('header_colour', $header_id, true);
         $header_part_title = get_the_title($header_id);
         ?>

         <div class="item">
            <div class="carousel-column campaign">
               <div class="head-image" style="background-image:url(<?php echo  $header_part_image['url']; ?> ); border-top-color:rgba(<?php echo $header_part_colour; ?>, 1); width: 341px !important; height: 388px !important;">
                  <a class="cta campaign" href="<?php echo get_permalink($header_id); ?>/#quiz">Take the <?php echo  $header_part_title; ?> quiz</a>
               </div>

            </div>

         </div>
      <?php $index++;
      } ?>
   </div>







   <div class="body-padding">
      <div class="hr"></div>

      <div class="row results find-a-broker-header campaign" style="margin-top: -40px;">
         <div class="find-a-broker-form">
            <h1>find a broker</h1>
            <p>Please fill out the form below to find the brokers and agents closest to you.</p>
            <?php echo do_shortcode('[contact-form-7 id="32752" title="Find A Broker"]'); ?>
         </div>
      </div>
      <div class="hr"></div>
      <div class="row results find-a-broker-header campaign" style="margin-top: -40px;">
         <?php get_template_part('loop', 'page'); ?>
      </div>



      <script>
         jQuery(document).ready(function($) {
            var ajaxscript = {
               ajax_url: '//' + window.location.host + '/wp-admin/admin-ajax.php'
            }
            var noResults;
            $('#myTopnav').replaceWith('<a href="#find-broker" class="wpcf7-submit campaign">FIND A BROKER</a>');
            $('form:first').removeAttr('action');
            $('form:first').attr('id', 'find-broker');
            $("#wpsl-search-wrap").find('form').attr('id', 'wpsl-search');
            $('#wpsl-gmap').hide();


            $("#find-broker").on("submit", function(event) {
               event.preventDefault();

               $('#contact-me-div').remove();
               var good = false;
               setTimeout(function() {
                  if ($('#find-broker').hasClass('invalid')) {

                     $('.wpcf7-not-valid').each(function() {

                        $(this).parent().parent().find('label').addClass('qsm-error-message');

                     });




                  } else {

                     jQuery.ajax({
                        url: ajaxscript.ajax_url,
                        method: "POST",
                        data: {
                           action: 'check_postal',
                           postal: $("input[name='your-postal']").val(),

                        },
                        beforeSend: function(xhr) {

                        },
                        success: function(response) {
                           console.log(response.data.results);

                           if (response.data.results == 'good') {
                              good = true;




                              var postal = $("input[name='your-postal']").val();



                              $('#wpsl-search-input').val(postal);
                              $('#name-enterd').empty().text($("input[name='your-name']").val());
                              $('#email-enterd').empty().text($("input[name='your-email']").val());
                              $('#phone-enterd').empty().text($("input[name='your-phone']").val());

                              $('#postal-enterd').empty().text(postal);


                              setTimeout(function() {
                                 $('#wpsl-search-btn').click();
                                 $(".remove").remove();
                                 $('.h1').remove();
                                 $('.hr').remove();
                              }, 500);
                              $('.remove').remove();
                              noResults = setInterval(myNoResultsTimer, 1000);

                           } else {
                              $('.remove').remove();
                              $('article').prepend('<div class="remove h1">Thanks for your interest.</div>');
                              $('article').append('<div class="remove"> We’re unable to help you at this time. </div>');
                              $('.h1').show();
                           }

                           $('#wpsl-search-btn').on("click", function(event) {
                              if (good) {


                                 setTimeout(function() {

                                    if ($('input[type=email][name=your-email]').val() != "") {
                                       $('input[type=radio][name=broker]').change(function() {
                                          $('.blue_button').removeClass('disabled').removeAttr('disabled');

                                          var elmnt = document.getElementById("contact-box");
                                          elmnt.scrollIntoView({
                                             behavior: 'smooth',
                                             block: 'center'
                                          });
                                       });
                                    } else {

                                       $('input[type=radio][name=broker]').change(function() {
                                          $('.wpcf7-submit').remove();
                                          $('.find-a-broker-form').removeAttr('method');
                                          $('.find-a-broker-form p').first().replaceWith('<p>Please include your contact information to be contacted by a broker.</p>');
                                          if (!$('#contact')[0]) {
                                             $('#find-broker').after('<div style="margin-top: -20px !important;"  id="contact"><div style="margin-left: 150px !important;margin-bottom:20px;" name="mlw_error_message_bottom" id="mlw_error_message_bottom" class="qsm-error-message qmn_error_message_section qmn_error_message">Please enter an email!</div><input type="submit" id="contact" class="blue_button disabled" value="CONTACT ME" disabled></div>');
                                          }
                                          $('input[type=email][name=your-email]').change(function() {
                                             $('.blue_button').removeClass('disabled').removeAttr('disabled');
                                          });

                                          $('#contact').click(function() {
                                             if (!validateEmail($('input[type=email][name=your-email]').val())) {
                                                $('.blue_button').addClass('disabled').attr('disabled');
                                                $('input[type=email][name=your-email]').parent().parent().find('label').addClass('qsm-error-message');
                                             } else {
                                                $('#name-enterd').empty().text($("input[name='your-name']").val());
                                                $('#email-enterd').empty().text($("input[name='your-email']").val());
                                                $('#phone-enterd').empty().text($("input[name='your-phone']").val());
                                                $('#postal-enterd').empty().text($("input[name='your-postal']").val());
                                                $('#contact-me').click();
                                             }
                                          });

                                          $([document.documentElement, document.body]).animate({
                                             scrollTop: $("#find-broker").offset().top - 200
                                          }, 1000);

                                          $('.wpcf7-submit').hide();
                                       });




                                    }
                                 }, 2000);


                                 $('#wpsl-result-list').wrap('<form id="contact_broker_list"></form>');
                                 setTimeout(function() {

                                    if ($('.no-results')[0]) {

                                    } else {

                                       $('#contact-box').empty();
                                       if ($('input[type=email][name=your-email]').val() != "") {

                                          $('#contact-box').append('<div class="remove"><br/><p>You may call any of the Brokers above or simply click the button below and your selected Broker will contact you as soon as possible.</p><input type="submit" class="blue_button disabled" value="CONTACT ME" disabled></div>');
                                       } else {
                                          $('#contact-box').append('<div id="contact-me-div"><p>You may call any of the Brokers above or simply click the button below and your selected Broker will contact you as soon as possible.</p><input  id="contact-me" type="submit" class="blue_button" value="CONTACT ME"></div>');
                                       }
                                       $('label').attr('tabindex', '0');


                                    }
                                 }, 1000);
                                 $("#contact_broker_list").on("submit", function(event) {
                                    event.preventDefault();
                                    $('#exampleModalLong').modal('show');
                                    var brokerid = $('input[name=broker]:checked').val();
                                    $('#broker-chosen-name').empty().append($('li[data-store-id="' + brokerid + '"]').find('.location_name').html());
                                    $('#broker-chosen-info').empty().append($('li[data-store-id="' + brokerid + '"]').find('.address').html());
                                    sendEmail();
                                    return false;
                                 });

                              }
                           });

                        }
                     });


                  }
               }, 500);
            })
            $('#exampleModalLong').on('hidden.bs.modal', function() {
               window.location.replace("<?php echo get_home_url(); ?>");
            });


            function sendEmail() {

               var ajaxscript = {
                  ajax_url: '//' + window.location.host + '/wp-admin/admin-ajax.php'
               }
               jQuery.ajax({
                  url: ajaxscript.ajax_url,
                  method: "POST",
                  data: {
                     action: 'tz_find_contact_broker',
                     name: $("input[name='your-name']").val(),
                     email: $("input[name='your-email']").val(),
                     phone: $("input[name='your-phone']").val(),
                     postal: $("input[name='your-postal']").val(),
                     brokerId: $('input[name=broker]:checked').val()
                  },
                  beforeSend: function(xhr) {

                  },
                  success: function(response) {
                     console.log(response);
                     localStorage.removeItem("<?php echo $result[0]->quiz_name; ?>_id");

                  }
               })
            }


            function validateEmail($email) {
               var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
               return emailReg.test($email);
            }




            function myNoResultsTimer() {
               console.log('run');
               console.log($('#wpsl-stores > ul'));

               if ($('#wpsl-stores > ul > li').length > 0 && !$('#wpsl-stores > ul > li').hasClass('wpsl-preloader')) {
                  if ($('.no-results')[0]) {

                     $('.no-results').text('You’ve entered a postal code that is outside our service area.');
                     $('.no-results').show();
                     $('article').prepend('<div class="remove h1">Sorry we can’t help at this time.</div>');
                     $('.h1').show();
                     clearInterval(noResults);
                     console.log('stop 1');
                  } else {

                     $('article').prepend('<div class="remove"><div class="hr"></div><div class="h1">PLEASE SELECT A BROKER/AGENT NEAREST YOU</div></div>');
                     $('.h1').show();
                     clearInterval(noResults);
                     console.log('stop 2');
                  }
               }
            }

         });
      </script>
      <div class="modal fade " id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
         <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                  </button>
                  <h5 class="modal-title" id="exampleModalLongTitle">Thank you for your request.</h5>

               </div>
               <div class="modal-body">
                  <p> You will be contacted shortly about your insurance needs by:</p>
                  <br />
                  <div id="broker-chosen-name">


                  </div>
                  <div id="broker-chosen-info">


                  </div>
                  <p>Via the contact information you provided below:</p>

                  <table>
                     <col width="150">
                     <col width="80">
                     <tr>
                        <td>NAME:</td>
                        <td id="name-enterd"> </td>
                     </tr>
                     <tr>
                        <td>EMAIL:</td>
                        <td id="email-enterd"> </td>
                     </tr>
                     <tr>
                        <td>PHONE NUMBER:</td>
                        <td id="phone-enterd"> </td>
                     </tr>
                     <tr>
                        <td>POSTAL CODE:</td>
                        <td id="postal-enterd"></td>
                     </tr>

                  </table>
               </div>

            </div>
         </div>
      </div>
   </div>
   <?php wp_reset_query(); ?>

   <?php get_footer(); ?>

</div>
</div>



<script>
   jQuery(function($) {

      $('#carousel').carousel({
         interval: 6000,
         pause: "false"
      });

      $('#playButton').click(function() {
         $('#carousel').carousel('cycle');
      });
      $('#pauseButton').click(function() {
         $('#carousel').carousel('pause');
      });

      setTimeout(function() {

         $('#carouselButtons').hide();
         $('#pauseButton').click();
         if ($(window).width() < 768) {
            $("#carousel").swiperight(function() {
               $(this).carousel('prev');
            });
            $("#carousel").swipeleft(function() {
               $(this).carousel('next');
            });
         };
         if ($(window).width() > 1350) {
            // $('#pauseButton').click();
            //  console.log('pause');
            // $('#carouselButtons').hide();
            $('.carousel-control a').attr('tabindex', '-1');
         } else {
            //  console.log('play');
            //  $('#playButton').click();
            //  $('#carouselButtons').show();
            $('.carousel-control a').attr('tabindex', '0');
         };


      }, 1000);



      $('.head-image').attr('tabindex', '0');

   });
</script>

<?php wp_reset_query(); ?>
<style>
   @media (max-width: 767px) {
      #otherpage-logo {
         width: 30%;
      }

      #new-page-logo {
         margin-left: 0px;
         margin-top: 20px;
      }

   }

   #mobile-menu-btn {
      display: none;
   }

   #myTopnav {
      display: none;
   }

   #new-footer {
      display: none;
   }

   .h1,
   #contact-me-div,
   #wpsl-search-wrap {
      display: none;
   }

   #wpsl-wrap.wpsl-store-below #wpsl-result-list li {
      padding: 10px 10px 10px 10px;
   }
</style>
<?php get_footer(); ?>