<!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" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap"
	      rel="stylesheet">
        <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
        <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/css/style.css" />
    <title>Edit Post - <%= post.Quote %></title>
</head>
<body class="container">

<header>
  <!-- <a href="/newpost">New Post</a>
  <a href="/">Back to Overview</a> -->
  
    <a href="/posts/<%= post._id %>"><i class='bx bxs-caret-left-square' ></i></a>
</header>

<main>
  <h1>Edit Post</h1>

  <form id="stepForm" action="/posts/<%= post._id %>/edit" method="POST" enctype="multipart/form-data">
    <div class="step" id="step1">
      <h2>Gast details</h2>
      <label for="image">Foto van gast</label>
      <input type="file" id="image" name="image" accept="image/*" />
      <br />
      <label for="naam">Naam van gast</label>
      <input type="text" id="naam" name="guestName" value="<%= post.Gastnaam %>" required />
      <br />
      <label for="job">Functie van gast</label>
      <input type="text" id="job" name="guestJob" value="<%= post.FunctieGast %>" required />
      <br />
      <label for="quote">Quote van gast</label>
      <input type="text" id="quote" name="guestQuote" value="<%= post.Quote %>" required />
      <br />
      <label for="link">URL van bedrijf</label>
      <input type="text" id="link" name="guestCompany" value="<%= post.Bedrfijfsurl %>" required />
      <br />
      <label for="skillset">Skillset van gast (comma-separated)</label>
      <input type="text" id="skillset" name="guestSkillset" value="<%= post.Skills %>" required />
      <br />
      <label for="mail">Mail van gast</label>
      <input type="mail" id="mail" name="guestMail" value="<%= post.Mail %>" required />
      <br />
      <label for="social">linkdin van gast</label>
      <input type="text" id="social" name="guestSocial"  value="<%= post.Social %>"required />
      <br />
  
      <button type="button" onclick="nextStep()">Next</button>
    </div>
  
    <div class="step" id="step2">
      <h2>Gastles details</h2>
      <label for="gastles">NR. van gastles</label>
      <input type="number" id="gastles" name="guestNumber" value="<%= post.GastlesNR %>" required />
      <br />
      <label for="thema">Thema van gastles</label>
      <input type="text" id="thema" name="guestTheme" value="<%= post.GastlesThema %>" required />
      <br />
      <label for="thema">Datum van gastles</label>
      <input type="text" id="thema" name="guestDate" value="<%= post.GastlesDatum %>" required />
      <br />
      <label for="tags">Tags (comma-separated):</label>
      <input type="text" id="tags" name="tags" value="<%= post.Tags %>" required />
      <br />
  
      <button type="button" onclick="nextStep()">Next</button>
      <button type="button" onclick="prevStep()">Previous</button>
    </div>
  
    <div class="step" id="step3">
      <h2>Gastles text</h2>
      <label for="content">Content van gastles:</label><br />
      <div id="editor">
        <%- post.Content %>
      </div>
    <input type="hidden" name="quillContent" id="quillContent">
    <!-- <textarea id="content" name="content" required> <%= post.Content %> </textarea> -->
      <button type="button" onclick="prevStep()">Previous</button>
      <button type="submit">Save Changes</button>
    </div>
  </form>
</main>

<footer>
  <form action="/posts/<%= post._id %>/remove" method="POST">
    <button type="submit" onclick="return confirm('Are you sure you want to delete this post?')">Remove Post</button>
  </form>
  <%- include('../partials/footer'); %>
</footer>

<!-- Include Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- <script src="https://cdn.quilljs.com/1.3.6/quill.core.js"></script> -->
<!-- <script src="https://cdn.quilljs.com/1.3.6/quill.image.js"></script> -->
<!-- Initialize Quill -->
<script>
   const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      ['bold', 'italic', 'underline'],
      ['blockquote', 'code-block'],
      [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
      ['link'],
      ['image'] // Include the 'image' module in the toolbar
    ]
  }
});
 
   // Get the form element
   const form1 = document.getElementById('stepForm');
 
   // Add an event listener for form submission
   form1.addEventListener('submit', function(event) {
     // Prevent the default form submission behavior
     event.preventDefault();
     
     // Get the HTML content from Quill
     const quillContent = quill.root.innerHTML;
 
     // Set the content to the hidden input field
     document.getElementById('quillContent').value = quillContent;
 
     // Submit the form
     this.submit();
   });
 </script>
<script src="/js/index.js"></script>
</body>
</html>
