@extends('layouts.app')

@section('content')
    <div class="container-fluid px-4 py-4" style="background-color: #f8fafc; min-height: 100vh;">
        <div class="mb-4">
            <h4 class="fw-bold text-dark"><i class="bi bi-check2-square text-primary me-2"></i>My Allocated Duties</h4>
            <p class="text-muted small">Process and update progress updates for assigned exhibition logs.</p>
        </div>

        <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">
                            <tr>
                                <th class="ps-4 py-3">Duty Instructions</th>
                                <th class="py-3">Venue Context</th>
                                <th class="py-3">Target Date</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">{{ $task->title }}</span>
                                        <small class="text-muted d-block"
                                            style="max-width: 400px;">{{ $task->description }}</small>
                                    </td>
                                    <td><span class="badge bg-light text-dark border">{{ $task->exhibition->name }}</span></td>
                                    <td class="text-muted fw-semibold">
                                        {{ \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' : ($task->priority === 'medium' ? 'bg-warning-subtle text-warning' : 'bg-info-subtle text-info') }} px-2.5 py-1 text-capitalize">
                                            {{ $task->priority }}
                                        </span>
                                    </td>
                                    <td class="text-end pe-4">
                                        <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 d-inline-block border"
                                                style="width: 130px; border-radius: 6px; font-size: 12px; font-weight: 500;">
                                                <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">No operational tasks on your duty logs
                                        board.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection