<%- include('includes/head.ejs') %>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <!-- ESTILOS -->

    <style>

        /* GENERAL */

        section{
            padding-top: 1.3em;
        }
        h1{
            margin-left: 1em;
            font-size: 76px;
        }
        h3{
            padding: 100px 0;
            text-align: center;
        }

        /* HEAD */

        #head{
            display: flex;
        }
        .btn-outline-success, .btn-outline-primary,  .btn-outline-secondary, .form-control, .btn-outline-danger{
            margin-top: 2.3em;
        }
        #create{
            position: absolute;
            left: 320px;
        }
        #edit{
            position: absolute;
            right: 90px;
        }
        #clear {
            position: sticky;
            top: 0;
            left: 80%;
            margin-right: 9.2%;
        }
        #filter{
            position: absolute;
            right: 0;
            margin-right: 75px;
            color: #252525;
        }

        /* BODY */

        .progress{
            max-width: 750px;
            border-radius: 30px;
        }
        .progress-bar{
            border-radius: 30px;
        }
        #epic{
            padding: 25px 25px;
            display: flex;
            flex-direction: row;
        }
        #progressBar, #epicDetail{
            flex: 1;
        }
        #epicDetail{
            border: 1px solid #e9ecef;
            border-radius: 30px;
            background-color: #e9ecef;
            height: 50px;
            margin-right: 35px;
            margin-left: 35px;
            text-align: left;
            padding-top: 10px;
            padding-left: 25px;
            padding-right: 25px;
            font-size: 18px;
            color: #252525;
        }
        #detailBorder{
            max-width: 1200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .bi-arrow-up-right{
            color: #252525;
            position: absolute;
            right: 0;
            margin-right: 85px;
            margin-left: 15px;
            margin-top: 14px;
        }
        .bi-pencil{
            color: #252525;
            position: absolute;
            right: 0;
            margin-right: 120px;
            margin-left: 15px;
            margin-top: 14px;
        }

        /* RESPONSIVE */

        @media(max-width: 2373px){
            #detailBorder{
                max-width: 1150px;
            }
        }
        @media(max-width: 2283px){
            #detailBorder{
                max-width: 1050px;
            }
        }
        @media(max-width: 2222px){
            #detailBorder{
                max-width: 1000px;
            }
        }
        @media(max-width: 2035px){
            #detailBorder{
                max-width: 950px;
            }
        }
        @media(max-width: 1956px){
            #detailBorder{
                max-width: 850px;
            }
        }
        @media(max-width: 1774px){
            #detailBorder{
                max-width: 750px;
            }
        }
        @media(max-width: 1614px){
            #detailBorder{
                max-width: 650px;
            }
        }
        @media(max-width: 1446px){
            #detailBorder{
                max-width: 550px;
            }
            .bi-arrow-up-right{
                width: 15px;
                height: 15px;
                margin-top: 18px;
            }
            .bi-pencil{
                width: 15px;
                height: 15px;
                margin-top: 18px;
            }
        }
        @media(max-width: 1288px){
            #detailBorder{
                max-width: 500px;
            }
        }
        @media(max-width: 1181px){
            #detailBorder{
                max-width: 400px;
            }
        }
        @media(max-width: 1032px){
            #detailBorder{
                max-width: 350px;
            }
        }
        @media(max-width: 981px){
            #epic{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            .progress-bar .bg-success{
                width: 50%;
                margin-top: 25px;
            }
            #epicDetail{
                width: 50%;
                margin-top: 10px;
                margin-bottom: 10px;
                text-align: center;
            }
            #detailBorder{
                max-width: 550px;
            }
            .bi-arrow-up-right{
                margin: 0;
                right: auto;
                border: 1px solid #e9ecef;
                border-radius: 30px;
                background-color: #e9ecef;
                border-width: 8px;
                box-sizing: content-box;
                /* margin-bottom: 50px; */
            }
            .bi-pencil{
                margin: 0;
                right: auto;
                border: 1px solid #e9ecef;
                border-radius: 30px;
                background-color: #e9ecef;
                border-width: 8px;
                box-sizing: content-box;
                /* margin-bottom: 50px; */
        }
            .detailButton{
                margin-bottom: 35px;
            }
            #search{
                display: none;
            }
        }
        @media(max-width: 660px){
            #filter{
                display: none;
            }
        }
        @media(max-width: 532px){
            #create, #edit{
                display: none;
            }
            #title{
                margin: auto;
                padding-right: 50px;
                text-align: center;
                justify-content: center;
            }
        }
    </style>
    <body>
        <!-- NO QUITAR INPUT, ES PARA OBTENER EL TOKEN DE PROTECCIÃ“N CSRF Y PODER HACER POST -->
        <input type="hidden" id="CSRF-Tkn" value="<%= csrfToken %>">

        <!-- HEAD -->

        <section id="head">
            <div id="title">
                <h1 class="fw-light">Epics</h1>
            </div>
            <div id="create">
                <a class="btn btn-outline-success" type="button" href="/epics/import">Create&nbsp&nbsp&nbsp
                    <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square-fill" viewBox="0 0 16 16">
                            <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"/>
                        </svg>
                    </span>
                </a>    
            </div>
            <div id="clear">
                <form class="d-flex" role="search" id="search">
                    <input class="form-control me-2" type="text" placeholder="Search" aria-label="Clear" id="searchInput" name="searchInput">
                    <button class="btn btn-outline-danger">Clear</button>
                </form>
            </div>
        </section>

        <!-- BODY -->

        <section id="body">
            <br>

            <div id="results">
                <% if (epics.length > 0) { %>
                    <% for (let epic of epics) { %>
                        <div id="epic">
                            <div id="progressContainer" style="width: 40%" class="item">
                                <div id="progressBar">
                                    <div class="progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 50px">
                                        <div class="progress-bar bg-success" style="width:<%= epic.progreso %>%"><%= epic.progreso %>%</div>
                                    </div>
                                </div>
                            </div>
                            <div id="epicDetail" style="width: 60%" class="item">
                                <div id="epicDetail_<%= epic.epic_Link %>">
                                    <p id="detailBorder">
                                        <%= epic.epic_Link %> <%= epic.epic_Link_Summary%> &nbsp
                                        <small class="text-body-secondary">Created at: <%= new Date(epic.created_at).getDate()%>/<%= new Date(epic.created_at).getMonth()+1%>/<%= new Date(epic.created_at).getFullYear()%></small>
                                    </p>
                                </div>
                            </div>
                            <div id="editButton">
                                <a id="editBtn_<%= epic.epic_Link %>" role="button" onclick="editEpic(<%=JSON.stringify(epic)%>)">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
                                        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
                                    </svg>
                                </a>
                            </div>
                            <div class="detailButton">
                                <a href="/epics/details/<%=epic.epic_Link%>">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-arrow-up-right" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"/>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    <% } %>
                <% } else { %>
                    <h3>No epics registered, try importing a csv file.</h3>
                <% } %>
            </div>

        </section>

    <script>
        document.getElementById("searchInput").onkeyup = () => {
        const valorBusqueda = document.getElementById("searchInput").value;
        console.log(valorBusqueda);

        fetch('/homepage/' + valorBusqueda, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            }
        }).then(result => {
            return result.json();
        }).then(data => {

            let respuesta = "";

            if (data.epics.length > 0) {
                for (let epic of data.epics) { 
                    respuesta += '<div id="epic">';
                        respuesta += '<div id="progressContainer" style="width: 40%" class="item">';
                            respuesta += '<div id="progressBar">';
                                respuesta += '<div class="progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 50px">';
                                    respuesta += '<div class="progress-bar bg-success" style="width:'+ epic.progreso + '%;">'+ epic.progreso + '%</div>';
                                respuesta += '</div>';
                            respuesta += '</div>';
                        respuesta += '</div>';
                        respuesta += '<div id="epicDetail" style="width: 60%" class="item">';
                            respuesta += '<p id="detailBorder">';
                                    respuesta += epic.epic_Link + " " + epic.epic_Link_Summary + '&nbsp';
                                    const date = new Date(epic.created_at);
                                    respuesta += '<small class="text-body-secondary">Created at: '+ date.getDate() + '/' + (date.getMonth()+1) + '/' + date.getFullYear() + '</small>';
                            respuesta += '</p>';
                        respuesta += '</div>';
                        respuesta += '<div id="editButton">';
                            respuesta += '<a id="editBtn_' + epic.epic_Link + '" role="button" onclick="editEpic(' + JSON.stringify(epic) + ')">';
                                respuesta += '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">';
                                    respuesta += '<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>';
                                respuesta += '</svg>';
                            respuesta += '</a>';
                        respuesta += '</div>';
                        respuesta += '<div class="detailButton">';
                            respuesta += '<a href="/epics/details/'+ epic.epic_Link + '">';
                                respuesta += '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-arrow-up-right" viewBox="0 0 16 16">';
                                    respuesta += '<path fill-rule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"/>';
                                respuesta += '</svg>';
                            respuesta += '</a>';
                        respuesta += '</div>';
                    respuesta += '</div>';
                }
            } else { 
                respuesta+= "<h3>&nbsp&nbsp&nbspSorry, we don't have any info about that epic.</h3>";
            }

        document.getElementById("results").innerHTML = respuesta;

        }).catch(err => {
            console.log(err);
        });
        }

        function editEpic(epic) {
            const id = epic.epic_Link
            const epicElement = document.getElementById('epicDetail_'+id);

            const date = new Date(epic.created_at);
            const year = date.getFullYear().toString();
            let month = (date.getMonth() + 1).toString();
            month = (month>9) ? month : month.padStart(2,'0');
            let day = (date.getDate() + 1).toString();
            day = (day>9) ? day : day.padStart(2,'0');
            const epic_createdAt = `${year}-${month}-${day}`;

            let respuesta = '<input id="newName_'+ id +'" type="text" value ="' + epic.epic_Link_Summary + '" style="width: 48%;border-radius: 10px; border-width: 1px;">';
            respuesta += '&nbsp&nbsp<small class="text-body-secondary">Created at: &nbsp</small> <input id="newDate_'+ id +'" type="date" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" value="' + epic_createdAt + '" style="width: 20%;border-radius: 10px; border-width: 1px;">'

            epicElement.innerHTML = respuesta;
            const editBtn = document.getElementById('editBtn_'+id);
            editBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="green" class="bi bi-pencil" viewBox="0 0 16 16">
                                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                                    <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
                                </svg>`;
            
            editBtn.onclick = () => { console.log("click")
                
                const data =  {
                    epic_Summary: document.getElementById("newName_"+id).value,
                    epic_createdAt: document.getElementById("newDate_"+id).value
                };
                const csrfToken = document.getElementById("CSRF-Tkn").value;
                fetch('/homepage/edit/' + id, {
                    method: 'POST', 
                    body: JSON.stringify(data),
                    headers: {
                    'Content-Type': 'application/json',
                    'CSRF-Token': csrfToken
                    }
                })
                .then(response => {
                    if (response.ok) {
                        window.location.href = '/homepage';
                    };
                })
                .catch(err => console.log('Failed to update data:',err))
                };
            }
            
    </script>

</section>

<%- include('includes/foot.ejs') %>
