@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title title="Tasks"
                    description="Manage assigned tasks, monitor progress, and filter records across staff and task attributes.">
                    <a href="{{ request()->is('api/*') ? route('api.tasks.create') : route('tasks.create') }}"
                        class="asset-btn asset-btn--primary">
                        + Add New Task
                    </a>
                </x-page-title>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-wrap">
                            <h6 class="mb-0 font-semibold text-gray-800 mb-0 whitespace-nowrap" style="margin-right: auto;">
                                Filters</h6>
                            <x-table-controls :action="url()->current()" searchName="search"
                                searchPlaceholder="search e.g. task name" :export="true" :exportRoute="route('tasks.export')"
                                :saveRoute="route('tasks.saveFilteredTable')" :filters="[
                                    'priority' => [
                                        'high' => 'High',
                                        'medium' => 'Medium',
                                        'low' => 'Low',
                                    ],
                                    'status' => [
                                        'open' => 'Open',
                                        'hold' => 'Hold',
                                        'closed' => 'Closed',
                                    ],
                                ]" :date="false" startDateName="start_date"
                                endDateName="due_date" formId="tasks-table-controls" />

                        </div>
                    </div>

                    <x-table :headers="[
                        'Task Name',
                        'Assigned Staff',
                        'Mentions',
                        'Students',
                        'Start Date',
                        'Due Date',
                        'Priority',
                        'Status',
                        'Progress',
                        'Actions',
                    ]" :paginator="$tasks"
                        emptyMessage="No tasks found matching the current criteria." emptyActionText="+ Create Task"
                        :emptyActionUrl="request()->is('api/*') ? route('api.tasks.create') : route('tasks.create')">

                        @foreach ($tasks as $task)
                            @php
                                $assignedStaff = $task->staff;
                                $assignedLastName = $assignedStaff?->getRawOriginal('last_name') ?? '';
                            @endphp
                            <tr class="ui-row-click"
                                onclick="window.location='{{ request()->is('api/*') ? route('api.tasks.show', $task->id) : route('tasks.show', $task->id) }}'"
                                id="task-row-{{ $task->id }}">

                                <td class="text-center">
                                    <div class="ui-title">{{ $task->task_name }}</div>

                                    @if ($task->task_type)
                                        <div class="mt-1">
                                            <span class="ui-pill ui-pill--info">
                                                {{ $task->task_type }}
                                            </span>
                                        </div>
                                    @endif
                                </td>

                                <td class="text-center">
                                    @if ($assignedStaff)
                                        <a href="{{ route('staffs.show', $assignedStaff->id) }}"
                                            class="task-staff-link" onclick="event.stopPropagation()">
                                            <div class="task-staff-wrap">
                                                <div class="task-staff-avatar">
                                                    {{ strtoupper(substr($assignedStaff->first_name ?? '', 0, 1) . substr($assignedLastName, 0, 1)) }}
                                                </div>
                                                <div class="ui-title">
                                                    {{ $assignedStaff->first_name ?? '' }}
                                                    {{ $assignedLastName }}
                                                </div>
                                            </div>
                                        </a>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    @if ($task->mentions->isNotEmpty())
                                        <div class="task-mentions-wrap">
                                            @foreach ($task->mentions->take(3) as $mention)
                                                @php
                                                    $mentionedStaff = $mention->staff;
                                                    $jobTitle =
                                                        optional($mentionedStaff?->jobTitle)->name ??
                                                        $mention->job_title_slug;
                                                @endphp

                                                @if ($mentionedStaff)
                                                    <a href="{{ route('staffs.show', $mentionedStaff->id) }}"
                                                        class="task-mention-link" onclick="event.stopPropagation()">
                                                        <span class="task-mention-name">
                                                            {{ $mentionedStaff->getRawOriginal('full_name') ?: trim(($mentionedStaff->first_name ?? '') . ' ' . ($mentionedStaff->getRawOriginal('last_name') ?? '')) }}
                                                        </span>
                                                        @if (filled($jobTitle))
                                                            <span class="task-mention-role">{{ $jobTitle }}</span>
                                                        @endif
                                                    </a>
                                                @endif
                                            @endforeach
                                            @if ($task->mentions->count() > 3)
                                                <span class="ui-pill ui-pill--warn">+{{ $task->mentions->count() - 3 }}
                                                    more</span>
                                            @endif
                                        </div>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    @if ($task->students->isNotEmpty())
                                        <div class="task-students-wrap">
                                            @foreach ($task->students->take(3) as $student)
                                                @php
                                                    $studentName = trim(
                                                        ($student->first_name ?? '') .
                                                            ' ' .
                                                            ($student->last_name ?? ''),
                                                    );
                                                    if ($studentName === '') {
                                                        $studentName =
                                                            $student->full_name ?? 'Student #' . $student->id;
                                                    }
                                                @endphp
                                                <span class="ui-pill ui-pill--soft">{{ $studentName }}</span>
                                            @endforeach
                                            @if ($task->students->count() > 3)
                                                <span class="ui-pill ui-pill--warn">+{{ $task->students->count() - 3 }}
                                                    more</span>
                                            @endif
                                        </div>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    <div class="ui-muted">
                                        {{ \Carbon\Carbon::parse($task->start_date)->format('M d, Y') }}
                                    </div>
                                    <small class="d-block text-muted">
                                        {{ \Carbon\Carbon::parse($task->start_date)->diffForHumans() }}
                                    </small>
                                </td>

                                <td class="text-center">
                                    <div class="ui-muted">
                                        {{ \Carbon\Carbon::parse($task->due_date)->format('M d, Y') }}
                                    </div>
                                    <small class="d-block text-muted">
                                        {{ \Carbon\Carbon::parse($task->due_date)->diffForHumans() }}
                                    </small>
                                </td>

                                <td class="text-center">
                                    @php
                                        $priorityVariant =
                                            $task->priority === 'high'
                                                ? 'danger'
                                                : ($task->priority === 'medium'
                                                    ? 'warn'
                                                    : 'success');
                                    @endphp
                                    <span class="ui-pill ui-pill--{{ $priorityVariant }}">
                                        {{ ucfirst($task->priority) }}
                                    </span>
                                </td>

                                <td class="text-center">
                                    @php
                                        $statusVariant =
                                            $task->status === 'open'
                                                ? 'info'
                                                : ($task->status === 'hold'
                                                    ? 'warn'
                                                    : 'success');
                                    @endphp
                                    <span class="ui-pill ui-pill--{{ $statusVariant }}">
                                        {{ ucfirst($task->status) }}
                                    </span>
                                </td>

                                <td class="text-center">
                                    <div class="task-progress-wrap">
                                        <div class="task-progress-bar">
                                            <div class="task-progress-fill
                                                {{ $task->progress < 50 ? 'is-danger' : ($task->progress < 100 ? 'is-warn' : 'is-success') }}"
                                                style="width: {{ $task->progress }}%;">
                                            </div>
                                        </div>
                                        <small class="task-progress-text">{{ $task->progress }}%</small>
                                    </div>
                                </td>

                                <td class="text-center" onclick="event.stopPropagation()">
                                    <div class="ui-actions">
                                        <a href="{{ request()->is('api/*') ? route('api.tasks.show', $task->id) : route('tasks.show', $task->id) }}"
                                            class="table-action" data-bs-toggle="tooltip" title="Show Task">
                                            <iconify-icon icon="lucide:eye"></iconify-icon>
                                        </a>

                                        <x-table-action type="edit" :url="request()->is('api/*')
                                            ? route('api.tasks.edit', $task->id)
                                            : route('tasks.edit', $task->id)" />

                                        @if (Auth::id() === $task->created_by)
                                            <form
                                                action="{{ request()->is('api/*') ? route('api.tasks.destroy', $task->id) : route('tasks.destroy', $task->id) }}"
                                                method="POST" class="d-inline"
                                                onsubmit="return confirm('Are you sure you want to delete this task?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="delete-action-btn" data-bs-toggle="tooltip"
                                                    title="Delete Task">
                                                    <span class="table-action table-action--danger">
                                                        <iconify-icon icon="lucide:trash-2"></iconify-icon>
                                                    </span>
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .task-filters-panel {
            padding: 20px;
            background: #fff;
        }

        .task-filter-toggle {
            min-height: 38px;
        }

        .task-staff-wrap {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .task-staff-link {
            display: inline-flex;
            text-decoration: none;
            color: inherit;
        }

        .task-staff-link:hover .ui-title {
            text-decoration: underline;
        }

        .task-staff-avatar {
            width: 34px;
            height: 34px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #f3f4f6;
            border: 1px solid #e5e7eb;
            color: #374151;
            font-size: 12px;
            font-weight: 700;
            flex-shrink: 0;
        }

        .task-progress-wrap {
            min-width: 120px;
        }

        .task-students-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex-wrap: wrap;
            max-width: 340px;
        }

        .task-mentions-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex-wrap: wrap;
            max-width: 360px;
        }

        .task-mention-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 8px;
            border: 1px solid #e5e7eb;
            border-radius: 999px;
            background: #f8fafc;
            text-decoration: none;
            color: #334155;
            font-size: 12px;
            line-height: 1.2;
        }

        .task-mention-link:hover {
            border-color: #cbd5e1;
            background: #f1f5f9;
        }

        .task-mention-name {
            font-weight: 600;
        }

        .task-mention-role {
            color: #64748b;
        }

        .task-progress-bar {
            width: 100%;
            height: 8px;
            border-radius: 999px;
            background: #eef2f7;
            overflow: hidden;
            margin-bottom: 6px;
        }

        .task-progress-fill {
            height: 100%;
            border-radius: 999px;
            transition: width 0.25s ease;
        }

        .task-progress-fill.is-danger {
            background: #dc3545;
        }

        .task-progress-fill.is-warn {
            background: #f59e0b;
        }

        .task-progress-fill.is-success {
            background: #22c55e;
        }

        .task-progress-text {
            color: #6b7280;
            font-weight: 600;
        }

        .table-action {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #374151;
            transition: 0.2s ease;
            font-size: 18px;
            text-decoration: none;
        }

        .table-action:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
        }

        .table-action--danger {
            border-color: #f3d1d1;
            color: #dc3545;
        }

        .table-action--danger:hover {
            background: #fff5f5;
        }

        .delete-action-btn {
            border: none;
            background: transparent;
            padding: 0;
        }

        @media (max-width: 991.98px) {
            .task-filters-panel {
                padding: 16px;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            $('.select2').select2({
                width: '100%'
            });

            $('[data-bs-toggle="tooltip"]').tooltip();
        });

        setTimeout(() => {
            let alert = document.getElementById('successAlert');
            if (alert) {
                let bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            }
        }, 10000);
    </script>
@endpush