@extends('layouts.master')
@section('alpine')
<script src="{{asset('js/alpine.js')}}"></script>
@endsection
@section('tailwind')
<link rel="stylesheet" href="{{asset('css/tailwind.min.css')}}">
@endsection

@section('content')
@include('partials.containers-header')
<div class="row" x-data="data()" x-init="searchData()">
    <div class="col-md-6">
        <h4 class="bg-blue-700 rounded text-white py-2 px-2 mb-2 hover:bg-green-500">To Do List</h4>
        {{-- <button x-on:click="searchData()" class="btn btn-sm btn-primary mb-2">Load Data</button> --}}
        <table>
            <thead>
                <th colspan="2">
                    <input id="task" type="text" 
                        x-model="task" 
                        x-on:keydown.enter="addNewTask()"
                        class="form-control">
                </th>
                <th style="text-align:center">
                    <button x-on:click="addNewTask()" 
                        class="btn btn-sm btn-success">
                        <i class="fa fa-plus-circle"></i> Add Task
                    </button>
                </th>
            </thead>
            <tbody>
            <template x-for="todo in todos" :key="todo.id">
                <tr>
                    <td width="5%">
                        <input type="checkbox" x-model="todo.done">
                    </td>
                    <td width="75%">
                        <input x-show="edit_id === todo.id" 
                            id="todo.id"
                            type="text" 
                            x-model="edit_name" 
                            x-on:keydown.enter="updateTask(todo.id)" 
                            x-on:keydown.escape="resetEdit()" 
                            x-on:click.away="resetEdit()" 
                            class="form-control">
                        <span  x-show="edit_id !== todo.id" 
                            x-text="todo.name" 
                            x-bind:class="{'done':todo.done}" 
                            x-on:click="editTask(todo.id,todo.name)">
                        </span>
                    </td>
                    <td width="20%" style="text-align:center">
                        <div class="btn-group ml-1">
                            <a x-show="edit_id !== todo.id" href="#" 
                                class="btn btn-sm btn-warning" 
                                x-on:click="editTask(todo.id,todo.name)">
                                <i class="fa fa-edit"></i>
                            </a>
                            <a x-show="edit_id == todo.id" href="#" 
                                class="btn btn-sm btn-success" 
                                x-on:click="updateTask(todo.id)">
                                <i class="fa fa-save"></i>
                            </a>
                            <a href="#" 
                                class="btn btn-sm btn-danger" 
                                x-on:click="deleteTask(todo.id)">
                                <i class="fa fa-trash"></i>
                            </a>
                        </div>
                    </td>
                </tr>
            </template>
            </tbody>
        </table>
    </div>
</div>
@include('partials.containers-footer')
@endsection
 
@section('javascript')
<script>
    function data() {
        return {
            increment: '',
            task: '',
            edit_id: '',
            edit_name: '',
            todos: [],
            resetEdit() {
                this.edit_id = '';
                this.edit_name = '';
            },
            find(id) {
                for(i=0; i<this.todos.length; i++) {
                    if (this.todos[i].id == id) {
                        // console.log('Encontré el elemento en la posición: '+i);
                        return i;
                    }
                }
                // console.log('No encontré el elemento...');
                return null;
            },
            addNewTask() {
                if (this.task.trim() === '') return;
                this.todos.push({
                    id:this.increment++,
                    name:this.task,
                    done:false,
                });
                this.task = '';
                this.countTasks();
                document.getElementById('task').focus();
            },
            updateTask(id) {
                // console.log('Actualizando...'+id);
                i = this.find(id);
                this.todos[i].name = this.edit_name;
                this.edit_id = '';
                this.edit_name = '';
            },
            editTask(id,name) {
                // console.log('Editando...'+id);
                this.edit_id = id;
                this.edit_name = name;
                // alert(document.getElementById(id).text);
            },
            deleteTask(id) {
                i = this.find(id);
                // console.log('Borrando el id: '+id+' que esta en la posición: '+i);
                this.todos.splice(i,1);
                this.countTasks();
            },
            countTasks() {
                this.increment = this.todos.length+1;
            },
            searchData() {
                fetch('/api/v1/odlp/2')
                    .then((res) => res.json())
                    .then((data) => this.loadData(data,this.todos))
                    .catch((error) => console.log(error));
            },
            loadData(data,todos) {
                $.each(data, function(key, value) {
                    console.log('Key: '+key);
                    console.log('Value: '+value);
                    todos.push({
                        id:key,
                        name:value,
                        done:false,
                    });
                });
                this.countTasks();
            }
        }
    }
</script>
@endsection