@foreach($tasks as $task)
    @php
        // Check if there's an extended due date (dead_line_date or task_over_due_date)
        $extendedDueDate = null;
        if ($task->dead_line_date) {
            $extendedDueDate = $task->dead_line_date;
        } elseif ($task->task_over_due_date) {
            $extendedDueDate = $task->task_over_due_date;
        }
        
        // Use extended due date if available, otherwise use the original due date
        $effectiveDueDate = $extendedDueDate ? $extendedDueDate : $task->due_date;
        
        // Calculate if overdue based on the effective due date
        $isOverdue = $effectiveDueDate && 
                    \Carbon\Carbon::parse($effectiveDueDate)->isPast() &&
                    $task->status !== 'completed';
    @endphp
    <div class="d-flex align-items-start my-1" style="position: relative;z-index:0 !important;">
        <div class="card w-100 p-3 task-card" style="border-left: 5px solid black;"
            data-id="{{ $task->id }}"
            data-priority="{{ $task->priority }}"
            data-status="{{ strtolower(str_replace('_', ' ', $task->status)) }}"
            data-task-type="{{ $task->shared_with == 'user' ? 'user' : ($task->shared_with == 'location' ? 'location' : (isset($task->case_id) ? 'case' : 'unknown')) }}"
            data-due-date="{{ $effectiveDueDate ?? $task->due_date }}"
            data-deadline="{{ $effectiveDueDate ? \Carbon\Carbon::parse($effectiveDueDate)->diffInDays(now()) : '' }}">
          <div class="row text-muted" style="font-size: 0.9rem;">
                <!-- Section 1 -->
                <div style="margin-left: -32px;font-size: 15px;min-height:300px;" class="col-md-3 border-end pe-3 position-relative">
                    <div class="d-flex justify-content-between align-items-start">
                        <div class="text-black">
                        @if ($tab === 'all')
                            @if ($profile->super_access == 1 && $task->shared_with == 'user')
                                <input type="checkbox" name="all_tasks_checkbox" value="{{ $task->id }}" class="task-select">
                            @endif
                        @else
                            @if (
                                    ($profile->super_access == 1 && $task->shared_with == 'user') ||
                                    (
                                        $profile->super_access != 1 &&
                                        $profile->is_access_tasks == 1 &&
                                        $task->shared_with == 'user' &&
                                        (
                                            $task->ho_allocations->where('head_office_user_id', $head_office_user->id)->first() != null ||
                                            $task->head_office_user_id == $head_office_user->id
                                        )
                                    )
                                )
                            <input type="checkbox" name="tasks_checkbox" value="{{ $task->id }}" class="task-select">
                            @endif
                            @endif

                            Task #{{ $task->id }}</div>
                        <div>
                            @if ($task->shared_with == 'user')
                                <span style="font-size: 12px" class="badge bg-primary" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a user">User Task</span>
                            @elseif ($task->shared_with == 'location')
                                <span style="font-size: 12px" class="badge bg-success" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a site">Site Task</span>
                            @elseif(isset($task->case_id))
                                <span style="font-size: 12px" class="badge bg-success" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a case investigator">Case Task</span>
                            @endif
                        </div>
                    </div>
                    <h6 class="mt-2 fw-bold text-black" style="margin-left: 2px;">
                        {{ $task->title ?? '[Task Name goes here]' }}
                    </h6>
                    <span style="font-size: 15px" class="badge pri-tag mt-2 {{ $task->priority }}">
                        {{ $task->priority ?? 'No Priority' }}
                    </span>
                    @if ($isOverdue)
                        <span style="font-size: 15px" class="badge bg-danger mt-2">Overdue</span>
                    @endif
                </div>
                <!-- Section 2 -->
                 <div class="col-md-4 border-end px-3">
                    @if (isset($task->created_by) && isset($task->created_by->user->logo))
                        <div class="mt-1">
                            <i class="bi bi-sun"></i>
                            <img class="img-profile rounded-circle" width="22" height="22"
                                src="{{ optional(optional($task->created_by)->user)->logo ?? asset('images/default-user.png') }}">
                            Created by:
                            <span class="fw-medium" style="padding-left: 10px">{{ optional(optional($task->created_by)->user)->name ?? 'Default Task' }}</span>
                        </div>
                    @endif
                    <div class="mt-1">
                        <i class="bi bi-sun"></i>
                        <svg width="20" height="20" style="margin-top: -2px;margin-right: 5px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path stroke="rgb(103,105,121)" d="M12 2V6M12 18V22M6 12H2M22 12H18M19.0784 19.0784L16.25 16.25M19.0784 4.99994L16.25 7.82837M4.92157 19.0784L7.75 16.25M4.92157 4.99994L7.75 7.82837" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>Created at:
                        {{ \Carbon\Carbon::parse($task->created_at)->format('d M Y (D) h:i a') }}
                    </div>
                    <div class="mt-1"><i class="bi bi-clock-history"></i><svg width="20" height="20" style="margin-top: -2px;margin-right: 5px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path stroke="rgb(103,105,121)" d="M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg> Last Updated {{ $task->updated_at->diffForHumans() }}
                    </div>
                    <div style="font-size: 14px">
                        <svg width="20" height="20" style="margin-top: -2px;margin-right: 5px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path stroke="rgb(103,105,121)" d="M5 3L2 6M22 6L19 3M6 19L4 21M18 19L20 21M12 9V13L14 15M12 21C14.1217 21 16.1566 20.1571 17.6569 18.6569C19.1571 17.1566 20 15.1217 20 13C20 10.8783 19.1571 8.84344 17.6569 7.34315C16.1566 5.84285 14.1217 5 12 5C9.87827 5 7.84344 5.84285 6.34315 7.34315C4.84285 8.84344 4 10.8783 4 13C4 15.1217 4.84285 17.1566 6.34315 18.6569C7.84344 20.1571 9.87827 21 12 21Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                                                Due Date:
        {{ $effectiveDueDate ? \Carbon\Carbon::parse($effectiveDueDate)->format('d M Y (D) h:i a') : 'No Due Date' }}
                    </div>
                    @if ($task->ho_allocations->count() > 0)
                        <div class="mt-1">
                            <i class="bi bi-bookmark"></i>
                            <svg width="20" height="20" style="margin-top: -3px;margin-right: 5px" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path stroke="rgb(103,105,121)" d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            Assigned To:
                            {{ optional($task->ho_allocations)->pluck('head_office_user.user.name')->filter()->implode(', ') ?? '' }}
                        </div>
                    @endif
                    @if ($task->loc_allocations->count() > 0)
                        <div class="mt-1">
                            <i class="bi bi-bookmark"></i>
                            <svg width="20" height="20" style="margin-top: -3px;margin-right: 5px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path stroke="rgb(103,105,121)" d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            Assigned To:
                            {{ optional($task->loc_allocations)->load('head_office_location.location')->pluck('head_office_location.location.trading_name')->filter()->implode(', ') ?? '' }}
                        </div>
                    @endif
                    @if (isset($task->task_case) && $task->task_case->location_name != null)
                    <div class="mt-1">
                        <i class="bi bi-sun"></i>
                        <svg width="20" height="20" style="margin-top: -4px;margin-right: 5px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11 11H6.2C5.07989 11 4.51984 11 4.09202 11.218C3.71569 11.4097 3.40973 11.7157 3.21799 12.092C3 12.5198 3 13.0799 3 14.2V21M21 21V6.2C21 5.0799 21 4.51984 20.782 4.09202C20.5903 3.71569 20.2843 3.40973 19.908 3.21799C19.4802 3 18.9201 3 17.8 3H14.2C13.0799 3 12.5198 3 12.092 3.21799C11.7157 3.40973 11.4097 3.71569 11.218 4.09202C11 4.51984 11 5.0799 11 6.2V21M22 21H2M14.5 7H17.5M14.5 11H17.5M14.5 15H17.5" stroke="rgb(103,105,121)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>Site Involved:
                            {{ optional($task->task_case)->location_name ?? 'Unknown Site' }}
                        </div>
                    @endif
                </div>
                <!-- Section 3 -->
               <div class="col-md-3 border-end px-3">
                    <br>
                    {!! $task->description ?? 'No Description' !!}
                </div>
                <!-- Section 4 -->
                <div class="col-md-2 d-flex flex-column align-items-end " style="margin-right: -10px">
                    <div class="mb-1">
                        @livewire('task-status', ['task' => $task->id])
                    </div>
                    <div class="text-end ">
                        <a href="{{ route('tasks.show', $task->id) }}"
                            class="btn btn-outline-secondary btn-sm m-0 mt-3 pe-4 py-1 fs-6 "
                            style="padding-left: 27px;">View Task </a>
                    </div>
                    <div class="text-end">
                        @if ($task->task_case && ($profile->super_access == 1 || $profile->is_access_case_manager == 1))
                            <a href="/head_office/case/manager/view/{{ $task->task_case->id }}"
                                class="btn btn-outline-secondary btn-sm mt-3 ps-4 pe-4 py-1 fs-6 ">View Case</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach