@extends('layouts.app')
@section('title')
    Todo
@endsection
@section('content')
    <x-page-title title="Apps" subtitle="To Do List" />

    <div class="card">
        <div class="card-body">
            <h4 class="mb-0">To Do List</h4>
            <hr>
            <div class="row gy-3">
                <div class="col-md-10">
                    <input id="todo-input" type="text" class="form-control" value="">
                </div>
                <div class="col-md-2 text-end d-grid">
                    <button type="button" onclick="CreateTodo();" class="btn btn-primary">Add todo</button>
                </div>
            </div>
            <div class="form-row mt-3">
                <div class="col-12">
                    <div id="todo-container">
                        <div class="pb-3 todo-item">
                            <div class="input-group">

                                <div class="input-group-text">
                                    <input type="checkbox" onchange="TodoChecked(0)"
                                        aria-label="Checkbox for following text input">
                                </div>

                                <input type="text" readonly="" class="form-control false "
                                    aria-label="Text input with checkbox" value="take out the trash">

                                <button class="btn btn-outline-secondary bg-danger text-white" type="button"
                                    onclick="DeleteTodo(this);" id="button-addon2">X</button>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <!--plugins-->
    <script src="{{ URL::asset('build/plugins/perfect-scrollbar/js/perfect-scrollbar.js') }}"></script>
    <script src="{{ URL::asset('build/plugins/metismenu/metisMenu.min.js') }}"></script>
    <script>
        // to do list 
        var todos = [{
            text: "take out the trash",
            done: false,
            id: 0
        }];
        var currentTodo = {
            text: "",
            done: false,
            id: 0
        }
        document.getElementById("todo-input").oninput = function(e) {
            currentTodo.text = e.target.value;
        };
        /*
          //jQuery Version
          $('#todo-input').on('input',function(e){
            currentTodo.text = e.target.value;
             });
          */
        function DrawTodo(todo) {
            var newTodoHTML = `
      <div class="pb-3 todo-item" todo-id="${todo.id}">
        <div class="input-group">
          
            <div class="input-group-text">
              <input type="checkbox" onchange="TodoChecked(${todo.id})" aria-label="Checkbox for following text input" ${todo.done&& "checked"}>
            </div>
          
          <input type="text" readonly class="form-control ${todo.done&&" todo-done "} " aria-label="Text input with checkbox" value="${todo.text}">
          
            <button todo-id="${todo.id}" class="btn btn-outline-secondary bg-danger text-white" type="button" onclick="DeleteTodo(this);" id="button-addon2 ">X</button>
          
        </div>
      </div>
        `;
            var dummy = document.createElement("DIV");
            dummy.innerHTML = newTodoHTML;
            document.getElementById("todo-container").appendChild(dummy.children[0]);
            /*
              //jQuery version
               var newTodo = $.parseHTML(newTodoHTML);
               $("#todo-container").append(newTodo);
              */
        }

        function RenderAllTodos() {
            var container = document.getElementById("todo-container");
            while (container.firstChild) {
                container.removeChild(container.firstChild);
            }
            /*
              //jQuery version
                $("todo-container").empty();
              */
            for (var i = 0; i < todos.length; i++) {
                DrawTodo(todos[i]);
            }
        }
        RenderAllTodos();

        function DeleteTodo(button) {
            var deleteID = parseInt(button.getAttribute("todo-id"));
            /*
              //jQuery version
                var deleteID = parseInt($(button).attr("todo-id"));
              */
            for (let i = 0; i < todos.length; i++) {
                if (todos[i].id === deleteID) {
                    todos.splice(i, 1);
                    RenderAllTodos();
                    break;
                }
            }
        }

        function TodoChecked(id) {
            todos[id].done = !todos[id].done;
            RenderAllTodos();
        }

        function CreateTodo() {
            newtodo = {
                text: currentTodo.text,
                done: false,
                id: todos.length
            }
            todos.push(newtodo);
            RenderAllTodos();
        }
    </script>
    <script src="{{ URL::asset('build/plugins/simplebar/js/simplebar.min.js') }}"></script>
    <script src="{{ URL::asset('build/js/main.js') }}"></script>

@endpush