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

<% if(user.username == userId) { %>

<div class="main-meny">
  <% if (user) {  %>
    <h2><a href="/pokomonReg"> Add new pokomon</a></h2>
<% } %>
<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>

  <% }); %>
  
</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()
      } 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>

<% } %>
<% }else { %>
<h1>You dont have permissions to view this page</h1>
  <% } %>

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