@extends('layouts.install')

@section('content')
<div>
    <h2 class="text-lg font-semibold text-slate-800 mb-4 text-center">Server Requirements Check</h2>

    <div class="space-y-1.5 max-h-[260px] overflow-y-auto pr-1 mb-6">
        @foreach($requirements as $name => $passed)
            <div class="flex items-center justify-between py-1.5 px-3 bg-slate-50 border border-slate-200 rounded-lg">
                <span class="text-xs font-medium text-slate-700">{{ $name }}</span>
                @if($passed)
                    <span class="inline-flex items-center justify-center w-5 h-5 bg-brand-50 text-brand-600 rounded-full">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
                        </svg>
                    </span>
                @else
                    <span class="inline-flex items-center justify-center w-5 h-5 bg-rose-500/10 text-rose-400 rounded-full" title="Failed">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </span>
                @endif
            </div>
        @endforeach
    </div>

    <div class="flex space-x-3">
        <a href="{{ route('install.step1') }}" class="flex-1 py-3 px-4 bg-black hover:bg-slate-800 text-white text-center font-medium rounded-lg border border-slate-700 transition duration-150 text-sm">
            Back
        </a>
        @if($allPassed)
            <a href="{{ route('install.step3') }}" class="flex-1 py-3 px-4 bg-brand-500 hover:bg-brand-600 text-white text-center font-medium rounded-lg shadow-sm transition duration-150 text-sm">
                Continue
            </a>
        @else
            <button disabled class="flex-1 py-3 px-4 bg-slate-200 text-slate-400 text-center font-medium rounded-lg cursor-not-allowed border border-slate-200 text-sm">
                Continue
            </button>
        @endif
    </div>

    @if(!$allPassed)
        <p class="text-center text-xs text-rose-400 mt-3">
            * Please fix the missing PHP extensions or write permissions to proceed.
        </p>
    @endif
</div>
@endsection
