<script>
  $(document).ready(function() {
      var i = 0;
      $('button[name="edit"]').on('click', function() {
          i++;
          if(i <= 1) {
              $('fieldset[name="form-control-fieldset"]').removeAttr("disabled");
              $('button[name="edit"]').attr("hidden", true);
              $('button[name="return"]').attr("hidden", true);
              var saveBtn = $('<button type="submit" class="btn btn-primary" data-toggle="modal" data-target=".modal">Save changes</button>');
              var cancelBtn = $('<button type="button" class="btn btn-warning ml-1">Cancel</button>');            
              $("form").append(saveBtn);
              $("form").append(cancelBtn);
          }
          $(cancelBtn).on('click', function() {
            i = 0;
            $('fieldset[name="form-control-fieldset"]').attr("disabled", true);
            $('button[name="edit"]').removeAttr("hidden");
            $('button[name="return"]').removeAttr("hidden");
            $(cancelBtn).remove();
            $(saveBtn).remove();
            $("form")[0].reset();
          });

          $(saveBtn).on('click', function(e) {
            e.preventDefault();
            $("form").submit();
            $('div[name="confirmation"]').removeAttr("hidden");
            $('button[name="goToDashboard"]').on('click', function() {
                window.location.replace('/dashboard');
            });
          });
      });
  });
</script>

<section>
    <div class="container col-lg-6 col-md-6 col-sm-12 text-center justify-content-center">
        <hr><h1>Note</h1><hr>
        <form action="/dashboard/note/edit/<%= id %>" method="POST" enctype="multipart/form-data">
            <fieldset name="form-control-fieldset" disabled>
                <div class="form-group">
                    <label for="title">Title</label>
                    <input type="title" class="form-control" name="title" value="<%= subject %>">
                </div>
                <div class="form-group">
                    <label for="body">Content</label>
                    <textarea type="body" class="form-control" name="body" rows="10"><%= content %></textarea>
                </div>
                <div class="form-group">
                    <label for="priority">Priority</label>
                    <select class="form-control" id="form-control" name="priority">
                        <% if(priority === 'Low') { %>
                            <option selected="selected">Low</option>
                            <option>Medium</option>
                            <option>High</option>
                        <% } else if(priority === 'Medium') { %>
                            <option>Low</option>
                            <option selected="selected">Medium</option>
                            <option>High</option>
                        <% } else if(priority === 'High') { %>
                            <option>Low</option>
                            <option>Medium</option>
                            <option selected="selected">High</option>
                        <% } %>
                    </select>
                </div>
                <div class="form-group">
                    <label for="status">Status</label>
                    <select class="form-control" id="form-control" name="status">
                        <% if(status === 'To do') { %>
                            <option selected="selected">To do</option>
                            <option>In progress</option>
                            <option>Done</option>
                        <% } else if(status === 'In progress') { %>
                            <option>To do</option>
                            <option selected="selected">In progress</option>
                            <option>Done</option>
                        <% } else if(status === 'Done') { %>
                            <option>To do</option>
                            <option>In progress</option>
                            <option selected="selected">Done</option>
                        <% } %>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="blob">OPTIONAL - File</label><br />
                    <input type="file" class="form-control-file" style="padding-bottom: 35px;" name="blob" value="<%= blob %>">
                  </div>
            </fieldset>
            <button type="button" name="edit" class="btn btn-success">Edit</button>
            <a role="button" name="return" class="btn btn-info" href="/dashboard">Return</button></a>
        </form>
        <%- include('./partials/modals/note-updated-modal.ejs') %>
    </div>
</section>