@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-4" style="background-color: #f8fafc; min-height: 100vh;">

    <!-- Header Block -->
    <div class="mb-4">
        <div class="d-flex align-items-center gap-2 mb-1">
            <i class="bi bi-check2-square text-indigo-600 fs-4" style="color: #4f46e5;"></i>
            <h4 class="fw-bold text-dark mb-0">My Allocated Duties</h4>
        </div>
        <p class="text-muted small mb-0">View assigned exhibition tasks and update your live progress status.</p>
    </div>

    <!-- Main Tasks Grid Board -->
    <div class="card border-0 shadow-sm rounded-4">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table align-middle mb-0">
                    <thead class="bg-light text-secondary small fw-bold text-uppercase" style="font-size: 11px; letter-spacing: 0.05em;">
                        <tr>
                            <th class="ps-4 py-3">Duty Instructions</th>
                            <th class="py-3">Venue / Exhibition</th>
                            <th class="py-3">Target Deadline</th>
                            <th class="py-3 text-center">Priority</th>
                            <th class="py-3 text-end pe-4">Progress Actions</th>
                        </tr>
                    </thead>
                    <tbody class="text-dark small" style="font-size: 13px;">
                        @forelse($tasks as $task)
                            <tr class="border-bottom border-light">
                                <td class="ps-4 py-3">
                                    <span class="fw-bold text-dark d-block mb-1" style="font-size: 14px;">{{ $task->title }}</span>
                                    <span class="text-muted d-block" style="max-width: 450px; line-height: 1.4;">
                                        {{ $task->description ?? 'No extra instructions provided.' }}
                                    </span>
                                </td>
                                <td>
                                    <span class="badge bg-light text-dark border px-2.5 py-1.5 rounded-pill">
                                        <i class="bi bi-shop text-primary me-1"></i>{{ $task->exhibition->name }}
                                    </span>
                                </td>
                                <td class="text-muted fw-medium">
                                    <i class="bi bi-calendar-event me-1"></i>{{ \Carbon\Carbon::parse($task->due_date)->format('d M, Y') }}
                                </td>
                                <td class="text-center">
                                    <span class="badge {{ $task->priority === 'high' ? 'bg-danger-subtle text-danger border border-danger-subtle' : ($task->priority === 'medium' ? 'bg-warning-subtle text-warning border border-warning-subtle' : 'bg-info-subtle text-info border border-info-subtle') }} px-2.5 py-1 rounded-pill text-capitalize" style="font-size: 11px;">
                                        {{ $task->priority }}
                                    </span>
                                </td>
                                <td class="text-end pe-4">
                                    <!-- Dynamic Action Form Status Status Dropdown -->
                                    <form action="{{ route('employee.tasks.status', $task->id) }}" method="POST" class="d-inline-block">
                                        @csrf
                                        <select name="status" onchange="this.form.submit()" class="form-select form-select-sm shadow-sm border-secondary-subtle" style="width: 140px; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; background-color: #fff;">
                                            <option value="pending" {{ $task->status === 'pending' ? 'selected' : '' }}>⏳ Pending</option>
                                            <option value="in_progress" {{ $task->status === 'in_progress' ? 'selected' : '' }}>⚡ In Progress</option>
                                            <option value="completed" {{ $task->status === 'completed' ? 'selected' : '' }}>✅ Completed</option>
                                        </select>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-5 text-muted">
                                    <i class="bi bi-clipboard-x fs-2 d-block mb-2 opacity-40"></i>
                                    <span>No operations or tasks assigned to your desk yet.</span>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection