@extends('layouts.installer')

@section('title', 'Server Requirements')
@section('subtitle', 'Checking if your server meets the minimum requirements.')

@section('content')
<div class="space-y-8">

    {{-- PHP Version --}}
    <div class="bg-slate-900/50 rounded-xl p-6 border border-white/5">
        <h3 class="text-lg font-600 mb-4 flex items-center gap-2">
            <i data-lucide="terminal" class="w-5 h-5 text-blue-400"></i>
            PHP Version Status
        </h3>
        
        <div class="flex items-center justify-between p-3 rounded-lg bg-slate-800/50">
            <div class="flex flex-col">
                <span class="font-500">Current PHP Version ({{ $php['current'] }})</span>
                <span class="text-xs text-text-dim">Minimum required is {{ $php['minimum'] }}</span>
            </div>
            @if($php['supported'])
                <div class="w-8 h-8 rounded-full bg-emerald-500/10 text-emerald-400 flex items-center justify-center">
                    <i data-lucide="check" class="w-4 h-4"></i>
                </div>
            @else
                <div class="w-8 h-8 rounded-full bg-red-500/10 text-red-400 flex items-center justify-center">
                    <i data-lucide="x" class="w-4 h-4"></i>
                </div>
            @endif
        </div>
    </div>

    {{-- Extensions --}}
    <div class="bg-slate-900/50 rounded-xl p-6 border border-white/5">
        <h3 class="text-lg font-600 mb-4 flex items-center gap-2">
            <i data-lucide="blocks" class="w-5 h-5 text-blue-400"></i>
            PHP Extensions
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            @foreach($extensions as $ext => $loaded)
                <div class="flex items-center justify-between p-3 rounded-lg bg-slate-800/50 text-sm">
                    <span class="font-500">{{ ucfirst($ext) }}</span>
                    @if($loaded)
                        <i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-400"></i>
                    @else
                        <i data-lucide="x-circle" class="w-4 h-4 text-red-400"></i>
                    @endif
                </div>
            @endforeach
        </div>
    </div>

    {{-- Permissions --}}
    <div class="bg-slate-900/50 rounded-xl p-6 border border-white/5">
        <h3 class="text-lg font-600 mb-4 flex items-center gap-2">
            <i data-lucide="folder-lock" class="w-5 h-5 text-blue-400"></i>
            Directory Permissions
        </h3>
        
        <div class="space-y-3">
            @foreach($permissions as $perm)
                <div class="flex items-center justify-between p-3 rounded-lg bg-slate-800/50 text-sm">
                    <span class="font-500 font-mono text-xs">{{ $perm['folder'] }}</span>
                    @if($perm['isSet'])
                        <span class="text-xs font-600 px-2 py-1 rounded bg-emerald-500/10 text-emerald-400 flex items-center gap-1">
                            <i data-lucide="check" class="w-3 h-3"></i> Writable
                        </span>
                    @else
                        <span class="text-xs font-600 px-2 py-1 rounded bg-red-500/10 text-red-400 flex items-center gap-1">
                            <i data-lucide="x" class="w-3 h-3"></i> Not Writable
                        </span>
                    @endif
                </div>
            @endforeach
        </div>
    </div>

    <div class="pt-6 border-t border-white/5 flex justify-end">
        @if($allPassed)
            <form action="{{ route('install.requirements.post') }}" method="POST">
                @csrf
                <button type="submit" class="btn-primary">
                    Next Step
                    <i data-lucide="arrow-right" class="w-4 h-4"></i>
                </button>
            </form>
        @else
            <button disabled class="btn-secondary opacity-50 cursor-not-allowed">
                Fix Requirements to Continue
                <i data-lucide="lock" class="w-4 h-4 ml-2"></i>
            </button>
            <a href="{{ route('install.requirements') }}" class="btn-secondary ml-3">
                <i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i> Re-check
            </a>
        @endif
    </div>

</div>
@endsection