import { Head, useForm } from '@inertiajs/react'; import { LoaderCircle } from 'lucide-react'; import { FormEventHandler, useState, useEffect } from 'react'; import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react'; import InputError from '@/components/input-error'; import TextLink from '@/components/text-link'; import { Button } from '@/components/ui/button'; import PrimaryButton from '@/components/landing/primary-button'; import GoogleIcon from '@/components/icons/google-icon'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import NeuralBackground from '@/components/landing/neural-background'; import AIParticles from '@/components/landing/ai-particles'; import Container from '@/components/landing/container'; import AppLogoIcon from '@/components/app-logo-icon'; import ThemeToggle from '@/components/theme-toggle'; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'; import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; import { cn } from '@/lib/utils'; type RegisterForm = { name: string; email: string; phone: string; password: string; password_confirmation: string; departamento_id: string; municipio_id: string; }; type Departamento = { id: number; name: string; code: string; }; type Municipio = { id: number; name: string; code: string; }; interface Institution { id: number; name: string; } interface Props { institutions: Institution[]; } export default function Register({ institutions }: Props) { const { data, setData, post, processing, errors, reset } = useForm>({ name: '', email: '', phone: '', password: '', password_confirmation: '', departamento_id: '', municipio_id: '', }); const [departamentos, setDepartamentos] = useState([]); const [municipios, setMunicipios] = useState([]); const [departamentoOpen, setDepartamentoOpen] = useState(false); const [municipioOpen, setMunicipioOpen] = useState(false); // Fetch departments on component mount useEffect(() => { fetch('/api/departamentos') .then(response => response.json()) .then(data => setDepartamentos(data)) .catch(error => console.error('Error fetching departments:', error)); }, []); // Fetch municipalities when department changes useEffect(() => { if (data.departamento_id) { fetch(`/api/municipios/${data.departamento_id}`) .then(response => response.json()) .then(data => setMunicipios(data)) .catch(error => console.error('Error fetching municipalities:', error)); // Reset municipio when departamento changes setData('municipio_id', ''); } else { setMunicipios([]); } }, [data.departamento_id, setData]); const submit: FormEventHandler = (e) => { e.preventDefault(); post(route('register'), { onFinish: () => reset('password', 'password_confirmation'), }); }; const inputClass = "w-full h-10 rounded-xl border border-slate-300 dark:border-slate-700 bg-transparent text-sm px-3 focus:outline-none focus:ring-2 focus:ring-[#00d492] focus:border-[#00d492] transition-all placeholder:text-slate-400 dark:placeholder:text-slate-500"; return ( <>
{/* Toggle de tema flotante */}

Crear cuenta

Ingresa tus datos para crear tu cuenta

{/* Google Register Button */} Registrarse con Google
o
setData('name', e.target.value)} disabled={processing} placeholder="Nombre(s) y Apellido(s)" />
setData('email', e.target.value)} disabled={processing} placeholder="nombre@institucion.edu" />
setData('phone', e.target.value)} disabled={processing} placeholder="(+57) 3xx xxx xxxx" />
No se encontró departamento. {departamentos.map((departamento) => ( { setData('departamento_id', departamento.id.toString()); setDepartamentoOpen(false); }} > {departamento.name} ))}
No se encontró municipio. {municipios.map((municipio) => ( { setData('municipio_id', municipio.id.toString()); setMunicipioOpen(false); }} > {municipio.name} ))}
setData('password', e.target.value)} disabled={processing} placeholder="Contraseña" />
setData('password_confirmation', e.target.value)} disabled={processing} placeholder="Confirmar contraseña" />
¿Ya tienes cuenta?{' '} Inicia sesión
); }