<%- include("template/head.ejs", {tituloWeb:"Inicio"})%>
    <link rel="stylesheet" href="/css/project.css">
    </head>

    <body class="principal proyectos" data-id="<%=proyecto.id%>">

        <%- include("template/header.ejs", {tituloWeb:"Inicio"})%>
            <main class="container-fluid mainprojects">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-9 col-lg-6 text-center ps-5">
                        <h1>Tareas</h1>
                        <div class="row me-0">
                            <a href="/project/<%=proyecto.id%>/crearTarea" class="btn btn-primary mb-1">Agregar nueva
                                tarea</a>
                        </div>
                        <!--Depende del estado que tenga la tarea, se generará un tipo de tarjeta-->
                        <% arrayTareas.forEach(tarea=> { %>
                            <div class="card float-start m-1 espaciocarta" style="width: 18rem;">
                                <%if (tarea.estado=="Pendiente" ){%>
                                    <div class="card-body bg-success carta">
                                        <h5 class="card-title">
                                            <%=tarea.titulo%>
                                        </h5>
                                        <p class="card-text">
                                            <%=tarea.texto%>
                                        </p>
                                        <p class="card-text usuarioasignado">
                                            <%=tarea.usuario%>
                                        </p>
                                        <a href="#" class="btn btn-primary botonverde botonTarea"
                                            data-id="<%=tarea.id%>" data-status="pending">
                                            <%=tarea.estado%>
                                        </a>
                                    </div>
                                    <%}else if (tarea.estado=="En Ejecución" ){%>
                                        <div class="card-body bg-warning carta">
                                            <h5 class="card-title">
                                                <%=tarea.titulo%>
                                            </h5>
                                            <p class="card-text">
                                                <%=tarea.texto%>
                                            </p>
                                            <p class="card-text usuarioasignado">
                                                <%=tarea.usuario%>
                                            </p>
                                            <a href="#" class="btn btn-primary botonamarillo botonTarea"
                                                data-id="<%=tarea.id%>" data-status="ongoing">
                                                <%=tarea.estado%>
                                            </a>
                                        </div>

                                        <%}else if (tarea.estado=="Finalizado" ){%>
                                            <div class="card-body bg-danger carta">
                                                <h5 class="card-title">
                                                    <%=tarea.titulo%>
                                                </h5>
                                                <p class="card-text">
                                                    <%=tarea.texto%>
                                                </p>
                                                <p class="card-text usuarioasignado">
                                                    <%=tarea.usuario%>
                                                </p>
                                                <a href="#" class="btn btn-dark botonrojo botonTarea"
                                                    data-id="<%=tarea.id%>" data-status="done">
                                                    <%=tarea.estado%>
                                                </a>
                                            </div>
                                            <%}%>
                            </div>
                            <%})%>
                                <!--Aquí acaba los condicionales-->
                    </div>

                    <div class="col-12 col-sm-12 col-md-9 col-lg-6">
                        <h1 class="text-center">Chat</h1>
                        <div class="row justify-content-center">
                            <div class="col-12 chatSize bg-secondary border border-2 border-dark rounded">
                                <div class="row p-3">
                                    <% arrayMensajes.forEach(mensaje=> { %>
                                        <div class="col-12 mt-2 mensaje bg-warning rounded">
                                            <div class="col-3 pt-1 fw-bolder float-end text-end">
                                                <p>
                                                    <%=mensaje.fecha%>
                                                </p>
                                            </div>
                                            <div class="col-9 pt-1 fw-bolder">
                                                <p>
                                                    <%=mensaje.autor%>
                                                </p>
                                            </div>
                                            <div class="col-12 fw-bolder">
                                                <p>
                                                    <%=mensaje.mensaje%>
                                                </p>
                                            </div>
                                        </div>
                                        <% }) %>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 text-center">
                            <div class="row justify-content-center">
                                <div class="col-6">
                                    <%if (usuario.rol=="Profesor" ){%>
                                        <button class="btn btn-danger mt-2 bajar float-start vaciarChat"
                                            data-id="<%=proyecto.id%>">Vaciar Chat</button>
                                        <%}%>
                                            <button class="btn btn-primary mt-2 bajar">Volver abajo</button>
                                </div>
                            </div>
                            <form action="/project/<%=proyecto.id%>" class="row g-3 justify-content-center p-5"
                                method="post">
                                <div class="col-6">
                                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
                                        placeholder="Escribe aquí tu mensaje" name="mensaje"></textarea>
                                </div>

                                <%if (locals.error){%>
                                    <p class="text-center mt-3 p-1 bg-danger">No puede enviar un mensaje en
                                        blanco</p>
                                    <%}%>
                                        <div class="col-12">
                                            <button class="btn btn-success" type="submit">Enviar
                                                mensaje</button>
                                        </div>
                            </form>
                        </div>
                    </div>
                </div>
                </div>
            </main>
            <%- include("template/footer.ejs")%>
                <script>
                    $(document).ready(function () {
                        $(".chatSize").animate({ scrollTop: 99999 }, 100);
                        $(".bajar").click(function (e) {
                            e.preventDefault();
                            $(".chatSize").animate({ scrollTop: 99999 }, 100);
                        });
                    });

                    $(".vaciarChat").click(async function (e) {
                        e.preventDefault();
                        const id = $(this).data("id");
                        const data = await fetch(`/project/${id}`, {
                            method: "delete"
                        });
                        const res = await data.json();
                        if (res.estado) {
                            window.location.href = `/project/${id}`;
                        } else {
                            console.log(res);
                        }
                    });
                    $(".botonTarea").click(async function (e) {
                        e.preventDefault();
                        const id = $(this).data("id");
                        const projectId = $("body").data("id");
                        const status = $(this).data("status");
                        var newStatus = "";
                        if (status == "pending") {
                            newStatus = "En Ejecución";
                        } else {
                            newStatus = "Finalizado";
                        }
                        if (status != "done") {
                            const data = await fetch(`/project/${projectId}`, {
                                method: "PUT",
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                                body: JSON.stringify({ id, newStatus })
                            });
                            const res = await data.json();
                            if (res.estado) {
                                window.location.href = `/project/${projectId}`;
                            } else {
                                console.log(res);
                            }
                        } else {
                            const data = await fetch(`/project/${projectId}/task/${id}`, {
                                method: "delete"
                            });
                            const res = await data.json();
                            if (res.estado) {
                                window.location.href = `/project/${projectId}`;
                            } else {
                                console.log(res);
                            }
                        }
                    });
                    $(".botonverde").click(function () {
                        $(this).closest('.carta').removeClass('bg-success').addClass('bg-warning');
                        $(this).prev().text("El Samu");

                        $(this).removeClass('d-block').addClass('d-none');
                        $(this).next().removeClass('d-none').addClass('d-block');
                        $(this).next().removeClass('btn-primary').addClass('btn-secondary');

                    });
                    $(".botonamarillo").click(function () {
                        $(this).closest('.carta').removeClass('bg-warning').addClass('bg-danger');
                        $(this).prev().text("El Samu");

                        $(this).removeClass('d-block').addClass('d-none');
                        $(this).next().removeClass('d-none').addClass('d-block');
                        $(this).next().removeClass('btn-secondary').addClass('btn-dark');

                    });
                    $(".botonrojo").click(function () {

                        $(this).closest('.espaciocarta').remove();

                    });
                </script>