@extends('installer.layout')
@section('title', 'Server Requirements — Quickro POS Installer')

@section('content')
@php
    $allRequired  = collect($requirements)->where('required', true)->every(fn($r) => $r['installed']);
    $allWritable  = collect($permissions)->every(fn($p) => $p['writable']);
    $canProceed   = $allRequired && $allWritable;
@endphp

<div class="max-w-2xl">
    <h1 class="text-3xl font-black text-white">Server Requirements</h1>
    <p class="mt-3 text-sm leading-7 text-slate-400">
        Quickro POS needs the following PHP extensions and directory permissions.
        Required items marked in red must be resolved before you can continue.
    </p>

    {{-- PHP Extensions --}}
    <div class="mt-10 rounded-2xl border border-white/10 bg-white/5 overflow-hidden">
        <div class="border-b border-white/10 px-6 py-4">
            <h2 class="text-sm font-bold text-white">PHP Extensions</h2>
        </div>
        <ul class="divide-y divide-white/5">
            @foreach($requirements as $req)
            <li class="flex items-center justify-between px-6 py-3.5">
                <div>
                    <p class="text-sm font-medium text-slate-200">{{ $req['name'] }}</p>
                    @if(!empty($req['value']))
                        <p class="text-xs text-slate-500 mt-0.5">Detected: {{ $req['value'] }}</p>
                    @endif
                </div>
                @if($req['installed'])
                    <span class="inline-flex items-center gap-1 rounded-full bg-accent-600/20 px-2.5 py-1 text-xs font-semibold text-accent-400">
                        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                        Installed
                    </span>
                @elseif(!$req['required'])
                    <span class="inline-flex items-center gap-1 rounded-full bg-amber-500/20 px-2.5 py-1 text-xs font-semibold text-amber-400">
                        Optional
                    </span>
                @else
                    <span class="inline-flex items-center gap-1 rounded-full bg-rose-500/20 px-2.5 py-1 text-xs font-semibold text-rose-400">
                        <svg class="h-3.5 w-3.5" 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>
                        Missing
                    </span>
                @endif
            </li>
            @endforeach
        </ul>
    </div>

    {{-- Folder Permissions --}}
    <div class="mt-6 rounded-2xl border border-white/10 bg-white/5 overflow-hidden">
        <div class="border-b border-white/10 px-6 py-4">
            <h2 class="text-sm font-bold text-white">Folder Permissions</h2>
        </div>
        <ul class="divide-y divide-white/5">
            @foreach($permissions as $perm)
            <li class="flex items-center justify-between px-6 py-3.5">
                <p class="text-sm font-medium text-slate-200">{{ $perm['name'] }}</p>
                @if($perm['writable'])
                    <span class="inline-flex items-center gap-1 rounded-full bg-accent-600/20 px-2.5 py-1 text-xs font-semibold text-accent-400">
                        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                        Writable
                    </span>
                @else
                    <span class="inline-flex items-center gap-1 rounded-full bg-rose-500/20 px-2.5 py-1 text-xs font-semibold text-rose-400">
                        <svg class="h-3.5 w-3.5" 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>
                        Not Writable
                    </span>
                @endif
            </li>
            @endforeach
        </ul>
    </div>

    {{-- Actions --}}
    <div class="mt-8 flex items-center gap-4">
        @if($canProceed)
            <a href="{{ route('install.purchase-code') }}"
               class="inline-flex items-center gap-2 rounded-full bg-brand-600 px-6 py-3 text-sm font-bold text-white shadow-lg shadow-brand-600/30 transition hover:bg-brand-700">
                Continue to License
                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
            </a>
        @else
            <div class="rounded-2xl border border-rose-500/30 bg-rose-500/10 p-4 text-sm text-rose-300">
                Please resolve the issues above and
                <a href="{{ route('install.requirements') }}" class="underline hover:text-white">refresh this page</a>
                before continuing.
            </div>
        @endif
    </div>
</div>
@endsection