<?php
global $wpdb;

function get_client_ip() {
    $ipaddress = '';
    if (isset($_SERVER['HTTP_CLIENT_IP']))
        $ipaddress = $_SERVER['HTTP_CLIENT_IP'];
    else if (isset($_SERVER['HTTP_X_FORWARDED_FOR']))
        $ipaddress = $_SERVER['HTTP_X_FORWARDED_FOR'];
    else if (isset($_SERVER['HTTP_X_FORWARDED']))
        $ipaddress = $_SERVER['HTTP_X_FORWARDED'];
    else if (isset($_SERVER['HTTP_FORWARDED_FOR']))
        $ipaddress = $_SERVER['HTTP_FORWARDED_FOR'];
    else if (isset($_SERVER['HTTP_FORWARDED']))
        $ipaddress = $_SERVER['HTTP_FORWARDED'];
    else if (isset($_SERVER['REMOTE_ADDR']))
        $ipaddress = $_SERVER['REMOTE_ADDR'];
    else
        $ipaddress = 'UNKNOWN';
    return $ipaddress;
}

// Create sesion ID
if (!isset($_SESSION['submission_id'])) {
    $wpdb->query($wpdb->prepare("INSERT INTO submissions SET date_created = " . time()));
    $id = $wpdb->insert_id;
    $_SESSION['submission_id'] = $id;
}

// Create sesion ID

function syncMailchimp($data, $fields) {
    $apiKey = '7ff1cadca9bcb77561aec48cfbf9eeab-us16';
    $listId = 'b389cd2305';

    $memberId = md5(strtolower($data['email']));
    $dataCenter = substr($apiKey, strpos($apiKey, '-') + 1);
    $url = 'https://' . $dataCenter . '.api.mailchimp.com/3.0/lists/' . $listId . '/members/' . $memberId;
    $json = json_encode([
        'email_address' => $data['email'],
        'status' => $data['status'], // "subscribed","unsubscribed","cleaned","pending"
        'merge_fields' => $fields
    ]);

    $ch = curl_init($url);
    curl_setopt($ch, CURLOPT_USERPWD, 'user:' . $apiKey);
    curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_TIMEOUT, 10);
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'PUT');
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $json);

    $result = curl_exec($ch);
    $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    return $httpCode;
}

// Submit form logic
function submit_form($submission) {
    if ($submission['email']) {
        $mail_to = 'leads@mvpns.ca,leadfunneler@atlanticstudio.ca';
    
        $headers = "From: MVPNS Website <noreply@mvpns.ca> \r\n";
        mail($mail_to, 'Full Lead From MVPNS Website2 <noreply@mvpns.ca>', "
    Vehicle: {$submission['vehicle']}
    Budget: {$submission['budget']}
    Birthdate: {$submission['birthdate']}
    Address: {$submission['address']}
    City: {$submission['city']}
    Province: {$submission['province']}
    Postal code: {$submission['postal-code']}
    Living at address for: {$submission['current-address-years']} years and {$submission['current-address-months']} months
    Employment status: {$submission['employment-status']}
    First name: {$submission['first-name']}
    Last name: {$submission['last-name']}
    Email: {$submission['email']}
    Phone: {$submission['phone']}
    Income: {$submission['income']}
    Receiving this income for: {$submission['income-years']} years and {$submission['income-months']} months
    ", $headers);
        // Mailchimp submit
        $fields = array(
            'FNAME' => $submission['first-name'],
            'LNAME' => $submission['last-name'],
            'BDAY' => $submission['birthdate'],
            'PHONE' => $submission['phone'],
            'ADDRESS' => $submission['address'],
            'VEHICLE' => $submission['vehicle'],
            'BUDGET' => $submission['budget'],
            'CITY' => $submission['city'],
            'PROVINCE' => $submission['province'],
            'POSTALCODE' => $submission['postal-code'],
            'CURRENTADD' => $submission['current-address-years'] .' years and'. $submission['current-address-months'] .' months',
            'EMPLOYED' => $submission['employment-status'],
            'INCOME' => $submission['income'],
            'CURRENTJOB' => $submission['income-years'].' years and'.$submission['income-months']. ' months',
            'IP' => get_client_ip()
        );
        $data = array(
            'email' => $submission['email'],
            'status' => 'subscribed',
        );
        syncMailchimp($data, $fields);

        $submission_id = $_SESSION['submission_id'];
        $status_arr2 = array('status' => 1);
        global $wpdb;
        $wpdb->update('submissions', $status_arr2, array('id' => $submission_id));
        $_SESSION['submission_id'] = null;

    }
    exit;
}

// Submission data
if (isset($_POST['email'])) {
    // Submit form
    $data = array();
    $data['vehicle'] = isset($_POST['vehicle']) ? $_POST['vehicle'] : '';
    $data['budget'] = isset($_POST['budget']) ? $_POST['budget'] : '';
    $data['birthdate'] = isset($_POST['birthdate']) ? $_POST['birthdate'] : '';
    $data['address'] = isset($_POST['address']) ? $_POST['address'] : '';
    $data['city'] = isset($_POST['city']) ? $_POST['city'] : '';
    $data['province'] = isset($_POST['province']) ? $_POST['province'] : '';
    $data['postal-code'] = isset($_POST['postal-code']) ? $_POST['postal-code'] : '';
    $data['employment-status'] = isset($_POST['employment-status']) ? $_POST['employment-status'] : '';
    $data['income'] = isset($_POST['income']) ? $_POST['income'] : '';
    $data['income-years'] = isset($_POST['income-years']) ? $_POST['income-years'] : '';
    $data['income-months'] = isset($_POST['income-months']) ? $_POST['income-months'] : '';
    $data['current-address-years'] = isset($_POST['current-address-years']) ? $_POST['current-address-years'] : '';
    $data['current-address-months'] = isset($_POST['current-address-months']) ? $_POST['current-address-months'] : '';
    $data['first-name'] = isset($_POST['first-name']) ? $_POST['first-name'] : '';
    $data['last-name'] = isset($_POST['last-name']) ? $_POST['last-name'] : '';
    $data['email'] = isset($_POST['email']) ? $_POST['email'] : '';
    $data['phone'] = isset($_POST['phone']) ? $_POST['phone'] : '';

    $status = 1;
    if ($_POST['birthdate'] == null) {
        $data['status'] = 0;
    }

    $submission_id = $_SESSION['submission_id'];
    $wpdb->update('submissions', $data, array('id' => $submission_id));

    if ($_POST['birthdate'] != null) {
        submit_form($data);
    }
}

get_header(); ?>

<section class="content push_down">
    <div class="container">
    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
[data-carousel-3d] {
  max-width: 850px;
  margin: auto;
}
[data-carousel-3d] img {
  max-width: 100%;
  height: auto;
}
[data-carousel-3d] [data-prev-button] {
  cursor: pointer;
  height: 25px;
  left: 0px;
  margin-top: -13px;
  position: absolute;
  top: 50%;
  -webkit-transition: background 0.3s ease 0s;
  -ms-transition: background 0.3s ease 0s;
  -o-transition: background 0.3s ease 0s;
  transition: background 0.3s ease 0s;
  width: 26px;
}
[data-carousel-3d] [data-prev-button]:before {
    height: 25px;
    width: 16px;
    left: 0;
    top: 0;
    position: absolute;
    color: #2d3e50;
    content: "\2039";
    font: bold 55px sans-serif !important;
    transition: all 0.3s ease 0s
}
[data-carousel-3d] [data-prev-button]:hover:before, [data-carousel-3d] [data-next-button]:hover:before {
    color: #7a9757
}
/* line 10, ../../styles/common/jquery.carousel-3d.scss */
[data-carousel-3d] [data-next-button] {
  cursor: pointer;
  height: 25px;
  margin-top: -13px;
  position: absolute;
  right: 0px;
  top: 50%;
  -webkit-transition: background 0.3s ease 0s;
  -ms-transition: background 0.3s ease 0s;
  -o-transition: background 0.3s ease 0s;
  transition: background 0.3s ease 0s;
  width: 22px;
}
[data-carousel-3d] [data-next-button]:before {
    height: 25px;
    width: 16px;
    right: 0;
    top: 0;
    position: absolute;    
    color: #2d3e50;
    content: "\203A";
    font: bold 55px sans-serif !important;
}
.screenshots-blue [data-carousel-3d] [data-prev-button]:hover:before, .screenshots-blue [data-carousel-3d] [data-next-button]:hover:before {
    color: #05C2F9
}
.screenshots-yellow [data-carousel-3d] [data-prev-button]:hover:before, .screenshots-yellow [data-carousel-3d] [data-next-button]:hover:before {
    color: #FDC007
}
/* line 22, ../../styles/common/jquery.carousel-3d.scss */
[data-carousel-3d] {
  position: relative;
}
/* line 26, ../../styles/common/jquery.carousel-3d.scss */
[data-carousel-3d] > [data-children-wrapper] {
  perspective: 3000px;
  -ms-perspective: 3000px;
  -moz-perspective: 3000px;
  -webkit-perspective: 3000px;
}
/* line 32, ../../styles/common/jquery.carousel-3d.scss */
[data-carousel-3d] > [data-children-wrapper] > [data-child] {
  transition: 1s;
  -ms-transition: 1s;
  -moz-transition: 1s;
  -webkit-transition: 1s;
}
/* line 43, ../../styles/common/jquery.carousel-3d.scss */
[data-carousel-3d] {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
/* line 50, ../../styles/common/jquery.carousel-3d.scss */
[data-carousel-3d] > [data-children-wrapper] > [data-child] {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
/* line 59, ../../styles/common/jquery.carousel-3d.scss */
[data-carousel-3d] > [data-children-wrapper] > [data-child] > [data-child-frame] > [data-content-wrapper] {
  box-sizing: border-box;
  transform-origin: 0px 0px;
  -ms-transform-origin: 0px 0px;
  -moz-transform-origin: 0px 0px;
  -webkit-transform-origin: 0px 0px;
}
/* line 75, ../../styles/common/jquery.carousel-3d.scss */
[data-carousel-3d]:before {
  padding-top: 40%;
  display: block;
  content: '';
}
/* line 82, ../../styles/common/jquery.carousel-3d.scss */
[data-carousel-3d] [data-children-wrapper] {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20%;
  left: 20%;
}

/* ## start */

.vehicle-make-info {
    background: #eee;
    padding: 2em;
    text-align: center;
    margin-top: 2em;
}
.vehicle-form-overlay {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(35,31,32,0.7);
  white-space: nowrap;
  text-align: center;
  overflow: auto;
  display: none;
}
.vehicle-form-overlay.active {
  display: block;
}
.vehicle-form-overlay:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.vehicle-form-overlay .dialog {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  background: #fff;
  text-align: left;
  width: 530px;
  max-width: 100%;
}
.vehicle-form-overlay .dialog .body {
  padding: 1em 3em;
}
.vehicle-form-overlay h2 {
  color: #000;
  font-size: 1.7em;
  text-align: center;
}
.vehicle-form-overlay p {
  margin: 0;
}
.vehicle-form-overlay label {
  display: block;
  font-size: 0.8em;
}
.vehicle-form-overlay input,
.vehicle-form-overlay textarea {
  font-weight: normal;
  background: #e6e7e8;
  width: 100%;
  background: #fff;
  padding: 0.2em;
}
.vehicle-form-overlay textarea {
  height: 4em;
}
.vehicle-form-overlay input[type="submit"] {
  background: #f77a1e;
  height: 2em;
  display: block;
  width: 100%;
}
.vehicle-form-overlay .dialog-close {
  background: none;
  border-radius: 0;
  text-transform: none;
  color: #225080;
  font-size: 1em;
  border: 0;
  box-shadow: none;
  text-align: center;
  width: 100%;
}


.walk-page {
  margin: 20px 0 !important;
}

.walk-steps {
  list-style: none;
  margin: 0;
  padding: 3em 0;
}
.walk-steps > li {
  margin-bottom: 5em;
}
.walk-steps h1,
.walk-steps h2 {
  color: #2d2d2d;
  text-align: center;
  margin: 0 0 1em;
}
.walk-options {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.walk-options.short {
  max-width: 800px;
}
.walk-options > li {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  padding: 0 1em;
  margin-bottom: 1em;
  text-align: center;
}
.walk-options img  {
  display: block;
  margin: 1em auto;
}
.walk-options-double > .walk-vehicle-option {
  width: 50%;
}
.walk-options-double > .walk-vehicle-option:first-child > span {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.walk-options-double > .walk-vehicle-option:last-child > span {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
}
.walk-vehicle-button {
  color: #fff;
  width: 200px;
  max-width: 100%;
  text-transform: uppercase;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}
.walk-vehicle-option > span,
.walk-vehicle-field.walk-vehicle-field > input,
.walk-vehicle-field.walk-vehicle-field > select {
  display: inline-block;
  border: 2px solid #18779b;
  background: #fff;
  border-radius: 0.1em;
  padding: 20px;
  width: 300px;
  height: auto;
  line-height: 1;
  max-width: 100%;
  font-size: 1.4em;
  opacity: 1;
  visibility: visible;
}
.walk-vehicle-option > span {
  cursor: pointer;
}
.walk-vehicle-field {
  position: relative;
}
.walk-vehicle-field.has-addon > input {
  padding-right: 5em;
}
.walk-vehicle-field.has-addon > span {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0 0.5em;
}
.walk-vehicle-option:hover > span,
.walk-vehicle-option > input:checked + span {
  border-bottom-width: 10px;
  padding-bottom: 14px;
}
.walk-vehicle-button input,
.walk-vehicle-option input {
  position: absolute;
  opacity: 0;
}
.walk-next-step {
  text-align: center;
  margin: 1em 0;
}
.walk-next-step .error-holder {
  color: red;
  font-weight: bold;
  text-align: center;
}
.walk-next-step button {
  display: inline-block;
  font-size: 1.4em;
  line-height: 1;
  width: 250px;
  max-width: 100%;
  padding: 0.5em;
  margin: 1em auto;
}
.walk-next-step button[disabled] {
  background: #ccc;
}
.walk-more-info {
  text-align: center;
  margin-top: 2em;
}
.walk-more-info p {
  color: #29a8e0;
  display: inline-block;
  padding-left: 2em;
  background: url(<?= get_template_directory_uri(); ?>/img/walk-info.png) no-repeat 0 50%;
  background-size: 25px;
}
.walk-anim-in {
  animation: walk-anim-in 0.5s;
}
.walk-anim-out {
  animation: walk-anim-out 0.5s;
}
@keyframes walk-anim-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes walk-anim-out {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@media (max-width: 767px) {
.walk-options.short > li {
    display: block;
    width: auto;
}
}
</style>
    <form class="js-submission-form" autocomplete="off">
        <input type="hidden" id="form-email-type" name="form-email-type" value="walkthrough">
        <ul class="walk-steps" data-initialstep="<?php if(isset($_GET['vehicle'])) echo '2'; else echo '1'; ?>">
            <li>
                <h1>What kind of vehicle do you want?</h1>
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="<?= get_template_directory_uri(); ?>/img/walk2-car.png" id="car">
                        </div>
                        <div class="item">
                            <img src="<?= get_template_directory_uri(); ?>/img/walk2-van.png" id="van">
                        </div>
                        <div class="item">
                            <img src="<?= get_template_directory_uri(); ?>/img/walk2-suv.png" id="suv">
                        </div>
                        <div class="item">
                            <img src="<?= get_template_directory_uri(); ?>/img/walk2-truck.png" id="truck">
                        </div>
                    </div>
                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
                <div class="walk-next-step"> 
                    <input type="hidden" name="vehicle" value="<?php if(isset($_GET['vehicle'])) echo esc_html($_GET['vehicle']); else echo ''; ?>">
                    <button type="button" class="js-vehicle-carousel-select">I want a <span class="js-vehicle-type">Car</span></button>
                </div>
                <div class="walk-more-info">
                    <p>Don’t worry, you can change your mind about the kind of vehicle you want later.</p>
                </div>
            <li>
                <h2>What’s your ideal budget?</h2>
                <ul class="walk-options short">
                    <li>
                        <label class="walk-vehicle-option"><input type="radio" class="not-uniform" name="budget" value="Under $250/month" data-formatted="under $250/month"><span>Under $250/month</span></label>
                    <li>
                        <label class="walk-vehicle-option"><input type="radio" class="not-uniform" name="budget" value="$250-375/month" data-formatted="between $250-375/month"><span>$250-375/month</span></label>
                    <li>
                        <label class="walk-vehicle-option"><input type="radio" class="not-uniform" name="budget" value="$375-500/month" data-formatted="between $375-500/month"><span>$375-500/month</span></label>
                    <li>
                        <label class="walk-vehicle-option"><input type="radio" class="not-uniform" name="budget" value="$500+/month" data-formatted="over $500/month"><span>$500+/month</span></label>
                </ul>
                <div class="walk-next-step">
                    <div class="error-holder"></div>
                    <button type="button" class="js-walk-continue ">Continue</button>
                </div>
                <div class="walk-more-info">
                    <p>By telling us your monthly budget we are able to provide several vehicle options suited just for you.</p>
                </div>
            </li>
            <li>
                <h2>What Is Your Employment Status?</h2>
                <ul class="walk-options short">
                    <li>
                        <label class="walk-vehicle-option"><input type="radio" class="not-uniform" name="employment-status" value="Employed"><span>Employed</span></label>
                    <li>
                        <label class="walk-vehicle-option"><input type="radio" class="not-uniform" name="employment-status" value="Student"><span>Student</span></label>
                    <li>
                        <label class="walk-vehicle-option"><input type="radio" class="not-uniform" name="employment-status" value="Homemaker"><span>Homemaker</span></label>
                    <li>
                        <label class="walk-vehicle-option"><input type="radio" class="not-uniform" name="employment-status" value="Self-Employed"><span>Self-Employed</span></label>
                    <li>
                        <label class="walk-vehicle-option"><input type="radio" class="not-uniform" name="employment-status" value="Retired"><span>Retired</span></label>
                    <li>
                        <label class="walk-vehicle-option"><input type="radio" class="not-uniform" name="employment-status" value="Other"><span>Other</span></label>
                </ul>
                <div class="walk-next-step">
                    <div class="error-holder"></div>
                    <button type="button" class="js-walk-continue ">Continue</button>
                </div>
                <div class="walk-more-info">
                    <p>The status of your employment helps us determine the appropriate loan program for you.</p>
                </div>
            </li>
            <li>
                <h2>What Is Your Income Per Month Before Tax/Deductions?</h2>
                <ul class="walk-options short">
                    <li>
                        <label class="walk-vehicle-field"><input type="text" name="income" placeholder="Monthly Income"></label>
                </ul>
                <div class="walk-next-step">
                    <div class="error-holder"></div>
                    <button type="button" class="js-walk-continue js-open-overlay">Continue</button>
                </div>
                <div class="walk-more-info">
                    <p>Your income details show that you have the resources to make your monthly or bi-weekly payments, increasing your approval rate.</p>
                </div>
            </li>
            <li>
                <h2>Almost Done - Create Your Account</h2>
                <ul class="walk-options short">
                    <li>
                        <label class="walk-vehicle-field"><input type="text" name="first-name" placeholder="First Name"></label>
                    <li>
                        <label class="walk-vehicle-field"><input type="text" name="last-name" placeholder="Last Name"></label>
                </ul>
                <div class="walk-next-step">
                    <div class="error-holder"></div>
                    <button type="button" class="js-walk-continue">Continue</button>
                </div>
                <div class="walk-more-info">
                    <p>To complete your application and access your loan we need your basic information.</p>
                </div>
            </li>
            <li>
                <h2>Complete Your Account</h2>
                <ul class="walk-options short">
                    <li>
                        <label class="walk-vehicle-field"><input type="email" name="email" placeholder="email@email.com"></label>
                    <li>
                        <label class="walk-vehicle-field"><input type="tel" name="phone" placeholder="Home (999) 999-9999"></label>
                </ul>
                <div class="walk-next-step">
                    <div class="error-holder"></div>
                    <button type="button" class="js-walk-continue">Complete Registration</button>
                </div>
                <div class="walk-more-info">
                    <p>By completing the registration, you are giving Lusso Car Detailing & Sales permission to pull credit history and relevant information needed to complete your application, and to contact you with your approval information.</p>
                </div>
            </li>
            <li>
                <h2>Are You Old Enough to Get Financing?</h2>
                <ul class="walk-options short">
                    <li>
                    <!-- <label class="walk-vehicle-field"><input type="date" name="birthdate" value="1999-01-01" placeholder="MM / DD / YYYY"></label> -->
                        <label class="walk-vehicle-field"><input type="text" name="birthdate" placeholder="MM / DD / YYYY"></label>
                </ul>
                <div class="walk-next-step">
                    <div class="error-holder"></div>
                    <button type="button" class="js-walk-continue">Continue</button>
                </div>
                <div class="walk-more-info">
                    <p>Program eligibility in Canadian provinces and territories varies based on age.</p>
                </div>
            </li>
            <li>
                <h2>Where Are You Looking for a Vehicle?</h2>
                <ul class="walk-options short">
                    <li>
                        <label class="walk-vehicle-field large"><input type="text" name="address" placeholder="Street Address"
                                                                       onfocus="if (this.hasAttribute('readonly')) {
                                                                                   this.removeAttribute('readonly');
                                                                                   this.blur();
                                                                                   this.focus();
                                                                               }" ></label>
                    <li>
                        <label class="walk-vehicle-field"><input type="text" name="city" placeholder="City or Town name"
                                                                 onfocus="if (this.hasAttribute('readonly')) {
                                                                             this.removeAttribute('readonly');
                                                                             this.blur();
                                                                             this.focus();
                                                                         }"></label>
                    <li>
                        <label class="walk-vehicle-field">
                            <select class="not-select2" name="province"
                                    onfocus="if (this.hasAttribute('readonly')) {
                                                this.removeAttribute('readonly');
                                                this.blur();
                                                this.focus();
                                            }">
                                <option value="">Province or Territory</option>
                                <option value="Nova Scotia">Nova Scotia</option>
                                <option value="New Brunswick">New Brunswick</option>
                                <option value="Prince Edward Island">Prince Edward Island</option>
                            </select></label>
                    <li>
                        <label class="walk-vehicle-field">
                            <input type="text" name="postal-code" placeholder="Postal Code"
                                   onfocus="if (this.hasAttribute('readonly')) {
                                               this.removeAttribute('readonly');
                                               this.blur();
                                               this.focus();
                                           }"></label>
                </ul>
                <div class="walk-next-step">
                    <div class="error-holder"></div>
                    <button type="button" class="js-walk-continue">Continue</button>
                </div>
                <div class="walk-more-info">
                    <p>Available programs vary based on where you live. Please help us find the most convenient option for you by entering your home mailing address above.</p>
                </div>
            </li>
            <li>
                <h2>How Long Have You Lived at Your Current Address?</h2>
                <ul class="walk-options short">
                    <li>
                        <label class="walk-vehicle-field has-addon"><input type="number" placeholder="0" name="current-address-years"><span class="walk-field-addon">Years</span></label>
                    <li>
                        <label class="walk-vehicle-field has-addon"><input type="number" placeholder="0" name="current-address-months" value="0"><span class="walk-field-addon">Months</span></label>
                </ul>
                <div class="walk-next-step">
                    <div class="error-holder"></div>
                    <button type="button" class="js-walk-continue">Continue</button>
                </div>
                <div class="walk-more-info">
                    <p>Your address details help us determine a suitable budget and loan amount that will maximize your chance of getting approved.</p>
                </div>
            </li>
            <li>
                <h2>How Long Have You Worked at Your Current Job?</h2>
                <ul class="walk-options short">
                    <li>
                        <label class="walk-vehicle-field has-addon"><input type="number" placeholder="0" name="income-years"><span class="walk-field-addon">Years</span></label>
                    <li>
                        <label class="walk-vehicle-field has-addon"><input type="number" placeholder="0" name="income-months"  value="0"><span class="walk-field-addon">Months</span></label>
                </ul>
                <div class="walk-next-step">
                    <div class="error-holder"></div>
                    <button type="button" class="js-walk-continue">Continue</button>
                </div>
                <div class="walk-more-info">
                    <p>Providing the length of the time you have been receiving this income helps us better understand your employment situation, increasing the likelihood of you getting approved.</p>
                </div>
            </li>
        </ul>
    </form>
    <div class="overlay active hidden"><div class="content">
            <img src="<?= get_template_directory_uri(); ?>/img/walk-flag.gif" alt="approval flag" width="104" height="86" style="width=104px;height:86px;" />
            <h2>Congratulations!</h2>
            <p>You have been preapproved for a <span class="js-overlay-vehicle"></span> <span class="js-overlay-budget"></span></p>
            <button type="button" class="js-close-overlay">Continue</button>
        </div></div>
    <style>
        .content.push_down {
          padding: 2em 1em;
        }
        .overlay{
            position: fixed;
            z-index: 100;
            background:rgba(0,0,0,0.5);
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            text-align: center;
        }
        .overlay.hidden {
            display: none;
        }
        .overlay:before {
            content: '';
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }
        .overlay .content {
          white-space: normal;
            display: inline-block;
            vertical-align: middle;
            background: #fff;
            border-radius: 10px;
            padding: 20px;
            width: 100%;
            max-width: 400px;
        }
        #myCarousel{
            width: 100%;
            max-width: 100%;
        }
        .carousel-control.right, .carousel-control.left{
            background-image: none;
            opacity: 1;
        }
        .carousel-control.right .glyphicon, .carousel-control.left .glyphicon{
            color: #f77a1e;
        }
        .carousel-inner>.item{
            text-align: center !important;
        }
        .carousel-inner>.item>img{
            display: inline-block !important;
            max-width: 84%;
        }
        .walk-steps{
            padding: 0;
        }
        @media (max-width:991px){
            .walk-steps{
                padding-top: 30px;
            }
        }
        @media (max-width:768px){
            .walk-steps{
                padding: 0;
            }
            .carousel-control.left:before, .carousel-control.right:before {
              font-size: 2em !important;
            }
            .carousel-control.left:before {
              margin-left: -1.5em;
            }
            .carousel-control.right:before {
              margin-right: -1.5em;
            }
        }
        footer, .footer_area{
            display: none;
        }
        .walk-more-info p{
            padding-bottom: 0;   
        }
           .walk-next-step button{
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{
    display:block;
    max-width:100%;
    height:auto
}
.carousel{
    position:relative
}
.carousel-inner{
    position:relative;
    width:100%;
    overflow:hidden
}
.carousel-inner>.item{
    position:relative;
    display:none;
    -webkit-transition:.6s ease-in-out left;
    -o-transition:.6s ease-in-out left;
    transition:.6s ease-in-out left
}
.carousel-inner>.item>a>img,.carousel-inner>.item>img{
    line-height:1
}
@media all and (transform-3d),(-webkit-transform-3d){
    .carousel-inner>.item{
        -webkit-transition:-webkit-transform .6s ease-in-out;
        -o-transition:-o-transform .6s ease-in-out;
        transition:transform .6s ease-in-out;
        -webkit-backface-visibility:hidden;
        backface-visibility:hidden;
        -webkit-perspective:1000px;
        perspective:1000px
    }
    .carousel-inner>.item.active.right,.carousel-inner>.item.next{
        left:0;
        -webkit-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0)
    }
    .carousel-inner>.item.active.left,.carousel-inner>.item.prev{
        left:0;
        -webkit-transform:translate3d(-100%,0,0);
        transform:translate3d(-100%,0,0)
    }
    .carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{
        left:0;
        -webkit-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0)
    }
}
.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{
    display:block
}
.carousel-inner>.active{
    left:0
}
.carousel-inner>.next,.carousel-inner>.prev{
    position:absolute;
    top:0;
    width:100%
}
.carousel-inner>.next{
    left:100%
}
.carousel-inner>.prev{
    left:-100%
}
.carousel-inner>.next.left,.carousel-inner>.prev.right{
    left:0
}
.carousel-inner>.active.left{
    left:-100%
}
.carousel-inner>.active.right{
    left:100%
}
.carousel-control{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:15%;
    font-size:20px;
    color:#fff;
    text-align:center;
    text-shadow:0 1px 2px rgba(0,0,0,.6);
    filter:alpha(opacity=50);
    opacity:.5
}
.carousel-control.left:before{
    content: '<';
}
.carousel-control.right:before{
    content: '>';
}
.carousel-control.left,
.carousel-control.right {
    top: 25%;
}
.carousel-control.right {
    right: 0;
    left: auto;
}
.carousel-control.left:before,
.carousel-control.right:before {
    color: #000;
    font-size: 5em;
}
.carousel-control:focus,.carousel-control:hover{
    color:#fff;
    text-decoration:none;
    filter:alpha(opacity=90);
    outline:0;
    opacity:.9
}
.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{
    position:absolute;
    top:50%;
    z-index:5;
    display:inline-block;
    margin-top:-10px
}
.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{
    left:50%;
    margin-left:-10px
}
.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{
    right:50%;
    margin-right:-10px
}
.carousel-control .icon-next,.carousel-control .icon-prev{
    width:20px;
    height:20px;
    font-family:serif;
    line-height:1
}
.carousel-control .icon-prev:before{
    content:'\2039'
}
.carousel-control .icon-next:before{
    content:'\203a'
}
.carousel-indicators{
    position:absolute;
    bottom:10px;
    left:50%;
    z-index:15;
    width:60%;
    padding-left:0;
    margin-left:-30%;
    text-align:center;
    list-style:none
}
.carousel-indicators li{
    display:inline-block;
    width:10px;
    height:10px;
    margin:1px;
    text-indent:-999px;
    cursor:pointer;
    background-color:#000\9;
    background-color:rgba(0,0,0,0);
    border:1px solid #fff;
    border-radius:10px
}
.carousel-indicators .active{
    width:12px;
    height:12px;
    margin:0;
    background-color:#fff
}
.carousel-caption{
    position:absolute;
    right:15%;
    bottom:20px;
    left:15%;
    z-index:10;
    padding-top:20px;
    padding-bottom:20px;
    color:#fff;
    text-align:center;
    text-shadow:0 1px 2px rgba(0,0,0,.6)
}
.carousel-caption .btn{
    text-shadow:none
}
@media screen and (min-width:768px){
    .carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{
        width:30px;
        height:30px;
        margin-top:-15px;
        font-size:30px
    }
    .carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{
        margin-left:-15px
    }
    .carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{
        margin-right:-15px
    }
    .carousel-caption{
        right:20%;
        left:20%;
        padding-bottom:30px
    }
    .carousel-indicators{
        bottom:20px
    }
}
</style>
<script src="<?= get_template_directory_uri(); ?>/js/walkthrough-old.js"></script>
</div>
      </section>

<?php get_footer(); ?>
