<x-app-layout>
    <x-slot name="title">Editar ONU {{ $onu->serial_number }}</x-slot>
    <x-slot name="breadcrumb">
        <a href="{{ route('onus.index') }}" class="hover:text-gray-600 dark:hover:text-gray-300 transition-colors">ONUs</a>
        <svg class="w-3 h-3 mx-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <a href="{{ route('onus.show', $onu) }}" class="hover:text-gray-600 dark:hover:text-gray-300 font-mono transition-colors">{{ $onu->serial_number }}</a>
        <svg class="w-3 h-3 mx-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <span class="text-gray-400">Editar</span>
    </x-slot>

    <div class="max-w-2xl">
        <div class="mb-6">
            <h1 class="text-xl font-bold text-gray-900 dark:text-white">Editar ONU</h1>
            <p class="text-sm text-gray-400 font-mono mt-0.5">{{ $onu->interface_name }}</p>
        </div>

        {{-- Info banner --}}
        <div class="flex items-center gap-3 p-4 rounded-xl mb-5
                    bg-primary-50 dark:bg-primary-900/20
                    border border-primary-200 dark:border-primary-800/30">
            <code class="text-xs font-mono text-primary-700 dark:text-primary-300">
                {{ $onu->port->device->name }} &rarr; {{ $onu->interface_name }}
            </code>
            <span class="ml-auto">
                @if($onu->status === 'authorized')
                    <span class="badge-green"><span class="w-1 h-1 rounded-full bg-accent-500"></span> Activa</span>
                @else
                    <span class="badge-yellow">{{ $onu->status }}</span>
                @endif
            </span>
        </div>

        <div class="card">
            <div class="card-body">
                <form method="POST" action="{{ route('onus.update', $onu) }}" class="space-y-5">
                    @csrf
                    @method('PATCH')

                    <div>
                        <h3 class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3">
                            Datos del Cliente
                        </h3>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="label">Nombre del Cliente</label>
                                <input type="text" name="customer_name"
                                       value="{{ old('customer_name', $onu->customer_name) }}"
                                       class="input">
                            </div>
                            <div>
                                <label class="label">Descripción</label>
                                <input type="text" name="customer_description"
                                       value="{{ old('customer_description', $onu->customer_description) }}"
                                       class="input">
                            </div>
                        </div>
                    </div>

                    <div>
                        <h3 class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3">
                            Configuración de Servicio
                        </h3>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="label">VLAN *</label>
                                <input type="number" name="vlan"
                                       value="{{ old('vlan', $onu->vlan) }}" required min="1" max="4094"
                                       class="input font-mono">
                            </div>
                            <div>
                                <label class="label">Perfil de Velocidad *</label>
                                <select name="tcont_profile" required class="input">
                                    @foreach($speedProfiles as $profile)
                                        <option value="{{ $profile }}"
                                            {{ old('tcont_profile', $onu->tcont_profile) === $profile ? 'selected' : '' }}>
                                            {{ $profile }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="label">Nombre Servicio *</label>
                                <input type="text" name="service_name"
                                       value="{{ old('service_name', $onu->service_name) }}" required
                                       class="input font-mono uppercase">
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center gap-3 pt-2">
                        <button type="submit" class="btn-primary">
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            Actualizar
                        </button>
                        <a href="{{ route('onus.show', $onu) }}" class="btn-ghost">Cancelar</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</x-app-layout>
