@extends('layouts.master')


@section('content')


    <main class="contentContainer">

        <h1>Taskübersicht</h1>


        <form class="task-list-form" action="{{ route('task.store') }}" method="post">
            <div style="position: absolute;right: 10px;top: 23px;">
                <button class="btn btn-primary btn-big">
                    <i class="fas fa-save" style="margin-right:10px;"></i> <span>
                    Speichern
                </span>
                </button>
                <a id="add-new-task" class="btn btn-primary btn-big" href="#"  style=" margin-left:10px;"><i class="fas fa-folder-plus" style="font-size:1.5em;margin-right:10px;"></i>Neuen Task hinzufügen</a>
            </div>

{{--            <input type="submit" class="button" style="width: 400px; text-align: center; position:absolute;top:25px;right:10px;"--}}
{{--                value="Speichern">--}}

            <div id="task-list-container">
                <div class="col-12" style="">
                    <ul class="list-group">
                        @foreach($taskItemList as $key => $taskItem)
                            @include('tasks.singleitem', array('taskItem' => $taskItem, 'operatorList' => $operatorList))
                        @endforeach
                    </ul>
                </div>

{{--                <a id="add-new-task" class="btn btn-primary btn-big" href="#"  style="position:absolute;top:25px;right:10px;"><i class="fas fa-folder-plus" style="font-size:1.5em;margin-right:10px;"></i>Neuen Task hinzufügen</a>--}}
            </div>
            @csrf
        </form>
    </main>



<script>
    jQuery(document).ready(function(){
        jQuery('#add-new-task').click(function(){
            showLoadingSpinner();
            jQuery.get("/task/create", function(data){
                jQuery('#task-list-container ul').append(jQuery(data));
                var elements = jQuery('#task-list-container .list-group-item');
                var lastElement = elements[elements.length - 1];
                jQuery(lastElement).hide();
                jQuery(lastElement).slideDown();
                hideLoadingSpinner();
            });
        });
    });

    function deleteTask(element){
        jQuery.post({
            url : "/task/delete",
            data : { "taskItemId" : jQuery(element).parent().attr('data-taskitemid'), "_token": "{{ csrf_token() }}",}
        }, function(data){
            // debugger;
        });


        jQuery(element).parent().slideUp(function(){
            jQuery(element).parent().remove();
        });
    }
</script>


@endsection