<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Edit BioTime Device') }}: {{ $biotimeDevice->alias ?? $biotimeDevice->sn }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <form action="{{ route('biotime-devices.update', $biotimeDevice) }}" method="POST">
                        @csrf
                        @method('PATCH')
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="mb-4">
                                <x-input-label for="sn" :value="__('Serial Number')" />
                                <x-text-input id="sn" class="block mt-1 w-full" type="text" name="sn" :value="old('sn', $biotimeDevice->sn)" required readonly class="bg-gray-100" />
                                <x-input-error :messages="$errors->get('sn')" class="mt-2" />
                            </div>

                            <div class="mb-4">
                                <x-input-label for="alias" :value="__('Alias (Name)')" />
                                <x-text-input id="alias" class="block mt-1 w-full" type="text" name="alias" :value="old('alias', $biotimeDevice->alias)" placeholder="e.g. Main Gate" />
                                <x-input-error :messages="$errors->get('alias')" class="mt-2" />
                            </div>

                            <div class="mb-4">
                                <x-input-label for="area_id" :value="__('Area')" />
                                <select id="area_id" name="area_id" class="block mt-1 w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm">
                                    <option value="">Select Area</option>
                                    @foreach($areas as $area)
                                        <option value="{{ $area->id }}" {{ old('area_id', $biotimeDevice->area_id) == $area->id ? 'selected' : '' }}>
                                            {{ $area->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <x-input-error :messages="$errors->get('area_id')" class="mt-2" />
                            </div>

                            <div class="mb-4">
                                <x-input-label for="ip_address" :value="__('IP Address')" />
                                <x-text-input id="ip_address" class="block mt-1 w-full" type="text" name="ip_address" :value="old('ip_address', $biotimeDevice->ip_address)" placeholder="e.g. 192.168.1.100" />
                                <x-input-error :messages="$errors->get('ip_address')" class="mt-2" />
                            </div>

                            <div class="mb-4">
                                <x-input-label for="device_model" :value="__('Device Model')" />
                                <x-text-input id="device_model" class="block mt-1 w-full" type="text" name="device_model" :value="old('device_model', $biotimeDevice->device_model)" placeholder="e.g. G3 Pro" />
                                <x-input-error :messages="$errors->get('device_model')" class="mt-2" />
                            </div>

                            <div class="mb-4">
                                <label for="is_active" class="inline-flex items-center">
                                    <input id="is_active" type="checkbox" name="is_active" value="1" {{ old('is_active', $biotimeDevice->is_active) ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
                                    <span class="ml-2 text-sm text-gray-600 font-bold uppercase tracking-widest">{{ __('Is Active') }}</span>
                                </label>
                            </div>
                        </div>

                        <div class="flex items-center justify-end mt-4">
                            <a href="{{ route('biotime-devices.index') }}" class="mr-4 text-sm text-gray-600 hover:text-gray-900">Cancel</a>
                            <x-primary-button>
                                {{ __('Update Device') }}
                            </x-primary-button>
                        </div>
                    </form>
                    @if(isset($commands) && $commands->count())
                        <div class="mt-8 border-t pt-6">
                            <h3 class="text-lg font-medium text-gray-900 mb-4">{{ __('Device Commands (Latest)') }}</h3>
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-widest">Command</th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-widest">Status</th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-widest">Sent</th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-widest">Ack</th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-widest">Response</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        @foreach($commands as $cmd)
                                            <tr>
                                                <td class="px-6 py-4 whitespace-nowrap font-mono text-xs">{{ $cmd->command_text }}</td>
                                                <td class="px-6 py-4 whitespace-nowrap">{{ $cmd->status }}</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-xs">{{ $cmd->sent_at }}</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-xs">{{ $cmd->ack_at }}</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-xs">{{ $cmd->response_text }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
