@extends('setup.layout')
@php $currentStep = 1; @endphp
@section('title', 'Prérequis')

@section('content')
<div class="p-8">
    <h2 class="text-xl font-semibold text-slate-800 mb-1">Vérification des prérequis</h2>
    <p class="text-slate-500 text-sm mb-6">Assurez-vous que l'environnement serveur est compatible avant de continuer.</p>

    <div class="space-y-2">
        @foreach($checks as $check)
            <div class="flex items-center justify-between px-4 py-3 rounded-lg
                {{ $check['ok'] ? 'bg-green-50' : (($check['optional'] ?? false) ? 'bg-amber-50' : 'bg-red-50') }}">
                <div class="flex items-center gap-3 min-w-0">
                    @if($check['ok'])
                        <span class="text-green-500 shrink-0">✓</span>
                    @elseif($check['optional'] ?? false)
                        <span class="text-amber-500 shrink-0">⚠</span>
                    @else
                        <span class="text-red-500 shrink-0">✗</span>
                    @endif
                    <span class="text-sm font-medium text-slate-700 truncate">{{ $check['label'] }}</span>
                    @if($check['optional'] ?? false)
                        <span class="text-xs text-amber-600 bg-amber-100 px-2 py-0.5 rounded shrink-0">optionnel</span>
                    @endif
                </div>
                <span class="text-xs text-slate-500 shrink-0 ml-3">{{ $check['value'] ?? '' }}</span>
            </div>
        @endforeach
    </div>

    @if(!$allOk)
        <div class="mt-6 p-4 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
            Des prérequis obligatoires ne sont pas satisfaits. Corrigez les problèmes ci-dessus avant de continuer.
        </div>
    @else
        <div class="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg text-sm text-green-700">
            Tous les prérequis sont satisfaits. Vous pouvez continuer l'installation.
        </div>
    @endif

    <div class="mt-6 flex justify-end">
        <a href="{{ route('setup.database') }}"
           class="inline-flex items-center px-6 py-2.5 rounded-lg bg-blue-600 text-white font-medium text-sm hover:bg-blue-700 transition
               {{ !$allOk ? 'opacity-50 pointer-events-none' : '' }}">
            Suivant →
        </a>
    </div>
</div>
@endsection