<%- include ("template/header.ejs",{tituloWeb: "Carrito" })%>
    <div class="container-fluid">

        <div class="row mt-5">
            <div class="col col-sm-6 col-lg-8" id="lista_carrito">
                <div class="row">
                    <h2 class="display-6 text-uppercase text-decoration-underline mt-2 mb-1">Ropa</h2>
                </div>
                <div class="row">
                    <table class="table table-striped">
                        <thead class="thead-dark">
                            <tr>
                                <th class="display-6">Talla</th>
                                <th class="display-6">Descripción</th>
                                <th class="display-6">Defecto</th>
                                <th class="display-6">Precio</th>
                            </tr>
                        </thead>
                        <tbody id="tabla_prendas">
                        </tbody>
                    </table>
                </div>
                <div class="row">
                    <h2 class="display-6 text-uppercase text-decoration-underline mt-5 mb-1">Libros</h2>
                </div>
                <div class="row">
                    <table class="table table-striped">
                        <thead class="thead-dark">
                            <tr>
                                <th class="display-6">Título</th>
                                <th class="display-6">Autor</th>
                                <th class="display-6">Descripción</th>
                                <th class="display-6">Defecto</th>
                                <th class="display-6">Precio</th>
                            </tr>
                        </thead>
                        <tbody id="tabla_libros">
                        </tbody>
                    </table>
                </div>
                <div class="row">
                    <h2 class="display-6 text-uppercase text-decoration-underline mt-5 mb-1">Videojuegos</h2>
                </div>
                <div class="row">
                    <table class="table table-striped">
                        <thead class="thead-dark">
                            <tr>
                                <th class="display-6">Título</th>
                                <th class="display-6">Descripción</th>
                                <th class="display-6">Defecto</th>
                                <th class="display-6">Precio</th>
                            </tr>
                        </thead>
                        <tbody id="tabla_videojuegos">
                        </tbody>
                    </table>
                </div>
                <div class="row">
                    <h2 class="display-6 text-uppercase text-decoration-underline mt-5 mb-1">Juegos de Mesa</h2>
                </div>
                <div class="row">
                    <table class="table table-striped">
                        <thead class="thead-dark">
                            <tr>
                                <th class="display-6">Título</th>
                                <th class="display-6">Descripción</th>
                                <th class="display-6">Defecto</th>
                                <th class="display-6">Precio</th>
                            </tr>
                        </thead>
                        <tbody id="tabla_juegomesa">
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-sm-6  col-lg-3">
                <h2 class="display-6 text-uppercase ms-5 mt-2 mb-5">Precio Reparación</h2>
                <div class="text-center" id="precio_total"></div>
                <div class="d-grid gap-2 col-6 mx-auto">
                    <button type="button" class="btn btn-dark mt-5" data-bs-toggle="modal" data-bs-target="#envioExito"
                        id="boton-reserva">Enviar a Reparar</button>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    <!-- Modal para reservas con exito -->
    <div class="modal fade" id="envioExito" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Recibido</h5>
                </div>
                <div class="modal-body">
                    Se ha generado un ticket para el envío de los objetos a arreglar.
                </div>
                <div class="modal-footer">
                    <a class="btn btn-primary btn-sm" href="/main">Volver a Inicio</a>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>
        ropa = localStorage.getItem('pedido_ropa');
        libros = localStorage.getItem('pedido_libros');
        videojuegos = localStorage.getItem('pedido_videojuegos');
        juegosmesa = localStorage.getItem('pedido_juegomesa');
        ropa_parseada = JSON.parse(ropa);
        libros_parseado = JSON.parse(libros);
        videojuegos_parseado = JSON.parse(videojuegos);
        juegomesa_parseado = JSON.parse(juegosmesa);

        tabla_ropa(ropa_parseada);
        tabla_libros(libros_parseado);
        tabla_videojuegos(videojuegos_parseado);
        tabla_juegomesa(juegomesa_parseado);
        suma_total(ropa_parseada, libros_parseado, videojuegos_parseado, juegomesa_parseado);

        function tabla_ropa(carrito) {
            var tabla = document.getElementById('tabla_prendas')
            if (carrito === null) {
                tabla.innerHTML = `<div> No Procede <div>`;
            } else {
                for (var i = 0; i < carrito.length; i++) {
                    var row = `<tr>
                                <td>${carrito[i].talla}</td>
                                <td>${carrito[i].descripcion}</td>
                                <td class="fst-italic">${carrito[i].defecto}</td>
                                <td class="fw-bold">${carrito[i].precio} €</td>
                        </tr>`
                    tabla.innerHTML += row


                }
            }
        }
        function tabla_libros(carrito) {
            var tabla = document.getElementById('tabla_libros')
            if (carrito === null) {
                tabla.innerHTML = `<div> No Procede <div>`;
            } else {
                for (var i = 0; i < carrito.length; i++) {
                    var row = `<tr>
                                <td>${carrito[i].titulo}</td>
                                <td>${carrito[i].autor}</td>
                                <td td style="width:25%; font-size: 12px;">${carrito[i].descripcion}</td>
                                <td class="fst-italic">${carrito[i].defecto}</td>
                                <td class="fw-bold">${carrito[i].precio} €</td>
                        </tr>`
                    tabla.innerHTML += row


                }
            }
        }
        function tabla_videojuegos(carrito) {
            var tabla = document.getElementById('tabla_videojuegos')
            if (carrito === null) {
                tabla.innerHTML = `<div> No Procede <div>`;
            } else {
                for (var i = 0; i < carrito.length; i++) {
                    var row = `<tr>
                                <td>${carrito[i].titulo}</td>
                                <td td style="width:25%; font-size: 12px;">${carrito[i].descripcion}</td>
                                <td class="fst-italic">${carrito[i].defecto}</td>
                                <td class="fw-bold">${carrito[i].precio} €</td>
                        </tr>`
                    tabla.innerHTML += row


                }
            }
        }
        function tabla_juegomesa(carrito) {
            var tabla = document.getElementById('tabla_juegomesa')
            if (carrito === null) {
                tabla.innerHTML = `<div> No Procede <div>`;
            } else {
                for (var i = 0; i < carrito.length; i++) {
                    var row = `<tr>
                                <td>${carrito[i].titulo}</td>
                                <td td style="width:25%; font-size: 12px;">${carrito[i].descripcion}</td>
                                <td class="fst-italic">${carrito[i].defecto}</td>
                                <td class="fw-bold">${carrito[i].precio} €</td>
                        </tr>`
                    tabla.innerHTML += row


                }
            }
        }

        function suma_total(ropa_parseada, libros_parseado, videojuegos_parseado, juegomesa_parseado) {
            var precio_total = document.getElementById("precio_total");

            var precio_suma = 0;
            /* condicional ropa*/
            if (ropa_parseada === null) {
                precio_suma += 0;
            } else {
                for (var i = 0; i < ropa_parseada.length; i++) {

                    precio_suma += parseFloat(ropa_parseada[i].precio);

                }
            }
            /*condicional libros*/
            if (libros_parseado === null) {
                precio_suma += 0;
            } else {
                for (var i = 0; i < libros_parseado.length; i++) {

                    precio_suma += parseFloat(libros_parseado[i].precio);

                }
            }
            /*condicional videojuegos*/
            if (videojuegos_parseado === null) {
                precio_suma += 0;
            } else {
                for (var i = 0; i < videojuegos_parseado.length; i++) {

                    precio_suma += parseFloat(videojuegos_parseado[i].precio);

                }
            }
            /*condicional DnD*/
            if (juegomesa_parseado === null) {
                precio_suma += 0;
            } else {
                for (var i = 0; i < juegomesa_parseado.length; i++) {

                    precio_suma += parseFloat(juegomesa_parseado[i].precio);

                }

            }
            div_suma = `<div class="fw-bold fs-2"> ${precio_suma} €</div>`
            precio_total.innerHTML += div_suma;
        }
    </script>
    <%-include ("template/footer.ejs")%>