@extends('install.layout')

@section('content')
    <div class="space-y-6">
        <div>
            <h1 class="text-2xl font-bold tracking-tight">Step 1: Requirements Check</h1>
            <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">Before installation, verify PHP and writable directories.</p>
        </div>

        <div class="rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
            <div class="space-y-4">
                @php
                    $okGreen = 'border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200';
                    $badRose = 'border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-900/40 dark:bg-rose-950/20 dark:text-rose-200';
                    $cardClass = function(bool $ok) use ($okGreen,$badRose){ return $ok ? $okGreen : $badRose; };
                @endphp

                <div class="flex items-start justify-between gap-4 rounded-xl border px-4 py-3 {{ $cardClass($phpOk) }}">
                    <div>
                        <div class="text-sm font-semibold">PHP 8.2+</div>
                        <div class="mt-1 text-xs opacity-80">Current: {{ defined('PHP_VERSION') ? PHP_VERSION : 'unknown' }}</div>
                    </div>
                    <div class="text-sm font-semibold">{{ $phpOk ? 'OK' : 'Required' }}</div>
                </div>

                <div class="flex items-start justify-between gap-4 rounded-xl border px-4 py-3 {{ $cardClass($storageWritable) }}">
                    <div>
                        <div class="text-sm font-semibold">storage is writable</div>
                        <div class="mt-1 text-xs opacity-80">Path: {{ storage_path() }}</div>
                    </div>
                    <div class="text-sm font-semibold">{{ $storageWritable ? 'OK' : 'Required' }}</div>
                </div>

                <div class="flex items-start justify-between gap-4 rounded-xl border px-4 py-3 {{ $cardClass($bootstrapCacheWritable) }}">
                    <div>
                        <div class="text-sm font-semibold">bootstrap/cache is writable</div>
                        <div class="mt-1 text-xs opacity-80">Path: {{ base_path('bootstrap/cache') }}</div>
                    </div>
                    <div class="text-sm font-semibold">{{ $bootstrapCacheWritable ? 'OK' : 'Required' }}</div>
                </div>
            </div>
        </div>

        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div class="text-xs text-zinc-500 dark:text-zinc-400">
                If any requirement fails, adjust permissions in cPanel (File Manager) before continuing.
            </div>
            <div class="flex gap-3">
                <a
                    href="{{ route('install.step2') }}"
                    class="rounded-xl bg-[#FF2D20] px-5 py-2.5 text-sm font-semibold text-white hover:opacity-95 {{ ($phpOk && $storageWritable && $bootstrapCacheWritable) ? '' : 'opacity-50 pointer-events-none' }}"
                >
                    Next
                </a>
            </div>
        </div>
    </div>
@endsection