<%- include("template/header.ejs", {tituloWeb:'Wallablob-ropa'}) %>

    <div class="container">
        <div class="text-center">
            <i class="fa-solid fa-shirt mt-5" id="icon_style"></i>
        </div>
        <h1 class="display-4 text-uppercase text-center mt-2 mb-5">Ropa</h1>

        <div class="table-responsive">
        <table class="table table-striped">
            <thead class="thead-dark">
                <tr>
                    <th scope="col" class="display-6">Talla</th>
                    <th scope="col" class="display-6">Descripción</th>
                    <th scope="col" class="display-6">Defecto</th>
                    <th scope="col" class="display-6">Precio</th>
                    <th scope="col" class="display-6">Acción</th>


                </tr>
            </thead>
            <tbody>
                <% if (arrayRopa.length> 0) { %>
                    <% arrayRopa.forEach(ropa=> { %>
                        <tr>
                            <td class="fw-bold">
                                <%= ropa.talla %>
                            </td>
                            <td>
                                <%= ropa.descripcion %>
                            </td>
                            <td class="fst-italic">
                                <%= ropa.defecto %>
                            </td>
                            <td class="fw-bold">
                                <%= ropa.precio %> €
                            </td>
                            <td>
                                <a class="btn btn-dark btn-sm" href="ropa/<%= ropa.id %>">Editar/Eliminar</a>
                                <a class="btn btn-warning btn-sm"
                                    onclick="agregar_carrito('<%= ropa.id %>','<%= ropa.talla %>','<%= ropa.descripcion %>','<%= ropa.defecto %>','<%= ropa.precio %>')">Agregar
                                    a Lista Reparación</a>
                            </td>


                        </tr>
                        <% }) %>
                            <% } %>
            </tbody>

        </table>
    </div>
        <a class="btn btn-block my-4" id="btn_style" href="/ropa/crearropa">Crear nueva prenda</a>
        <a class="btn btn-block my-4" id="btn_style" href="/main">Volver</a>
    </div>


    <script>

        const arrayCarrito = [];
        const btnEliminar = document.querySelector('.btn-danger')
        btnEliminar.addEventListener('click', async () => {
            console.log(btnEliminar.dataset.id)
            try {
                const data = await fetch(`/ropa/${btnEliminar.dataset.id}`, {
                    method: 'delete'
                })
                const res = await data.json()
                console.log(res)
                if (res.estado) {
                    window.location.href = '/ropa'
                } else {
                    console.log(res)
                }
            } catch (error) {
                console.log(error)
            }
        })

        function agregar_carrito(id_prenda, talla_prenda, descripcion_prenda, defecto_prenda, precio_prenda) {
            var id = id_prenda;
            var talla = talla_prenda;
            var descripcion = descripcion_prenda;
            var defecto = defecto_prenda;
            var precio = precio_prenda;
            var prenda = { "id": id, "talla": talla, "descripcion": descripcion, "defecto": defecto, "precio": precio }
            arrayCarrito.push(prenda);
            localStorage.setItem("pedido_ropa", JSON.stringify(arrayCarrito));

        }
    </script>

    <%- include("template/footer.ejs") %>