@extends('admin.install-layout')
@section('title', 'Step 1 — Requirements')
@php $step = 1; @endphp

@section('install-content')
<div class="bg-white rounded-2xl shadow-lg p-8">
    <div class="flex items-center space-x-3 mb-6">
        <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
            <i class="fas fa-clipboard-check text-purple-600 text-xl"></i>
        </div>
        <div>
            <h1 class="text-2xl font-bold text-gray-800">Server Requirements</h1>
            <p class="text-gray-500 text-sm">Checking your server meets all requirements</p>
        </div>
    </div>

    <div class="space-y-3 mb-8">
        @foreach($requirements as $req)
        <div class="flex items-center justify-between p-4 rounded-xl border
            {{ $req['status'] ? 'bg-emerald-50 border-emerald-200' : 'bg-red-50 border-red-200' }}">
            <div class="flex items-center space-x-3">
                <i class="fas {{ $req['status'] ? 'fa-check-circle text-emerald-500' : 'fa-times-circle text-red-500' }} text-lg"></i>
                <span class="font-medium text-gray-700">{{ $req['name'] }}</span>
            </div>
            <span class="text-sm font-mono {{ $req['status'] ? 'text-emerald-600' : 'text-red-600' }}">
                {{ $req['current'] }}
            </span>
        </div>
        @endforeach
    </div>

    @if($allPassed)
    <div class="bg-emerald-50 border border-emerald-200 rounded-xl p-4 mb-6 flex items-center space-x-3">
        <i class="fas fa-check-circle text-emerald-500 text-xl"></i>
        <span class="text-emerald-700 font-medium">All requirements passed! You can proceed with installation.</span>
    </div>
    <a href="{{ route('install.database') }}"
       class="w-full block text-center bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-3 px-6 rounded-xl font-semibold hover:from-purple-700 hover:to-indigo-700 transition">
        Continue to Database Setup <i class="fas fa-arrow-right ml-2"></i>
    </a>
    @else
    <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-6 flex items-center space-x-3">
        <i class="fas fa-exclamation-triangle text-red-500 text-xl"></i>
        <span class="text-red-700 font-medium">Some requirements are not met. Please fix the issues above before proceeding.</span>
    </div>
    <button onclick="window.location.reload()"
        class="w-full block text-center bg-gray-200 text-gray-700 py-3 px-6 rounded-xl font-semibold hover:bg-gray-300 transition">
        <i class="fas fa-sync mr-2"></i> Recheck Requirements
    </button>
    @endif
</div>
@endsection