@extends('install.layout')

@section('content')

<div class="mb-8">
    <h1 class="text-2xl font-bold text-slate-800">Server Requirements</h1>
    <p class="mt-1 text-slate-500">Verifying your server meets the minimum requirements before proceeding.</p>
</div>

<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
    <div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
        <span class="font-semibold text-slate-700">Requirement Check</span>
        @if($allPassed)
            <span class="inline-flex items-center gap-1.5 text-xs font-medium text-emerald-700 bg-emerald-50 px-2.5 py-1 rounded-full">
                <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                All checks passed
            </span>
        @else
            <span class="inline-flex items-center gap-1.5 text-xs font-medium text-red-700 bg-red-50 px-2.5 py-1 rounded-full">
                <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                Issues found
            </span>
        @endif
    </div>

    <ul class="divide-y divide-slate-100">
        @foreach($checks as $check)
        <li class="flex items-center justify-between px-6 py-3.5">
            <div class="flex items-center gap-3">
                @if($check['pass'])
                    <div class="w-5 h-5 rounded-full bg-emerald-100 flex items-center justify-center flex-shrink-0">
                        <svg class="w-3 h-3 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                        </svg>
                    </div>
                @else
                    <div class="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0">
                        <svg class="w-3 h-3 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </div>
                @endif
                <span class="text-sm text-slate-700">{!! $check['label'] !!}</span>
            </div>
            <span class="text-xs font-medium {{ $check['pass'] ? 'text-emerald-600' : 'text-red-600' }} bg-{{ $check['pass'] ? 'emerald' : 'red' }}-50 px-2 py-0.5 rounded">
                {{ $check['found'] }}
            </span>
        </li>
        @endforeach
    </ul>
</div>

@if(!$allPassed)
<div class="mt-4 p-4 bg-amber-50 border border-amber-200 rounded-xl text-sm text-amber-800">
    <strong>Action required:</strong> Resolve the failing checks before continuing. Contact your hosting provider if you cannot enable a required PHP extension.
</div>
@endif

<div class="mt-6 flex justify-end">
    @if($allPassed)
        <a href="{{ route('install.database') }}"
           class="btn-primary">
            Continue to Database
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
        </a>
    @else
        <button onclick="window.location.reload()"
                class="btn-primary">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
            </svg>
            Re-check
        </button>
    @endif
</div>

@endsection