From 8aa4175d16e3e55f7f55716c68360e44383ec5db Mon Sep 17 00:00:00 2001
From: Anthony Talarico <talarico@gaslightmedia.com>
Date: Wed, 28 Oct 2015 13:21:35 -0400
Subject: [PATCH] Fixing issues with form connected to the off canvas menu

---
 header.php                |  4 ++--
 js/app.js                 | 12 +++++++++---
 js/custom/pageSetup.js    | 12 +++++++++---
 parts/off-canvas-menu.php | 25 ++++++++++++++++++++++++-
 scss/_page.header.scss    |  3 +++
 5 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/header.php b/header.php
index 8b3565c..af54811 100644
--- a/header.php
+++ b/header.php
@@ -66,8 +66,8 @@
                                         </div>
                                         <div class="large-2 guest columns">
                                             <!--<input id="guests" class="weblink-occupancy weblink-textbox" name="Occupancy" type="number" placeholder="Guests" ><img src="<?php echo get_template_directory_uri(); ?>/assets/people-icon.jpg">-->
-                                             <select id= "guests" class="weblink-occupancy weblink-textbox" name="Occupancy" placeholder="Guests" >
-                                                  <option value="" disabled selected>Guests</option>
+                                             <select id= "guests" class="weblink-occupancy weblink-textbox" name="Occupancy" >
+                                                  <option value="none" disabled selected>Guests</option>
                                                   <option value="1">1</option>   
                                                   <option value="2">2</option>
                                                   <option value="3">3</option>
diff --git a/js/app.js b/js/app.js
index fda2e06..45e116e 100644
--- a/js/app.js
+++ b/js/app.js
@@ -75,10 +75,10 @@ $(document).ready(function () {
     $("#cal2").click(function () {
         $("#date2").datepicker("show");
     });
-    $("offCal1").click(function () {
+    $("#offCal1").click(function () {
         $("#dateOff1").datepicker("show");
     });
-    $("offCal2").click(function () {
+    $("#offCal2").click(function () {
         $("#dateOff2").datepicker("show");
     });
     //$(".weblink-search-container").hide();
@@ -107,7 +107,7 @@ $(document).ready(function () {
             departure = $("#date2").val();
             sessionStorage.setItem("departure", departure);
         }
-    });
+     });
     
     // off canvas menu values /////////////////////////
     $('#offGuests').blur(function () {
@@ -116,10 +116,16 @@ $(document).ready(function () {
         
     });
     $("#dateOff1").datepicker({
+         minDate: 2,
         //showOn: 'both',
         //buttonImageOnly: true,
        // buttonImage:  "http://localhost/WordPress/bpla/wp-content/themes/bpla/assets/calendar-icon.jpg",
         onSelect: function (date) {
+             $("#dateOff1").datepicker({dateFormat: 'yy-mm-dd'}).val();
+            nights = $("#dateOff1").datepicker('getDate');
+            //nights = date;
+            nights.setDate(nights.getDate() + 2);
+            $("#dateOff2").datepicker("option", {minDate: new Date(nights)});
             arrival = $("#dateOff1").val();
             sessionStorage.setItem("arrival", arrival);
         }
diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index fa5c13b..a3dce07 100644
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -66,10 +66,10 @@ $(document).ready(function () {
     $("#cal2").click(function () {
         $("#date2").datepicker("show");
     });
-    $("offCal1").click(function () {
+    $("#offCal1").click(function () {
         $("#dateOff1").datepicker("show");
     });
-    $("offCal2").click(function () {
+    $("#offCal2").click(function () {
         $("#dateOff2").datepicker("show");
     });
     //$(".weblink-search-container").hide();
@@ -98,7 +98,7 @@ $(document).ready(function () {
             departure = $("#date2").val();
             sessionStorage.setItem("departure", departure);
         }
-    });
+     });
     
     // off canvas menu values /////////////////////////
     $('#offGuests').blur(function () {
@@ -107,10 +107,16 @@ $(document).ready(function () {
         
     });
     $("#dateOff1").datepicker({
+         minDate: 2,
         //showOn: 'both',
         //buttonImageOnly: true,
        // buttonImage:  "http://localhost/WordPress/bpla/wp-content/themes/bpla/assets/calendar-icon.jpg",
         onSelect: function (date) {
+             $("#dateOff1").datepicker({dateFormat: 'yy-mm-dd'}).val();
+            nights = $("#dateOff1").datepicker('getDate');
+            //nights = date;
+            nights.setDate(nights.getDate() + 2);
+            $("#dateOff2").datepicker("option", {minDate: new Date(nights)});
             arrival = $("#dateOff1").val();
             sessionStorage.setItem("arrival", arrival);
         }
diff --git a/parts/off-canvas-menu.php b/parts/off-canvas-menu.php
index 2e4fcad..a7ec5a8 100644
--- a/parts/off-canvas-menu.php
+++ b/parts/off-canvas-menu.php
@@ -29,7 +29,30 @@
                 <input id="dateOff2" type="text" placeholder="Depart" name="datepicker2" required="required"><img id ="offCal2" src="<?php echo get_template_directory_uri(); ?>/assets/calendar-icon.jpg">
             </div>
             <div class="small-6 guest columns">
-                <input id="offGuests" type="text" placeholder="Guests" >
+                <!--<input id="offGuests" type="text" placeholder="Guests" > -->
+                <select id= "offGuests" class="weblink-occupancy weblink-textbox" name="Occupancy" >
+                                                  <option value="none" disabled selected>Guests</option>
+                                                  <option value="1">1</option>   
+                                                  <option value="2">2</option>
+                                                  <option value="3">3</option>
+                                                  <option value="4">4</option>
+                                                  <option value="5">5</option>
+                                                  <option value="6">6</option>
+                                                  <option value="7">7</option>
+                                                  <option value="8">8</option>
+                                                  <option value="9">9</option>
+                                                  <option value="10">10</option>
+                                                  <option value="11">11</option>
+                                                  <option value="12">12</option>
+                                                  <option value="13">13</option>
+                                                  <option value="14">14</option>
+                                                  <option value="15">15</option>
+                                                  <option value="16">16</option>
+                                                  <option value="17">17</option>
+                                                  <option value="18">18</option>
+                                                  <option value="19">19</option>
+                                             </select> 
+                                
                 <img class="icon-people" src="<?php echo get_template_directory_uri(); ?>/assets/people-icon.jpg">
             </div>
             <div class="small-6 columns">
diff --git a/scss/_page.header.scss b/scss/_page.header.scss
index 0ed3ef4..6d54e60 100644
--- a/scss/_page.header.scss
+++ b/scss/_page.header.scss
@@ -242,3 +242,6 @@ header .reservation select{
     width: 100px;
     height: 42px;
 }
+.right-off-canvas-menu form img.icon-people{
+   // top: 20px !important;
+}
-- 
2.17.1