<?php
if (isset($_POST['vehicle'])) {
  // Submit form
  $data = array();
  $data['vehicle'] = is_array($_POST['vehicle']) ? implode(', ', $_POST['vehicle']) : $_POST['vehicle'];
  $data['brands'] = is_array($_POST['brands']) ? implode(', ', $_POST['brands']) : $_POST['brands'];
  $data['features'] = is_array($_POST['features']) ? implode(', ', $_POST['features']) : $_POST['features'];
  $data['custom-feature'] = $_POST['custom-feature'];
  $data['colors'] = is_array($_POST['colors']) ? implode(', ', $_POST['colors']) : $_POST['colors'];
  $data['custom-color'] = $_POST['custom-color'];
  $data['first-name'] = $_POST['first-name'];
  $data['last-name'] = $_POST['last-name'];
  $data['email'] = $_POST['email'];
  $data['phone'] = $_POST['phone'];

  // Send email
  wp_mail('leads@mvpns.ca, leadfunneler@atlanticstudio.ca', 'Extended Lead From MVPNS Website', "
Vehicles: {$data['vehicle']}
Brands: {$data['brands']}
Features: {$data['features']}
Custom feature: {$data['custom-feature']}
Colors: {$data['colors']}
Custom color: {$data['custom-color']}
First name: {$data['first-name']}
Last name: {$data['last-name']}
Email: {$data['email']}
Phone: {$data['phone']}
", "From: MVPNS Website <noreply@mvpns.ca>");

  // Redirect
  wp_redirect(get_site_url().'/thank-you-walkthrough-exp-form/');
  exit;
}

get_header(); ?>
<section class="walkthrough-section">
  <p><small>Car Shopping &amp; Builder Tool</small></p>
  <h1>Let's customize your next vehicle.</h1>
  <form method="post">
  <ol class="walkthrough">
    <li class="walkthrough-step">
      <h2>What types of vehicles are you interested in?</h2>
      <ul class="walkthrough-vehicles">
        <li>
          <label>
            <span class="control-checkbox"><input type="checkbox" name="vehicle[]" value="Suv"<?php if(isset($_GET['vehicle']) && $_GET['vehicle'] == 'suv') echo ' checked'; ?>><i></i></span>
            <div class="vehicle">
              <img src="<?= get_template_directory_uri(); ?>/img/vehicle-suv.jpg" alt="Suv">
              <strong>SUVs</strong>
            </div>
          </label>
        <li>
          <label>
            <span class="control-checkbox"><input type="checkbox" name="vehicle[]" value="Van"<?php if(isset($_GET['vehicle']) && $_GET['vehicle'] == 'van') echo ' checked'; ?>><i></i></span>
            <div class="vehicle">
              <img src="<?= get_template_directory_uri(); ?>/img/vehicle-van.jpg" alt="Van">
              <strong>Vans</strong>
            </div>
          </label>
        <li>
          <label>
            <span class="control-checkbox"><input type="checkbox" name="vehicle[]" value="Car"<?php if(isset($_GET['vehicle']) && $_GET['vehicle'] == 'car') echo ' checked'; ?>><i></i></span>
            <div class="vehicle">
              <img src="<?= get_template_directory_uri(); ?>/img/vehicle-car.jpg" alt="Car">
              <strong>Cars</strong>
            </div>
          </label>
        <li>
          <label>
            <span class="control-checkbox"><input type="checkbox" name="vehicle[]" value="Truck"<?php if(isset($_GET['vehicle']) && $_GET['vehicle'] == 'truck') echo ' checked'; ?>><i></i></span>
            <div class="vehicle">
              <img src="<?= get_template_directory_uri(); ?>/img/vehicle-truck.jpg" alt="Truck">
              <strong>Trucks</strong>
            </div>
          </label>
      </ul>
      <div class="walkthrough-navi">
        <div class="error-holder"></div>
        <button class="button-alt js-walkthrough-next">Next <img src="<?= get_template_directory_uri(); ?>/img/walkthrough-arrow-next.svg" alt=""> Preferred Brands</button>
      </div>
      <p><small>(Don't worry, you can change your mind about the kind of vehicle you want later.)</small></p>
    <li class="walkthrough-step">
      <h2>Are you interested in any specific brands?</h2>
      <ul class="walkthrough-brands">
        <li>
          <label>
            <img src="<?= get_template_directory_uri(); ?>/img/brand-honda.svg" alt="Honda Logo">
            <strong>Honda</strong>
            <span class="control-checkbox"><input type="checkbox" name="brands[]" value="Honda"><i></i></span>
          </label>
        <li>
          <label>
            <img src="<?= get_template_directory_uri(); ?>/img/brand-hyundai.svg" alt="Hyundai Logo">
            <strong>Hyundai</strong>
            <span class="control-checkbox"><input type="checkbox" name="brands[]" value="Hyundai"><i></i></span>
          </label>
        <li>
          <label>
            <img src="<?= get_template_directory_uri(); ?>/img/brand-nissan.svg" alt="Nissan Logo">
            <strong>Nissan</strong>
            <span class="control-checkbox"><input type="checkbox" name="brands[]" value="Nissan"><i></i></span>
          </label>
        <li>
          <label>
            <img src="<?= get_template_directory_uri(); ?>/img/brand-volkswagen.svg" alt="Volkswagen Logo">
            <strong>Volkswagen</strong>
            <span class="control-checkbox"><input type="checkbox" name="brands[]" value="Volkswagen"><i></i></span>
          </label>
        <li>
          <label>
            <img src="<?= get_template_directory_uri(); ?>/img/brand-chevrolet.svg" alt="Chevrolet Logo">
            <strong>Chevrolet</strong>
            <span class="control-checkbox"><input type="checkbox" name="brands[]" value="Chevrolet"><i></i></span>
          </label>
        <li>
          <label>
            <img src="<?= get_template_directory_uri(); ?>/img/brand-ford.svg" alt="Ford Logo">
            <strong>Ford</strong>
            <span class="control-checkbox"><input type="checkbox" name="brands[]" value="Ford"><i></i></span>
          </label>
        <li>
          <label>
            <img src="<?= get_template_directory_uri(); ?>/img/brand-bmw.svg" alt="Bmw Logo">
            <strong>Bmw</strong>
            <span class="control-checkbox"><input type="checkbox" name="brands[]" value="Bmw"><i></i></span>
          </label>
        <li>
          <label>
            <img src="<?= get_template_directory_uri(); ?>/img/brand-toyota.svg" alt="Toyota Logo">
            <strong>Toyota</strong>
            <span class="control-checkbox"><input type="checkbox" name="brands[]" value="Toyota"><i></i></span>
          </label>
        <li>
          <label>
            <img src="<?= get_template_directory_uri(); ?>/img/brand-kia.svg" alt="Kia Logo">
            <strong>Kia</strong>
            <span class="control-checkbox"><input type="checkbox" name="brands[]" value="Kia"><i></i></span>
          </label>
        <li>
          <label>
            <img src="<?= get_template_directory_uri(); ?>/img/brand-mazda.svg" alt="Mazda Logo">
            <strong>Mazda</strong>
            <span class="control-checkbox"><input type="checkbox" name="brands[]" value="Mazda"><i></i></span>
          </label>
        <li>
          <label>
            <img src="<?= get_template_directory_uri(); ?>/img/brand-other.svg" alt="Other">
            <strong>Other</strong>
            <span class="control-checkbox"><input type="checkbox" name="brands[]" value="Other"><i></i></span>
          </label>
        <li>
          <label>
            <strong>No preference</strong>
            <span class="control-checkbox"><input type="checkbox" name="brands[]" value="No preference"><i></i></span>
          </label>
      </ul>
      <div class="walkthrough-navi">
        <div class="error-holder"></div>
        <button class="button-alt-outline js-walkthrough-back">Back</button>
        <button class="button-alt js-walkthrough-next">Next <img src="<?= get_template_directory_uri(); ?>/img/walkthrough-arrow-next.svg" alt=""> Vehicle Options</button>
      </div>
      <p><small>Select as many as you want. We'll provide several options to match your favorite models.</small></p>
    <li class="walkthrough-step">
      <h2>What features are important to you in your next vehicle?</h2>
      <ul class="walkthrough-options">
        <li><label><span class="control-checkbox badge"><input type="checkbox" name="features[]" value="Remote Start"><i>Remote Start</i></span></label>
        <li><label><span class="control-checkbox badge"><input type="checkbox" name="features[]" value="Keyless Entry"><i>Keyless Entry</i></span></label>
        <li><label><span class="control-checkbox badge"><input type="checkbox" name="features[]" value="Sunroof"><i>Sunroof</i></span></label>
        <li><label><span class="control-checkbox badge"><input type="checkbox" name="features[]" value="Warranty"><i>Warranty</i></span></label>
        <li><label><span class="control-checkbox badge"><input type="checkbox" name="features[]" value="Bluetooth"><i>Bluetooth</i></span></label>
        <li><label><span class="control-checkbox badge"><input type="checkbox" name="features[]" value="Remote Start"><i>Remote Start</i></span></label>
        <li><label><span class="control-checkbox badge"><input type="checkbox" name="features[]" value="Keyless Entry"><i>Keyless Entry</i></span></label>
        <li><label><span class="control-checkbox badge"><input type="checkbox" name="features[]" value="Sunroof"><i>Sunroof</i></span></label>
        <li><label><span class="control-checkbox badge"><input type="checkbox" name="features[]" value="Warranty"><i>Warranty</i></span></label>
        <li><label><span class="control-checkbox badge"><input type="checkbox" name="features[]" value="Bluetooth"><i>Bluetooth</i></span></label>
        <li><label><span class="control-checkbox badge"><input type="checkbox" name="features[]" value="Remote Start"><i>Remote Start</i></span></label>
        <li><label><span class="control-checkbox badge"><input type="checkbox" name="features[]" value="Keyless Entry"><i>Keyless Entry</i></span></label>
        <li><label><span class="control-checkbox badge"><input type="checkbox" name="features[]" value="Sunroof"><i>Sunroof</i></span></label>
        <li><label><span class="control-checkbox badge"><input type="checkbox" name="features[]" value="Warranty"><i>Warranty</i></span></label>
        <li><label><span class="control-checkbox badge"><input type="checkbox" name="features[]" value="Bluetooth"><i>Bluetooth</i></span></label>
      </ul>
      <p class="extra-options">Another feature not listed here? Tell us!: <input type="text" name="custom-feature" placeholder="eg: Underwater Snorkel"></p>
      <div class="walkthrough-navi">
        <div class="error-holder"></div>
        <button class="button-alt-outline js-walkthrough-back">Back</button>
        <button class="button-alt js-walkthrough-next">Next <img src="<?= get_template_directory_uri(); ?>/img/walkthrough-arrow-next.svg" alt=""> Vehicle Options</button>
      </div>
      <p><small>Select as many as you want. We'll provide several options to match your favorite models.</small></p>
    <li class="walkthrough-step">
      <h2>What features are important to you in your next vehicle?</h2>
      <ul class="walkthrough-options size-sm">
        <li><label><span class="control-checkbox badge color-white"><input type="checkbox" name="colors[]" value="White"><i>White</i></span></label>
        <li><label><span class="control-checkbox badge color-silver"><input type="checkbox" name="colors[]" value="Silver"><i>Silver</i></span></label>
        <li><label><span class="control-checkbox badge color-black"><input type="checkbox" name="colors[]" value="Black"><i>Black</i></span></label>
        <li><label><span class="control-checkbox badge color-grey"><input type="checkbox" name="colors[]" value="Grey"><i>Grey</i></span></label>
        <li><label><span class="control-checkbox badge color-blue"><input type="checkbox" name="colors[]" value="Blue"><i>Blue</i></span></label>
        <li><label><span class="control-checkbox badge color-red"><input type="checkbox" name="colors[]" value="Red"><i>Red</i></span></label>
        <li><label><span class="control-checkbox badge color-green"><input type="checkbox" name="colors[]" value="Green"><i>Green</i></span></label>
        <li><label><span class="control-checkbox badge color-orange"><input type="checkbox" name="colors[]" value="Orange"><i>Orange</i></span></label>
      </ul>
      <p class="extra-options">Searching for a color not listed?? Tell us!: <input type="text" name="custom-color" placeholder="eg: Seafoam Green"></p>
      <div class="walkthrough-navi">
        <div class="error-holder"></div>
        <button class="button-alt-outline js-walkthrough-back">Back</button>
        <button class="button-alt js-walkthrough-next">Next <img src="<?= get_template_directory_uri(); ?>/img/walkthrough-arrow-next.svg" alt=""> Tell us about you</button>
      </div>
      <p><small>Select as many as you want. We'll provide several options to match your favorite models.</small></p>
    <li class="walkthrough-step">
      <h2>Tell us about yourself</h2>
      <div class="fields-container">
        <div class="field size-xl">
          <label class="form-label">First name</label>
          <input type="text" name="first-name" required>
        </div>
        <div class="field size-xl">
          <label class="form-label">Last name</label>
          <input type="text" name="last-name" required>
        </div>
      </div>
      <div class="walkthrough-navi">
        <div class="error-holder"></div>
        <button class="button-alt-outline js-walkthrough-back">Back</button>
        <button class="button-alt js-walkthrough-next"><img src="<?= get_template_directory_uri(); ?>/img/walkthrough-arrow-next.svg" alt=""> Confirm</button>
      </div>
      <p><small>Select as many as you want. We'll provide several options to match your favorite models.</small></p>
    <li class="walkthrough-step">
      <h2>Where should we send your new vehicle options we've found for you?</h2>
      <div class="fields-container">
        <div class="field size-xl">
          <label class="form-label">Email</label>
          <input type="email" name="email" required>
        </div>
        <div class="field size-xl">
          <label class="form-label">Phone</label>
          <input type="tel" name="phone" required>
        </div>
      </div>
      <div class="walkthrough-navi">
        <div class="error-holder"></div>
        <button class="button-alt-outline js-walkthrough-back">Back</button>
        <button class="button-alt js-walkthrough-next"><img src="<?= get_template_directory_uri(); ?>/img/walkthrough-arrow-next.svg" alt=""> Confirm</button>
      </div>
      <p><small>Select as many as you want. We'll provide several options to match your favorite models.</small></p>
  </ol>
  </form>
</section>
<?php get_footer(); ?>
