@extends('layouts.app')

@section('page_title', 'My Tasks')

@section('content')
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-0 p-4 d-flex justify-content-between align-items-center">
            <h5 class="fw-bold mb-0">Assigned Tasks</h5>
            <div class="d-flex gap-2">
                <select class="form-select form-select-sm border-0 bg-light" style="width: 150px;">
                    <option value="">All Status</option>
                    <option value="todo">To Do</option>
                    <option value="in_progress">In Progress</option>
                    <option value="done">Done</option>
                </select>
            </div>
        </div>
        <div class="card-body p-4 pt-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="bg-light">
                        <tr>
                            <th class="border-0">Task</th>
                            <th class="border-0">Project</th>
                            <th class="border-0">Priority</th>
                            <th class="border-0">Due Date</th>
                            <th class="border-0">Status</th>
                            <th class="border-0 text-end">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($tasks as $task)
                            <tr>
                                <td>
                                    <div class="fw-bold">{{ $task->title }}</div>
                                    <div class="text-muted small text-truncate" style="max-width: 300px;">
                                        {{ $task->description }}</div>
                                </td>
                                <td>
                                    <span class="badge bg-secondary-subtle text-secondary px-2">
                                        {{ $task->project->name }}
                                    </span>
                                </td>
                                <td>
                                    <span
                                        class="badge bg-{{ $task->priority == 'high' ? 'danger' : ($task->priority == 'medium' ? 'warning' : 'info') }}-subtle text-{{ $task->priority == 'high' ? 'danger' : ($task->priority == 'medium' ? 'warning' : 'info') }} px-2">
                                        {{ ucfirst($task->priority) }}
                                    </span>
                                </td>
                                <td>
                                    <div
                                        class="small {{ $task->due_date && $task->due_date->isPast() ? 'text-danger fw-bold' : '' }}">
                                        {{ $task->due_date ? $task->due_date->format('d M, Y') : 'No due date' }}
                                    </div>
                                </td>
                                <td>
                                    <select class="form-select form-select-sm change-status" data-id="{{ $task->id }}">
                                        <option value="backlog" {{ $task->status == 'backlog' ? 'selected' : '' }}>Backlog
                                        </option>
                                        <option value="todo" {{ $task->status == 'todo' ? 'selected' : '' }}>To Do
                                        </option>
                                        <option value="in_progress" {{ $task->status == 'in_progress' ? 'selected' : '' }}>
                                            In Progress</option>
                                        <option value="review" {{ $task->status == 'review' ? 'selected' : '' }}>Review
                                        </option>
                                        <option value="done" {{ $task->status == 'done' ? 'selected' : '' }}>Done
                                        </option>
                                    </select>
                                </td>
                                <td class="text-end">
                                    <button class="btn btn-sm btn-icon btn-light" title="View Details">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center py-5">
                                    <img src="https://illustrations.popsy.co/gray/no-data.svg" width="120"
                                        class="mb-3">
                                    <p class="text-muted">No tasks assigned to you yet.</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="mt-4">
                {{ $tasks->links() }}
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            $(document).on('change', '.change-status', function() {
                const taskId = $(this).data('id');
                const status = $(this).val();

                $.post(`/tasks/${taskId}/status`, {
                    _token: '{{ csrf_token() }}',
                    status: status
                }, function(res) {
                    if (res.success) {
                        Toast.fire({
                            icon: 'success',
                            title: 'Task status updated'
                        });
                    }
                });
            });
        </script>
    @endpush
@endsection