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

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

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                @foreach($kpis as $key => $kpi)
                    <div class="card">
                        <div class="card-body">
                            <div class="flex justify-between items-start mb-4">
                                <div>
                                    <h3 class="text-sm text-neutral-600 font-medium">{{ $kpi['name'] }}</h3>
                                    <p class="text-2l font-bold text-neutral-800 mt-1">
                                        {{ number_format($kpi['current_value'], 1) }}{{ $kpi['unit'] }}
                                    </p>
                                </div>
                                <div class="
                                    @if($kpi['status'] == 'healthy') 
                                        bg-success-100 text-success-600
                                    @elseif($kpi['status'] == 'warning')
                                        bg-warning-100 text-warning-600
                                    @else
                                        bg-danger-100 text-danger-600
                                    @endif
                                    p-3 rounded-full">
                                    @if($kpi['status'] == 'healthy')
                                        <i class="fas fa-check"></i>
                                    @elseif($kpi['status'] == 'warning')
                                        <i class="fas fa-exclamation"></i>
                                    @else
                                        <i class="fas fa-times"></i>
                                    @endif
                                </div>
                            </div>

                            <div class="flex justify-between items-center text-sm">
                                <span class="text-neutral-600">الهدف: {{ number_format($kpi['target_value'], 1) }}{{ $kpi['unit'] }}</span>
                                <span class="
                                    @if($kpi['trend'] > 0)
                                        text-success-600
                                    @elseif($kpi['trend'] < 0)
                                        text-danger-600
                                    @else
                                        text-neutral-600
                                    @endif
                                ">
                                    @if($kpi['trend'] > 0)
                                        <i class="fas fa-arrow-up ml-1"></i>
                                    @elseif($kpi['trend'] < 0)
                                        <i class="fas fa-arrow-down ml-1"></i>
                                    @else
                                        <i class="fas fa-minus ml-1"></i>
                                    @endif
                                </span>
                            </div>

                            <div class="mt-3 w-full bg-neutral-200 rounded-full h-2">
                                <div class="
                                    @if($kpi['status'] == 'healthy')
                                        bg-success-500
                                    @elseif($kpi['status'] == 'warning')
                                        bg-warning-500
                                    @else
                                        bg-danger-500
                                    @endif
                                    h-2 rounded-full transition-all"
                                    style="width: {{ min(100, ($kpi['current_value'] / $kpi['target_value']) * 100) }}%">
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

        </div>
    </div>

</x-app-layout>
