From 58446c3e643dd0c33c70726aff258fef6ffc9672 Mon Sep 17 00:00:00 2001
From: Anthony Talarico <talarico@gaslightmedia.com>
Date: Mon, 9 Nov 2015 16:32:23 -0500
Subject: [PATCH] Added functionality for both off canvas and top bar
 reservation form menus

---
 js/app.js                             | 119 ++++++++++++++++++++++++--
 js/custom/pageSetup.js                | 119 ++++++++++++++++++++++++--
 parts/reservation-form-main.php       |  14 +--
 parts/reservation-form-off-canvas.php |  22 ++---
 4 files changed, 240 insertions(+), 34 deletions(-)

diff --git a/js/app.js b/js/app.js
index 21b1391..02159b3 100644
--- a/js/app.js
+++ b/js/app.js
@@ -19,7 +19,6 @@ $(document).ready(function () {
         $(this).siblings('ul').toggleClass('open');
     });
     
-    var toggle;
     
     // Custom js and jquery for staffords ///////////////////
     // reservation for toggle click function ///////////////
@@ -38,13 +37,117 @@ $(document).ready(function () {
         }
                              
     });
-    ////////////////////////////////////////////////////////
-    $(".arrive").datepicker();
-    $(".depart").datepicker();
-    $(".arriveCal").click(function () {
-        $(".arrive").datepicker("show");
+    var start, end, arrival, departure, stay, d, m, y, bayView = 'vD4ZpIFk4%2b7FyPsaBnkCqP1cBHWnJili9k5D83MqJq4%3d&',
+        crookedRiver = 'ZhWXD46i2%2fq319vcR%2fcw69rZvA2bz%2fttOOxO9t1%2fBJ0%3d&',
+        adults,
+        kids,
+        perry = 'RtXm7mjas4tWRxEAkt8ienQMPRR5EbsZGSOalE8V63s%3d&';
+    
+    ///////off canvas date picker logic //////////////////////////////////////////////
+    $("#arriveOff").datepicker({
+        onSelect: function (date) {
+            $("#arriveOff").datepicker({dateFormat: 'mm/dd/yy'}).val();
+            arrival = $("#arriveOff").datepicker('getDate');
+            d = arrival.getDate();
+            m = arrival.getMonth() + 1;
+            y = arrival.getFullYear();
+            arrival = d + '-' + m + '-' + y; // to pass as a date value in the url
+            start = "arrival_date=" + y + '-' + m + '-' + d + '&'; // for date parsing to get length of stay
+            arrival.toString();
+            arrival = arrival.replace(/\//g, "");
+            arrival = parseInt(arrival, 10);
+        }
+    });
+    $("#departOff").datepicker({
+        onSelect: function (date) {
+            $("#departOff").datepicker({dateFormat: 'mm/dd/yy'}).val();
+            departure = $("#departOff").datepicker('getDate');
+            d = departure.getDate();
+            m = departure.getMonth() + 1;
+            y = departure.getFullYear();
+            departure = d + '-' + m + '-' + y;
+            end = y + '-' + m + '-' + d + '&';
+            departure.toString();
+            departure = departure.replace(/\//g, "");
+            departure = parseInt(departure, 10);
+            $("#nightsOff").val(departure - arrival);
+            stay = 'stay_nights=' + (departure - arrival) + '&';
+        }
+    });
+    ///// end of canvas datepicker logic ^ //////////////////////////////////////////////
+    
+    /// top bar reservation form dropdown logic ////////////////////////////
+    $("#arrive").datepicker({
+        onSelect: function (date) {
+            $("#arrive").datepicker({dateFormat: 'mm/dd/yy'}).val();
+            arrival = $("#arrive").datepicker('getDate');
+            d = arrival.getDate();
+            m = arrival.getMonth() + 1;
+            y = arrival.getFullYear();
+            arrival = d + '-' + m + '-' + y; // to pass as a date value in the url
+            start = "arrival_date=" + y + '-' + m + '-' + d + '&'; // for date parsing to get length of stay
+            arrival.toString();
+            arrival = arrival.replace(/\//g, "");
+            arrival = parseInt(arrival, 10);
+        }
+    });
+    $("#depart").datepicker({
+        onSelect: function (date) {
+            $("#depart").datepicker({dateFormat: 'mm/dd/yy'}).val();
+            departure = $("#depart").datepicker('getDate');
+            d = departure.getDate();
+            m = departure.getMonth() + 1;
+            y = departure.getFullYear();
+            departure = d + '-' + m + '-' + y;
+            end = y + '-' + m + '-' + d + '&';
+            departure.toString();
+            departure = departure.replace(/\//g, "");
+            departure = parseInt(departure, 10);
+            $("#nights").val(departure - arrival);
+            stay = 'stay_nights=' + (departure - arrival) + '&';
+        }
     });
-    $(".departCal").click(function () {
-        $(".depart").datepicker("show");
+    $("#arriveCal").click(function () {
+        $("#arrive").datepicker("show");
+    });
+    $("#departCal").click(function () {
+        $("#depart").datepicker("show");
+    });
+    $("#arriveCalOff").click(function () {
+        $("#arriveOff").datepicker("show");
+    });
+    $("#departCalOff").click(function () {
+        $("#departOff").datepicker("show");
+    });
+    // form submission logic
+    // off canvas resevation form submission ///////////////////////////////////////////
+    $('.res-buttonOff').on('click', function book() {
+        adults = "adults=" + $("#adultsOff").val() + "&";
+        kids = "children=" + $("#kidsOff").val();
+        if ($('#propertyNameOff option:selected').text() === "Stafford's Bay View Inn") {
+            window.open("https://www.bookonthenet.net/east/premium/eresmain.aspx?id=" + bayView + start + stay + adults + kids);
+        } else if ($('#propertyNameOff option:selected').text() === "Stafford's Crooked River Lodge") {
+            window.open("https://www.bookonthenet.net/east/premium/eresmain.aspx?id=" + crookedRiver + start + stay + adults + kids);
+        } else if ($('#propertyNameOff option:selected').text() === "Stafford's Perry Inn") {
+            window.open("https://www.bookonthenet.net/east/premium/eresmain.aspx?id=" + perry + start + stay + adults + kids);
+        } else {
+            
+        }
+
+    });
+    // top bar reservation dropdown button submission //////////////////////////////////////////
+    $('.res-button').on('click', function book() {
+        adults = "adults=" + $("#adults").val() + "&";
+        kids = "children=" + $("#kids").val();
+        if ($('#propertyName option:selected').text() === "Stafford's Bay View Inn") {
+            window.open("https://www.bookonthenet.net/east/premium/eresmain.aspx?id=" + bayView + start + stay + adults + kids);
+        } else if ($('#propertyName option:selected').text() === "Stafford's Crooked River Lodge") {
+            window.open("https://www.bookonthenet.net/east/premium/eresmain.aspx?id=" + crookedRiver + start + stay + adults + kids);
+        } else if ($('#propertyName option:selected').text() === "Stafford's Perry Inn") {
+            window.open("https://www.bookonthenet.net/east/premium/eresmain.aspx?id=" + perry + start + stay + adults + kids);
+        } else {
+            
+        }
+
     });
 });
diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index 9a3ba1e..7953b20 100644
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -10,7 +10,6 @@ $(document).ready(function () {
         $(this).siblings('ul').toggleClass('open');
     });
     
-    var toggle;
     
     // Custom js and jquery for staffords ///////////////////
     // reservation for toggle click function ///////////////
@@ -29,13 +28,117 @@ $(document).ready(function () {
         }
                              
     });
-    ////////////////////////////////////////////////////////
-    $(".arrive").datepicker();
-    $(".depart").datepicker();
-    $(".arriveCal").click(function () {
-        $(".arrive").datepicker("show");
+    var start, end, arrival, departure, stay, d, m, y, bayView = 'vD4ZpIFk4%2b7FyPsaBnkCqP1cBHWnJili9k5D83MqJq4%3d&',
+        crookedRiver = 'ZhWXD46i2%2fq319vcR%2fcw69rZvA2bz%2fttOOxO9t1%2fBJ0%3d&',
+        adults,
+        kids,
+        perry = 'RtXm7mjas4tWRxEAkt8ienQMPRR5EbsZGSOalE8V63s%3d&';
+    
+    ///////off canvas date picker logic //////////////////////////////////////////////
+    $("#arriveOff").datepicker({
+        onSelect: function (date) {
+            $("#arriveOff").datepicker({dateFormat: 'mm/dd/yy'}).val();
+            arrival = $("#arriveOff").datepicker('getDate');
+            d = arrival.getDate();
+            m = arrival.getMonth() + 1;
+            y = arrival.getFullYear();
+            arrival = d + '-' + m + '-' + y; // to pass as a date value in the url
+            start = "arrival_date=" + y + '-' + m + '-' + d + '&'; // for date parsing to get length of stay
+            arrival.toString();
+            arrival = arrival.replace(/\//g, "");
+            arrival = parseInt(arrival, 10);
+        }
+    });
+    $("#departOff").datepicker({
+        onSelect: function (date) {
+            $("#departOff").datepicker({dateFormat: 'mm/dd/yy'}).val();
+            departure = $("#departOff").datepicker('getDate');
+            d = departure.getDate();
+            m = departure.getMonth() + 1;
+            y = departure.getFullYear();
+            departure = d + '-' + m + '-' + y;
+            end = y + '-' + m + '-' + d + '&';
+            departure.toString();
+            departure = departure.replace(/\//g, "");
+            departure = parseInt(departure, 10);
+            $("#nightsOff").val(departure - arrival);
+            stay = 'stay_nights=' + (departure - arrival) + '&';
+        }
+    });
+    ///// end of canvas datepicker logic ^ //////////////////////////////////////////////
+    
+    /// top bar reservation form dropdown logic ////////////////////////////
+    $("#arrive").datepicker({
+        onSelect: function (date) {
+            $("#arrive").datepicker({dateFormat: 'mm/dd/yy'}).val();
+            arrival = $("#arrive").datepicker('getDate');
+            d = arrival.getDate();
+            m = arrival.getMonth() + 1;
+            y = arrival.getFullYear();
+            arrival = d + '-' + m + '-' + y; // to pass as a date value in the url
+            start = "arrival_date=" + y + '-' + m + '-' + d + '&'; // for date parsing to get length of stay
+            arrival.toString();
+            arrival = arrival.replace(/\//g, "");
+            arrival = parseInt(arrival, 10);
+        }
+    });
+    $("#depart").datepicker({
+        onSelect: function (date) {
+            $("#depart").datepicker({dateFormat: 'mm/dd/yy'}).val();
+            departure = $("#depart").datepicker('getDate');
+            d = departure.getDate();
+            m = departure.getMonth() + 1;
+            y = departure.getFullYear();
+            departure = d + '-' + m + '-' + y;
+            end = y + '-' + m + '-' + d + '&';
+            departure.toString();
+            departure = departure.replace(/\//g, "");
+            departure = parseInt(departure, 10);
+            $("#nights").val(departure - arrival);
+            stay = 'stay_nights=' + (departure - arrival) + '&';
+        }
     });
-    $(".departCal").click(function () {
-        $(".depart").datepicker("show");
+    $("#arriveCal").click(function () {
+        $("#arrive").datepicker("show");
+    });
+    $("#departCal").click(function () {
+        $("#depart").datepicker("show");
+    });
+    $("#arriveCalOff").click(function () {
+        $("#arriveOff").datepicker("show");
+    });
+    $("#departCalOff").click(function () {
+        $("#departOff").datepicker("show");
+    });
+    // form submission logic
+    // off canvas resevation form submission ///////////////////////////////////////////
+    $('.res-buttonOff').on('click', function book() {
+        adults = "adults=" + $("#adultsOff").val() + "&";
+        kids = "children=" + $("#kidsOff").val();
+        if ($('#propertyNameOff option:selected').text() === "Stafford's Bay View Inn") {
+            window.open("https://www.bookonthenet.net/east/premium/eresmain.aspx?id=" + bayView + start + stay + adults + kids);
+        } else if ($('#propertyNameOff option:selected').text() === "Stafford's Crooked River Lodge") {
+            window.open("https://www.bookonthenet.net/east/premium/eresmain.aspx?id=" + crookedRiver + start + stay + adults + kids);
+        } else if ($('#propertyNameOff option:selected').text() === "Stafford's Perry Inn") {
+            window.open("https://www.bookonthenet.net/east/premium/eresmain.aspx?id=" + perry + start + stay + adults + kids);
+        } else {
+            
+        }
+
+    });
+    // top bar reservation dropdown button submission //////////////////////////////////////////
+    $('.res-button').on('click', function book() {
+        adults = "adults=" + $("#adults").val() + "&";
+        kids = "children=" + $("#kids").val();
+        if ($('#propertyName option:selected').text() === "Stafford's Bay View Inn") {
+            window.open("https://www.bookonthenet.net/east/premium/eresmain.aspx?id=" + bayView + start + stay + adults + kids);
+        } else if ($('#propertyName option:selected').text() === "Stafford's Crooked River Lodge") {
+            window.open("https://www.bookonthenet.net/east/premium/eresmain.aspx?id=" + crookedRiver + start + stay + adults + kids);
+        } else if ($('#propertyName option:selected').text() === "Stafford's Perry Inn") {
+            window.open("https://www.bookonthenet.net/east/premium/eresmain.aspx?id=" + perry + start + stay + adults + kids);
+        } else {
+            
+        }
+
     });
 });
diff --git a/parts/reservation-form-main.php b/parts/reservation-form-main.php
index 8730d83..8aab15e 100644
--- a/parts/reservation-form-main.php
+++ b/parts/reservation-form-main.php
@@ -4,26 +4,26 @@
                     <form method="post">
                         <div class="row resDropdown">
                             <div class="small-12 res-search columns resInput">
-                                <select name="s">
-                                     <option value="" disabled selected>Property</option>
+                                <select id="propertyName" name="s">
+                                     <option value="" selected disabled>Property</option>
                                       <option value="Stafford's Bay View Inn">Stafford's Bay View Inn</option>
                                       <option value="Stafford's Crooked River Lodge">Stafford's Crooked River Lodge</option>
                                       <option value="Stafford's Perry Hotel">Stafford's Perry Hotel</option>
                                 </select>
                             </div>
                             <div class="small-12 res-date columns resInput">
-                                <input class="arrive" type="text" placeholder="Arrive" name="datepicker1" required="required"><img id="arriveCal" src="<?php echo get_template_directory_uri(); ?>/assets/calendar-icon.jpg">
+                                <input id="arrive" type="text" placeholder="Arrive" name="datepicker1" required="required"><img id="arriveCal" src="<?php echo get_template_directory_uri(); ?>/assets/calendar-icon.jpg">
                             </div>
                             <div class="small-12 res-date columns resInput">
-                                <input class="depart" type="text" placeholder="Depart" name="datepicker2" required="required"><img id="departCal" src="<?php echo get_template_directory_uri(); ?>/assets/calendar-icon.jpg">
+                                <input id="depart" type="text" placeholder="Depart" name="datepicker2" required="required"><img id="departCal" src="<?php echo get_template_directory_uri(); ?>/assets/calendar-icon.jpg">
                             </div>
                             <div class="small-12 columns resInput">
-                                <input type="text" placeholder="Number of Nights">
+                                <input id="nights" type="text" placeholder="Number of Nights">
                             </div>
                             <div id="resForm">
                             <div class="small-6 guest columns adults">
                                <!-- <input type="text" placeholder="Adults" > -->
-                                 <select>
+                                 <select id="adults">
                                      <option value="" disabled selected>Adults</option>
                                       <option value="1">1</option>
                                       <option value="2">2</option>
@@ -38,7 +38,7 @@
                             </div>
                             <div class="small-6 guest columns kids">
             
-                                <select>
+                                <select id="kids">
                                      <option value="" disabled selected>Kids</option>
                                      <option value="0">0</option> 
                                       <option value="1">1</option>
diff --git a/parts/reservation-form-off-canvas.php b/parts/reservation-form-off-canvas.php
index 6167b4e..caed21f 100644
--- a/parts/reservation-form-off-canvas.php
+++ b/parts/reservation-form-off-canvas.php
@@ -1,24 +1,24 @@
 <form method="post">
         <div class="row">
             <div class="small-12 res-search columns">
-                <select name="s">
-                                     <option value="" disabled selected>Property</option>
-                                      <option value="Stafford's Bay View Inn">Stafford's Bay View Inn</option>
-                                      <option value="Stafford's Crooked River Lodge">Stafford's Crooked River Lodge</option>
-                                      <option value="Stafford's Perry Hotel">Stafford's Perry Hotel</option>
+                <select id="propertyNameOff" name="s">
+                                     <option value="">Property</option>
+                                      <option value="vD4ZpIFk4%2b7FyPsaBnkCqP1cBHWnJili9k5D83MqJq4%3d">Stafford's Bay View Inn</option>
+                                      <option value="ZhWXD46i2%2fq319vcR%2fcw69rZvA2bz%2fttOOxO9t1%2fBJ0%3d">Stafford's Crooked River Lodge</option>
+                                      <option value="RtXm7mjas4tWRxEAkt8ienQMPRR5EbsZGSOalE8V63s%3d">Stafford's Perry Hotel</option>
                                 </select>
             </div>
             <div class="small-12 res-date columns">
-                <input class="arrive" type="text" placeholder="Arrive" name="datepicker1" required="required"><img class="arriveCal" src="<?php echo get_template_directory_uri(); ?>/assets/calendar-icon.jpg">
+                <input id="arriveOff" type="text" placeholder="Arrive" name="datepicker1" required="required"><img id="arriveCalOff" src="<?php echo get_template_directory_uri(); ?>/assets/calendar-icon.jpg">
             </div>
             <div class="small-12 res-date columns">
-                <input class="depart" type="text" placeholder="Depart" name="datepicker2" required="required"><img class="departCal" src="<?php echo get_template_directory_uri(); ?>/assets/calendar-icon.jpg">
+                <input id="departOff" type="text" placeholder="Depart" name="datepicker2" required="required"><img id="departCalOff" src="<?php echo get_template_directory_uri(); ?>/assets/calendar-icon.jpg">
             </div>
             <div class="small-12 columns">
-                <input type="text" placeholder="Number of Nights">
+                <input id="nightsOff" type="text" placeholder="Number of Nights">
             </div>
             <div class="small-6 guest columns">
-                  <select>
+                  <select id="adultsOff">
                                      <option value="" disabled selected>Adults</option>
                                       <option value="1">1</option>
                                       <option value="2">2</option>
@@ -32,7 +32,7 @@
                                  </select>                                 
             </div>
             <div class="small-6 guest columns">
-                <select>
+                <select id="kidsOff">
                                      <option value="" disabled selected>Kids</option>
                                      <option value="0">0</option> 
                                       <option value="1">1</option>
@@ -47,7 +47,7 @@
                                  </select>                                    
             </div>
             <div class="small-6 small-centered columns resBtnOff">
-                <input class="res-button" type="submit" value="Book Now">
+                <input class="res-buttonOff" type="submit" value="Book Now">
             </div>
         </div>
     </form>
\ No newline at end of file
-- 
2.17.1