<%- include("template/cabecera", {tituloWeb: 'Detalles del Voluntario' }) %>
    <div class="container">
        <h1>Detalles del Voluntario</h1>
        <% if (error) { %>
            <%= mensaje %>
                <a href="/voluntario" class="btn btn-dark btn-block my-2">
                    Volver
                </a>
                <% } %>
                    <% if (!error) { %>
                        <form id="editar" data-id="<%= voluntario.id %>">
                            <input type="text" value="<%= voluntario.Nombre %>" class="form-control my-2" name="Nombre"
                                id="NombreInput">
                            <input type="text" value="<%= voluntario.Apellido %>" class="form-control my-2" name="Apellido"
                                id="ApellidoInput">
                            <input type="text" value="<%= voluntario.Ciudad %>" class="form-control my-2" name="Ciudad"
                                id="Ciudad">
                            <input type="text" value="<%= voluntario.Domicilio %>" class="form-control my-2" name="Domicilio"
                                id="Domicilio">
                            <input type="text" value="<%= voluntario.Dni %>" class="form-control my-2" name="Dni"
                                id="Dni">
                                <input type="text" value="<%= voluntario.Edad %>" class="form-control my-2" name="Edad"
                                id="Edad">
                            <input type="text" value="<%= voluntario.Formacion %>" class="form-control my-2" name="Formacion"
                                id="Formacion">
                                <input type="text" value="<%= voluntario.Experiencia %>" class="form-control my-2" name="Experiencia"
                                id="Experiencia">
                                <button class="btn btn-danger btn-sm" data-id="<%= voluntario.id %>">
                                    Eliminar
                                </button>
                        </form>
                        <hr>
                        
                        <% } %>

    </div>
    <%- include("template/footer") %>
        <script>
            const btnEliminar = document.querySelector('.btn-danger')
            btnEliminar.addEventListener('click', async () => {
                console.log(btnEliminar.dataset.id)
                try {
                    // https://developer.mozilla.org/es/docs/Web/API/HTMLElement/dataset
                    const data = await fetch(`/voluntario/${btnEliminar.dataset.id}`, {
                        method: 'delete'
                    })
                    const res = await data.json()
                    console.log(res)
                    if (res.estado) {
                        window.location.href = '/voluntario'
                    } else {
                        console.log(res)
                    }
                } catch (error) {
                    console.log(error)
                }
            })
            const formEditar = document.querySelector('#editar');
            formEditar.addEventListener('submit', async (e) => {
                e.preventDefault()
                const Nombre = formEliminar.elements['Nombre'].value
                const Apellido = formEditar.elements['Apellido'].value
                const Ciudad = formEditar.elements['Ciudad'].value
                const Domicilio =formEditar.elements['Domicilio'].value
                const Dni =formEditar.elements['Dni'].value
                const Edad =formEditar.elements['Edad'].value
                const Formacion =formEditar.elements['Formacion'].value
                const Experiencia =formEditar.elements['Experiencia'].value
                const id = formEditar.dataset.id
                const data = await fetch(`/voluntario/${id}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ Nombre, Apellido, Ciudad,Domicilio,Dni,Edad,Formacion,Experiencia })
                })
                const res = await data.json()
                if (res.estado) {
                    window.location.href = '/voluntario'
                } else {
                    console.log(res)
                }
            })
        </script>