<!DOCTYPE html>
<!-- http://localhost:8000/GroupProjectIndex2.html -->

<!-- main page / indexejs.js created by Evan Doucett register-->
<html lang="en">
<head> 
<!-- bootstrap import-->  
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Travel Experts</title>
  <link href="/styles-evan.css" rel="stylesheet" type="text/css" /> <!-- css import sheet-->
  <link rel="icon" type="image/png" href="/planeicon.jpg">
  <script type='text/javascript' src ="/GroupProFunct.js"></script>
<!-- boot strap -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <!-- jquery import-->

<!-- date script -->
  <script>
      var today = new Date();
      var month = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
      var nowT = Date.now();
  </script>
                  
</head>
<body>
  <%- include('../components/header.ejs') %> 

  <script>
//* current date time
    var dateString = today.getFullYear() + " / " + month[today.getMonth()] + " / " + today.getDate();
    document.write("Current Date: " + dateString + "<br/>");
  </script>

  <hr class="featurette-divider">
  <section>
<!-- widget plugin for weather-->
    <a class="weatherwidget-io" href="https://forecast7.com/en/40d71n74d01/new-york/" data-label_1="NewYork" data-label_2="WEATHER" data-theme="original" height="75px" >NEW YORK WEATHER</a>
      <script>
          !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s) ;js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
      </script>
  </section>

  <hr class="featurette-divider">

<!-- AUTO SLIDE SHOW -->
    <div class="slideshow-container " >
      <div class="mySlides fade ">
          <div class="numbertext"></div>
            <img src="/airplaneride.jpg"  alt="This picture is currently not availible" class="background">
      </div>
      <div class="mySlides fade ">
          <div class="numbertext"></div>
            <img src="/banff.jpg" alt="This picture is currently not availible" class="background">
      </div>
      <div class="mySlides fade ">
          <div class="numbertext"></div>
            <img src="/clearbeach.jpg"  alt="This picture is currently not availible" class="background">
      </div>
    </div>
    <br>
    <div style="text-align:center">
        <span class="dot"></span> 
            <span class="dot"></span> 
                <span class="dot"></span> 
    </div>
<!-- Slideshow script -->
<script>
  let slideIndex = 0;
  showSlides();
  function showSlides() {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    let dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) 
        {
            slides[i].style.display = "none";  
        }
        slideIndex++;
          if (slideIndex > slides.length) {slideIndex = 1}    
          for (i = 0; i < dots.length; i++) 
          {
              dots[i].className = dots[i].className.replace(" active", "");
          }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 2000); // Change image every 2 seconds
  }		
        
</script>
<hr class="featurette-divider">

<!-- widget plugin for weather-->
<a class="weatherwidget-io" href="https://forecast7.com/en/34d05n118d24/los-angeles/" data-label_1="LOS ANGELES" data-label_2="WEATHER" data-theme="original" >LOS ANGELES WEATHER</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script>

<hr class="featurette-divider">

<p class="d centered3">HOT DEALS ARE HERE!</p>

<!-- Tab links -->
  <div class="tab" align="center">
      <button class="tablinks" onclick="openCity(event, 'Flights')" id="defaultOpen" ><p> Hot Flight Deals </p></button>
        <button class="tablinks" onclick="openCity(event, 'Hotels')"> <p>Hot Hotel Deals</p></button>
          <button class="tablinks" onclick="openCity(event, 'Cars')"> <p>Vehicle</p></button>
            <button class="tablinks" onclick="openCity(event, 'Entertowin')"> <p>Enter To Win!</p></button>
  </div>
<!-- Tab content -->
  <div id="Flights" class="tabcontent" >
    <h3> Flights </h3>
    <p class="tablinks"> Check out our deals!! </p>
<!-- flight import from custom table in database-->
    <table class="table table-sm table-light table-bordered" style="border:1px">
      <%	flightResult.forEach((flightResult)=>{ %>
        <tr class="table-secondary">
          <th>Airline</th>
            <th>Orig</th>
              <th>Dest</th>
                <th>Cost</th>
                  <th>Type</th>
        </tr>
        <tr>
          <td class="a" hidden><%= flightResult.FlightId %></td>
            <td class="a"><%= flightResult.FlightAirline %></td>
              <td class="a"><%= flightResult.FlightOrigin %></td>
                <td class="a"><%= flightResult.FlightDest %></td>
                  <td class="a"><%= flightResult.FlightCost %></td>
                    <td class="a"><%= flightResult.FlightType %></td>
        </tr>
      <%	}); %>
      </table>
      <br/><br/>
      <a href="register" target="blank">
        <button class="button4"; href="register"> REGISTER TO BOOK NOW!</button>
      </a>
      <a href="signin" target="blank">
        <button class="button4"; href="signin"> SIGN IN TO BOOK!</button>
      </a>

  </div>
  <div id="Hotels" class="tabcontent">
    <h3> Hot Hotel Deals! </h3>
    <p class="tablinks"> Find great deals on hotels here! </p>

<!-- hotel import from custom table in database-->
    <table class="table table-sm table-light table-bordered" style="border:1px">
      <%	hotelResult.forEach((hotelResult)=>{ %>
        <tr class="table-secondary">
          <th>Hotel</th>
            <th>Addr.</th>
              <th>City</th>
                <th>Prov</th>
                  <th>Cnty</th>
                    <th>zip</th>
                      <th>Per Night</th>
                        <th>Rating</th>
                          <th>Deal</th>
                            <!--<th>Deal Exp</th>-->
        </tr>
        <tr>
          <td class="a" hidden><%= hotelResult.HotelId %></td>
            <td class="a"><%= hotelResult.HotelName %></td>
              <td class="a"><%= hotelResult.HotelAddress %></td>
                <td class="a"><%= hotelResult.HotelCity %></td>
                  <td class="a"><%= hotelResult.HotelProvStat %></td>
                    <td class="a"><%= hotelResult.HotelCountry %></td>
                      <td class="a"><%= hotelResult.HotelPostal %></td>
                        <td class="a"><%= hotelResult.HotelPerNight %></td>
                          <td class="a"><%= hotelResult.HotelRating %></td>
                            <td class="a"><%= hotelResult.HotelDeal %></td>
                              <!-- <td class="a"><%= hotelResult.HotelDateExp %></td>-->
        </tr>
      <%	}); %>
      </table>
    <br/><br/>
    <a href="register" target="blank">
      <button class="button4"; href="register"> REGISTER TO BOOK NOW!</button>
    </a>
    <a href="signin" target="blank">
      <button class="button4"; href="signin"> SIGN IN TO BOOK!</button>
    </a>
  </div>

<!-- vehicle tab -->    
  <div id="Cars" class="tabcontent">
    <h3> Vehicle </h3>
    <div id="cartype" class="tablinks"> Need a way to get around?</div>
<!-- vehicle selection option -->
    <label for="cartype" class="tablinks">Please select a vehicle size:</label>
      <select id = "carselection" class="tablinks">
        <option value="small">Small vehicle: Toyota Yaris, Nissan Versa or Ford Focus</option>
          <option value="mid">Mid Size vehicle:  Hyundai Elantra, Toyota Carolla, or a Kia Optima</option>
            <option value="large">large vehicle: Dodge Durango, GMC Acadia, Honda Pilot</option>
      </select>
    <label for="carDays" class="tablinks">Please select how many days you would like this vehicle: </label>
      <select id = "daySelection" class="tablinks">
          <option value="1">1 Day</option>
            <option value="2">2 Days</option>
              <option value="3">3 Days</option>
                <option value="4">4 Days</option>
                  <option value="5">5 Days</option>
                    <option value="6">6 Days</option>
                      <option value="7">7 Days</option>
                        <option value="8">8 Days</option>
      </select>
    <input type="button" class="button4" id="carbutton" value="SHOW ME MY DEAL" onclick="carCost()"/>
    <div class="carresults" id="result"></div>
    <a href="register" target="blank">
      <button class="button4"; href="register"> REGISTER TO BOOK NOW!</button>
    </a>
    <a href="signin" target="blank">
      <button class="button4"; href="signin"> SIGN IN TO BOOK!</button>
    </a>
  </div>
<!-- enter_to_win tab-->    
    <div id="Entertowin" class="tabcontent" >
      <p class="h"> ENTER TO WIN A FREE TRIP!! </p>
      <p class="i"> Hello Fellow Travellers!
          You can enter to win a FREE trip for 4 to Mexico! Staying at the beautiful Azul Beach Resort in Playa del Carmen. 
          Feel free to share this with all of your friends!  Good luck to everyone and Happy Travels!
    
          Travel Expert Team </p>

<!-- enter_to_win table insert-->
<form method="post" action="/post-form" class="entertowin">
      <p class="j">First Name: <input type="text" name="EtwFirstName" pattern="[Aa-Za-z]" /></p><br />
      <p class="j">Last Name: <input type="text" name="EtwLastName" pattern="[Aa-Za-z]"/></p><br />
      <p class="j">Home Phone: <input type="text" name="EtwHomePhone" pattern=".{8,}"/></p><br />
        <p class="j">Email: <input type="text" name="EtwEmail" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"/></p><br />
          <p class="j">Age (Min age of 18 required): <input type="text" name="EtwAge" min="18" max="99" step="1" value="18"/></p><br />
          <button class="button4" type="submit">SUBMIT</button>
          <button class="button4" type="reset" onclick="return confirm('Are you sure you want to reset?');"> RESET </button>
      </select>
      <br />
</form>
</div>
<hr class="featurette-divider">

<!-- https://www.bing.com/search?q=free+weather+widget&form=ANNTH1&refig=724b11076f6e4453b25cb6a578a23f5e  -->
        <p class="tablinks"> <div id="ml_6d68750a">
          <a class="weatherwidget-io" href="https://forecast7.com/en/20d63n87d07/playa-del-carmen/" data-label_1="PLAYA DEL CARMEN" data-label_2="WEATHER" data-theme="original" >PLAYA DEL CARMEN WEATHER</a>
          <script>
          !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
          </script>
  </div>

<!--tab script -->	
  <script>
    function openCity(evt, cityName) 
    {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
          tablinks = document.getElementsByClassName("tablinks");
          for (i = 0; i < tablinks.length; i++) {
              tablinks[i].className = tablinks[i].className.replace(" active", "");
          }
          document.getElementById(cityName).style.display = "block";
          evt.currentTarget.className += " active";
      }
  </script>
  <br/>


  <hr class="featurette-divider">

<!-- image gallary -->
<p class="d centered3">Check Out These Great Offers!</p>

<br/>
<div class="row">
    <div class="col-md-4">
      <div class="gallery">
        <a href="https://en.wikipedia.org/wiki/United_Kingdom" >
          <img src="buck.jpg" alt="sorry but the shark is not availible" style="width:100%">
          <div class="caption">
            <p>A hammerhead shark uses its wide head to trap stingrays by pinning them to the seafloor. 
                The shark's eye placement, on each end of its very wide head, allows it to scan more area more quickly than other sharks can.</p>
          </div>
        </a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="gallery">
        <a href="https://635.gtbank.com/2018/07/destination-guide-croatia-or-france/">
          <img src="francep.jpg" alt="sorry, boating is not availible" style="width:100%">
          <div class="caption">
            <p>Sail along San Francisco's breathtaking waterfront, under the majestic Golden Gate Bridge, and around notorious Alcatraz Island. 
                Discover San Francisco's history via an award-winning audio commentary, available in 16 languages.</p>
          </div>
        </a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="gallery">
        <a href="https://www.alcatrazislandtickets.com/Alcatraz-Tours/?msclkid=b903d467a6651ed334b8b6ffbe584a0d">
          <img src="at.png" alt="sorry but alcatraz is not availible" style="width:100%">
          <div class="caption">
            <p>Tour the Inside of the Alcatraz prison cellhouse. 
                Step back in time and experience the legendary island that has been a civil war fort, a military prison and one of the most notorious federal penitentiaries in US history.</p>
          </div>
        </a>
      </div>
    </div>
  </div>
<br/>
</container>

<hr class="featurette-divider">

<div class="row">
    <div class="col-md-4">
      <div class="gallery">
        <a href="https://www.getyourguide.com">
          <img src="rome.jpg" alt="sorry but the casa is not availible" style="width:100%">
          <div class="caption">
            <p>A hammerhead shark uses its wide head to trap stingrays by pinning them to the seafloor. 
                The shark's eye placement, on each end of its very wide head, allows it to scan more area more quickly than other sharks can.</p>
          </div>
        </a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="gallery">
        <a href="https://www.gadventures.com/destinations/europe/italy/">
          <img src="r.jpg" alt="sorry, swimming is not availible" style="width:100%">
          <div class="caption">
            <p>Sail along San Francisco's breathtaking waterfront, under the majestic Golden Gate Bridge, and around notorious Alcatraz Island. 
                Discover San Francisco's history via an award-winning audio commentary, available in 16 languages.</p>
          </div>
        </a>
      </div>
    </div>
<div class="col-md-4">
  <div class="gallery">
    <a href="https://www.intrepidtravel.com/ca/australia/2-week?utm_source=bing&utm_medium=cpc&utm_campaign=Adapt%20-%20CA%20-%20Search%20-%20International%20-%20MOFU%20-%20Oceania%20-%20DSA&utm_term=%2Fca%2Faustralia%2F&utm_content=Australia">
      <img src="R (2).jpg" alt="sorry but austrailia is not availible" style="width:100%">
        <div class="caption">
          <p>Tour the Inside of the Alcatraz prison cellhouse. 
                Step back in time and experience the legendary island that has been a civil war fort, a military prison and one of the most notorious federal penitentiaries in US history.</p>
        </div></a>
    </div>
  </div>
</div>
<a href="register" target="blank">
  <button class="button4"; href="register"> REGISTER TO BOOK NOW!</button>
</a>
<a href="signin" target="blank">
  <button class="button4"; href="signin"> SIGN IN TO BOOK!</button>
</a>
<br/>

<hr class="featurette-divider">

  <p class="d centered3">Media Blitz Here!</p>

  <div class="row featurette2 buffering">
    <div class="col-md-7">
      <h2 class="featurette2-heading">It'll blow your mind.<span class="text-muted">It'll blow your mind.</span></h2>
      <p class="lead">When you book on the app you can save up to 20% on select packages!! With these app deals you'll save even more on trips, and that means you can take more trips, and manage it all on the go!</p>
    </div>
    <div class="col-md-5">
      <img class="featurette-image img-fluid mx-auto borders" data-src="holder.js/500x500/auto" alt="World.jpg" style="width: 500px; height: 300px;" src="/worldtravel.jpg" data-holder-rendered="true">
    </div>
  </div>

  <hr class="featurette-divider">

  <div class="row featurette2 buffering">
    <div class="col-md-7 order-md-2">
      <h2 class="featurette-heading">Oh yeah, it's that good! <span class="text-muted">See for yourself.</span></h2>
      <p class="lead">Because when you purchase a package, you can get flight and a hotel for under CA$699.00 per person.</p>
    </div>
    <div class="col-md-5 order-md-1">
      <img class="featurette-image img-fluid mx-auto borders" data-src="holder.js/500x500/auto" alt="SanFranPrison" src="savingsplane.jpg" data-holder-rendered="true" style="width: 500px; height: 300px;">
    </div>
  </div>

  <hr class="featurette-divider">

  <div class="row featurette buffering">
    <div class="col-md-7">
      <h2 class="featurette-heading">Follow your Sunshine! <span class="text-muted">Let your Florida adventure begin.</span></h2>
      <p class="lead">What can be discovered beyond your home? Maybe 825 miles of beaches? How about 320 freshwater springs or hidden caverns located in Florida.</p>
    </div>
    <div class="col-md-5">
      <img class="featurette-image img-fluid mx-auto borders" data-src="holder.js/500x500/auto" alt="R(2).jpg" src="florida.jpg" data-holder-rendered="true" style="width: 500px; height: 300px;">
    </div>
  </div>

  <hr class="featurette-divider">
  <button onclick="topFunction()"; id="myBtn"; title="Go to top"; class="button4";>Scroll to the Top</button>
  <br/>

<!-- Weather Widget Hawaii curtesy of https://weatherwidget.io/-->
    <a class="weatherwidget-io" href="https://forecast7.com/en/19d90n155d58/hawaii/" data-label_1="HAWAII" data-label_2="WEATHER" data-theme="original" >HAWAII WEATHER</a>
    <script>

    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
  </script>

  <script>
      // Get the element with id="defaultOpen" and click on it
      document.getElementById("defaultOpen").click();
  </script>

<hr class="featurette-divider">

</body>
<%- include('../components/footer.ejs') %> 

</html>
