@props([
    'includeTitle' => true,
    'tickets' => [],
    'onTheClock' => false,
    'groupBy' => '',
    'allProjects' => [],
    'allAssignedprojects' => [],
    'projectFilter' => '',

])

<div class="clear">
    <div class="row" id="yourToDoContainer">
        <div class="col-md-12">
            <div class="tw-mb-l">

                <form method="get">
                    @dispatchEvent("beforeTodoWidgetGroupByDropdown")

                    <a href="javascript:void(0);"
                       id="ticket_new_link"
                        class="btn btn-primary"
                       onclick="jQuery('#ticket_new').toggle('fast', function() { jQuery(this).find('input[name=headline]').focus(); });">
                        <i class="fa fa-plus"></i> Add To-Do
                    </a>
                    <div class="btn-group left">
                        <button class="btn btn-link dropdown-toggle f-right" type="button" data-toggle="dropdown">{!! __("links.group_by") !!}: {{ __('groupByLabel.'.$groupBy) }}</button>
                        <ul class="dropdown-menu">
                            <li><span class="radio">
                                    <input type="radio" name="groupBy"
                                           @if($groupBy == "time") checked='checked' @endif
                                           value="time" id="groupByDate"
                                           hx-get="{{BASE_URL}}/widgets/myToDos/get"
                                           hx-trigger="click"
                                           hx-target="#yourToDoContainer"
                                           hx-swap="outerHTML"
                                           hx-indicator="#todos .htmx-indicator"
                                           hx-vals='{"projectFilter": {{ $projectFilter }}, "groupBy": "time" }'
                                        />
                                    <label for="groupByDate">{!! __("label.dates") !!}</label></span></li>
                            <li>
                                <span class="radio">
                                    <input type="radio"
                                           name="groupBy"
                                           @if($groupBy == "project") checked='checked' @endif
                                           value="project" id="groupByProject"
                                           hx-get="{{BASE_URL}}/widgets/myToDos/get"
                                           hx-trigger="click"
                                           hx-target="#yourToDoContainer"
                                           hx-swap="outerHTML"
                                           hx-indicator="#todos .htmx-indicator"
                                           hx-vals='{"projectFilter": {{ $projectFilter }}, "groupBy": "project" }'
                                    />
                                    <label for="groupByProject">{!! __("label.project") !!}</label>
                                </span>
                            </li>

                        </ul>
                    </div>
                    <div class="btn-group left ">
                        <button class="btn btn-link dropdown-toggle f-right" type="button" data-toggle="dropdown">
                            {!! __("links.filter") !!}
                            @if($projectFilter != '')
                                <span class='badge badge-primary'>1</span>
                            @endif
                        </button>
                        <ul class="dropdown-menu">
                            <li
                                @if($projectFilter == '')
                                    class='active'
                                @endif
                            ><a href=""
                                hx-get="{{BASE_URL}}/widgets/myToDos/get"
                                hx-trigger="click"
                                hx-target="#yourToDoContainer"
                                hx-swap="outerHTML"
                                hx-indicator="#todos .htmx-indicator"
                                hx-vals='{"projectFilter": "", "groupBy": "{{ $groupBy }}" }'

                                >{{ __('labels.all_projects') }}

                                </a></li>

                            @if($allAssignedprojects)
                                @foreach($allAssignedprojects as $project)
                                    <li
                                        @if($projectFilter == $project['id'])
                                            class='active'
                                        @endif
                                    ><a href=""
                                        hx-get="{{BASE_URL}}/widgets/myToDos/get"
                                        hx-trigger="click"
                                        hx-target="#yourToDoContainer"
                                        hx-swap="outerHTML"
                                        hx-indicator="#todos .htmx-indicator"
                                        hx-vals='{"projectFilter": "{{ $project['id'] }}", "groupBy": "{{ $groupBy }}" }'
                                        >{{ $project['name'] }}</a></li>
                                @endforeach
                            @endif

                        </ul>
                    </div>

                    @dispatchEvent("afterTodoWidgetGroupByDropdown")
                    <div class="clearall"></div>
                </form>
            </div>
            <div class="htmx-indicator">
                <x-global::loadingText type="card" count="5" />
            </div>
            <div class="htmx-indicator htmx-loaded-content">
                @if($tickets !== null && count($tickets) == 0)
                <div class='center'>
                    <div  style='width:30%' class='svgContainer'>
                        {!! file_get_contents(ROOT . "/dist/images/svg/undraw_a_moment_to_relax_bbpa.svg") !!}
                    </div>
                    <br />
                    <h4>{{ __("headlines.no_todos_this_week") }}</h4>
                    {{ __("text.take_the_day_off") }}
                    <a href='{{ BASE_URL }}/tickets/showAll'>{{ __("links.goto_backlog") }}</a><br/><br/>
                </div>
                @endif
                @foreach ($tickets as $ticketGroup)

                    @php
                        //Get first duedate if exist
                        $ticketCreationDueDate = '';
                        if (isset($ticketGroup['tickets'][0]) && $ticketGroup['tickets'][0]['dateToFinish'] != "0000-00-00 00:00:00" && $ticketGroup['tickets'][0]['dateToFinish'] != "1969-12-31 00:00:00") {
                            //Use the first due date as the new due date
                            $ticketCreationDueDate = $ticketGroup['tickets'][0]['dateToFinish'];
                        }

                        $groupProjectId = $_SESSION['currentProject'];

                        if ($groupBy == 'project' && isset($ticketGroup['tickets'][0])) {
                            $groupProjectId = $ticketGroup['tickets'][0]['projectId'];
                        }

                    @endphp

                    <a class="anchor" id="accordion_anchor_{{ $loop->index }}"></a>



                        <div class="hideOnLoad " id="ticket_new" style="padding-top:5px; padding-bottom:15px;">

                            <form method="post"
                                  hx-post="{{ BASE_URL }}//widgets/myToDos/addTodo"
                                  hx-target="#yourToDoContainer"
                                  hx-swap="outerHTML"
                                  hx-indicator="#ticket_new .htmx-indicator-small"
                            >
                                <input type="hidden" name="quickadd" value="1"/>
                                <div class="flex" style="display:flex; column-gap: 10px;">
                                    <input type="text" name="headline" style="width:100%;" placeholder="Enter To-Do Title" title="