@extends('layouts.app')
@section('title', 'Employee Task Progress Report')
@section('breadcrumb')
    <a href="{{ route('reports.index') }}" class="text-slate-400 hover:text-white">Reports</a>
    <span class="text-slate-600 mx-2">/</span>
    <span class="text-white">Employee Task Progress</span>
@endsection

@section('content')
<div class="space-y-6">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
        <div>
            <h1>Employee Task Progress Report</h1>
            <p class="text-sm text-slate-400 mt-1">Job-wise task completion status, hourly rate, and amount per factory employee</p>
        </div>
        <a href="{{ request()->fullUrlWithQuery(['export'=>'csv']) }}" class="btn btn-secondary">
            <i class="fas fa-download mr-2"></i>Export CSV
        </a>
    </div>

    <!-- Filters -->
    <form method="GET" class="card p-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label>Employee</label>
                <select name="employee_id" class="input">
                    <option value="">All Employees</option>
                    @foreach($employees as $emp)
                    <option value="{{ $emp->id }}" {{ request('employee_id') == $emp->id ? 'selected' : '' }}>{{ $emp->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label>Job Number</label>
                <input type="text" name="job_number" class="input" placeholder="e.g. J-0022" value="{{ request('job_number') }}">
            </div>
            <div>
                <label>Task Status</label>
                <select name="task_status" class="input">
                    <option value="">All Statuses</option>
                    <option value="pending"     {{ request('task_status') === 'pending'     ? 'selected' : '' }}>Pending</option>
                    <option value="in_progress" {{ request('task_status') === 'in_progress' ? 'selected' : '' }}>In Progress</option>
                    <option value="paused"      {{ request('task_status') === 'paused'      ? 'selected' : '' }}>Paused</option>
                    <option value="completed"   {{ request('task_status') === 'completed'   ? 'selected' : '' }}>Completed</option>
                </select>
            </div>
            <div class="flex gap-2 items-end">
                <button type="submit" class="btn btn-primary flex-1">Apply</button>
                <a href="{{ route('reports.employee-task') }}" class="btn btn-secondary">Reset</a>
            </div>
        </div>
    </form>

    @if(request('export') === 'csv')
    @php
        header('Content-Type: text/csv');
        header('Content-Disposition: attachment; filename="employee-task-report-' . now()->format('Y-m-d') . '.csv"');
    @endphp
    @endif

    <!-- Summary KPI cards -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="card p-4 text-center">
            <div class="text-xs text-slate-400 mb-1">Total Assignments</div>
            <div class="text-2xl font-bold text-white">{{ $totalAssignments }}</div>
        </div>
        <div class="card p-4 text-center">
            <div class="text-xs text-slate-400 mb-1">Completed</div>
            <div class="text-2xl font-bold text-green-400">{{ $completedCount }}</div>
        </div>
        <div class="card p-4 text-center">
            <div class="text-xs text-slate-400 mb-1">In Progress / Paused</div>
            <div class="text-2xl font-bold text-blue-400">{{ $inProgressCount }}</div>
        </div>
        
        <!-- <div class="card p-4 text-center">
            <div class="text-xs text-slate-400 mb-1">Overall Completion</div>
            <div class="text-2xl font-bold {{ $overallPct >= 70 ? 'text-green-400' : ($overallPct >= 40 ? 'text-yellow-400' : 'text-red-400') }}">{{ $overallPct }}%</div>
        </div> -->
    </div>

    <!-- Per-employee sections -->
    @forelse($reportRows as $employeeName => $jobGroups)
    <div class="card overflow-hidden">
        <div class="p-5 border-b border-slate-700 flex items-center gap-3">
            <div class="w-9 h-9 rounded-full bg-yellow-900 flex items-center justify-center text-sm font-bold text-yellow-300">
                {{ strtoupper(substr($employeeName, 0, 2)) }}
            </div>
            <div>
                <div class="text-white font-semibold">{{ $employeeName }}</div>
                <div class="text-xs text-slate-400">Factory Employee</div>
            </div>
            @php
                $empTotal     = $jobGroups->flatten(1)->count();
                $empCompleted = $jobGroups->flatten(1)->where('task_status','completed')->count();
                $empPct       = $empTotal > 0 ? round(($empCompleted / $empTotal) * 100) : 0;
                $empAmount    = $jobGroups->flatten(1)->sum('total_amount');
            @endphp

            <div class="ml-auto flex items-center gap-4">
                @if($empAmount > 0)
                <div class="text-right">
                    <div class="text-xs text-slate-400">Total Amount</div>
                    <div class="text-sm font-bold text-green-400">${{ number_format($empAmount, 2) }}</div>
                </div>
                @endif
            </div>

            <!-- <div class="ml-auto flex items-center gap-3">
                <div class="text-xs text-slate-400">{{ $empCompleted }}/{{ $empTotal }} tasks</div>
                <div class="text-sm font-bold {{ $empPct >= 70 ? 'text-green-400' : ($empPct >= 40 ? 'text-yellow-400' : 'text-red-400') }}">{{ $empPct }}%</div>
            </div> -->
        </div>

        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="text-xs text-slate-400 uppercase border-b border-slate-700">
                        <th class="px-5 py-3 text-left">Job</th>
                        <th class="px-5 py-3 text-left">Task</th>
                        <th class="px-5 py-3 text-left">Status</th>
                        <th class="px-5 py-3 text-left">Allocated</th>
                        <th class="px-5 py-3 text-left">Logged</th>
                        <th class="px-5 py-3 text-right">Hourly Rate</th>
                        <th class="px-5 py-3 text-right">Amount</th>
                        <th class="px-5 py-3 text-left">Progress</th>
                        <th class="px-5 py-3 text-left">% Done</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($jobGroups->flatten(1) as $row)
                    <tr class="table-row">
                        <td class="px-5 py-3 text-sm font-mono text-blue-300">{{ $row['job_number'] }}</td>
                        <td class="px-5 py-3 text-sm text-white">{{ $row['task_name'] }}</td>
                        <td class="px-5 py-3">
                            @php
                                $badge = match($row['task_status']) {
                                    'completed'   => 'badge-green',
                                    'in_progress' => 'badge-blue',
                                    'paused'      => 'badge-yellow',
                                    default       => 'badge-gray',
                                };
                            @endphp
                            <span class="badge {{ $badge }} text-xs">{{ ucfirst(str_replace('_',' ', $row['task_status'])) }}</span>
                        </td>
                        <td class="px-5 py-3 text-sm text-slate-300">
                            {{ $row['allocated_hours'] ? number_format($row['allocated_hours'],1).'h' : '—' }}
                        </td>
                        <td class="px-5 py-3 text-sm text-white font-medium">
                            {{ number_format($row['logged_hours'],2) }}h
                        </td>
                        {{-- Hourly Rate: snapshotted at task-completion time --}}
                        <td class="px-5 py-3 text-sm text-right text-slate-300">
                            @if(isset($row['hourly_rate']) && $row['hourly_rate'] > 0)
                                ${{ number_format($row['hourly_rate'], 2) }}
                            @else
                                <span class="text-slate-600">—</span>
                            @endif
                        </td>
                        {{-- Amount = logged hours × snapshotted hourly rate --}}
                        <td class="px-5 py-3 text-sm text-right font-semibold {{ isset($row['total_amount']) && $row['total_amount'] > 0 ? 'text-green-400' : 'text-slate-500' }}">
                            @if(isset($row['total_amount']) && $row['total_amount'] > 0)
                                ${{ number_format($row['total_amount'], 2) }}
                            @else
                                —
                            @endif
                        </td>
                        <td class="px-5 py-3" style="min-width:120px">
                            @if($row['allocated_hours'])
                            <div class="h-2 rounded-full bg-slate-700">
                                <div class="h-2 rounded-full {{ $row['pct'] >= 100 ? 'bg-green-500' : ($row['pct'] >= 60 ? 'bg-yellow-500' : 'bg-blue-500') }}"
                                     style="width: {{ min(100,$row['pct']) }}%"></div>
                            </div>
                            @else
                            <span class="text-xs text-slate-600">no allocation</span>
                            @endif
                        </td>
                        <td class="px-5 py-3 text-sm font-bold {{ $row['pct'] >= 100 ? 'text-green-400' : ($row['pct'] >= 60 ? 'text-yellow-400' : 'text-slate-300') }}">
                            {{ $row['allocated_hours'] ? $row['pct'].'%' : '—' }}
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @empty
    <div class="card p-12 text-center">
        <i class="fas fa-tasks text-slate-700 text-5xl mb-4 block"></i>
        <div class="text-slate-400">No task assignments found matching the selected filters.</div>
    </div>
    @endforelse

</div>
@endsection