@extends('admin.layout')

@section('title', 'System & Diagnostics')

@section('content')
<div class="space-y-8">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="font-heading text-2xl font-bold text-white">System Diagnostics & Environment</h1>
            <p class="text-slate-400 text-xs sm:text-sm">Low-level server specs, loaded PHP extensions, and maintenance tools.</p>
        </div>

        <div class="flex gap-2">
            <form action="{{ route('admin.system.clearCache') }}" method="POST" class="inline">
                @csrf
                <button type="submit" class="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-xs sm:text-sm font-semibold transition active:scale-95 flex items-center gap-1.5">
                    <span>🧹</span> Purge All Caches
                </button>
            </form>
        </div>
    </div>

    <!-- Specs Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Application & Framework -->
        <div class="rounded-2xl bg-slate-900/80 border border-slate-800 p-6 shadow-xl space-y-4">
            <div class="flex items-center gap-2 pb-3 border-b border-slate-800">
                <span class="text-xl">⚙️</span>
                <h2 class="font-heading font-semibold text-base text-white">Application Environment</h2>
            </div>
            <dl class="divide-y divide-slate-800 text-xs sm:text-sm">
                @foreach(array_slice($systemSpecs, 0, 7) as $key => $value)
                    <div class="py-2.5 flex justify-between">
                        <dt class="text-slate-400 font-medium">{{ $key }}</dt>
                        <dd class="text-slate-200 font-mono font-semibold">{{ $value }}</dd>
                    </div>
                @endforeach
            </dl>
        </div>

        <!-- Infrastructure & Performance -->
        <div class="rounded-2xl bg-slate-900/80 border border-slate-800 p-6 shadow-xl space-y-4">
            <div class="flex items-center gap-2 pb-3 border-b border-slate-800">
                <span class="text-xl">📊</span>
                <h2 class="font-heading font-semibold text-base text-white">Performance & Drivers</h2>
            </div>
            <dl class="divide-y divide-slate-800 text-xs sm:text-sm">
                @foreach(array_slice($systemSpecs, 7) as $key => $value)
                    <div class="py-2.5 flex justify-between">
                        <dt class="text-slate-400 font-medium">{{ $key }}</dt>
                        <dd class="text-slate-200 font-mono font-semibold">{{ $value }}</dd>
                    </div>
                @endforeach
            </dl>
        </div>
    </div>

    <!-- Loaded PHP Extensions -->
    <div class="rounded-2xl bg-slate-900/80 border border-slate-800 p-6 shadow-xl space-y-4">
        <div class="flex items-center justify-between pb-3 border-b border-slate-800">
            <div class="flex items-center gap-2">
                <span class="text-xl">🧩</span>
                <h2 class="font-heading font-semibold text-base text-white">Loaded PHP Extensions</h2>
            </div>
            <span class="text-xs text-slate-400 font-mono">{{ count($loadedExtensions) }} extensions active</span>
        </div>

        <div class="flex flex-wrap gap-2 pt-2">
            @foreach($loadedExtensions as $ext)
                <span class="px-2.5 py-1 rounded-lg text-xs font-mono {{ in_array($ext, ['pdo_pgsql', 'pgsql', 'pdo_mysql', 'openssl', 'curl', 'mbstring', 'bcmath']) ? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/40 font-bold' : 'bg-slate-800 text-slate-400 border border-slate-700/60' }}">
                    {{ $ext }}
                </span>
            @endforeach
        </div>
    </div>
</div>
@endsection