@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-6 py-8">
    <div class="flex justify-between items-center">
        <h3 class="text-gray-900 dark:text-gray-300 text-3xl font-medium">機台詳情：{{ $machine->name }}</h3>
        <div>
            <a href="{{ route('admin.machines.edit', $machine) }}" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded mr-2">
                編輯
            </a>
            <a href="{{ route('admin.machines.index') }}" class="bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 text-gray-800 dark:text-white font-bold py-2 px-4 rounded">
                返回列表
            </a>
        </div>
    </div>

    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Basic Info -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden p-6">
            <h4 class="text-xl font-semibold text-gray-200 mb-4">基本資訊</h4>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <p class="text-sm text-gray-700 dark:text-gray-400">位置</p>
                    <p class="text-lg text-gray-200">{{ $machine->location ?? '-' }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-700 dark:text-gray-400">狀態</p>
                    @if($machine->status === 'online')
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">連線中</span>
                    @elseif($machine->status === 'offline')
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">離線</span>
                    @else
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">異常</span>
                    @endif
                </div>
                <div>
                    <p class="text-sm text-gray-700 dark:text-gray-400">溫度</p>
                    <p class="text-lg text-gray-200">{{ $machine->temperature ? $machine->temperature . '°C' : '-' }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-700 dark:text-gray-400">韌體版本</p>
                    <p class="text-lg text-gray-200">{{ $machine->firmware_version ?? '-' }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-700 dark:text-gray-400">最後心跳</p>
                    <p class="text-lg text-gray-200">{{ $machine->last_heartbeat_at ? $machine->last_heartbeat_at->diffForHumans() : '-' }}</p>
                </div>
            </div>
        </div>

        <!-- Logs -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden p-6">
            <h4 class="text-xl font-semibold text-gray-200 mb-4">最近日誌</h4>
            <div class="overflow-y-auto max-h-64">
                <ul class="divide-y divide-gray-700">
                    @forelse($machine->logs()->latest()->take(10)->get() as $log)
                    <li class="py-3">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                @if($log->level === 'error')
                                    <span class="h-2 w-2 rounded-full bg-red-500 mr-2"></span>
                                @elseif($log->level === 'warning')
                                    <span class="h-2 w-2 rounded-full bg-yellow-500 mr-2"></span>
                                @else
                                    <span class="h-2 w-2 rounded-full bg-blue-500 mr-2"></span>
                                @endif
                                <p class="text-sm text-gray-900 dark:text-gray-300">{{ $log->message }}</p>
                            </div>
                            <span class="text-xs text-gray-500">{{ $log->created_at->format('m/d H:i') }}</span>
                        </div>
                    </li>
                    @empty
                    <li class="py-3 text-center text-gray-500">尚無日誌</li>
                    @endforelse
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection