@extends('layouts.app')

@section('content')
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

    <!-- System Uptime -->
    <x-card title="System Uptime" icon="clock">
        {{ $uptime }}
    </x-card>

    <!-- CPU Usage -->
    <x-card title="CPU Load (1m)" icon="cpu">
        {{ $cpuUsage }}%
    </x-card>

    <!-- Memory Usage -->
    <x-card title="Memory Usage" icon="memory-stick">
        {{ $memoryUsage }}%
    </x-card>

    <!-- Disk Usage -->
    <x-card title="Disk Usage" icon="hard-drive">
        {{ $diskUsage }}%
    </x-card>

    <!-- Hostname -->
    <x-card title="Hostname" icon="server">
        {{ $hostname }}
    </x-card>

    <!-- IP Address -->
    <x-card title="IP Address" icon="network">
        {{ $ipAddress }}
    </x-card>

    <!-- Registered Extensions -->
    <x-card title="Registered Extensions" icon="phone">
        {{ $registeredExtensions }}
    </x-card>

    <!-- Unreachable Extensions -->
    <x-card title="Unreachable Extensions" icon="x-circle">
        {{ $unreachableExtensions }}
    </x-card>
</div>

<!-- Optional: Table of Extensions -->
<div class="mt-6 bg-white p-4 rounded shadow">
    <h2 class="text-lg font-semibold mb-2 flex items-center gap-2">
        <x-lucide-list />
        Extensions List
    </h2>
    <div class="overflow-x-auto">
        <table class="min-w-full text-sm table-auto border">
            <thead class="bg-gray-100 text-gray-700">
                <tr>
                    <th class="px-4 py-2 text-left">ID</th>
                    <th class="px-4 py-2 text-left">Extension</th>
                    <th class="px-4 py-2 text-left">Transport</th>
                    <th class="px-4 py-2 text-left">AOR</th>
                    <th class="px-4 py-2 text-left">Department</th>
                </tr>
            </thead>
            <tbody class="text-gray-800">
                @foreach($extensions as $ext)
                    <tr class="border-t">
                        <td class="px-4 py-2">{{ $ext->id }}</td>
                        <td class="px-4 py-2">{{ $ext->id }}</td>
                        <td class="px-4 py-2">{{ $ext->transport }}</td>
                        <td class="px-4 py-2">{{ $ext->aors }}</td>
                        <td class="px-4 py-2">{{ $ext->department_name ?? '-' }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection