<%- include('partials/header'); -%>



<div class="main-meny">
  <% if (user) {  %>
    <h2><a href="/pokomonReg"> Add new pokomon</a></h2>
<% } %>
<ul class="recipes">
  <% let i = 0; pokos.forEach(function(e) { if ( i < 5) { %>
    <li class="recipe" >
      <h2 id="<%= e.pokomonName %>"> <%=e.pokomonName%></h2>
      <h4>Abilities:</h4>
      <p>1 - <%= e.ability1 %> </p>
      <p>2 - <%= e.ability2 %></p>
      <p>3 - <%= e.ability3 %></p>
      <form >
          <!-- Your form fields go here -->
          <label for="">made by</label>
          <button type="submit" id="<%= e.username %>" class="btn creatorName"><%= e.username %></button>
        </form>
        <% if (user && user.username === e.username) { %>
          <button class="editTHISSHIT"> Edit </button>
          <form class="hide formz " id="<%= e._id  %>">
            <h4 >Update pokomon</h4>
            <label for="pokomonName" name="pokoId" class="formfix pokoId">Pokomon name</label>
            <input type="text" name="pokomonName" id="pokomonName" value="<%=e.pokomonName%>"/>
            <div class="pokomonName error"></div>
            <label for="ability1" class="formfix">ability1</label>
            <input type="text" name="ability1" id="ability1" value="<%= e.ability1 %>"/>
            <label for="ability2" class="formfix ">ability2</label>
            <input type="text" name="ability2" id="ability2" value="<%= e.ability2 %>"/>
            <label for="ability3" class="formfix ">ability3</label>
            <input type="text" name="ability3" id="ability3" value="<%= e.ability3 %>"/>
            <button href="" class="update button">Update Now</button>
          </form>
          <% } %>

      <% if (user && user.admin) {%>
        <button class="delete button" id="<%= e._id %>"> <a href="">Delte pokomon</a></button>
        <% } %>

        
    </li>
    <% i++} %>
  <% }); %>
  
</div>



<script>
  
  const search = document.querySelectorAll('.btn')
  
  for (let i = 0; i < search.length; i++) {
    search[i].addEventListener("click", (e) => {
      e.preventDefault()
          search[i].style.color="blue";
          location.assign(`/${search[i].id}`);
      
      })}
</script>

<% if (user) { %>

<script>

  const forms = document.querySelectorAll('.formz')
  const editButtons = document.querySelectorAll(".editTHISSHIT")

  editButtons.forEach((button, index) => {
    button.addEventListener('click', e => {
      const clickedButton = event.target;
      const correspondingForm = forms[index];
      correspondingForm.classList.toggle('hide');
    })
  })
  forms.forEach((a) => {
    a.addEventListener('submit', async e => {
      e.preventDefault()
      
      let pokomonName = a.pokomonName.value
      let ability1 = a.ability1.value
      let ability2 = a.ability2.value
      let ability3 = a.ability3.value
      let id = a.id
      try {
        const res = await fetch('/updatePokomon', { 
            method: 'POST', 
            body: JSON.stringify({  id, pokomonName, ability1,ability2,ability3  }),
            headers: {'Content-Type': 'application/json'}
                });
            const data = await res.json()
            location.reload()
    } catch (error) {
      console.log(error);
    }})})
  

</script>


  <% } %>

<% if (user && user.admin) { %>
  <script>
    const btnDelete = document.querySelectorAll('.delete') 
      for (let i = 0; i < btnDelete.length; i++) {
     btnDelete[i].addEventListener("click", function() {
       btnDelete[i].style.color="blue";
       plsWRKFFS(btnDelete[i].id)
      
      })}
    
      async function plsWRKFFS(e) {
        try  {
            const res = await fetch('/deletePokomon', { 
            method: 'POST', 
            body: JSON.stringify({  id: e }),
            headers: {'Content-Type': 'application/json'}
                });
            const data = await res.json()
            if (data.errors) {
                console.log(data.errors);
            }


        } catch (error) {
            console.log(error);
        }
     }


  </script>

<% } %>

<%- include('partials/footer') -%>