<%- include("template/header", {tituloWeb: 'Detalles de la Prenda' }) %>
    <div class="container">
        <h1 class="display-4 text-uppercase text-center mt-5 mb-5">Detalles del juego de mesa</h1>
        <% if (error) { %>
            <%= mensaje %> 
            <a 
                href="/juegos_mesa"
                class="btn btn-dark btn-block my-2"
            >
                Volver
            </a>
<% } %>
<% if (!error) { %>
    <form id="editar" data-id="<%= juegos_mesa.id %>">
        <label class="fw-bold">Titulo</label>
        <input type="text" value="<%= juegos_mesa.titulo %>" class="form-control my-2" name="titulo"
            id="tituloInput">
        <label class="fw-bold">Descripci√≥n</label>
        <input type="text" step="0.01" min="0"  value="<%= juegos_mesa.descripcion%>" class="form-control my-2"
            name="descripcion" id="descripcionInput">
        <label class="fw-bold">Defecto, si procede</label>
        <input type="text" step="0.01" min="0"  value="<%= juegos_mesa.defecto%>" class="form-control my-2"
            name="defecto" id="defectoInput">
        <label class="fw-bold">Precio</label>
        <input type="number" step="0.01" min="0"  value="<%= juegos_mesa.precio %>" class="form-control my-2"
            name="precio" id="precioInput">
        <button class="btn btn-warning btn-sm" type="submit">
            Editar
        </button>
    </form>
    <hr>
    <button class="btn btn-block btn-danger btn-sm me-5" data-id="<%= juegos_mesa.id %>">Eliminar</button>
    <a class="btn btn-block my-4 ms-5" id="btn_style" href="/juegos_mesa">Volver</a>
<% } %>
    </div>
<%- include("template/footer") %>
<script>
    const btnEliminar = document.querySelector('.btn-danger')
    btnEliminar.addEventListener('click', async () => {
        console.log(btnEliminar.dataset.id)
        try {
            const data = await fetch(`/juegos_mesa/${btnEliminar.dataset.id}`, {
                method: 'delete'
            })
            const res = await data.json()
            console.log(res)
            if (res.estado) {
                window.location.href = '/juegos_mesa'
            } else {
                console.log(res)
            }
        } catch (error) {
            console.log(error)
        }
    })

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

    </script>