import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import AppLayout from '@/layouts/app-layout'; import { type BreadcrumbItem } from '@/types'; import { Head, Link, useForm } from '@inertiajs/react'; import { ArrowLeft, Save, MapPin } from 'lucide-react'; import { showLoading, updateToast } from '@/lib/toast'; import LocationPicker from '@/components/google-maps/location-picker'; interface Institution { id: number; name: string; } interface InstitutionSede { id: number; name: string; address: string; phone?: string; email?: string; latitude?: number; longitude?: number; institution_id: number; institution: Institution; created_at: string; updated_at: string; } interface Props { sede: InstitutionSede; institutions: Institution[]; } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Sedes', href: '/institution-sedes' }, ]; export default function EditInstitutionSede({ sede, institutions }: Props) { const { data, setData, put, processing, errors } = useForm({ name: sede.name, address: sede.address, phone: sede.phone || '', email: sede.email || '', latitude: sede.latitude?.toString() || '', longitude: sede.longitude?.toString() || '', institution_id: sede.institution_id, }); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const toastId = showLoading('Actualizando sede...'); put(`/institution-sedes/${sede.id}`, { onSuccess: () => { updateToast(toastId, 'success', 'Sede actualizada exitosamente'); }, onError: () => { updateToast(toastId, 'error', 'Error al actualizar la sede'); } }); }; const currentBreadcrumbs: BreadcrumbItem[] = [ ...breadcrumbs, { title: `Editar ${sede.name}`, href: `/institution-sedes/${sede.id}/edit` }, ]; return (

{/* Header móvil optimizado */}

Editar Sede

Modifica la información de la sede institucional

{/* Form */} Información de la Sede Actualiza los datos de la sede institucional

Nombre de la Sede * setData('name', e.target.value)} placeholder="Ej: Sede Principal" className={errors.name ? 'border-red-500' : ''} required /> {errors.name && (

{errors.name}

)}

Institución * {errors.institution_id && (

{errors.institution_id}

)}

Teléfono setData('phone', e.target.value)} placeholder="Ej: +57 300 123 4567" className={errors.phone ? 'border-red-500' : ''} /> {errors.phone && (

{errors.phone}

)}

Email setData('email', e.target.value)} placeholder="Ej: sede@institucion.edu.co" className={errors.email ? 'border-red-500' : ''} /> {errors.email && (

{errors.email}

)}

Ubicación en el Mapa * setData('address', address)} onLocationChange={(lat, lng) => { setData('latitude', lat.toString()); setData('longitude', lng.toString()); }} addressError={errors.address} latitudeError={errors.latitude} longitudeError={errors.longitude} />

); }