<%- include("template/cabecera", {cabecera: 'Detalles del Pokemon' }) %>
<div class="container">
    <h1>Detalles del Pok√©mon</h1>
    <% if (error) { %>
        <%= mensaje %> 
        <a 
            href="/pokemon"
            class="btn btn-dark btn-block my-2"
        >
            Volver
        </a>
<% } %>
<% if (!error) { %>
<form id="editar" data-id="<%= pokemon.id %>">
    <input type="text" value="<%= pokemon.nombre %>" class="form-control my-2" name="nombre"
        id="nombreInput">
    <input type="text" value="<%= pokemon.tipo %>" class="form-control my-2" name="tipo"
        id="tipoInput">
    <input type="text" value="<%= pokemon.descripcion %>" class="form-control my-2"
        name="descripcion" id="descripcionInput">
    <button class="btn btn-warning btn-sm" type="submit">
        Editar
    </button>
</form>
<hr>
<button class="btn btn-danger btn-sm" data-id="<%= pokemon.id %>">
    Eliminar
</button>
<% } %>


</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(`/pokemon/${btnEliminar.dataset.id}`, {
            method: 'delete'
        })
        const res = await data.json()
        console.log(res)
        if (res.estado) {
            window.location.href = '/pokemon'
        } else {
            console.log(res)
        }
    } catch (error) {
        console.log(error)
    }
})

const formEditar = document.querySelector('#editar');
            formEditar.addEventListener('submit', async (e) => {
                e.preventDefault()
                const nombre = formEditar.elements['nombre'].value
                const tipo = formEditar.elements['tipo'].value
                const descripcion = formEditar.elements['descripcion'].value
                const id = formEditar.dataset.id
                const data = await fetch(`/pokemon/${id}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ nombre, tipo, descripcion })
                })
                const res = await data.json()
                if (res.estado) {
                    window.location.href = '/pokemon'
                } else {
                    console.log(res)
                }
            })
</script>
