@extends('install.layout')

@section('content')
@php
    $currentStep = 2;
    $showNext = $allPassed;
@endphp

<div class="bg-white rounded-lg shadow-sm border">
    <div class="px-6 py-8">
        <!-- Header -->
        <div class="text-center mb-8">
            <div class="w-16 h-16 {{ $allPassed ? 'bg-green-100' : 'bg-yellow-100' }} rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas {{ $allPassed ? 'fa-check-circle text-green-600' : 'fa-exclamation-triangle text-yellow-600' }} text-2xl"></i>
            </div>
            <h2 class="text-3xl font-bold text-gray-900 mb-2">Server Requirements Check</h2>
            <p class="text-lg text-gray-600">
                We're checking if your server meets all the requirements to run the application.
            </p>
        </div>

        <!-- Requirements List -->
        <div class="space-y-4 mb-8">
            @foreach($requirements as $requirement => $passed)
                <div class="flex items-center justify-between p-4 border rounded-lg {{ $passed ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200' }}">
                    <div class="flex items-center">
                        <i class="fas {{ $passed ? 'fa-check-circle text-green-600' : 'fa-times-circle text-red-600' }} mr-3 text-lg"></i>
                        <span class="font-medium {{ $passed ? 'text-green-800' : 'text-red-800' }}">{{ $requirement }}</span>
                    </div>
                    <span class="px-3 py-1 rounded-full text-sm font-medium {{ $passed ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                        {{ $passed ? 'PASSED' : 'FAILED' }}
                    </span>
                </div>
            @endforeach
        </div>

        <!-- Status Message -->
        @if($allPassed)
            <div class="bg-green-50 border border-green-200 rounded-lg p-6 mb-6">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-600 text-xl mr-3"></i>
                    <div>
                        <h3 class="text-lg font-semibold text-green-800">All Requirements Met!</h3>
                        <p class="text-green-700">Your server meets all the necessary requirements. You can proceed to the next step.</p>
                    </div>
                </div>
            </div>
        @else
            <div class="bg-red-50 border border-red-200 rounded-lg p-6 mb-6">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-triangle text-red-600 text-xl mr-3"></i>
                    <div>
                        <h3 class="text-lg font-semibold text-red-800">Requirements Not Met</h3>
                        <p class="text-red-700">Some server requirements are not met. Please contact your hosting provider to fix the issues before proceeding.</p>
                    </div>
                </div>
            </div>
        @endif

        <!-- Action Buttons -->
        <div class="border-t pt-6 flex justify-between">
            <a href="{{ route('install.welcome') }}" 
               class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                <i class="fas fa-arrow-left mr-2"></i>
                Back
            </a>

            @if($allPassed)
                <a href="{{ route('install.database') }}" 
                   class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                    Continue to Database Setup
                    <i class="fas fa-arrow-right ml-2"></i>
                </a>
            @else
                <button disabled class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-400 cursor-not-allowed">
                    Fix Requirements First
                    <i class="fas fa-lock ml-2"></i>
                </button>
            @endif
        </div>
    </div>
</div>
@endsection