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



<div class="main-meny">
  <% if (user) {  %>
    <h2><a href="/pokomonReg"> Add new pokomon</a></h2>
<% } %>
  <button class="signup"><a href="/"><--Back</a></button>
<ul class="recipes">
  <%  pokomon.forEach(function(e) {  %>
    <li class="recipe">
      <h2> <%=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"><%= 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>


        <% }) %>
        
    </li>

</div>

<script>

  const search = document.querySelectorAll('.btn')
  for (let i = 0; i < search.length; i++) {
    search[i].addEventListener("click", function() {
          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()
      } 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'); -%>