@extends('layouts.app')
@section('title', 'Task Intelligence')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dashboard-final.css') }}">
<style>
    .filter-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
        margin-bottom: 24px;
        background: rgba(255,255,255,0.02);
        padding: 20px;
        border-radius: 20px;
        border: 1px solid var(--border-color);
    }
</style>
@endpush

@section('content')

@php
    $actionsHtml = '<a href="'.route('tasks.create').'" class="final-btn final-btn-primary"><i class="bi bi-plus-lg"></i> New Task</a>';
@endphp

@include('components.page-header', [
    'title' => 'Engineering Task Control',
    'description' => 'Monitor and manage development tasks across all active projects with real-time delivery intelligence.',
    'breadcrumbs' => ['Home' => route('admin.dashboard'), 'Tasks' => '#'],
    'actions' => $actionsHtml,
    'stats' => [
        ['label' => 'Total Backlog', 'value' => $tasks->total(), 'icon' => 'bi-list-task', 'color' => 'var(--accent-cream)'],
        ['label' => 'Critical Priority', 'value' => $tasks->where('priority', 'critical')->count(), 'icon' => 'bi-fire', 'color' => '#ff4b4b'],
        ['label' => 'In Progress', 'value' => $tasks->where('status.slug', 'in_progress')->count(), 'icon' => 'bi-play-circle-fill', 'color' => 'var(--accent-green)'],
        ['label' => 'Delivery This Week', 'value' => $tasks->where('deadline', '<=', now()->endOfWeek())->count(), 'icon' => 'bi-calendar-check', 'color' => 'var(--accent-yellow)']
    ]
])

<div class="final-card" style="margin-bottom: 24px;">
    <h3 class="final-card-title"><i class="bi bi-funnel"></i> Intelligent Filtering</h3>
    <form method="GET" action="{{ request()->url() }}">
        <div class="filter-grid">
            <div class="relative">
                <input type="text" name="q" value="{{ request('q') }}" placeholder="Search tasks..." class="final-select" style="padding-left: 40px;">
                <i class="bi bi-search" style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 14px;"></i>
            </div>
            
            <select name="project_id" class="final-select">
                <option value="">All Projects</option>
                @foreach($projects as $project)
                    <option value="{{ $project->id }}" @selected(request('project_id') == $project->id)>{{ $project->name }}</option>
                @endforeach
            </select>

            <select name="employee_id" class="final-select">
                <option value="">All Engineers</option>
                @foreach($employees as $employee)
                    <option value="{{ $employee->id }}" @selected(request('employee_id') == $employee->id)>{{ $employee->name }}</option>
                @endforeach
            </select>

            <select name="status_id" class="final-select">
                <option value="">All Statuses</option>
                @foreach($statuses as $status)
                    <option value="{{ $status->id }}" @selected(request('status_id') == $status->id)>{{ $status->name }}</option>
                @endforeach
            </select>

            <select name="priority" class="final-select">
                <option value="">All Priorities</option>
                <option value="low" @selected(request('priority') == 'low')>Low</option>
                <option value="medium" @selected(request('priority') == 'medium')>Medium</option>
                <option value="high" @selected(request('priority') == 'high')>High</option>
                <option value="critical" @selected(request('priority') == 'critical')>Critical</option>
            </select>

            <button type="submit" class="final-btn final-btn-secondary" style="justify-content: center; height: 100%;">
                <i class="bi bi-filter"></i> Apply Filters
            </button>
        </div>
    </form>
</div>

<div class="final-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <h3 class="final-card-title" style="margin-bottom: 0;"><i class="bi bi-list-check"></i> Task Manifest</h3>
        <span class="final-secondary-text" style="font-size: 10px; font-weight: 800; letter-spacing: 0.1em;">ACTIVE ENGINEERING BACKLOG</span>
    </div>

    <div class="final-table-container">
        <table class="final-table">
            <thead>
                <tr>
                    <th>Task Identity</th>
                    <th>Project</th>
                    <th>Status</th>
                    <th>Priority</th>
                    <th>Deadline</th>
                    <th>Delivery Progress</th>
                    <th style="text-align: right;">Operations</th>
                </tr>
            </thead>
            <tbody>
                @forelse($tasks as $task)
                <tr class="group">
                    <td>
                        <div style="font-weight: 800; font-size: 14px; color: var(--text-primary);">{{ $task->title }}</div>
                        <div style="font-size: 10px; color: var(--text-secondary); font-weight: 700;">#{{ str_pad($task->id, 5, '0', STR_PAD_LEFT) }}</div>
                    </td>
                    <td>
                        <span style="font-size: 12px; font-weight: 700; color: var(--text-secondary);">{{ $task->project?->name ?? 'Unassigned' }}</span>
                    </td>
                    <td>
                        @php
                            $statusClass = match($task->status?->slug) {
                                'done', 'completed' => 'badge-whatsapp',
                                'in_progress' => 'badge-email',
                                'review' => 'badge-sms',
                                'todo' => 'badge-low',
                                default => 'badge-low'
                            };
                        @endphp
                        <span class="final-badge {{ $statusClass }}">{{ $task->status?->name }}</span>
                    </td>
                    <td>
                        @php
                            $prioClass = match(strtolower($task->priority)) {
                                'critical' => 'badge-low', // Using red-ish
                                'high' => 'badge-sms', // Orange-ish
                                'medium' => 'badge-email',
                                default => 'badge-inapp'
                            };
                            if(strtolower($task->priority) == 'critical') $prioStyle = 'background: rgba(244, 63, 94, 0.1); color: #f43f5e; border-color: rgba(244, 63, 94, 0.2);';
                            else if(strtolower($task->priority) == 'high') $prioStyle = 'background: rgba(245, 158, 11, 0.1); color: #f59e0b; border-color: rgba(245, 158, 11, 0.2);';
                            else $prioStyle = '';
                        @endphp
                        <span class="final-badge {{ $prioClass }}" style="{{ $prioStyle }}">
                            @if(in_array(strtolower($task->priority), ['critical', 'high'])) <i class="bi bi-fire mr-1"></i> @endif
                            {{ strtoupper($task->priority) }}
                        </span>
                    </td>
                    <td>
                        <div style="font-size: 11px; font-weight: 700; color: var(--text-secondary); display: flex; align-items: center; gap: 6px;">
                            <i class="bi bi-calendar4-event"></i>
                            {{ $task->deadline ? $task->deadline->format('M d, Y') : 'No Date' }}
                        </div>
                    </td>
                    <td>
                        <div style="display: flex; align-items: center; gap: 10px;">
                            <div class="final-progress-bg" style="width: 80px; height: 4px;">
                                <div class="final-progress-fill" style="width: {{ $task->progress_percent }}%"></div>
                            </div>
                            <span style="font-weight: 800; font-size: 11px;">{{ $task->progress_percent }}%</span>
                        </div>
                    </td>
                    <td style="text-align: right;">
                        <div style="display: flex; justify-content: flex-end; gap: 8px;">
                            <a href="{{ route('tasks.edit', $task) }}" class="final-btn final-btn-secondary" style="padding: 6px 10px; font-size: 11px;">
                                <i class="bi bi-pencil-square"></i>
                            </a>
                            <form action="{{ route('tasks.destroy', $task) }}" method="POST" onsubmit="return confirm('Archive this task?')" style="display: inline;">
                                @csrf @method('DELETE')
                                <button class="final-btn final-btn-secondary" style="padding: 6px 10px; font-size: 11px; color: var(--danger-color); border-color: rgba(244, 63, 94, 0.1);">
                                    <i class="bi bi-archive"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7">
                        <div class="final-empty-state">
                            <i class="bi bi-list-check"></i>
                            <p>No engineering tasks detected</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($tasks->hasPages())
    <div style="margin-top: 32px;">
        {{ $tasks->links() }}
    </div>
    @endif
</div>

@endsection