{{--
    Job Tasks Tab — embedded inside the job detail page
    Include this partial or use it as a standalone view.
    Usage in job show page:
        @include('tasks.job_tasks', ['tasks' => $tasks, 'jobId' => $job->id, 'isAdmin' => $isAdmin])
--}}
@php $isAdmin = $isAdmin ?? (auth()->user()->role->name === 'office_admin'); @endphp

<div class="job-tasks-panel">

    {{-- Header --}}
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;">
        <div>
            <h5 style="color:#f3f4f6;font-weight:700;margin:0;">Tasks</h5>
            <p style="color:#6b7280;font-size:.78rem;margin:0;">
                {{ $tasks->count() }} task{{ $tasks->count()===1?'':'s' }} linked to this job
            </p>
        </div>
        @if($isAdmin)
        <a href="{{ route('tasks.create', ['job_id' => $jobId]) }}"
           style="background:#3b82f6;color:#fff;border:none;padding:7px 16px;border-radius:7px;
                  font-size:.8rem;font-weight:600;text-decoration:none;">+ Add Task</a>
        @endif
    </div>

    @if($tasks->isEmpty())
    <div style="background:#111827;border-radius:8px;padding:2rem;text-align:center;color:#6b7280;">
        <p style="margin:0;font-size:.88rem;">No tasks for this job yet.</p>
        @if($isAdmin)
        <a href="{{ route('tasks.create', ['job_id' => $jobId]) }}"
           style="display:inline-block;margin-top:.75rem;color:#3b82f6;font-size:.82rem;">
            Create the first task →
        </a>
        @endif
    </div>
    @else

    {{-- Task List --}}
    <div style="display:flex;flex-direction:column;gap:.6rem;">
        @foreach($tasks as $task)
        @php $isOverdue = $task->isOverdue(); @endphp
        <div style="background:#111827;border-radius:8px;padding:.85rem 1rem;
                    border:1px solid rgba(255,255,255,.06);
                    {{ $isOverdue ? 'border-left:3px solid #ef4444;' : '' }}
                    {{ $task->status === 'done' ? 'opacity:.7;' : '' }}">
            <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;">
                <div style="flex:1;">
                    <a href="{{ route('tasks.show', $task) }}"
                       style="color:#f3f4f6;font-weight:600;font-size:.88rem;text-decoration:none;">
                        {{ $task->title }}
                    </a>
                    @if($task->description)
                    <p style="color:#6b7280;font-size:.75rem;margin:.2rem 0 0;
                               overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:400px;">
                        {{ Str::limit($task->description, 80) }}
                    </p>
                    @endif
                    <div style="display:flex;align-items:center;gap:.5rem;margin-top:.5rem;flex-wrap:wrap;">
                        <span style="display:inline-block;font-size:.63rem;font-weight:700;padding:1px 7px;
                                     border-radius:4px;text-transform:uppercase;
                                     {{ $task->priority==='high'  ?'background:rgba(239,68,68,.2);color:#f87171;':'' }}
                                     {{ $task->priority==='medium'?'background:rgba(234,179,8,.2);color:#fbbf24;':'' }}
                                     {{ $task->priority==='low'   ?'background:rgba(34,197,94,.2);color:#4ade80;':'' }}">
                            {{ $task->priorityLabel() }}
                        </span>
                        @if($isOverdue)
                        <span style="font-size:.7rem;color:#f87171;">&#9651; {{ $task->daysOverdue() }}d overdue</span>
                        @elseif($task->status === 'done' && $task->done_at)
                        <span style="font-size:.7rem;color:#34d399;">Done {{ $task->done_at->format('d M') }}</span>
                        @elseif($task->due_date)
                        <span style="font-size:.7rem;color:#6b7280;">Due {{ $task->due_date->format('d M Y') }}</span>
                        @endif
                    </div>
                </div>

                <div style="display:flex;align-items:center;gap:.75rem;flex-shrink:0;">
                    {{-- Assignee avatar --}}
                    <div title="{{ $task->assignee->name }}"
                         style="width:28px;height:28px;border-radius:50%;background:#3b82f6;color:#fff;
                                display:inline-flex;align-items:center;justify-content:center;
                                font-size:.6rem;font-weight:700;flex-shrink:0;">
                        {{ strtoupper(substr($task->assignee->name,0,1)) }}{{ strtoupper(substr(explode(' ',$task->assignee->name)[1]??'',0,1)) }}
                    </div>

                    {{-- Status dropdown (inline quick change) --}}
                    <select onchange="quickStatusChange({{ $task->id }}, this.value)"
                            style="background:#1a2035;border:1px solid rgba(255,255,255,.12);color:#d1d5db;
                                   font-size:.72rem;padding:3px 8px;border-radius:6px;cursor:pointer;">
                        <option value="to_do"       {{ $task->status==='to_do'      ?'selected':'' }}>To Do</option>
                        <option value="in_progress" {{ $task->status==='in_progress'?'selected':'' }}>In Progress</option>
                        <option value="done"        {{ $task->status==='done'       ?'selected':'' }}>Done</option>
                    </select>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    @endif
</div>

<style>
    .job-tasks-panel { padding: .25rem 0; }
</style>

<script>
function quickStatusChange(taskId, status) {
    fetch(`/tasks/${taskId}/status`, {
        method: 'PATCH',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json',
        },
        body: JSON.stringify({ status })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) { window.location.reload(); }
        else { alert('Could not update status. Please refresh and try again.'); }
    })
    .catch(() => { alert('Network error. Please refresh and try again.'); });
}
</script>