<%
  var inputName = "" ;
  var inputEmail = "";
  var inputSubject = "";
  var inputDescription= "";
  if(typeof(keepReqFormData) != "undefined")
  {
    inputName = keepReqFormData.rName;
    inputEmail = keepReqFormData.rEmail;
    inputSubject= keepReqFormData.rSubject;
    inputDescription = keepReqFormData.rDescription;
  };
%>
<!DOCTYPE html>
<html lang="en">
    <head>
        <%- include("partials/meta.ejs")  %> 
        <title>Syed's Gift Shop: Submit Request</title>
    </head>
    <body>
        <%- include('partials/header-nav.ejs') %> 
        <main>
            <section class="request_page">
                <% if (typeof(rName) != "undefined") { %> 
                    <h1> Thank you</h1>
                    <p>Your request has been successfully submitted!</p>
                <% }else{ %>
                <form action="/request" method="post" enctype="multipart/form-data">
                    <h2>Submit Request</h2>
                    <div class="labelwrapper">
                        <div class="fieldwrapper">
                            <label for="rName">Name*: </label>
                            <div>
                                <input type="text" id="rName" name="rName" value="<%=inputName%>">
                                <% if (typeof(rErrorsMap) != "undefined" && typeof(rErrorsMap.rName) != "undefined") {%> 
                                    <p> <%= rErrorsMap.rName.msg %> </p> 
                                <% } %> 
                            </div>
                        </div>
                        <div class="fieldwrapper">
                            <label for="rEmail">Email*: </label>
                            <div>
                                <input type="email" id="rEmail" name="rEmail" value="<%=inputEmail%>">
                                <% if (typeof(rErrorsMap) != "undefined" && typeof(rErrorsMap.rEmail) != "undefined"){%> 
                                    <p> <%= rErrorsMap.rEmail.msg %> </p> 
                                <% } %>  
                            </div>
                        </div>
                        <div class="fieldwrapper ">
                            <label for="rPhoto">Photo: </label>
                            <input type="file" id="rPhoto" name="rPhoto">
                        </div>
                        <div class="fieldwrapper">
                            <label for="rSubject">Subject*: </label>
                            <div>
                                <input type="text" id="rSubject" name="rSubject" value="<%=inputSubject%>">
                                <% if (typeof(rErrorsMap) != "undefined" && typeof(rErrorsMap.rSubject) != "undefined"){%> 
                                    <p> <%= rErrorsMap.rSubject.msg %> </p> 
                                <% }%> 
                            </div>
                        </div>
                        <div class="fieldwrapper">
                            <label for="rDescription">Description*: </label>
                            <div>
                                <input type="text" id="rDescription" name="rDescription" value="<%=inputDescription%>">
                                <% if (typeof(rErrorsMap) != "undefined" && typeof(rErrorsMap.rDescription) != "undefined"){%> 
                                    <p> <%= rErrorsMap.rDescription.msg %> </p> 
                                <% }%> 
                            </div>
                        </div>
                    </div>
                    <div class="submission">
                        <input type="submit" value="Submit">
                        <input type="reset" value="Clear">
                    </div>
                </form>
                <% } %> 
            </section>
        </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: '#rDescription'
          })
        </script>
    </body>
</html>