@extends('layouts.admin')

@section('page-title')
    {{ __('Todo') }}
@endsection

@section('content')
    <section class="section">
        @if ($currentWorkspace)
            <h2 class="section-title">{{ __('Todo') }}</h2>
            <div class="row">
                <div class="col-lg-12">
                    <!-- Todo-->
                    <div class="card">
                        <div class="card-header">
                            <h4 class="header-title">{{ __('Todo') }}</h4>
                        </div>
                        <div class="card-body">
                            <div class="todoapp">
                                <div class="row">
                                    <div class="col">
                                        <div class="font-weight-bold" id="todo-message"><span id="todo-remaining"></span>
                                            {{ __('of') }} <span id="todo-total"></span> {{ __('remaining') }}</div>
                                    </div>
                                    <div class="col-auto">
                                        <a href="#" class="float-right btn btn-light"
                                            id="btn-archive">{{ __('Archive') }}</a>
                                    </div>
                                </div>

                                <ul class="list-group list-group-flush slimscroll todo-list" style="max-height: 100%"
                                    id="todo-list"></ul>

                                <form name="todo-form" id="todo-form" class="needs-validation" novalidate>
                                    <div class="row">
                                        <div class="col">
                                            <input type="text" id="todo-input-text" name="todo-input-text"
                                                class="form-control" placeholder="{{ __('Add new todo') }}" required>
                                            <div class="invalid-feedback">
                                                {{ __('Please enter your task name') }}
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <button class="btn-primary btn-block btn waves-effect waves-light"
                                                type="submit" id="todo-btn-submit">{{ __('Add') }}</button>
                                        </div>
                                    </div>
                                </form>
                            </div> <!-- end .todoapp-->

                        </div> <!-- end card-body -->
                    </div> <!-- end card-->
                </div> <!-- end col-->
            </div>
        @else
            <div class="container mt-5">
                <div class="card">
                    <div class="card-body p-4">
                        <div class="page-error">
                            <div class="page-inner">
                                <h1>404</h1>
                                <div class="page-description">
                                    {{ __('Page Not Found') }}
                                </div>
                                <div class="page-search">
                                    <p class="text-muted mt-3">
                                        {{ __("It's looking like you may have taken a wrong turn. Don't worry... it happens to the best of us. Here's a little tip that might help you get back on track.") }}
                                    </p>
                                    <div class="mt-3">
                                        <a class="btn-return-home badge-blue" href="{{ route('home') }}"><i
                                                class="fas fa-reply"></i> {{ __('Return Home') }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </section>
    <!-- container -->
@endsection

@if ($currentWorkspace)
    @push('scripts')
        <script>
            ! function(t) {
                "use strict";
                var o = function() {
                    this.$body = t("body"), this.$todoContainer = t("#todo-container"), this.$todoMessage = t(
                            "#todo-message"), this.$todoRemaining = t("#todo-remaining"), this.$todoTotal = t(
                            "#todo-total"), this.$archiveBtn = t("#btn-archive"), this.$todoList = t("#todo-list"), this
                        .$todoDonechk = ".todo-done", this.$todoForm = t("#todo-form"), this.$todoInput = t(
                            "#todo-input-text"), this.$todoBtn = t("#todo-btn-submit"), window.$todoData = JSON.parse(
                            '{!! addslashes($todos) !!}'), this.$todoCompletedData = [], this.$todoUnCompletedData = []
                };
                o.prototype.markTodo = function(t, o) {
                    $.ajax({
                        url: '{{ route('todos.update', $currentWorkspace->slug) }}',
                        type: 'POST',
                        data: {
                            "id": t,
                            "done": o
                        },
                        success: function(data) {}
                    });
                    for (var e = 0; e < window.$todoData.length; e++) window.$todoData[e].id == t && (window.$todoData[e]
                        .done = o)
                }, o.prototype.addTodo = function(t) {
                    var todo;
                    $.post('{{ route('todos.store', $currentWorkspace->slug) }}', {
                        "text": t,
                        "done": 0,
                        "_token": $('meta[name="csrf-token"]').attr('content')
                    }, function(data) {
                        todo = JSON.parse(data);
                        window.$todoData.push({
                            id: todo.id,
                            text: todo.text,
                            done: todo.done
                        }), o.prototype.generate()
                    });
                }, o.prototype.archives = function() {
                    this.$todoUnCompletedData = [];
                    for (var t = 0; t < window.$todoData.length; t++) {
                        var o = window.$todoData[t];
                        1 == o.done ? this.$todoCompletedData.push(o) : this.$todoUnCompletedData.push(o)
                    }
                    $.ajax({
                        url: '{{ route('todos.destroy', $currentWorkspace->slug) }}',
                        type: 'DELETE',
                        data: {
                            "archives": this.$todoCompletedData,
                            "_token": $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {}
                    });
                    window.$todoData = [], window.$todoData = [].concat(this.$todoUnCompletedData), this.generate()
                }, o.prototype.generate = function() {
                    $("#todo-list").html("");
                    for (var t = 0, o = 0; o < window.$todoData.length; o++) {
                        var e = window.$todoData[o];
                        1 == e.done ? $("#todo-list").prepend(
                            '<li class="list-group-item border-0 pl-0"><div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input todo-done" id="' +
                            e.id + '" checked><label class="custom-control-label" for="' + e.id + '"><s>' + e.text +
                            "</s></label></div></li>") : (t += 1, $("#todo-list").prepend(
                            '<li class="list-group-item border-0 pl-0"><div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input todo-done" id="' +
                            e.id + '"><label class="custom-control-label" for="' + e.id + '">' + e.text +
                            "</label></div></li>"))
                    }
                    $("#todo-total").text(window.$todoData.length), $("#todo-remaining").text(t)
                }, o.prototype.init = function() {
                    var o = this;
                    this.generate(), this.$archiveBtn.on("click", function(t) {
                        return t.preventDefault(), o.archives(), 0
                    }), t(document).on("change", this.$todoDonechk, function() {
                        this.checked ? o.markTodo(t(this).attr("id"), 1) : o.markTodo(t(this).attr("id"), 0), o
                            .generate()
                    }), this.$todoForm.on("submit", function(t) {
                        return t.preventDefault(), "" == o.$todoInput.val() || void 0 === o.$todoInput.val() ||
                            null == o.$todoInput.val() ? (o.$todoInput.focus(), 0) : (o.addTodo(o.$todoInput.val()),
                                1)
                    })
                }, t.TodoApp = new o, t.TodoApp.Constructor = o
            }(window.jQuery),
            function(t) {
                "use strict";
                t.TodoApp.init()
            }(window.jQuery);
        </script>
    @endpush
@endif