@extends('install.layout', ['currentStep' => 1])

@section('title', 'System Requirements')

@section('content')
<div class="p-8 flex flex-col flex-1">

    {{-- ── Step header ── --}}
    <div class="mb-7">
        <h2 class="text-xl font-bold text-slate-800">System Requirements</h2>
        <p class="text-sm text-slate-500 mt-1">
            Verifying your server meets the minimum requirements for TicketDjama.
        </p>
    </div>

    {{-- ── Requirement groups ── --}}
    @foreach ($checks->groupBy('category') as $category => $items)
        <div class="mb-6">
            <h3 class="text-[11px] font-semibold text-slate-400 uppercase tracking-widest mb-2">
                {{ $category }}
            </h3>
            <div class="rounded-xl border border-slate-100 overflow-hidden divide-y divide-slate-100">
                @foreach ($items as $check)
                    <div class="flex items-center justify-between px-4 py-2.5 bg-white hover:bg-slate-50 transition-colors">
                        <div class="flex items-center gap-3">
                            @if ($check['status'] === 'pass')
                                <span class="w-5 h-5 rounded-full bg-emerald-100 flex items-center justify-center flex-shrink-0">
                                    <svg class="w-3 h-3 text-emerald-600" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                                    </svg>
                                </span>
                            @elseif ($check['status'] === 'warn')
                                <span class="w-5 h-5 rounded-full bg-amber-100 flex items-center justify-center flex-shrink-0">
                                    <svg class="w-3 h-3 text-amber-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
                                    </svg>
                                </span>
                            @else
                                <span class="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0">
                                    <svg class="w-3 h-3 text-red-600" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                </span>
                            @endif
                            <span class="text-sm font-medium text-slate-700">{{ $check['name'] }}</span>
                        </div>
                        <span class="text-xs text-slate-500 ml-4 text-right max-w-xs">{{ $check['note'] }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    @endforeach

    {{-- ── Blocker notice ── --}}
    @if (! $canContinue)
        <div class="mb-4 flex items-start gap-3 px-4 py-3 bg-red-50 border border-red-200 rounded-xl">
            <svg class="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <p class="text-sm text-red-700">
                <strong>Action required.</strong>
                One or more required items failed. Fix the issues above, then
                <a href="{{ route('install.requirements') }}" class="underline font-semibold">refresh this page</a>.
            </p>
        </div>
    @endif

    {{-- ── Actions ── --}}
    <div class="mt-auto pt-6 border-t border-slate-100 flex items-center justify-between">
        <a href="{{ route('install.requirements') }}"
           class="text-sm text-slate-500 hover:text-slate-700 flex items-center gap-1.5">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
            </svg>
            Re-check
        </a>

        @if ($canContinue)
            <a href="{{ route('install.database') }}"
               class="inline-flex items-center gap-2 px-6 py-2.5 bg-brand-600 text-white text-sm font-semibold rounded-xl hover:bg-brand-700 transition-colors shadow-sm">
                Continue
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
                </svg>
            </a>
        @else
            <button disabled
                    class="inline-flex items-center gap-2 px-6 py-2.5 bg-slate-200 text-slate-400 text-sm font-semibold rounded-xl cursor-not-allowed">
                Requirements not met
            </button>
        @endif
    </div>
</div>
@endsection