<%- include("templates/cabecera") %>
<title>Informaci√≥n del item</title>
</head>
<body>
    <div class="container">
        <h1>Detalles del item</h1>
        <% if (error) { %>
            <%= mensaje %>
                <a href="/items" class="btn btn-dark btn-block my-2">
                    Volver
                </a>
                <% } %>
                    <% if (!error) { %>
                        <form id="editar" data-id="<%= items.id %>">
                            <input type="text" value="<%= items.Nombre %>" class="form-control my-2" name="Nombre"
                                id="nombreInput">
                                <input type="text" value="<%= items.Img %>"  class="form-control my-2" name="Img">
                                <input type="text" value="<%= items.Tier %>" class="form-control my-2" name="Tier"
                                id="bioInput">
                            <input type="text" value="<%= items.Precio %>" class="form-control my-2" name="Precio"
                                id="numGymInput">
                                <input type="text" value="<%= items.MiniComponentes %>" class="form-control my-2" name="MiniComponentes"
                                id="ciudadInput">
                            <button class="btn btn-warning btn-sm" type="submit">
                                Editar
                            </button>
                        </form>
                        <hr>
                        <button class="btn btn-danger btn-sm" data-id="<%= items.id %>">
                            Eliminar
                        </button>
                        <% } %>

    </div>

    <script>
        //Eliminar
        const btnEliminar = document.querySelector('.btn-danger')
        btnEliminar.addEventListener('click', async () => {
            console.log(btnEliminar.dataset.id)
            try {
                const data = await fetch(`/items/${btnEliminar.dataset.id}`, {
                    method: 'delete'
                })
                const res = await data.json()
                console.log(res)
                if (res.estado) {
                    window.location.href = '/items'
                } else {
                    console.log(res)
                }
            } catch (error) {
                console.log(error)
            }
        })
        //Editar
        const formEditar=document.querySelector('#editar');
        formEditar.addEventListener('submit', async (e) => {
            e.preventDefault()
            const Nombre = formEditar.elements['Nombre'].value
            const Img = formEditar.elements['Img'].value
            const Tier= formEditar.elements['Tier'].value
            const Precio = formEditar.elements['Precio'].value
            const MiniComponentes = formEditar.elements['MiniComponentes'].value
            const id = formEditar.dataset.id
            const data = await fetch(`/items/${id}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ Nombre, Img,Tier, Precio, MiniComponentes })
            })
            const res = await data.json()
            if (res.estado) {
                window.location.href = '/items'
            } else {
                console.log(res)
            }
        })
    </script>
    <%- include("templates/footer") %>