{{-- Países (rpais), agregar. Formulario con el kit ui-ctc (MigracionLayout.MD, Configuración). --}}
<x-app-layout titulo="Países">
    <x-pagina>
        <x-encabezado-pagina ruta="Importaciones · Configuración · Países" titulo="Agregar Registro de Paises" />
        <x-catalogo.avisos />

        <x-tarjeta titulo="Datos del país" class="max-w-3xl">
            <form method="post" action="{{ route('rpais.store') }}" accept-charset="utf-8">
                @csrf
                <div class="grid gap-x-4 gap-y-3.5 [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]">
                    <x-campo etiqueta="Código" para="codigo"><x-input type="text" id="codigo" name="codigo" /></x-campo>
                    <x-campo etiqueta="Nombre" para="nombre">
                        <x-input type="text" id="nombre" name="nombre" onkeypress="return soloLetras(event)" title="Ingrese el Nombre del Pais"
                                 style="text-transform:uppercase;" onkeyup="javascript:this.value=this.value.toUpperCase();" />
                    </x-campo>
                </div>
                <div class="mt-4 flex flex-wrap items-center gap-2">
                    <x-button><x-icono nombre="check" variante="m" class="h-4 w-4" /> Guardar</x-button>
                    <x-secondary-button type="reset"><x-icono nombre="arrow-path" variante="m" class="h-4 w-4" /> Limpiar</x-secondary-button>
                    <x-enlace-boton href="{{ route('rpais.index') }}"><x-icono nombre="x-mark" variante="m" class="h-4 w-4" /> Cancelar</x-enlace-boton>
                </div>
            </form>
        </x-tarjeta>
    </x-pagina>

    @push('scripts')
        <script>
            // Solo permite letras (y espacio) en el nombre del país.
            function soloLetras(e) {
                var key = e.keyCode || e.which;
                var tecla = String.fromCharCode(key).toLowerCase();
                var letras = " áéíóúabcdefghijklmnñopqrstuvwxyz";
                var especiales = "8-37-39-46";
                var tecla_especial = false;
                for (var i in especiales) {
                    if (key == especiales[i]) { tecla_especial = true; break; }
                }
                if (letras.indexOf(tecla) == -1 && !tecla_especial) {
                    return false;
                }
            }
        </script>
    @endpush
</x-app-layout>