<%- include ("partials/header") %>

    <head>
        <title>Tuerti -
            <%= locals.home %>
        </title>
    </head>
    <% if(errors.length>0){ %>
        <div class="container main-area" data-function="createevent">
            <% } else { %>
                <div class="container main-area">
                    <% } %>
                        <div class="row">
                            <div class="col-md-3 main-sidebar">
                                <div class="row sidebar-area sidebar-area-mini">
                                    <img class="box" src="images/users/avatars/<%= currentUser.avatar %>.png" alt="">
                                    <div class="profile-tab">
                                        <a href="/user/<%= currentUser.id %>">
                                            <p class="profile-name">
                                                <%= currentUser.firstname%>
                                                    <%= currentUser.lastname%>
                                            </p>
                                        </a>
                                        <p class="profile-visits">
                                            <i class="far fa-chart-bar"></i>
                                            <span>
                                                <%= currentUser.visits%>
                                            </span>
                                            <%= locals.visits %>
                                        </p>
                                    </div>
                                </div>
                                <div class="row sidebar-calendar">
                                    <div class="sidebar-title">
                                        <h3>
                                            <%= locals.calendar %>
                                        </h3>
                                        <p class="sidebar-addon" id="create-event"><i class="fas fa-calendar-week"></i>
                                            <%= locals.createevent %>
                                        </p>
                                    </div>

                                    <ul class="calendar-dates">
                                        <li class="calendar-subtitle">
                                            <p>
                                                <%= locals.today %>
                                            </p>
                                            <% if(events["todayEvents"].length>0){ events["todayEvents"].forEach(event=>
                                                { %>
                                                <ul class="calendar-events">
                                                    <li class="calendar-event">
                                                        <% switch(event.type){ case "birthday" : %>
                                                            <a href="user/" class="event-name"><i
                                                                    class="fas fa-birthday-cake"></i>
                                                                <%= event.name %>
                                                            </a>
                                                            <% break;default: %>
                                                                <a href="event/<%= event.id %>" class="event-name"><i
                                                                        class="fas fa-calendar-week"></i>
                                                                    <%= event.name %>
                                                                </a>
                                                                <% break;}%>
                                                                    <p class="event-date">
                                                                        <%= event.target %>
                                                                    </p>
                                                    </li>
                                                </ul>
                                                <% });}else{ %>
                                                    <p class="no-events">
                                                        <%= locals.noevents %>
                                                    </p>
                                                    <% } %>
                                        </li>
                                        <li class="calendar-subtitle">
                                            <p>
                                                <%= locals.tomorrow %>
                                            </p>
                                            <% if(events["tomorrowEvents"].length>0){
                                                events["tomorrowEvents"].forEach(event => { %>
                                                <ul class="calendar-events">
                                                    <li class="calendar-event">
                                                        <% switch(event.type){ case "birthday" : %>
                                                            <a href="user/" class="event-name"><i
                                                                    class="fas fa-birthday-cake"></i>
                                                                <%= event.name %>
                                                            </a>
                                                            <% break;default: %>
                                                                <a href="event/<%= event.id %>" class="event-name"><i
                                                                        class="fas fa-calendar-week"></i>
                                                                    <%= event.name %>
                                                                </a>
                                                                <% break;}%>
                                                                    <p class="event-date">
                                                                        <%= event.target %>
                                                                    </p>
                                                    </li>
                                                </ul>
                                                <% });}else{ %>
                                                    <p class="no-events">
                                                        <%= locals.noevents %>
                                                    </p>
                                                    <% } %>
                                        </li>
                                        <li class="calendar-subtitle">
                                            <p>
                                                <%= locals.sevendays %>
                                            </p>
                                            <% if(events["sevenDaysEvents"].length>0){
                                                events["sevenDaysEvents"].forEach(event => { %>
                                                <ul class="calendar-events">
                                                    <li class="calendar-event">
                                                        <% switch(event.type){ case "birthday" : %>
                                                            <a href="user/" class="event-name"><i
                                                                    class="fas fa-birthday-cake"></i>
                                                                <%= event.name %>
                                                            </a>
                                                            <% break;default: %>
                                                                <a href="event/<%= event.id %>" class="event-name"><i
                                                                        class="fas fa-calendar-week"></i>
                                                                    <%= event.name %>
                                                                </a>
                                                                <% break;}%>
                                                                    <p class="event-date">
                                                                        <%= event.target %>
                                                                    </p>
                                                    </li>
                                                </ul>
                                                <% });}else{ %>
                                                    <p class="no-events">
                                                        <%= locals.noevents %>
                                                    </p>
                                                    <% } %>
                                        </li>
                                    </ul>
                                    <a class="all-events" href="">
                                        <%= locals.seall %>
                                    </a>
                                </div>
                            </div>
                            <div class="col-md-9 main-post-area">
                                <div class="row">
                                    <div class="col-md-9">
                                    </div>
                                    <div class="col-md-3">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div hidden class="blurred"></div>
                </div>

                <script>
                    window.onload = function () {
                        if ($(".main-area").data("function") == "createevent") {
                            $("#create-event").click();
                        }
                    };
                    $(document).on("click ", ".close-btn", function (e) {
                        e.preventDefault();
                        $(this).parent().css("height", "0%");
                        $(".blurred").css("opacity", "0");
                        setTimeout(function () {
                            $(".edit-window").remove();
                            $(".blurred").attr("hidden", "hidden");
                        }, 250);
                    });

                    $(document).on("change", ".option", function (e) {
                        e.preventDefault();
                        var input = $("#date");
                        var value = input.val();
                        if (input.attr("type") == "date") {
                            value = value + "T00:00";
                            input.attr("type", "datetime-local");
                            input.val(value);
                        } else {
                            value = value.substring(0, 10);
                            input.attr("type", "date");
                            input.val(value);
                        }
                    });

                    $("#create-event").click(function (e) {
                        e.preventDefault();
                        var window = document.createElement("div");
                        window.classList.add("edit-window");
                        window.innerHTML = `<div class="close-btn">
                    <i class="fas fa-times"></i>
                </div>
                <div class="edit-wrapper" style="padding:0;">
                    <ul class="edit-title">
                        <li>
                            <p class="no-margin selected">
                                <%= locals.createevent %>
                            </p>
                        </li>
                        <li>
                            <p class="no-margin">
                                <%= locals.changeimage %>
                            </p>
                        </li>
                        <li>
                            <p class="no-margin">
                                <%= locals.invitefriends %>
                            </p>
                        </li>
                    </ul>
                    <div class="edit-info">
                        <form action="/event/create" method="post">
                            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                            <p class="edit-info-title">
                                <%= locals.generalinfo %>
                            </p>
                            <div class="edit-info-section">
                                <div class="section-input">
                                    <label for="name"><%= locals.eventtitle %> </label>
                                        <input required minlength="3" maxlength="100" class="box" type="text" name="name" id="name" value="<% if(info[0]){ %><%= info[0].name%> <%};%>">
                                </div>
                                
                                <div class="section-input">
                                    <label for="date"><%= locals.dateandhour %> </label>
                                        <div class="twoinone">
                                        <input required class="box" type="datetime-local" name="date" id="date">
                                        <label class="option">
                                            <input type="checkbox" name="allday" id="allday"><%= locals.allday %> 
                                        </label>
                                    </div>
                                </div>
                                <div class="section-input">
                                    <label for="desc"><%= locals.desc %> </label>
                                    <textarea maxlength="3000" oninput="auto_grow(this)" class="box" name="desc" id="desc" rows="3" ><% if(info[0]){ %><%= info[0].desc%> <%};%></textarea>
                                </div>
                            </div>
                            <p class="edit-info-title">
                                <%= locals.addinfo %>
                            </p>
                            <div class="edit-info-section">
                                <div class="section-input">
                                    <label for="place"><%= locals.place %> </label>
                                    <input required minlength="3" maxlength="100" class="box" type="text" name="place" id="place" value="<% if(info[0]){ %><%= info[0].place%> <%};%>">
                                </div>
                                <div class="section-input">
                                    <label for="dir"><%= locals.direction %> </label>
                                    <input required minlength="3" maxlength="100" class="box" type="text" name="dir" id="dir" value="<% if(info[0]){ %><%= info[0].dir%> <%};%>">
                                </div>
                                <div class="section-input">
                                    <label for="phone"><%= locals.phone %> </label>
                                    <input class="box" type="text" name="phone" id="phone" value="<% if(info[0]){ %><%= info[0].phone%> <%};%>">
                                </div>
                                <div class="section-input">
                                    <label for="web"><%= locals.webpage %> </label>
                                    <input class="box" type="text" name="web" id="web" value="<% if(info[0]){ %><%= info[0].web%> <%};%>">
                                </div>
                            </div>
                            <div class="edit-info-section">
                                <div class="section-input">
                                    <label for="privacy"><%= locals.privacy %> </label>
                                    <fieldset class="invitation-radio">
                                        <label>
                                    <input checked type="radio" name="privacy" value="public"> <%= locals.publicnotif %> 
                                </label>
                                        <label>
                                    <input type="radio" name="privacy" value="private"> <%= locals.privatenotif %> 
                                </label>
                                    </fieldset>
                                </div>
                            </div>
                            <div class="last-section">
                                <input type="submit" value="<%= locals.submit %>" class="btn btn-blue">
                            </div>
                        </form>
                    </div>
                </div>`;
                        $(".main-area").append(window);
                        $(".blurred").removeAttr("hidden");
                        setTimeout(function () {
                            var area = document.querySelector(".edit-window textarea");
                            $("#date").val(convertDate(new Date(), $("#date").attr("type")));
                            $(".edit-window").css("height", "67%");
                            $(".edit-wrapper").css("padding", "5px 15px 15px 15px")
                            $(".blurred").css("opacity", ".5");
                        }, 20);
                    });

                    function auto_grow(element) {
                        element.style.height = "10px";
                        element.style.height = (element.scrollHeight) + "px";
                    }

                    function convertDate(oldFormat, format) {
                        var options = {
                            year: "numeric",
                            month: "2-digit",
                            day: "2-digit",
                            hour: "2-digit",
                            minute: "2-digit"
                        };
                        var newFormat = new Date(oldFormat).toLocaleString("es-ES", options).split(/[/ :]/);
                        if (format == "date") {
                            return (newFormat[2] + "-" + newFormat[1] + "-" + newFormat[0]);
                        } else {
                            return (newFormat[2] + "-" + newFormat[1] + "-" + newFormat[0] + "T" + newFormat[3] + ":" + newFormat[4]);
                        }
                    }
                </script>
                </body>

                </html>