@if($tasks->count() > 0)
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
        @foreach($tasks as $task)
            @php
                $taskViewModel = new \Modules\Checklist\ViewModels\TaskViewModel($task, $schedules ?? null);
                $settings = $task->settings;
            @endphp

            <div class="task checklist-card task-{{ $task->id }}"
                id="task-{{ $task->id }}"
                data-id="{{ $task->id }}"
                data-toggle="modal"
                data-target="#modal-dialog">

                {{-- Task Header --}}
                <div class="task-header">
                    @php
                        $icon = count($task->users) > 0 && $task->users->contains(auth()->user()) || ( count($task->collaborators) > 0 && $task->collaborators->contains('user_id', request()->user()->id) )
                                ? '<i class="fa fa-user" title="' . __('label.assigned_to_you') . '"></i>'
                                : (count($task->groups) > 0 || count($task->positions) > 0 || !(count($task->users) || count($task->groups) || count($task->positions) || count($task->collaborators))
                                    ? '<i class="fa fa-building-o" title="' . __('label.general_assignment') . '"></i>'
                                    : '');
                    @endphp
                    <h1 class="task-title">{!! $icon !!} {{ $task->title }}</h1>
                    <p class="task-due-date">
                        {{ __('tasks.due_on') }} | {{ $taskViewModel->getDueDate() }}
                    </p>
                </div>

                {{-- Progress Section --}}
                <div class="task-progress">
                    <div class="progress-stats">
                        <span class="completed">{{ $taskViewModel->getCompletedCount() }}</span>
                        <span class="separator">/</span>
                        <span class="total">{{ $taskViewModel->getTotalCount() }}</span>
                    </div>

                    <div class="progress-bar-container">
                        <progress
                            class="custom-progressbar {{ $taskViewModel->getProgressBarClass() }}"
                            value="{{ $taskViewModel->getCompletedCount() }}"
                            max="{{ $taskViewModel->getTotalCount() }}">
                        </progress>
                    </div>
                </div>

                {{-- Task Indicators --}}
                @if($taskViewModel->hasNotes())
                    <div class="task-indicators">
                        <x-task-notes-indicator :notes="$taskViewModel->getNotes()" />
                    </div>
                @endif

                {{-- Task Settings Indicator --}}
                <div class="{{ $task->time_period == 'night' ? 'task-night-settings-indicator' : 'task-day-settings-indicator' }}"
                    style="border-color: {{ $settings['color'] ?? '' }}">
                    @if($task->time_period == 'night')
                        <x-svg-icon icon="icon-moon" class="w-8 h-8" />
                    @else
                        <x-svg-icon icon="icon-sun" class="w-8 h-8" />
                    @endif
                </div>
                @if($task->time_period == 'night')
                    <span class="text-xs-regular text-custom-blue-700 absolute right-8 top-0">{{ __('tasks.end') }}</span>
                @else
                    <span class="text-xs-regular text-[#42413B] absolute right-7 top-0">{{ __('tasks.start') }}</span>
                @endif
            </div>
        @endforeach
    </div>
@else
    <div class="flex flex-col items-center justify-center py-8 no-tasks-message">
        <p class="text-md-regular text-custom-grey-600">{{trans('forms.lbl_no_result_found')}}</p>
    </div>
@endif
<div class="pagination-row">
    {{ $tasks->links() }}
</div>