<x-app-layout>
    <x-slot name="header">Editar Servicio</x-slot>

    <div class="card" style="max-width:560px;">
        <div class="card-title">Actualizar datos del servicio</div>

        <form action="{{ route('admin.servicios.update', $servicio) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="field-group">
                <label class="field-label">Nombre del servicio</label>
                <input type="text" name="nombre"
                       value="{{ old('nombre', $servicio->nombre) }}"
                       class="field-input" required />
                @error('nombre')<p class="field-error">{{ $message }}</p>@enderror
            </div>

            <div class="field-group">
                <label class="field-label">Descripción</label>
                <textarea name="descripcion"
                          class="field-input" rows="3"
                          style="resize:vertical;">{{ old('descripcion', $servicio->descripcion) }}</textarea>
                @error('descripcion')<p class="field-error">{{ $message }}</p>@enderror
            </div>

            <div class="field-group">
                <label class="field-label">Precio (S/)</label>
                <input type="number" step="0.01" name="precio"
                       value="{{ old('precio', $servicio->precio) }}"
                       class="field-input" required />
                @error('precio')<p class="field-error">{{ $message }}</p>@enderror
            </div>

            <div style="display:flex; gap:12px; align-items:center; margin-top:28px; padding-top:24px; border-top:1px solid var(--border);">
                <button type="submit" class="btn-submit">
                    Actualizar
                    <svg viewBox="0 0 14 14" fill="none" width="14" height="14">
                        <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
                <a href="{{ route('admin.servicios.index') }}" class="table-btn">Cancelar</a>
            </div>
        </form>
    </div>

</x-app-layout>

<style>
.field-group { margin-bottom: 20px; }
.field-label { display:block; font-family:'Space Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-bottom:8px; }
.field-input { width:100%; background:rgba(2,5,16,0.8); border:1px solid rgba(0,245,255,0.15); border-radius:10px; padding:13px 16px; color:var(--text); font-family:'Syne',sans-serif; font-size:15px; outline:none; transition:all 0.25s; }
.field-input::placeholder { color:#2a3a4a; }
.field-input:focus { border-color:rgba(0,245,255,0.45); box-shadow:0 0 0 3px rgba(0,245,255,0.08); }
.field-error { margin-top:6px; font-size:12px; color:#ff4466; font-family:'Space Mono',monospace; }
.btn-submit { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; background:linear-gradient(135deg,#0066ff,#00f5ff); border:none; border-radius:10px; color:#000; font-family:'Syne',sans-serif; font-size:14px; font-weight:700; cursor:pointer; box-shadow:0 0 30px rgba(0,245,255,0.25); transition:all 0.25s; }
.btn-submit:hover { transform:translateY(-1px); box-shadow:0 0 44px rgba(0,245,255,0.4); }
</style>