<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-l text-gray-800 leading-tight">
            {{ __('تقرير أداء المشاريع') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7l m-auto sm:p-6 lg:p-8">

            <div class="mb-6">
                <form method="GET" class="flex gap-2">
                    <select name="period" class="form-select text-sm" onchange="this.form.submit()">
                        <option value="30" {{ request('period') == 30 ? 'selected' : '' }}>آخر 30 يوم</option>
                        <option value="90" {{ request('period') == 90 ? 'selected' : '' }}>آخر 90 يوم</option>
                        <option value="365" {{ request('period') == 365 ? 'selected' : '' }}>آخر سنة</option>
                    </select>
                </form>
            </div>

            <div class="card">
                <div class="card-header">
                    <h2>قائمة المشاريع</h2>
                </div>
                <div class="overflow-auto">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>اسم المشروع</th>
                                <th>العميل</th>
                                <th>تاريخ البدء</th>
                                <th>تاريخ النهاية</th>
                                <th>التقدم</th>
                                <th>الميزانية المخصصة</th>
                                <th>المنفق</th>
                                <th>التباين</th>
                                <th>الحالة</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($projects as $project)
                                <tr>
                                    <td class="font-medium">{{ $project['name'] }}</td>
                                    <td>{{ $project['client'] }}</td>
                                    <td>{{ $project['start_date']?->format('Y-m-d') ?? '-' }}</td>
                                    <td>{{ $project['end_date']?->format('Y-m-d') ?? '-' }}</td>
                                    <td>
                                        <div class="w-20 bg-neutral-200 rounded-full h-2">
                                            <div class="bg-primary h-2 rounded-full" style="width: {{ $project['progress'] }}%"></div>
                                        </div>
                                        <span class="text-xs text-neutral-600">{{ $project['progress'] }}%</span>
                                    </td>
                                    <td>{{ number_format($project['budget_allocated'], 2) }}</td>
                                    <td>{{ number_format($project['budget_spent'], 2) }}</td>
                                    <td>
                                        <span class="{{ $project['variance'] > 0 ? 'text-success-600' : 'text-danger-600' }}">
                                            {{ number_format($project['variance'], 2) }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge {{ $project['status'] == 'completed' ? 'badge-success' : ($project['status'] == 'in_progress' ? 'badge-primary' : 'badge-secondary') }}">
                                            {{ $project['status'] }}
                                        </span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9" class="text-center text-neutral-500 py-8">لا توجد مشاريع</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>

</x-app-layout>
