<%
  var clientName = '';
  var clientEmail = '';
  var serviceDescription = '';

  var clientNameError = '';
  var clientEmailError = '';
  var serviceDescriptionError = '';

  if(typeof(er) != 'undefined')
  {
    for(var error of er)
    { 
      switch(error.param){
        case 'clientName':        clientName = error.value;
                                  clientNameError = error.msg;
                                  break;
        case 'clientEmail':       clientEmail = error.value;
                                  clientEmailError = error.msg;
                                  break;
        case 'serviceDescription': serviceDescription = error.value;
                                  serviceDescriptionError = error.msg;
                                  break;
      }
    }
  }
%>
<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('partials/meta.ejs') %>
  <title>Home</title>
</head>
<body>
<%- include('partials/nav.ejs') %>
  <main>
    <h1>New Request</h1>
    <form action="process" method="POST" enctype="multipart/form-data">
      <div class="wrapper">
        <label for="clientName">Client Name</label>
        <input type="text" id="clientName" name="clientName" 
        value="<%= clientName %>">
        <p class="error"><%= clientNameError %></p>
      </div>
      <div class="wrapper">
        <label for="clientEmail">Client Email</label>
        <input type="text" id="clientEmail" name="clientEmail" 
        value="<%= clientEmail %>">
        <p class="error"><%= clientEmailError %></p>
      </div>  
      <div class="wrapper">
        <h2>What can we do for you today!</h2>
        <!-- <label for="serviceDescription">What can we do for you today!</label> -->
        <input type="text" id="serviceDescription" name="serviceDescription">
        <p class="error"><% serviceDescriptionError %></p>
      </div>
      <div class="wrapper">
        <h2 class="carimage">Upload car's Image</h2>
        <!-- <label for="image">Upload car's Image</label> -->
        <input type="file" id="image" name="abimage">
      </div>
    
      <div class="submission">
        <input type="submit" value="Generate Service order">
      </div>
    </form>

  </main>
  
  <%- include('partials/footer.ejs') %>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="js/tinymce/tinymce.min.js"></script>
  <script>
      tinymce.init({
        selector: '#serviceDescription'
      });
  </script>
</body>
</html>