@extends('layouts.app')
@section('title', trans('menu.todo'))
@section('content')
    <div class="content">
        <x-content.header title="{{ __('title.To-Do') }} ({{ $tasks->total() }})">
            <x-slot:headerRight>
                @can('create tasks')
                    <a href="{{ url('tasks/create') }}" class="btn-secondary-base"><x-svg-icon
                            icon="icon-plus" />{{ trans('forms.lbl_add_new') }}</a>
                @endcan

                {{-- @if (request()->user()->hasAnyPermission(['delete-own tasks', 'delete-any tasks']))
                    <a href="javascript:;" data-uri="{{url('tasks')}}" class="btn-delete-all btn-secondary-base"><i class="mdi mdi-delete"></i>{{trans('forms.lbl_delete')}}</a>
                @endif --}}
            </x-slot:headerRight>
        </x-content.header>


        <form id="filter-form" method="POST" onsubmit="return false;">
            <div class="flex flex-col-reverse lg:flex-row gap-3 items-center justify-between">
                <div class="search-bar w-full lg:w-auto">
                    <input name="_term" type="text" class="fitler_form search-input w-full lg:w-[320px]" placeholder="{{trans('forms.lbl_search')}}" />
                    <x-svg-icon icon="icon-search" />
                </div>

                <div class="tabs overflow-x-scroll no-scrollbar">
                    <button class="tabs-btn-box active min-w-[94px]" data-val="">{{ __('forms.lbl_all') }}</button>
                    <button class="tabs-btn-box min-w-[94px]" data-val="complete">{{ __('menu.lbl_complete') }}</button>
                    <button class="tabs-btn-box min-w-[94px]" data-val="incomplete">{{ __('menu.lbl_incomplete') }}</button>
                    <input type="hidden" name="filterByStatus" value="" />
                </div>
            </div>
        </form>


        <div id="task-lists" class="laravel-pagination">
            @include('task::task.tasks')
        </div>
    </div>
@stop

@section('footer-script')

    <script type="text/javascript">
        var $datable = $('#datatable'),
            url_segment = "{{ request()->has('user_id') ? '?user_id=' . request()->get('user_id') : '' }}";
            //url: "{{ route('tasks.index') }}" + url_segment,

        $('body').on('click', '.tabs-btn-box', function() {
            // Reset all tabs and contents for the second set filter
            $(".tabs-btn-box").removeClass("active");

            // Set new active state for the clicked tab in the filter set
            $(this).addClass("active");

            $("input[name='filterByStatus']").val($(this).data('val'));

            callBackFunc();
        });

        $('#filter-form input').on("keyup", function(event) {
            callBackFunc();
        });

        callBackFunc = _.debounce(function(data) {
            getItems($('#task-lists'), "{{route('tasks.index.filter')}}" + url_segment);
        }, 500);

        $("body").on("click", ".task", function(event) {
            if ($(event.target).closest(".task-edit").length ||
                $(event.target).closest(".btn-delete").length) {
                return;
            }

            event.preventDefault();

            let url = "{{ url('tasks') }}"+ "/" + $(this).data('id')+ url_segment;

            let customLoader = '<div class="custom-loader"><div class="dot-opacity-loader"><span></span><span></span><span></span></div></div>', data = null;

            $(this).append(customLoader);
            $(".checklists").append(customLoader);

            PDRequest({
                type    : "GET",
                url     : url,
                isFlash : false,
                data    : data
            }).then((response) => {
                if(response.status == "success") {
                    $(".checklists").html(response.message);

                    $(".task-title").html(response.title);

                    $(".task.active").removeClass("active border-custom-orange-500 shadow-cstm")
                        .addClass("hover:border-custom-orange-500 hover:shadow-cstm");

                    $(this).addClass("active border-custom-orange-500 shadow-cstm")
                        .removeClass("hover:border-custom-orange-500 hover:shadow-cstm");

                    $("#todos-modal").find(".checklist").each(function(){
                        const checklistID = "modal-" + $(this).attr("id");

                        $(this).attr("id", checklistID);

                        $(this).parent().parent().find("label").attr("for", checklistID);
                    });
                }

                $(this).find(".custom-loader").remove();
                $(".checklists").find(".custom-loader").remove();
            }).catch(error => {
                $(this).find(".custom-loader").remove();
                $(".checklists").find(".custom-loader").remove();
            });

        });

        $("body").on("change", ".checklist", function(event) {

            event.preventDefault();

            let url = "/tasks/"+$(this).data('task')+"/items"+ url_segment;

            let customLoader = '<div class="custom-loader"><div class="dot-opacity-loader"><span></span><span></span><span></span></div></div>', data = null;

            $(this).append(customLoader);

            event.preventDefault();

            let checklists = {};

            checklists[$(this).val()] = $(this).is(":checked");

            data = { checklists : checklists};

            PDRequest({
                type    : "PUT",
                url     : url,
                data    : data,
                event   : event
            }).then((response) => {
                if(response.status == "success") {
                    const $el = $("#task-"+$(this).data('task'));
                    const $order = $el.find(".task-footer h1").html();

                    $el.before(response.task);
                    $("#task-"+$(this).data('task')).find(".task-footer h1").html($order);

                    if($el.hasClass('active')) {
                        $("#task-"+$(this).data('task')).addClass("active border-custom-orange-500 shadow-cstm")
                            .removeClass("hover:border-custom-orange-500 hover:shadow-cstm");
                    }

                    $el.remove();
                }

                $(this).find(".custom-loader").remove();
            }).catch(error => {
                $(this).find(".custom-loader").remove();
            });

        });

        $("body").on("click", ".btn-complete", function(event) {

            event.preventDefault();

            let url = "/tasks/"+$(this).data('task')+"/items"+ url_segment;

            let customLoader = '<div class="custom-loader"><div class="dot-opacity-loader"><span></span><span></span><span></span></div></div>', data = null;

            $(this).append(customLoader);

            event.preventDefault();

            let checklists = {};

            data = { checklists : checklists};

            PDRequest({
                type    : "PUT",
                url     : url,
                data    : data,
                event   : event
            }).then((response) => {
                if(response.status == "success") {
                    const $el = $("#task-"+$(this).data('task'));
                    const $order = $el.find(".task-footer h1").html();

                    $el.before(response.task);
                    $("#task-"+$(this).data('task')).find(".task-footer h1").html($order);

                    if($el.hasClass('active')) {
                        $("#task-"+$(this).data('task')).addClass("active border-custom-orange-500 shadow-cstm")
                            .removeClass("hover:border-custom-orange-500 hover:shadow-cstm");
                    }

                    $el.remove();

                    $(this).remove();
                }

                $(this).find(".custom-loader").remove();
            }).catch(error => {
                $(this).find(".custom-loader").remove();
            });

        });
    </script>
@stop