@extends('layouts.app')
@section('page-title', 'Task Management')

@push('styles')
<style>
.priority-Low      { color:#16a34a; font-weight:600; }
.priority-Medium   { color:#ca8a04; font-weight:600; }
.priority-High     { color:#dc2626; font-weight:600; }
.priority-Critical { color:#7c3aed; font-weight:700; }
</style>
@endpush

@section('content')
<div class="page-header">
    <h1><i class="fas fa-tasks" style="color:#0097c4"></i> Task Management</h1>
    <a href="{{ route('tasks.create') }}" class="btn btn-primary">
        <i class="fas fa-plus"></i> New Task
    </a>
</div>

<!-- Filters -->
<form method="GET">
    <div style="background:white;border:1px solid #e2e8f0;border-radius:10px;padding:16px;margin-bottom:20px;display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;">
        <div style="flex:2;min-width:180px;">
            <label style="font-size:0.8rem;font-weight:500;display:block;margin-bottom:5px;">Search</label>
            <input type="text" name="search" class="form-control" value="{{ request('search') }}" placeholder="Task code or description...">
        </div>
        <div style="flex:1;min-width:150px;">
            <label style="font-size:0.8rem;font-weight:500;display:block;margin-bottom:5px;">Assigned To</label>
            <select name="employee_id" class="form-control">
                <option value="">All</option>
                @foreach($employees as $emp)
                    <option value="{{ $emp->id }}" {{ request('employee_id') == $emp->id ? 'selected':'' }}>{{ $emp->name }}</option>
                @endforeach
            </select>
        </div>
        <div style="flex:1;min-width:120px;">
            <label style="font-size:0.8rem;font-weight:500;display:block;margin-bottom:5px;">Priority</label>
            <select name="priority" class="form-control">
                <option value="">All</option>
                @foreach(['Low','Medium','High','Critical'] as $p)
                    <option value="{{ $p }}" {{ request('priority') === $p ? 'selected':'' }}>{{ $p }}</option>
                @endforeach
            </select>
        </div>
        <div style="flex:1;min-width:130px;">
            <label style="font-size:0.8rem;font-weight:500;display:block;margin-bottom:5px;">Status</label>
            <select name="status" class="form-control">
                <option value="">All</option>
                @foreach(['Pending','In Progress','Completed','Cancelled'] as $s)
                    <option value="{{ $s }}" {{ request('status') === $s ? 'selected':'' }}>{{ $s }}</option>
                @endforeach
            </select>
        </div>
        <div class="flex gap-2" style="flex-shrink:0;">
            <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> Filter</button>
            <a href="{{ route('tasks.index') }}" class="btn btn-secondary"><i class="fas fa-times"></i></a>
        </div>
    </div>
</form>

<div class="card">
    <div class="card-header"><i class="fas fa-list"></i> Tasks ({{ $tasks->total() }})</div>
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Task Code</th><th>Description</th><th>Priority</th><th>Assigned To</th>
                    <th>Start Date</th><th>Due Date</th><th>Status</th><th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($tasks as $task)
                <tr>
                    <td><strong>{{ $task->task_code }}</strong></td>
                    <td style="max-width:200px;">{{ \Str::limit($task->description, 60) }}</td>
                    <td><span class="priority-{{ $task->priority }}">{{ $task->priority }}</span></td>
                    <td>{{ $task->assignedEmployee?->name ?? '—' }}</td>
                    <td>{{ $task->start_date?->format('d M Y') ?? '—' }}</td>
                    <td>
                        @if($task->due_date)
                            <span style="{{ $task->due_date->isPast() && $task->status !== 'Completed' ? 'color:#dc2626;font-weight:600;' : '' }}">
                                {{ $task->due_date->format('d M Y') }}
                            </span>
                        @else —
                        @endif
                    </td>
                    <td>
                        <span class="badge {{ match($task->status) {
                            'Completed'   => 'badge-success',
                            'In Progress' => 'badge-info',
                            'Cancelled'   => 'badge-danger',
                            default       => 'badge-secondary'
                        } }}">{{ $task->status }}</span>
                    </td>
                    <td>
                        <div class="flex gap-2">
                            <a href="{{ route('tasks.show', $task) }}" class="btn btn-outline btn-sm"><i class="fas fa-eye"></i></a>
                            <a href="{{ route('tasks.edit', $task) }}" class="btn btn-primary btn-sm"><i class="fas fa-edit"></i></a>
                            <form method="POST" action="{{ route('tasks.destroy', $task) }}" onsubmit="return confirm('Delete task?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="8" class="text-center" style="padding:30px;color:#94a3b8;">No tasks found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($tasks->hasPages())
        <div style="padding:16px;">{{ $tasks->links() }}</div>
    @endif
</div>
@endsection