<!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.0">
    <script type="text/javascript" src="/js/form.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/mainform.css">
    <title>Tiny Cakes</title>
</head>
<body>
  <header><img src="/images/logo.png">
  <h1></h1>
  </header>
  <nav class="menu">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/login">Login In</a></li>
      <li><a href="/allorders">All Order</a></li>
    </ul>
  </nav>

  <h3>Please fill below details to place your order :</h3>

     <fieldset style="float: left; border-radius: 10px; margin-left:  100px;">
     <section class="w50">
    
          <form name="basicform" method="Post" onsubmit="return formsubmit();" enctype="multipart/form-data">
          <label>Customer Name : 
          <input type="text" id="cname" placeholder="First & Last Name" name="cname"></label><br><br/>
                
          <label>Address: 
          <input type="text" id="address" placeholder="Current Address" name="address" ></label><br><br/>
               
          <label> City: 
          <input type="text" id="city" placeholder="City" name="city" ></label><br><br/>
             
          <label>Province :
          <select name = "province" id="province">
          <option value="">---Select Province---</option>
          <option value="ontario">Ontario</option>
          <option value="novascotia">Nova Scotia </option>
          <option value="manitoba">Manitoba </option>
          </select><br><br/>
          
          <label>Contact Number : 
          <input type="phone" id="number" placeholder="1231231234" name="number" ></label><br><br/>
                
          <label>Email ID : 
          <input type="text" id="email" placeholder="abc@abcd.com" name="email" ></label><br><br/>
                  
          <label>Flavour Options :
            <select name = "flavour" id="flavour">
            <option value="">---Select flavours---</option>
            <option value="lemon">Lemon</option>
            <option value="pineapple">Pineapple </option>
            <option value="cherry">Cherry </option>
            <option value="fudge">Fudge </option>
            <option value="cheese">Cheese Cake </option>
            <option value="mix">Mix Fruit </option>
            </select><br><br/>

            <label>Some Description</label>
            <input type="text" id="description" name="description"> <br><br>
            
           <h3>Upload image to customise it :</h3>
            <label for="myImage">Image</label>
            <input type="file" id="myImage" name="myImage">
            
    <input type="submit" value="Place Order">
    <p id="errors"></p>
    </form>
</section>
</fieldset>

<fieldset style="float: left; border-radius: 10px; width: auto; margin-left: 100px;">
  <section class="w50">
    <div class="formData">
      <%
      if (typeof(errors) != 'undefined')
      {
        for (let error of errors)
        {
    %>
      <p class='errors'> <%= error.msg %> </p>
    
    <%
        }
      }
    %> 

      <%  
      if(typeof(description)!= 'undefined')
      {
        %>
        <p id="formResult"><h3><b>Your Order</b></h3></p>
        <table>
          <tr>
          <th>Name :</th>
          <td><%= cname %></td>
          </tr>
          <tr>
            <th>Address :</th>
            <td><%= address %></td>
          </tr>
          <tr>
            <th>City :</th>
            <td><%= city %></td>
          </tr>
          <tr>
            <th>Province:</th>
            <td><%= province %></td>
          </tr>
          <tr>
            <th>Contact Number :</th>
            <td><%= number %></td>
          </tr>
          <tr>
            <th>Email ID :</th>
            <td><%= email %></td>
          </tr>
          <tr>
              <th>Flavour Options :</th>
              <td><%= flavour %></td>
          </tr>
          <tr>
              <th>Description</th>
              <td><%= description %></td>
          </tr>
          <tr>
            <th>Image</th>
            <td><img src="/<%= myImagename %>"></td>
          </tr>
        </table>
      <%
        }
      %>
     
    </div>
  </section>
</fieldset>
</body>

</html>