@extends('layouts.app')
@section('title', 'Weekly Timesheet Report')
@section('breadcrumb')<a href="{{ route('reports.index') }}" class="hover:text-white">Reports</a> <i class="fas fa-chevron-right text-xs mx-1 text-slate-600"></i><span class="text-white">Weekly Timesheet</span>@endsection

@section('content')
<div x-data="{ sending: false }">

<!-- Header -->
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="mb-1">Weekly Timesheet Report</h1>
        <p>Hours and earnings summary for all hourly staff</p>
    </div>
    <div class="flex gap-3">
        <form method="POST" action="{{ route('reports.timesheet.send') }}" @submit="sending = true">
            @csrf
            <input type="hidden" name="week_start" value="{{ $weekStart->toDateString() }}">
            <button type="submit" class="btn btn-primary" :disabled="sending" x-text="sending ? 'Sending…' : 'Email Report to Admins'">
                <i class="fas fa-paper-plane"></i> Email Report to Admins
            </button>
        </form>
        <a href="{{ route('reports.timesheet.export', ['week_start' => $weekStart->toDateString()]) }}" class="btn btn-secondary">
            <i class="fas fa-file-csv"></i> Export CSV
        </a>
    </div>
</div>

<!-- Week Picker -->
<div class="card p-4 mb-5">
    <form method="GET" action="{{ route('reports.timesheet') }}" class="flex items-center gap-4 flex-wrap">
        <div>
            <label class="block text-xs text-slate-400 mb-1">Week Starting</label>
            <input type="date" name="week_start" value="{{ $weekStart->toDateString() }}" class="input" style="width:160px"
                onchange="this.form.submit()">
        </div>
        <div class="flex gap-2 items-end">
            <a href="{{ route('reports.timesheet', ['week_start' => \Carbon\Carbon::now()->subWeek()->startOfWeek()->toDateString()]) }}"
               class="btn btn-secondary text-xs"><i class="fas fa-chevron-left"></i> Last Week</a>
            <a href="{{ route('reports.timesheet', ['week_start' => \Carbon\Carbon::now()->startOfWeek()->toDateString()]) }}"
               class="btn btn-secondary text-xs">This Week <i class="fas fa-chevron-right"></i></a>
        </div>
        <div class="ml-auto text-right">
            <div class="text-xs text-slate-400">Viewing week</div>
            <div class="text-white font-semibold">{{ $weekStart->format('d M') }} – {{ $weekEnd->format('d M Y') }}</div>
        </div>
    </form>
</div>

@if(session('success'))
<div class="card p-4 mb-4 border-green-600 bg-green-900/20 text-green-300 flex items-center gap-2">
    <i class="fas fa-check-circle"></i> {{ session('success') }}
</div>
@endif
@if(session('error'))
<div class="card p-4 mb-4 border-red-600 bg-red-900/20 text-red-300 flex items-center gap-2">
    <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
</div>
@endif

<!-- KPI cards -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <div class="stat-card">
        <div class="text-xs text-slate-400 mb-1">Staff Tracked</div>
        <div class="text-2xl font-bold text-white">{{ count($staffSummaries) }}</div>
        <div class="text-xs text-slate-500 mt-1">with hourly rates</div>
    </div>
    <div class="stat-card">
        <div class="text-xs text-slate-400 mb-1">Total Hours</div>
        <div class="text-2xl font-bold text-blue-300">{{ number_format($totalHours, 1) }}h</div>
        <div class="text-xs text-slate-500 mt-1">this week</div>
    </div>
    <div class="stat-card">
        <div class="text-xs text-slate-400 mb-1">Total Earnings</div>
        <div class="text-2xl font-bold text-green-400">${{ number_format($totalEarnings, 2) }}</div>
        <div class="text-xs text-slate-500 mt-1">labour cost</div>
    </div>
    <div class="stat-card">
        <div class="text-xs text-slate-400 mb-1">Uninvoiced Hours</div>
        @php $uninvoicedHours = collect($staffSummaries)->sum(fn($s) => max(0, $s['hours'] - $s['invoiced_hours'])); @endphp
        <div class="text-2xl font-bold {{ $uninvoicedHours > 0 ? 'text-yellow-400' : 'text-slate-500' }}">
            {{ number_format($uninvoicedHours, 1) }}h
        </div>
        <div class="text-xs text-slate-500 mt-1">not yet invoiced</div>
    </div>
</div>

<!-- Staff Summary Table -->
<div class="card overflow-hidden mb-6">
    <div class="p-5 border-b border-slate-700 flex items-center justify-between">
        <h3>Staff Breakdown</h3>
        <span class="text-xs text-slate-500">{{ $weekStart->format('D d M') }} — {{ $weekEnd->format('D d M Y') }}</span>
    </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">Staff Member</th>
                <th class="px-5 py-3 text-left">Role</th>
                <th class="px-5 py-3 text-center">Entries</th>
                <th class="px-5 py-3 text-right">Hours</th>
                <th class="px-5 py-3 text-right">Rate</th>
                <th class="px-5 py-3 text-right">Earnings</th>
                <th class="px-5 py-3 text-right">Invoiced</th>
                <th class="px-5 py-3 text-right">Uninvoiced</th>
            </tr></thead>
            <tbody>
                @forelse($staffSummaries as $s)
                @php $uninv = max(0, $s['hours'] - $s['invoiced_hours']); @endphp
                <tr class="table-row {{ $s['hours'] == 0 ? 'opacity-50' : '' }}">
                    <td class="px-5 py-3">
                        <div class="flex items-center gap-3">
                            <div class="w-9 h-9 rounded-full bg-blue-900/60 flex items-center justify-center text-blue-300 font-bold text-sm flex-shrink-0">
                                {{ collect(explode(' ', $s['name']))->map(fn($p)=>substr($p,0,1))->take(2)->join('') }}
                            </div>
                            <div>
                                <div class="text-sm font-medium text-white">{{ $s['name'] }}</div>
                                <div class="text-xs text-slate-500">{{ $s['email'] }}</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-5 py-3">
                        <span class="badge badge-blue">{{ $s['role'] }}</span>
                    </td>
                    <td class="px-5 py-3 text-center text-sm text-slate-300">{{ $s['entries'] }}</td>
                    <td class="px-5 py-3 text-right font-mono font-bold text-white">{{ number_format($s['hours'], 2) }}h</td>
                    <td class="px-5 py-3 text-right text-sm text-slate-400">${{ number_format($s['rate'], 2) }}/hr</td>
                    <td class="px-5 py-3 text-right font-mono font-bold text-green-400">${{ number_format($s['earnings'], 2) }}</td>
                    <td class="px-5 py-3 text-right">
                        @if($s['invoiced_hours'] > 0)
                        <span class="badge badge-green">{{ number_format($s['invoiced_hours'], 1) }}h</span>
                        @else
                        <span class="text-slate-600">—</span>
                        @endif
                    </td>
                    <td class="px-5 py-3 text-right">
                        @if($uninv > 0)
                        <span class="badge badge-yellow font-mono">{{ number_format($uninv, 1) }}h</span>
                        @elseif($s['hours'] > 0)
                        <span class="badge badge-green">All invoiced</span>
                        @else
                        <span class="text-slate-600">—</span>
                        @endif
                    </td>
                </tr>
                @empty
                <tr><td colspan="8" class="px-5 py-10 text-center text-slate-500">
                    No staff with hourly rates found.
                </td></tr>
                @endforelse
            </tbody>
            @if($totalHours > 0)
            <tfoot>
                <tr class="border-t-2 border-slate-600">
                    <td colspan="3" class="px-5 py-3 text-sm font-bold text-white">TOTAL</td>
                    <td class="px-5 py-3 text-right font-mono font-bold text-white">{{ number_format($totalHours, 2) }}h</td>
                    <td></td>
                    <td class="px-5 py-3 text-right font-mono font-bold text-green-300">${{ number_format($totalEarnings, 2) }}</td>
                    <td class="px-5 py-3 text-right font-mono text-slate-300">{{ number_format(collect($staffSummaries)->sum('invoiced_hours'), 1) }}h</td>
                    <td class="px-5 py-3 text-right font-mono {{ $uninvoicedHours > 0 ? 'text-yellow-400' : 'text-green-400' }}">{{ number_format($uninvoicedHours, 1) }}h</td>
                </tr>
            </tfoot>
            @endif
        </table>
    </div>
</div>

<!-- Daily breakdown chart -->
@if(count($dailyBreakdown) > 0)
<div class="card p-5 mb-6">
    <h3 class="mb-5">Daily Hours — This Week</h3>
    <div class="flex items-end gap-3 h-32">
        @php $maxH = max(0.1, collect($dailyBreakdown)->max('hours')); @endphp
        @foreach($dailyBreakdown as $day)
        @php $pct = $day['hours'] > 0 ? max(4, ($day['hours'] / $maxH) * 100) : 0; @endphp
        <div class="flex-1 flex flex-col items-center gap-2">
            <div class="text-xs font-mono text-blue-300">{{ $day['hours'] > 0 ? number_format($day['hours'],1).'h' : '' }}</div>
            <div class="w-full rounded-t-md transition-all" style="height: {{ $pct }}%; background: {{ $pct > 0 ? '#1d4ed8' : '#1e293b' }}; min-height: 4px;"></div>
            <div class="text-xs text-slate-400 font-medium">{{ $day['label'] }}</div>
        </div>
        @endforeach
    </div>
</div>
@endif

<!-- Recent report sends -->
@if($reportHistory->count() > 0)
<div class="card overflow-hidden">
    <div class="p-4 border-b border-slate-700">
        <h3>Report Send History</h3>
    </div>
    <div class="divide-y divide-slate-800">
        @foreach($reportHistory as $log)
        <div class="px-5 py-3 flex items-center gap-3 text-sm">
            <div class="w-7 h-7 rounded-full bg-blue-900/40 flex items-center justify-center flex-shrink-0">
                <i class="fas fa-paper-plane text-blue-400 text-xs"></i>
            </div>
            <div class="flex-1">
                <span class="text-slate-300">{{ $log->description }}</span>
            </div>
            <span class="text-slate-500 text-xs">{{ $log->created_at->diffForHumans() }}</span>
        </div>
        @endforeach
    </div>
</div>
@endif

</div>
@endsection