<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>To do list</title>
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700" rel="stylesheet">
    <link rel="stylesheet" href="/PageCss/todo.css">
    <link rel="stylesheet" href="/PageCss/body.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
</head>

<body>

    <%- include('partials/navbar.ejs', { name: name, isLoggedIn: isLoggedIn, email: email}); %>

        <div class="undo">
            Task deleted
            <div>
                <span class="fa fa-undo"></span>
                Undo
            </div>
        </div>

        <div class="wrapper">


            <div class="main">
                <div class="header">
                    <h1>Your Todo List<span>By WandrLust</span></h1>
                </div>


                <ul id="sortable">
                    <li style="display:none">
                        <span class="priority-indicator"></span>
                        <div class="dragger">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                                <circle cy="7" cx="9.5" r="1" fill="#999"></circle>
                                <circle cy="7" cx="14" r="1" fill="#999"></circle>
                                <circle cy="12.5" cx="9.5" r="1" fill="#999"></circle>
                                <circle cy="12.5" cx="14" r="1" fill="#999"></circle>
                                <circle cy="18" cx="9.5" r="1" fill="#999"></circle>
                                <circle cy="18" cx="14" r="1" fill="#999"></circle>
                            </svg>
                        </div>
                        <input type="checkbox" />
                        <label>
                            <div class="checkbox"><span class="fa fa-check"></span></div>
                            <span class="item-name">First-aid kit </span>
                            <input type="text">
                        </label>
                        <div class="actions">
                            <span class="fa fa-dot-circle-o prio-btn"></span>
                            <span class="fa fa-pen"></span>
                            <span class="fa fa-trash"></span>
                        </div>
                    </li>

                    <li class="checked">
                        <span class="priority-indicator"></span>
                        <div class="dragger">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                                <circle cy="7" cx="9.5" r="1" fill="#999"></circle>
                                <circle cy="7" cx="14" r="1" fill="#999"></circle>
                                <circle cy="12.5" cx="9.5" r="1" fill="#999"></circle>
                                <circle cy="12.5" cx="14" r="1" fill="#999"></circle>
                                <circle cy="18" cx="9.5" r="1" fill="#999"></circle>
                                <circle cy="18" cx="14" r="1" fill="#999"></circle>
                            </svg>
                        </div>
                        <input type="checkbox" id="1" checked />
                        <label for="1">
                            <div class="checkbox">
                                <span class="fa fa-check"></span>
                            </div>
                            <span class="item-name">First-aid kit </span>
                            <input type="text">
                        </label>
                        <div class="actions">
                            <span class="fa fa-dot-circle-o prio-btn"></span>
                            <span class="fa fa-pen"></span>
                            <span class="fa fa-trash"></span>
                        </div>
                    </li>

                    <li class="priority priority2">
                        <span class="priority-indicator"></span>
                        <div class="dragger">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                                <circle cy="7" cx="9.5" r="1" fill="#999"></circle>
                                <circle cy="7" cx="14" r="1" fill="#999"></circle>
                                <circle cy="12.5" cx="9.5" r="1" fill="#999"></circle>
                                <circle cy="12.5" cx="14" r="1" fill="#999"></circle>
                                <circle cy="18" cx="9.5" r="1" fill="#999"></circle>
                                <circle cy="18" cx="14" r="1" fill="#999"></circle>
                            </svg>
                        </div>
                        <input type="checkbox" id="2" />
                        <label for="2">
                            <div class="checkbox"><span class="fa fa-check"></span></div>
                            <span class="item-name">Water bottles</span>
                            <input type="text">
                        </label>
                        <div class="actions">
                            <span class="fa fa-dot-circle-o prio-btn"></span>
                            <span class="fa fa-pen"></span>
                            <span class="fa fa-trash"></span>
                        </div>
                    </li>

                    <li class="priority priority1">
                        <span class="priority-indicator"></span>
                        <div class="dragger">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                                <circle cy="7" cx="9.5" r="1" fill="#999"></circle>
                                <circle cy="7" cx="14" r="1" fill="#999"></circle>
                                <circle cy="12.5" cx="9.5" r="1" fill="#999"></circle>
                                <circle cy="12.5" cx="14" r="1" fill="#999"></circle>
                                <circle cy="18" cx="9.5" r="1" fill="#999"></circle>
                                <circle cy="18" cx="14" r="1" fill="#999"></circle>
                            </svg>
                        </div>
                        <input type="checkbox" id="4" />
                        <label for="4">
                            <div class="checkbox"><span class="fa fa-check"></span></div>
                            <span class="item-name">Tent</span>
                            <input type="text">
                        </label>
                        <div class="actions">
                            <span class="fa fa-dot-circle-o prio-btn"></span>
                            <span class="fa fa-pen"></span>
                            <span class="fa fa-trash"></span>
                        </div>
                    </li>


                </ul>

                <div class="add">
                    <div class="add-txt">
                        <div>
                            <span class="fa fa-plus"></span>
                        </div>
                        <span class="txt">Add new</span>
                        <input type="text">
                    </div>

                </div>

            </div>

        </div>
        <!-- partial -->
        <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>

        <script>
            var undo = false;
            var list_item_to_undo;
            var time_out;

            $(document).ready(function () {

                /*DELETE*/
                $('body').on('click', '.fa-trash', function () {

                    if ($('.main ul li').hasClass("temp_deleted")) {
                        $('.main ul li.temp_deleted').remove();
                    }

                    list_item_to_undo = $(this).parent().parent();
                    var undo_time = 10000;

                    list_item_to_undo.animate({
                        height: "0px"
                    }, 200, function () {
                        $(this).addClass('temp_deleted').hide();
                    });

                    function_undo(list_item_to_undo, undo);

                    //undo
                    $('.undo').addClass('active');

                    clearTimeout(time_out);

                    time_out = setTimeout(function () {
                        $('.undo').removeClass('active');
                        if (undo === false) {
                            $('.main ul li.temp_deleted').remove();
                        }
                    }, undo_time);

                });
                /*DELETE*/


                /*UNDO*/
                $('.undo div').click(function () {
                    undo = true;
                    function_undo(list_item_to_undo, undo);
                    $(this).parent().removeClass('active');
                });


                /*EDIT*/
                $('body').on('click', '.fa-pen', function () {
                    var current = $(this).parent().parent().find('span').text();
                    $(this).parent().parent().find('input[type=text]').val(current).show().select();
                });


                $('body').on('keypress', '.main ul li input[type=text]', function (e) {
                    if (e.which === 13) {
                        //hide undo
                        $('.undo').removeClass('active');

                        var newvalue = $(this).val();
                        $(this).parent().parent().find('label span.item-name').text(newvalue);
                        $(this).hide();
                        return false;    //<---- Add this line
                    }
                });

                $(document).on('blur', 'input[type=text]', function () {
                    $(this).hide();
                });

                /*ADD NEW*/
                $('.add').click(function () {
                    $(this).find('input[type=text]').val('Add new').show().select();
                });


                $('body').on('keypress', '.add input[type=text]', function (e) {
                    if (e.which === 13) {

                        //hide undo
                        $('.undo').removeClass('active');

                        var newvalue = $(this).val();

                        var clone = $(".main ul li:first").clone();
                        clone.find('label span.item-name').text(newvalue);

                        var random_num = Math.floor(Math.random() * 1000) + 1
                        var id = newvalue.replace(/\s/g, '');
                        var ids = id + random_num;

                        clone.find('input').attr({
                            id: ids
                        });
                        clone.find('label').attr('for', ids);
                        clone.find("input[type=checkbox]").prop('checked', false);
                        clone.removeClass('priority priority1 priority2 checked');
                        clone.show();
                        clone.appendTo(".main ul");

                        $('.add').trigger("click");
                        return false;    //<---- Add this line
                    }
                });



                /*PRIORITY*/
                $('body').on('click', '.main ul li .actions .prio-btn', function () {

                    if ($(this).parent().parent().hasClass("priority2")) {

                        $(this).parent().parent().addClass('reset').removeClass("priority priority1 priority2 ");

                        return false;
                    }

                    if ($(this).parent().parent().hasClass("priority1")) {
                        $(this).parent().parent().addClass("priority2");
                    }

                    $(this).parent().parent().addClass('priority priority1');

                });


                /*CLICK*/
                $('body').on('change', '.main ul li input[type=checkbox]', function () {
                    if ($(this).prop('checked')) {
                        $(this).parent().addClass('checked');
                    } else {
                        $(this).parent().removeClass('checked');
                    }

                });

                /*SORTABLE*/
                $(function () {
                    $(".main ul").sortable({
                        animation: 100,
                        delay: 150,
                        cursor: 'move',
                        handle: ".dragger",
                        tolerance: "pointer",
                        axis: 'y'
                    });
                    $("#sortable").disableSelection();
                });
            });
            function function_undo(list_item_to_undo, undo) {
                if (undo === true) {
                    list_item_to_undo.css('height', 'auto');
                    list_item_to_undo.show();
                    list_item_to_undo.removeClass('temp_deleted');
                }
            }
        </script>
        <%- include('partials/footer') %>
</body>

</html>