<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="year" class="form-select text-sm" onchange="this.form.submit()">
                        @php
                            $currentYear = date('Y');
                            for ($year = $currentYear; $year >= $currentYear - 5; $year--) {
                                echo "<option value=\"$year\" " . (request('year') == $year ? 'selected' : '') . ">$year</option>";
                            }
                        @endphp
                    </select>
                </form>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                <div class="card">
                    <div class="card-body text-center">
                        <p class="text-sm text-neutral-600">متوسط هامش الربح</p>
                        <h3 class="text-2xl font-bold text-primary">
                            {{ number_format($average_margin, 2) }}%
                        </h3>
                    </div>
                </div>
            </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>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($contracts as $contract)
                                <tr>
                                    <td class="font-medium">{{ $contract['contract_number'] }}</td>
                                    <td>{{ $contract['client'] }}</td>
                                    <td>{{ number_format($contract['revenue'], 2) }}</td>
                                    <td>{{ number_format($contract['cost'], 2) }}</td>
                                    <td>
                                        <span class="{{ $contract['margin'] > 0 ? 'text-success-600' : 'text-danger-600' }}">
                                            {{ number_format($contract['margin'], 2) }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="{{ $contract['margin_percentage'] > 0 ? 'text-success-600' : 'text-danger-600' }}">
                                            {{ number_format($contract['margin_percentage'], 2) }}%
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge {{ $contract['status'] == 'Healthy' ? 'badge-success' : ($contract['status'] == 'Warning' ? 'badge-warning' : 'badge-danger') }}">
                                            {{ $contract['status'] }}
                                        </span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center text-neutral-500 py-8">لا توجد عقود</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>

</x-app-layout>
