  <!--
// written by: Siddharth Musale and Corey Chen
// tested by: Siddharth Musale and Corey Chen
// debugged by: Corey Chen
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>AutoPark</title>

    <!-- Bootstrap core CSS -->
    <link href="../public/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../public/css/starter-template.css" rel="stylesheet">

  </head>

<body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container">
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/users/home">Auto Park</a>
                  </div>
                  <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                      <li class="active"><a href="/users/home">Welcome</a></li>
                      <li><a href="/users/map">Parking Map</a></li>
                      <li><a href="/users/update">Update User</a></li>
                        <li><a href="/users/dynamicprice">Price</a></li>
                      <li><a href="/users/about">About</a></li>
                      <li><a href="/users/home">Logout</a></li>
                    </ul>
                  </div><!--/.nav-collapse -->
                </div>
              </nav>
    <div class="container">
    <table class="table">
    <thead>
      <tr>
        <th scope="col"><h3>Make Reservation</h3></th>
        <th scope="col"><h3>Parking Map</h3></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
            <form method = 'POST' action = '/reservation/create'>
              Reservation Start Date:<br>
              <input name="datefield" type='datetime-local'></input><br><br>
      
              Parking Spot Number:<br>
              <input name=spotID type = 'number' ></input><br>
              <!-- ill finish this later -->
              <input type = 'submit' value = 'Create Reservation' name = 'makeRes'>
            </form> 
        </td>
        <td>
            <svg width="640" height="520" id="mapGraphic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
          
              <g>
              <rect x="-1" y="-1" width="642" height="522" id="canvas_background" fill="#b2b2b2"/>
              <g id="canvasGrid" display="none">
              <rect id="svg_5" width="580" height="400" x="1" y="1" stroke-width="0" fill="url(#gridpattern)"/>
              </g>
              <g>
              <title>Layer 1</title>
              <rect id="svg_10" height="96" width="48" y="37.35676" x="22.4926" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <rect id="svg_17" height="96" width="48" y="37.35676" x="70.34975" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <rect id="svg_21" height="96" width="48" y="37.35676" x="118.20658" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <rect id="svg_22" height="96" width="48" y="37.35676" x="166.06373" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <rect id="svg_23" height="96" width="48" y="37.35676" x="213.92072" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_54" y="28.04684" x="22" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">Floor 1</text>
              <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_55" y="159.51738" x="25.52941" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">101</text>
              <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_56" y="159.51738" x="74.94109" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">102</text>
              <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_57" y="159.51738" x="121.99984" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">103</text>
              <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_58" y="159.51738" x="171.41153" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">104</text>
              <text stroke="#000" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_59" y="159.51738" x="218.47028" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">105</text>
              <rect id="svg_60" height="96" width="48" y="37.35676" x="351.90385" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <rect id="svg_61" height="96" width="48" y="37.35676" x="399.761" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <rect id="svg_62" height="96" width="48" y="37.35676" x="447.61783" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <rect id="svg_63" height="96" width="48" y="37.35676" x="495.47498" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <rect id="svg_64" height="96" width="48" y="37.35676" x="543.33197" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_65" y="28.04684" x="351.41125" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">Floor 2</text>
              <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_66" y="159.51738" x="354.94066" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">201</text>
              <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_67" y="159.51738" x="404.35234" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">202</text>
              <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_68" y="159.51738" x="451.4111" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">203</text>
              <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_69" y="159.51738" x="500.82278" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">204</text>
              <text stroke="#000" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_70" y="159.51738" x="547.88153" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">205</text>
              <rect id="svg_71" height="96" width="48" y="213.82707" x="22.4926" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <rect id="svg_72" height="96" width="48" y="213.82707" x="70.34975" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <rect id="svg_73" height="96" width="48" y="213.82707" x="118.20658" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <rect id="svg_74" height="96" width="48" y="213.82707" x="166.06373" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <rect id="svg_75" height="96" width="48" y="213.82707" x="213.92072" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_76" y="204.51715" x="22" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">Floor 3</text>
              <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_77" y="335.98769" x="25.52941" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">301</text>
              <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_78" y="335.98769" x="74.94109" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">302</text>
              <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_79" y="335.98769" x="121.99984" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">303</text>
              <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_80" y="335.98769" x="171.41153" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">304</text>
              <text stroke="#000" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_81" y="335.98769" x="218.47028" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">305</text>
              <rect id="svg_82" height="96" width="48" y="213.82707" x="351.90385" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <rect id="svg_83" height="96" width="48" y="213.82707" x="399.761" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <rect id="svg_84" height="96" width="48" y="213.82707" x="447.61783" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <rect id="svg_85" height="96" width="48" y="213.82707" x="495.47498" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <rect id="svg_86" height="96" width="48" y="213.82707" x="543.33197" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_87" y="205.69362" x="351.41125" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">Floor 4</text>
              <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_88" y="335.98769" x="356.11713" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">401</text>
              <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_89" y="335.98769" x="404.35234" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">402</text>
              <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_90" y="335.98769" x="451.4111" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">403</text>
              <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_91" y="335.98769" x="500.82278" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">404</text>
              <text style="cursor: move;" stroke="#000" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_92" y="335.98769" x="547.88153" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">405</text>
              <rect id="svg_93" height="96" width="48" y="390.29738" x="22.4926" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <rect id="svg_94" height="96" width="48" y="390.29738" x="70.34975" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <rect id="svg_95" height="96" width="48" y="390.29738" x="118.20658" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <rect id="svg_96" height="96" width="48" y="390.29738" x="166.06373" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <rect id="svg_97" height="96" width="48" y="390.29738" x="213.92072" fill-opacity="null" stroke-opacity="null" stroke="#000" fill="#BBBBBB"/>
              <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_98" y="380.98747" x="22" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">Floor 5</text>
              <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_99" y="512.45801" x="25.52941" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">501</text>
              <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_100" y="512.45801" x="74.94109" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">502</text>
              <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_101" y="512.45801" x="121.99984" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">503</text>
              <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_102" y="512.45801" x="171.41153" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">504</text>
              <text style="cursor: move;" stroke="#000" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_103" y="512.45801" x="218.47028" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">505</text>
              </g>
          </svg>  
        </td>
      </tr>


    </tbody>
    </table>
    </div>
     <!-- Bootstrap core JavaScript
                  ================================================== -->
                  <!-- Placed at the end of the document so the pages load faster -->
                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
                  <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
                  <script src="../public/js/bootstrap.min.js"></script>
                  <script>
                        function getColor(c){
                            if(c == "o" || c == "r"){
                                return "red";
                            }else{
                                return "green";
                            }
                        }
                        var myVar = <%- JSON.stringify(data) %>;    
                        // this is the string received from the database. each char represents a spot, o is occupied, r is reserved, n is not occupied
                        
                        svg_10.style.fill=getColor(myVar.charAt(0));
                        svg_17.style.fill=getColor(myVar.charAt(1));
                        svg_21.style.fill=getColor(myVar.charAt(2));
                        svg_22.style.fill=getColor(myVar.charAt(3));
                        svg_23.style.fill=getColor(myVar.charAt(4));
                        svg_60.style.fill=getColor(myVar.charAt(5));
                        svg_61.style.fill=getColor(myVar.charAt(6));
                        svg_62.style.fill=getColor(myVar.charAt(7));
                        svg_63.style.fill=getColor(myVar.charAt(8));
                        svg_64.style.fill=getColor(myVar.charAt(9));
                        svg_71.style.fill=getColor(myVar.charAt(10));
                        svg_72.style.fill=getColor(myVar.charAt(11));
                        svg_73.style.fill=getColor(myVar.charAt(12));
                        svg_74.style.fill=getColor(myVar.charAt(13));
                        svg_75.style.fill=getColor(myVar.charAt(14));
                        svg_82.style.fill=getColor(myVar.charAt(15));
                        svg_83.style.fill=getColor(myVar.charAt(16));
                        svg_84.style.fill=getColor(myVar.charAt(17));
                        svg_85.style.fill=getColor(myVar.charAt(18));
                        svg_86.style.fill=getColor(myVar.charAt(19));
                        svg_93.style.fill=getColor(myVar.charAt(20));
                        svg_94.style.fill=getColor(myVar.charAt(21));
                        svg_95.style.fill=getColor(myVar.charAt(22));
                        svg_96.style.fill=getColor(myVar.charAt(23));
                        svg_97.style.fill=getColor(myVar.charAt(24));
                    </script>

</body>
</html>
