<%- include("template/cabecera", {tituloWeb: 'Detalle de la ruta' }) %>
    <div class="container">
        <h1>Detalle de la ruta</h1>
        <% if (error) { %>
            <%= mensaje %> 
            <a 
                href="/ruta"
                class="btn btn-dark btn-block my-2"
            >
                Volver
            </a>
<% } %>
<% if (!error) { %>
    <form id="editar" data-id="<%= ruta.id %>">
        <input type="text" value="<%= ruta.nombre %>" class="form-control my-2" name="nombre"
            id="nombreInput">
        <input type="text" value="<%= ruta.pokemon %>" class="form-control my-2" name="pokemon"
            id="pokemonInput">
            <input type="text" value="<%= ruta.region %>" class="form-control my-2"
            name="region" id="regionInput">
        <button class="btn btn-warning btn-sm" type="submit">
            Editar
        </button>
    </form>
    <hr>
    <button class="btn btn-danger btn-sm" data-id="<%= ruta.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(`/ruta/${btnEliminar.dataset.id}`, {
                method: 'delete'
            })
            const res = await data.json()
            console.log(res)
            if (res.estado) {
                window.location.href = '/ruta'
            } 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 pokemon = formEditar.elements['pokemon'].value
                const region = formEditar.elements['region'].value
                const id = formEditar.dataset.id
                const data = await fetch(`/ruta/${id}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ nombre,pokemon,region })
                })
                const res = await data.json()
                if (res.estado) {
                    window.location.href = '/ruta'
                } else {
                    console.log(res)
                }
            })
</script>