<!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">
    <title>Todo App</title>
    <!--google font-->
    <!--ICONS-->
    <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <link rel="stylesheet" href="/style.css"/>
    
</head>
<body>
    <section class = "todo-container">
        <h2> Edit List Item </h2>
        <div class ='todo'>
            
            <ul class="todo-list">
                <% todoTask.forEach(data => { %>
                    <% if (data._id==idTask) { %>
                        <li class='todo-list-item'>
                        
                            <form class="form"data-doc="<%= data._id%>"  action="/edit/<%= data._id%>" method = "POST">
                                <input  class ="title" type="text" name="title" value="<%= data.title %>">
                                <textarea class="textarea"  name="content" > <%= data.content %></textarea>
                                <button type="submit" class="confirm">confirm</button>
                                <a href="/" class="cancel">cancel</a>
                        </form>
                        </li>
                    <% } else { %>
                            <li class="todo-list-item">
                               <div class="todo-list-item-title">
                                    <%= data.title %> 
                               </div>
                               <div class="todo-list-item-content">
                                <%= data.content %> 
                           </div>
                           <a href="/edit/<%=data._id%>" class="edit"
                            ><span><i class="fa-solid fa-pen-to-square"></i></span>   
                           </a>
                             </li>
                           <% } %>
                           <% }) %>
                        </ul>
                    </div>
                </section>
                <script>
                let toUpdate = document.querySelector('.form')
                toUpdate.addEventListener('submit', async (e) => {
                    e.preventDefault()
                    let info =  document.getElementsByClassName('textarea')[0].value
                    let title =  document.getElementsByClassName('title')[0].value
                    console.log(info, title)
                    const id =`/edit/${toUpdate.dataset.doc}`
                    console.log(id)
                    try{
        const response = await fetch(id, {
                        method: 'put',
                        headers: {'Content-type': 'application/json'},
                         body: JSON.stringify({data:info, title:title})
                    })
                    const data = await response.json()
                    console.log(data)
                    window.location.href = data.redirect


                }
                catch(err){
        console.log(err)
    }
            })

                
                
                
                </script>
            </body>
            </html>