@extends('installer.layout')

@section('step_content')
    <div class="border-b border-slate-800 pb-4">
        <h2 class="text-lg sm:text-xl font-extrabold text-white flex items-center gap-2">
            <i class="fa-solid fa-server text-amber-400"></i>
            <span>Step 1: Server Requirements & Permissions</span>
        </h2>
        <p class="text-xs text-slate-400 mt-1">Verify that your server environment meets the minimum PHP version, extensions, and writable directory permissions.</p>
    </div>

    <!-- PHP Version -->
    <div class="space-y-2.5">
        <h3 class="text-[11px] sm:text-xs font-extrabold uppercase tracking-wider text-slate-400">PHP Environment</h3>
        <div class="p-3.5 rounded-2xl bg-slate-950 border border-slate-800 flex flex-col sm:flex-row sm:items-center justify-between text-xs gap-2">
            <span class="font-bold text-white">PHP Version (>= 8.2.0 required)</span>
            <div class="flex items-center gap-2 self-start sm:self-auto">
                <span class="font-mono text-slate-300">v{{ $phpVersion }}</span>
                @if($phpOk)
                    <span class="px-2.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 font-bold text-[11px]">Pass</span>
                @else
                    <span class="px-2.5 py-0.5 rounded-full bg-rose-500/10 text-rose-400 border border-rose-500/20 font-bold text-[11px]">Fail</span>
                @endif
            </div>
        </div>
    </div>

    <!-- PHP Extensions -->
    <div class="space-y-2.5">
        <h3 class="text-[11px] sm:text-xs font-extrabold uppercase tracking-wider text-slate-400">Required PHP Extensions</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            @foreach($extensions as $ext => $isLoaded)
                <div class="p-3 rounded-2xl bg-slate-950 border border-slate-800 flex items-center justify-between text-xs">
                    <span class="font-bold text-slate-200">{{ $ext }}</span>
                    @if($isLoaded)
                        <i class="fa-solid fa-circle-check text-emerald-400 text-sm"></i>
                    @else
                        <i class="fa-solid fa-circle-xmark text-rose-400 text-sm"></i>
                    @endif
                </div>
            @endforeach
        </div>
    </div>

    <!-- Directory Writable Permissions -->
    <div class="space-y-2.5">
        <h3 class="text-[11px] sm:text-xs font-extrabold uppercase tracking-wider text-slate-400">Directory Writable Permissions</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            @foreach($permissions as $dir => $isWritable)
                <div class="p-3 rounded-2xl bg-slate-950 border border-slate-800 flex items-center justify-between text-xs">
                    <span class="font-bold text-slate-200 font-mono truncate max-w-[180px]">{{ $dir }}</span>
                    @if($isWritable)
                        <span class="px-2.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 font-bold text-[11px]">Writable</span>
                    @else
                        <span class="px-2.5 py-0.5 rounded-full bg-rose-500/10 text-rose-400 border border-rose-500/20 font-bold text-[11px]">Not Writable</span>
                    @endif
                </div>
            @endforeach
        </div>
    </div>

    <!-- Action Button -->
    <div class="pt-4 border-t border-slate-800 flex items-center justify-end">
        @if($allRequirementsMet)
            <a href="{{ route('install.database') }}" class="w-full sm:w-auto px-8 py-3.5 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs shadow-xl shadow-amber-500/20 transition-all flex items-center justify-center gap-2 text-center">
                <span>Continue to Database Setup</span>
                <i class="fa-solid fa-arrow-right"></i>
            </a>
        @else
            <button disabled class="w-full sm:w-auto px-8 py-3.5 rounded-2xl bg-slate-800 text-slate-500 font-extrabold text-xs cursor-not-allowed text-center">
                Fix Server Requirements First
            </button>
        @endif
    </div>
@endsection