@props(['task', 'showUser' => true])

@php
    $isOverdue = $task->due_at?->isPast() && !$task->completed_at;
    $isSoon = $task->due_at?->isBetween(now(), now()->addHours(48)) && !$task->completed_at;

    $rowClass = '';
    if ($isOverdue) $rowClass = 'border-start border-danger border-4 bg-danger-subtle';
    elseif ($isSoon) $rowClass = 'border-start border-warning border-4 bg-warning-subtle';
@endphp

<div class="list-group-item d-flex justify-content-between align-items-start py-3 {{ $rowClass }}">
    <div class="d-flex align-items-start">
        <div class="me-3 pt-1">
            @if($task->completed_at)
                <i class="bi bi-check-circle-fill text-success fs-5"></i>
            @elseif($isOverdue)
                <i class="bi bi-exclamation-octagon-fill text-danger fs-5"></i>
            @elseif($isSoon)
                <i class="bi bi-hourglass-split text-warning fs-5"></i>
            @else
                <i class="bi bi-circle text-muted fs-5"></i>
            @endif
        </div>

        <div>
            <div class="d-flex align-items-center gap-2">
                <h6 class="mb-0 fw-bold {{ $task->completed_at ? 'text-decoration-line-through text-muted' : '' }}">
                    {{ $task->title }}
                </h6>
                @if($isSoon)
                    <span class="badge rounded-pill bg-warning text-dark small" style="font-size: 0.7rem;">DUE SOON</span>
                @endif
            </div>

            @if($task->description)
                <p class="mb-1 small text-muted text-wrap" style="max-width: 500px;">
                    {{ $task->description }}
                </p>
            @endif

            <div class="d-flex gap-2 align-items-center mt-1">
                @if($showUser)
                    <span class="badge bg-white text-dark border px-2">
                        {{ $task->user->name_first }} {{ $task->user->name_last }}
                    </span>
                @endif

                {{-- Owner Link with First and Last Name --}}
                @if($task->owner)
                    <div class="border-start ps-2">
                        <a href="{{ route('clients.show', $task->owner) }}" class="text-decoration-none">
                            <span class="badge bg-light text-primary border px-2">
                                <i class="bi bi-person-badge me-1"></i>
                                {{ $task->owner->name_first }} {{ $task->owner->name_last }}
                            </span>
                        </a>
                    </div>
                @endif

                <small class="text-muted border-start ps-2">
                    {{ $task->due_at ? $task->due_at->format('M d, g:i a') : 'No Date' }}
                </small>
            </div>
        </div>
    </div>

    <div class="btn-group">
        @if(!$task->completed_at)
            <button wire:click="editTask({{ $task->id }})" class="btn btn-sm">
                <i class="mdi mdi-pencil text-primary"></i>
            </button>

            <button wire:click="completeTask({{ $task->id }})" class="btn btn-sm">
                <i class="mdi mdi-check-circle text-success"></i>
            </button>
        @endif
        <button wire:click="deleteTask({{ $task->id }})" wire:confirm="Remove this task?" class="btn btn-sm">
            <i class="mdi mdi-trash-can text-danger"></i>
        </button>
    </div>
</div>