@extends('layouts.app')
@section('page-title', 'Task: ' . $task->task_code)

@section('content')
<div class="page-header">
    <h1><i class="fas fa-tasks" style="color:#0097c4"></i> Task: {{ $task->task_code }}</h1>
    <div class="flex gap-2">
        <a href="{{ route('tasks.edit', $task) }}" class="btn btn-primary"><i class="fas fa-edit"></i> Edit</a>
        <a href="{{ route('tasks.index') }}" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Back</a>
    </div>
</div>

<div class="card" style="max-width:700px;">
    <div class="card-header"><i class="fas fa-info-circle"></i> Task Details</div>
    <div class="card-body">
        <table style="width:100%;border-collapse:collapse;font-size:0.875rem;">
            @foreach([
                'Task Code'   => $task->task_code,
                'Description' => $task->description ?? '—',
                'Priority'    => $task->priority,
                'Assigned To' => $task->assignedEmployee?->name ?? 'Unassigned',
                'Start Date'  => $task->start_date?->format('d M Y') ?? '—',
                'Due Date'    => $task->due_date?->format('d M Y') ?? '—',
                'Status'      => $task->status,
                'Comments'    => $task->comments ?? '—',
            ] as $key => $val)
            <tr style="border-bottom:1px solid #f1f5f9;">
                <td style="padding:10px 12px;font-weight:600;color:#374151;width:160px;background:#f8fafc;">{{ $key }}</td>
                <td style="padding:10px 12px;">{{ $val }}</td>
            </tr>
            @endforeach
        </table>
    </div>
</div>
@endsection