<!DOCTYPE html>
<html lang="en">

<%- include('./partials/head.ejs') %>

<body>
    <%- include('./partials/nav.ejs') %>
    <div id="itemContainer" class="container">
        <ul class="collection with-header">

            <% if (items.length>0) { %>

            <%  items.forEach(item => { %>
            <li class="collection-item">
                <div><a href="/items/<%= item._id%>"><%= item.name%> $<%= item.price%></a><a href="#!"
                        class="secondary-content">
                        <i class="material-icons" data-id="<%= item._id %>">delete</i><i
                            class="material-icons modal-trigger" href="#edit_item_modal">edit</i></a></div>
            </li>
            <%  }); %>


            <% }else{%>
            <li>There are no items</li>
            <%}%>
         
        </ul>
    </div>
    <div id="edit_item_modal" class="modal">
        <div class="modal-content">
          <h4>Edit Form</h4>
          <form id="edit_form" action="">
            <input type="text" name="name" placeholder="item name">
            <input type="number" name="price" placeholder="item price">
            <button class="btn">update</button>
          </form>
        </div>
       
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var elems = document.querySelectorAll('.modal');
        var instances = M.Modal.init(elems);
    });

    itemContainer.onclick = function (e) {
        console.log('e.target.textContent', e.target.textContent)
        if (e.target.textContent === 'delete') {
            // const id = deleteBtn.dataset.id
            const id = e.target.getAttribute('data-id');
            console.log(id)
            const endpoint = `/items/${id}`;
            fetch(endpoint, {
                method: 'DELETE'
            }).then(res => res.json()).
                then(data => {
                    console.log('data', data)
                    window.location.href = data.redirect
                }).
                catch(err => console.log(err))
        }
    }
</script>

</body>

</html>