<script setup>
import { ref, watch, computed } from 'vue';
import { Link, useForm } from '@inertiajs/vue3';
import AppLayout from '@/Layouts/AppLayout.vue';

const props = defineProps({
  title: String,
  aseguradoras: Array,
  brokers: Array,
  ajustadores: Array,
  talleres: Array,
  ejecutivos: Array,
  proveedor_ejecutivos: Array,
  estados: Object
});

const form = useForm({
  tipo_contrato: 'E',
  ramo: 'VH 07',
  fecha_siniestro: '',
  cobertura: 'DP',
  numero_reclamo: '',
  numero_caso_sias: '',
  numero_caso_wan_ax: '',
  observaciones: '',
  categoria_documento: '',
  tipo_ajuste: '',
  tipo_ajuste_carga: '',
  aplica_kilometraje: false,
  fecha_asignacion: new Date().toISOString().substr(0, 10),
  fecha_inspeccion: '',
  pago_estado: 'pendiente',

  aseguradora_id: '',
  aseguradora_razon_social: '',
  aseguradora_ruc: '',
  aseguradora_ciudad: '',
  aseguradora_ejecutivo_nombre: '',
  ejecutivo_id: '',
  ejecutivo_email: '',
  ejecutivo_celular: '',

  broker_id: '',
  broker_razon_social: '',
  broker_ruc: '',
  broker_nro_reclamo: '',
  broker_fecha_siniestro: '',
  broker_email: '',
  broker_telefono: '',
  broker_ejecutivo_id: '',
  broker_ejecutivo: '',

  cliente_nombre: '',
  cliente_email: '',
  cliente_telefono: '',
  cliente_identificacion: '',
  cliente_tipo_identificacion: 'C',

  afectado_nombre: '',
  afectado_email: '',
  afectado_telefono: '',
  afectado_identificacion: '',
  afectado_tipo_identificacion: 'C',

  particular_nombre: '',
  particular_email: '',
  particular_telefono: '',
  particular_identificacion: '',
  particular_tipo_identificacion: 'C',
  particular_ciudad: '',

  vehiculo_marca: '',
  vehiculo_modelo: '',
  vehiculo_anio: '',
  vehiculo_placa: '',
  vehiculo_color: '',
  vehiculo_tipo: 'liviano',
  vehiculo_valor_asegurado: '',
  vehiculo_has_extras: false,
  vehiculo_extras: '',

  ciudad_kilometraje: '',
  destino_km: '',
  tarifa_kilometraje: 0,
  valor_kilometraje: 0,
  tarifa_ajuste: 0, // Tarifa Aseguradora
  tarifa_ajustador_valor: 0, // TARIFAP (Ajustador)
  honorario_perito: 0,
  ajuste_mas_kilometraje: 0,

  taller_ruc: '',
  taller_ejecutivo_id: '',
  taller_ejecutivo: '',
  taller_email: '',
  taller_telefono: '',

  aviso_siniestro: [],
  ajustador_id: '',
  taller_id: ''
});

const submitting = ref(false);
const errors = ref({});

watch(() => form.vehiculo_tipo, (newType) => {
    if (form.tipo_ajuste === 'repetir' || form.tipo_ajuste === 'mal_realizado') return;
    
    const tarifas = {
        'liviano': 35,
        'pesado': 55,
        'express': 15,
        'virtual': 20,
        'particular': 20
    };
    form.tarifa_ajuste = tarifas[newType] || 0;
});

watch(() => form.tipo_ajuste, (newType) => {
    if (newType === 'repetir' || newType === 'mal_realizado') {
        form.tarifa_ajuste = 0;
        form.tarifa_ajustador_valor = 0;
    }
});

// Módulo 8: Usar tarifas automáticas en asignación
watch([() => form.ajustador_id, () => form.cobertura], ([newId, newCob]) => {
    if (!newId) return;
    const a = props.ajustadores.find(adj => adj.id === newId);
    if (a) {
        if (newCob === 'DP') form.tarifa_ajustador_valor = a.tarifa_dp || 0;
        else if (newCob === 'RC') form.tarifa_ajustador_valor = a.tarifa_rc || 0;
    }
});

watch(() => form.ejecutivo_id, (newId) => {
    if (!newId) {
        form.ejecutivo_email = '';
        form.ejecutivo_celular = '';
        return;
    }
    const exec = props.ejecutivos.find(e => e.id === newId);
    if (exec) {
        form.ejecutivo_email = exec.email;
        form.ejecutivo_celular = exec.telefono;
    }
});

watch(() => form.broker_ejecutivo_id, (newId) => {
    if (!newId) {
        form.broker_ejecutivo = '';
        form.broker_email = '';
        form.broker_telefono = '';
        return;
    }
    const exec = props.proveedor_ejecutivos.find(e => e.id === newId);
    if (exec) {
        form.broker_ejecutivo = exec.nombre;
        form.broker_email = exec.email;
        form.broker_telefono = exec.telefono;
    }
});

watch(() => form.taller_ejecutivo_id, (newId) => {
    if (!newId) {
        form.taller_ejecutivo = '';
        form.taller_email = '';
        form.taller_telefono = '';
        return;
    }
    const exec = props.proveedor_ejecutivos.find(e => e.id === newId);
    if (exec) {
        form.taller_ejecutivo = exec.nombre;
        form.taller_email = exec.email;
        form.taller_telefono = exec.telefono;
    }
});

watch(() => form.aseguradora_id, (newId) => {
    if (!newId) {
        form.aseguradora_razon_social = '';
        form.aseguradora_ruc = '';
        form.aseguradora_ciudad = '';
        return;
    }
    const a = props.aseguradoras.find(a => a.id === newId);
    if (a) {
        form.aseguradora_razon_social = a.nombre;
        form.aseguradora_ruc = a.ruc;
        form.aseguradora_ciudad = a.ciudad || '';
    }
});

const calculateTotal = computed(() => {
    const base = parseFloat(form.tarifa_ajuste || 0);
    const km = form.aplica_kilometraje ? parseFloat(form.valor_kilometraje || 0) : 0;
    return (base + km).toFixed(2);
});

// Módulo 3: Honorario perito = TARIFAP + TOTAL KM
const calculateHonorarioPerito = computed(() => {
    const tarifap = parseFloat(form.tarifa_ajustador_valor || 0);
    const km = form.aplica_kilometraje ? parseFloat(form.valor_kilometraje || 0) : 0;
    return (tarifap + km).toFixed(2);
});

watch([() => form.tarifa_ajustador_valor, () => form.valor_kilometraje], () => {
    form.honorario_perito = calculateHonorarioPerito.value;
});

const validateIdentification = () => {
    const isParticular = form.tipo_contrato === 'P';
    const type = isParticular ? form.particular_tipo_identificacion : form.cliente_tipo_identificacion;
    const value = isParticular ? form.particular_identificacion : form.cliente_identificacion;
    
    if (type === 'C' && value.length !== 10) {
        return "La cédula debe tener exactamente 10 dígitos.";
    }
    if (type === 'R' && value.length !== 13) {
        return "El RUC debe tener exactamente 13 dígitos.";
    }
    return null;
};

const fileDescriptions = ref([]);

const addFiles = (files) => {
    if (!files) return;
    Array.from(files).forEach(file => {
        form.aviso_siniestro.push(file);
        fileDescriptions.value.push('');
    });
};

const removeFile = (index) => {
    form.aviso_siniestro.splice(index, 1);
    fileDescriptions.value.splice(index, 1);
};

const submit = () => {
    const identificationError = validateIdentification();
    if (identificationError) {
        errors.value = { identification: identificationError };
        return;
    }

    submitting.value = true;
    errors.value = {};
    
    form.transform((data) => {
        const isParticular = data.tipo_contrato === 'P';
        return {
            ...data,
            descripciones: fileDescriptions.value,
            cliente: {
                nombre: isParticular ? data.particular_nombre : data.cliente_nombre,
                tipo_identificacion: isParticular ? data.particular_tipo_identificacion : data.cliente_tipo_identificacion,
                ruc: isParticular ? data.particular_identificacion : data.cliente_identificacion,
                telefono: isParticular ? data.particular_telefono : data.cliente_telefono,
                email: isParticular ? data.particular_email : data.cliente_email,
                ciudad: isParticular ? data.particular_ciudad : data.cliente_ciudad,
            },
            vehiculo: {
                placa: data.vehiculo_placa,
                marca: data.vehiculo_marca,
                modelo: data.vehiculo_modelo,
                anio: data.vehiculo_anio,
                color: data.vehiculo_color,
                tipo: data.vehiculo_tipo,
                valor_asegurado: data.vehiculo_valor_asegurado,
                has_extras: data.vehiculo_has_extras,
                extras: data.vehiculo_extras,
            }
        };
    }).post('/casos', {
        forceFormData: true,
        onError: (err) => {
            errors.value = err;
        },
        onFinish: () => {
            submitting.value = false;
        }
    });
};
</script>

<template>
  <AppLayout :title="title">
    <div class="min-h-screen bg-gray-50 p-4 sm:p-8">
      <div class="max-w-[1400px] mx-auto space-y-6">
        
        <!-- HEADER -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
          <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div class="flex items-center gap-4">
              <Link href="/casos" class="flex items-center justify-center w-12 h-12 rounded-xl bg-brand-blue text-white hover:bg-brand-blue transition-colors shadow-md">
                <font-awesome-icon :icon="['fas', 'arrow-left']" class="text-lg" />
              </Link>
              <div>
                <h1 class="text-2xl font-bold text-gray-800">Nuevo Caso</h1>
                <p class="text-gray-500 text-sm mt-1">Gestión de Ajustes de Siniestros</p>
              </div>
            </div>
            
            <div class="flex items-center gap-3">
              <Link :href="route('timeline')" class="px-4 py-2.5 bg-white text-gray-700 border border-gray-300 rounded-xl font-semibold text-sm hover:bg-gray-50 hover:border-gray-400 transition-all flex items-center gap-2">
                <font-awesome-icon :icon="['fas', 'chart-line']" class="text-brand-blue" />
                Línea de Tiempo
              </Link>
              <Link :href="route('estados')" class="px-4 py-2.5 bg-white text-gray-700 border border-gray-300 rounded-xl font-semibold text-sm hover:bg-gray-50 hover:border-gray-400 transition-all flex items-center gap-2">
                <font-awesome-icon :icon="['fas', 'clipboard-list']" class="text-brand-blue" />
                Estados
              </Link>
            </div>
          </div>
        </div>

        <!-- ALERTA DE ERRORES -->
        <div v-if="Object.keys(errors).length > 0" class="bg-red-50 border border-red-200 rounded-2xl p-5">
          <div class="flex items-start gap-3">
            <div class="text-red-500 mt-1">
              <font-awesome-icon :icon="['fas', 'exclamation-circle']" class="text-xl" />
            </div>
            <div>
              <h3 class="text-red-800 font-bold">Se encontraron errores</h3>
              <ul class="mt-2 list-disc list-inside text-red-700 text-sm">
                <li v-for="(error, key) in errors" :key="key">{{ error }}</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- INFO ALERT -->
        <div class="bg-brand-blue rounded-2xl p-5 text-white flex gap-4 items-start">
          <div class="text-blue-200 mt-1">
            <font-awesome-icon :icon="['fas', 'info-circle']" class="text-xl" />
          </div>
          <div class="w-full">
            <h3 class="font-bold mb-3">Criterios de validación del sistema</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-blue-100 text-sm">
              <div class="flex items-center gap-2">
                <font-awesome-icon :icon="['fas', 'check-circle']" class="text-blue-300" />
                <span>RUC (13 dígitos) y Cédula (10 dígitos)</span>
              </div>
              <div class="flex items-center gap-2">
                <font-awesome-icon :icon="['fas', 'check-circle']" class="text-blue-300" />
                <span>Requiere reporte SUPERCIAS</span>
              </div>
              <div class="flex items-center gap-2">
                <font-awesome-icon :icon="['fas', 'check-circle']" class="text-blue-300" />
                <span>Particulares bloquean Aseguradora y Broker</span>
              </div>
            </div>
          </div>
        </div>

        <form @submit.prevent="submit" class="space-y-6">
          
          <div class="grid grid-cols-1 xl:grid-cols-12 gap-6">
            <!-- COLUMNA IZQUIERDA -->
            <div class="xl:col-span-8 space-y-6">
              
              <!-- CARD 1: INFO CASO -->
              <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-brand-blue px-6 py-4 flex items-center gap-3">
                  <div class="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center text-white">
                    <font-awesome-icon :icon="['fas', 'folder-open']" />
                  </div>
                  <h2 class="text-lg font-bold text-white">Información del Caso</h2>
                </div>
                <div class="p-6">
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div class="md:col-span-2">
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Tipo de Contrato <span class="text-brand-blue">*</span></label>
                      <select v-model="form.tipo_contrato" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700" required>
                        <option value="E">E: Empresa de Seguros Nacional</option>
                        <option value="P">P: Persona natural o jurídica</option>
                        <option value="X">X: Persona del exterior</option>
                      </select>
                    </div>
                    <div v-if="form.tipo_contrato !== 'P'">
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Ramo</label>
                      <input v-model="form.ramo" type="text" class="w-full px-4 py-3 bg-gray-100 border border-gray-200 rounded-xl font-medium text-gray-500 cursor-not-allowed" readonly>
                    </div>
                    <div v-if="form.tipo_contrato !== 'P'">
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Fecha Siniestro <span class="text-brand-blue">*</span></label>
                      <input v-model="form.fecha_siniestro" type="date" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700" required>
                    </div>
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Fecha Asignación <span class="text-brand-blue">*</span></label>
                      <input v-model="form.fecha_asignacion" type="date" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700" required>
                    </div>
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Fecha Inspección Programada</label>
                      <input v-model="form.fecha_inspeccion" type="date" class="w-full px-4 py-3 bg-blue-50 border border-blue-200 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-bold text-brand-blue">
                    </div>
                    <div v-if="form.tipo_contrato !== 'P'" class="md:col-span-2">
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Cobertura <span class="text-brand-blue">*</span></label>
                      <div class="flex gap-3 p-1 bg-gray-100 rounded-xl">
                        <label class="flex-1 cursor-pointer">
                          <input type="radio" v-model="form.cobertura" value="DP" class="peer sr-only">
                          <div class="text-center px-4 py-2.5 rounded-lg text-sm font-medium text-gray-500 transition-all peer-checked:bg-brand-blue peer-checked:text-white peer-checked:shadow-md">DP - Daños Propios</div>
                        </label>
                        <label class="flex-1 cursor-pointer">
                          <input type="radio" v-model="form.cobertura" value="RC" class="peer sr-only">
                          <div class="text-center px-4 py-2.5 rounded-lg text-sm font-medium text-gray-500 transition-all peer-checked:bg-brand-blue peer-checked:text-white peer-checked:shadow-md">RC - Resp. Civil</div>
                        </label>
                      </div>
                    </div>
                    <div v-if="form.tipo_contrato !== 'P'">
                      <label class="block text-sm font-semibold text-gray-700 mb-2">No. Caso SIAS</label>
                      <input v-model="form.numero_caso_sias" type="text" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700" placeholder="Ej. SIAS-001">
                    </div>
                    <div v-if="form.tipo_contrato !== 'P'">
                      <label class="block text-sm font-semibold text-gray-700 mb-2">No Caso WAN AX</label>
                      <input v-model="form.numero_caso_wan_ax" type="text" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700" placeholder="Ej. WAN-001">
                    </div>
                  </div>
                </div>
              </div>

              <!-- CARD 2: DATOS CLIENTE -->
              <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden" v-if="form.tipo_contrato !== 'P'">
                <div class="bg-brand-blue px-6 py-4 flex items-center gap-3">
                  <div class="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center text-white">
                    <font-awesome-icon :icon="['fas', 'user']" />
                  </div>
                  <h2 class="text-lg font-bold text-white">Datos del Asegurado (DP)</h2>
                </div>
                <div class="p-6">
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div class="md:col-span-2">
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Nombre Completo <span class="text-brand-blue">*</span></label>
                      <input v-model="form.cliente_nombre" type="text" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700" required>
                    </div>
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Email</label>
                      <input v-model="form.cliente_email" type="email" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700">
                    </div>
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Teléfono</label>
                      <input v-model="form.cliente_telefono" type="text" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700">
                    </div>
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Tipo Identificación <span class="text-brand-blue">*</span></label>
                      <select v-model="form.cliente_tipo_identificacion" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700" :disabled="form.cobertura === 'RC'" :required="form.cobertura === 'DP'">
                        <option value="C">Cédula</option>
                        <option value="R">RUC</option>
                        <option value="E">Pasaporte</option>
                      </select>
                    </div>
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Identificación <span class="text-brand-blue">*</span></label>
                      <input v-model="form.cliente_identificacion" type="text" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700 font-mono" :disabled="form.cobertura === 'RC'" :required="form.cobertura === 'DP'">
                    </div>
                  </div>
                </div>
              </div>

              <!-- CARD 3: PARTICULAR -->
              <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden" v-if="form.tipo_contrato === 'P'">
                <div class="bg-brand-blue px-6 py-4 flex items-center gap-3">
                  <div class="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center text-white">
                    <font-awesome-icon :icon="['fas', 'user']" />
                  </div>
                  <h2 class="text-lg font-bold text-white">Cliente Particular</h2>
                </div>
                <div class="p-6">
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div class="md:col-span-2">
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Nombre Completo <span class="text-brand-blue">*</span></label>
                      <input v-model="form.particular_nombre" type="text" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700" required>
                    </div>
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Email</label>
                      <input v-model="form.particular_email" type="email" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700">
                    </div>
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Teléfono</label>
                      <input v-model="form.particular_telefono" type="text" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700">
                    </div>
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Tipo Identificación <span class="text-brand-blue">*</span></label>
                      <select v-model="form.particular_tipo_identificacion" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700" required>
                        <option value="C">Cédula</option>
                        <option value="R">RUC</option>
                        <option value="E">Pasaporte</option>
                      </select>
                    </div>
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Identificación <span class="text-brand-blue">*</span></label>
                      <input v-model="form.particular_identificacion" type="text" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700 font-mono" required>
                    </div>
                    <div class="md:col-span-2">
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Ciudad</label>
                      <input v-model="form.particular_ciudad" type="text" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700">
                    </div>
                  </div>
                </div>
              </div>

              <!-- CARD 4: VEHÍCULO -->
              <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-brand-blue px-6 py-4 flex items-center gap-3">
                  <div class="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center text-white">
                    <font-awesome-icon :icon="['fas', 'car']" />
                  </div>
                  <h2 class="text-lg font-bold text-white">Datos del Vehículo Siniestrado</h2>
                </div>
                <div class="p-6">
                  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Placa <span class="text-brand-blue">*</span></label>
                      <input v-model="form.vehiculo_placa" type="text" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-bold text-gray-800 font-mono text-center uppercase" required placeholder="XXX-0000">
                    </div>
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Marca</label>
                      <input v-model="form.vehiculo_marca" type="text" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700">
                    </div>
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Modelo</label>
                      <input v-model="form.vehiculo_modelo" type="text" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700">
                    </div>
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Año</label>
                      <input v-model="form.vehiculo_anio" type="number" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700">
                    </div>
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Color</label>
                      <input v-model="form.vehiculo_color" type="text" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700">
                    </div>
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Tipo de Vehículo</label>
                      <select v-model="form.vehiculo_tipo" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700">
                        <option value="liviano">Liviano</option>
                        <option value="pesado">Pesado</option>
                        <option value="express">Express</option>
                        <option value="virtual">Virtual</option>
                        <option value="particular">Particular</option>
                      </select>
                    </div>
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Valor Asegurado</label>
                      <div class="relative">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 font-medium">$</span>
                        <input v-model="form.vehiculo_valor_asegurado" type="number" step="0.01" class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700 font-mono">
                      </div>
                    </div>
                    <div class="col-span-full">
                      <div class="p-5 bg-gray-50 rounded-xl border border-gray-200">
                        <label class="flex items-center gap-3 cursor-pointer">
                          <input type="checkbox" v-model="form.vehiculo_has_extras" class="w-5 h-5 text-brand-blue rounded focus:ring-brand-blue border-gray-300">
                          <span class="font-semibold text-gray-700">¿El vehículo cuenta con extras declarados?</span>
                        </label>
                        <div v-if="form.vehiculo_has_extras" class="mt-4">
                          <label class="block text-sm font-semibold text-gray-700 mb-2">Describa los extras</label>
                          <textarea v-model="form.vehiculo_extras" rows="2" class="w-full px-4 py-3 bg-white border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700 resize-none" placeholder="Aros de magnesio, radio especial, etc..."></textarea>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- CARD 5: ARCHIVOS Y OBSERVACIONES -->
              <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-brand-blue px-6 py-4 flex items-center gap-3">
                  <div class="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center text-white">
                    <font-awesome-icon :icon="['fas', 'paperclip']" />
                  </div>
                  <h2 class="text-lg font-bold text-white">Archivos y Observaciones</h2>
                </div>
                <div class="p-6 space-y-5">
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-2">Documentación Inicial</label>
                      <div class="border-2 border-dashed border-gray-300 bg-gray-50 rounded-xl p-6 text-center hover:border-blue-500 transition-all cursor-pointer" :class="{ 'border-blue-500 bg-blue-50': form.aviso_siniestro.length > 0 }">
                        <input type="file" class="hidden" id="file-upload" accept=".pdf,.jpg,.jpeg,.png" multiple @input="addFiles($event.target.files)">
                        <label for="file-upload" class="cursor-pointer flex flex-col items-center gap-2">
                          <div class="w-12 h-12 rounded-xl bg-blue-100 text-brand-blue flex items-center justify-center">
                            <font-awesome-icon :icon="['fas', 'cloud-upload-alt']" class="text-xl" />
                          </div>
                          <div v-if="form.aviso_siniestro.length === 0">
                            <p class="font-semibold text-gray-700">Seleccionar archivos</p>
                            <p class="text-sm text-gray-400 mt-1">PDF, JPG o PNG máximo 10MB</p>
                          </div>
                          <div v-else>
                            <p class="font-semibold text-brand-blue">{{ form.aviso_siniestro.length }} archivo(s) seleccionado(s)</p>
                            <p class="text-sm text-gray-500 mt-1">Click para agregar más</p>
                          </div>
                        </label>
                      </div>
                      <div v-if="form.aviso_siniestro.length > 0" class="mt-4 space-y-3">
                        <p class="text-xs font-bold text-gray-400 uppercase tracking-widest">Archivos seleccionados ({{ form.aviso_siniestro.length }})</p>
                        <div v-for="(file, index) in form.aviso_siniestro" :key="index" class="flex items-start gap-3 bg-blue-50 p-3 rounded-xl border border-blue-200">
                          <div class="w-10 h-10 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center flex-shrink-0">
                            <font-awesome-icon :icon="['fas', 'file']" class="text-sm" />
                          </div>
                          <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-gray-700 truncate">{{ file.name }}</p>
                            <input v-model="fileDescriptions[index]" type="text"
                                   class="mt-2 w-full px-3 py-1.5 bg-white border border-blue-200 rounded-lg text-sm focus:ring-2 focus:ring-brand-blue focus:border-brand-blue outline-none"
                                   placeholder="Descripción (ej: Frente, Lateral)" />
                          </div>
                          <button type="button" @click="removeFile(index)" class="p-1.5 text-gray-400 hover:text-red-600 transition-colors flex-shrink-0">
                            <font-awesome-icon :icon="['fas', 'times']" />
                          </button>
                        </div>
                      </div>
                    </div>
                    <div class="space-y-4">
                      <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Categoría del Documento</label>
                        <input v-model="form.categoria_documento" type="text" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700" placeholder="Ej: Aviso, Matrícula...">
                      </div>
                      <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Tipo de Ajuste para Carga</label>
                        <select v-model="form.tipo_ajuste_carga" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700">
                          <option value="">Seleccionar...</option>
                          <option value="presencial">Presencial</option>
                          <option value="virtual">Virtual</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Observaciones Generales</label>
                    <textarea v-model="form.observaciones" rows="3" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium text-gray-700 resize-none" placeholder="Indique cualquier detalle adicional importante que el equipo deba conocer sobre este caso..."></textarea>
                  </div>
                </div>
              </div>

            </div>

            <!-- COLUMNA DERECHA -->
            <div class="xl:col-span-4 space-y-6">
            
              <!-- CARD 6: ASEGURADORA -->
              <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden" v-if="form.tipo_contrato !== 'P'">
                <div class="bg-brand-blue px-5 py-3 flex items-center gap-3">
                  <div class="w-7 h-7 rounded-lg bg-white/20 flex items-center justify-center text-white text-sm">
                    <font-awesome-icon :icon="['fas', 'building']" />
                  </div>
                  <h2 class="font-bold text-white">Aseguradora</h2>
                </div>
                <div class="p-5 space-y-4">
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-1.5">Aseguradora <span class="text-brand-blue">*</span></label>
                      <select v-model="form.aseguradora_id" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium" :required="form.tipo_contrato !== 'P'" :disabled="form.tipo_contrato === 'P'">
                        <option value="">Seleccionar...</option>
                        <option v-for="a in aseguradoras" :key="a.id" :value="a.id">{{ a.nombre }}</option>
                      </select>
                    </div>
                    <div :class="{'opacity-50 grayscale pointer-events-none': form.tipo_contrato === 'P'}">
                      <label class="block text-sm font-semibold text-gray-700 mb-1.5">Razón Social</label>
                      <input v-model="form.aseguradora_razon_social" type="text" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium" :disabled="form.tipo_contrato === 'P'">
                    </div>
                    <div :class="{'opacity-50 grayscale pointer-events-none': form.tipo_contrato === 'P'}">
                      <label class="block text-sm font-semibold text-gray-700 mb-1.5">RUC</label>
                      <input v-model="form.aseguradora_ruc" type="text" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium" :disabled="form.tipo_contrato === 'P'">
                    </div>
                    <div :class="{'opacity-50 grayscale pointer-events-none': form.tipo_contrato === 'P'}">
                      <label class="block text-sm font-semibold text-gray-700 mb-1.5">Ciudad</label>
                      <input v-model="form.aseguradora_ciudad" type="text" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium" :disabled="form.tipo_contrato === 'P'">
                    </div>
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-1.5">No. Reclamo Siniestro</label>
                      <input v-model="form.numero_reclamo" type="text" class="w-full px-4 py-2.5 bg-brand-blue border border-blue-200 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium font-mono text-center text-white placeholder-blue-200" placeholder="Obligatorio para Empresa" :required="form.tipo_contrato !== 'P'">
                    </div>
                    <hr class="border-gray-200">
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-1.5">Ejecutivo Innova <span class="text-brand-blue">*</span></label>
                      <select v-model="form.ejecutivo_id" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium" required>
                        <option value="">Seleccionar...</option>
                        <option v-for="e in ejecutivos" :key="e.id" :value="e.id">{{ e.nombre }}</option>
                      </select>
                    </div>
                    <div class="grid grid-cols-2 gap-3">
                      <div>
                        <label class="block text-[10px] font-bold text-gray-400 uppercase">Email Ejecutivo</label>
                        <input v-model="form.ejecutivo_email" type="email" class="w-full px-4 py-2 bg-gray-100 border border-gray-200 rounded-lg text-xs font-medium" readonly>
                      </div>
                      <div>
                        <label class="block text-[10px] font-bold text-gray-400 uppercase">Teléfono Ejecutivo</label>
                        <input v-model="form.ejecutivo_celular" type="text" class="w-full px-4 py-2 bg-gray-100 border border-gray-200 rounded-lg text-xs font-medium" readonly>
                      </div>
                    </div>
                </div>
              </div>

              <!-- CARD 7: BROKER -->
              <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden" v-if="form.tipo_contrato !== 'P'">
                <div class="bg-brand-blue px-5 py-3 flex items-center justify-between">
                  <div class="flex items-center gap-3">
                    <div class="w-7 h-7 rounded-lg bg-white/20 flex items-center justify-center text-white text-sm">
                      <font-awesome-icon :icon="['fas', 'users']" />
                    </div>
                    <h2 class="font-bold text-white">Broker</h2>
                  </div>
                  <span class="px-2.5 py-1 bg-white/20 text-white text-xs font-semibold rounded-full">Opcional</span>
                </div>
                <div class="p-5 space-y-4">
                    <div :class="{'opacity-50 grayscale pointer-events-none': form.tipo_contrato === 'P'}">
                      <label class="block text-sm font-semibold text-gray-700 mb-1.5">Broker</label>
                      <select v-model="form.broker_id" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium" :disabled="form.tipo_contrato === 'P'">
                        <option value="">Seleccionar...</option>
                        <option v-for="b in brokers" :key="b.id" :value="b.id">{{ b.razon_social }}</option>
                      </select>
                    </div>
                    <div :class="{'opacity-50 grayscale pointer-events-none': form.tipo_contrato === 'P'}">
                      <label class="block text-sm font-semibold text-gray-700 mb-1.5">No. Reclamo Broker</label>
                      <input v-model="form.broker_nro_reclamo" type="text" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium font-mono text-center" :disabled="form.tipo_contrato === 'P'">
                    </div>
                    <div class="grid grid-cols-2 gap-3" :class="{'opacity-50 grayscale pointer-events-none': form.tipo_contrato === 'P'}">
                      <div>
                        <label class="block text-[10px] font-bold text-gray-400 uppercase">Ejecutivo Broker</label>
                        <select v-model="form.broker_ejecutivo_id" class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-xs" :disabled="form.tipo_contrato === 'P'">
                          <option value="">Seleccionar...</option>
                          <option v-for="e in proveedor_ejecutivos" :key="e.id" :value="e.id">{{ e.nombre }}</option>
                        </select>
                      </div>
                      <div>
                        <label class="block text-[10px] font-bold text-gray-400 uppercase">RUC Broker</label>
                        <input v-model="form.broker_ruc" type="text" class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-xs font-mono" :disabled="form.tipo_contrato === 'P'">
                      </div>
                    </div>
                    <div class="grid grid-cols-2 gap-3" :class="{'opacity-50 grayscale pointer-events-none': form.tipo_contrato === 'P'}">
                      <div>
                        <label class="block text-[10px] font-bold text-gray-400 uppercase">Email Broker</label>
                        <input v-model="form.broker_email" type="email" class="w-full px-4 py-2 bg-gray-100 border border-gray-200 rounded-lg text-xs font-medium" :disabled="form.tipo_contrato === 'P'" readonly>
                      </div>
                      <div>
                        <label class="block text-[10px] font-bold text-gray-400 uppercase">Teléfono Broker</label>
                        <input v-model="form.broker_telefono" type="text" class="w-full px-4 py-2 bg-gray-100 border border-gray-200 rounded-lg text-xs font-medium" :disabled="form.tipo_contrato === 'P'" readonly>
                      </div>
                    </div>
                </div>
              </div>

              <!-- CARD 7.5: TALLER (Documento 1) -->
              <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden" v-if="form.tipo_contrato !== 'P'">
                <div class="bg-brand-blue px-5 py-3 flex items-center gap-3">
                  <div class="w-7 h-7 rounded-lg bg-white/20 flex items-center justify-center text-white text-sm">
                    <font-awesome-icon :icon="['fas', 'wrench']" />
                  </div>
                  <h2 class="font-bold text-white">Datos del Taller</h2>
                </div>
                <div class="p-5 space-y-4">
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-1.5">Taller Seleccionado</label>
                      <select v-model="form.taller_id" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium">
                        <option value="">Seleccionar...</option>
                        <option v-for="t in talleres" :key="t.id" :value="t.id">{{ t.razon_social }}</option>
                      </select>
                    </div>
                    <div class="grid grid-cols-2 gap-3">
                      <div>
                        <label class="block text-[10px] font-bold text-gray-400 uppercase">RUC Taller</label>
                        <input v-model="form.taller_ruc" type="text" class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-xs font-mono">
                      </div>
                      <div>
                        <label class="block text-[10px] font-bold text-gray-400 uppercase">Ejecutivo Taller</label>
                        <select v-model="form.taller_ejecutivo_id" class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-xs" :disabled="form.tipo_contrato === 'P'">
                          <option value="">Seleccionar...</option>
                          <option v-for="e in proveedor_ejecutivos" :key="e.id" :value="e.id">{{ e.nombre }}</option>
                        </select>
                      </div>
                    </div>
                    <div class="grid grid-cols-2 gap-3">
                      <div>
                        <label class="block text-[10px] font-bold text-gray-400 uppercase">Email Taller</label>
                        <input v-model="form.taller_email" type="email" class="w-full px-4 py-2 bg-gray-100 border border-gray-200 rounded-lg text-xs font-medium" readonly>
                      </div>
                      <div>
                        <label class="block text-[10px] font-bold text-gray-400 uppercase">Teléfono Taller</label>
                        <input v-model="form.taller_telefono" type="text" class="w-full px-4 py-2 bg-gray-100 border border-gray-200 rounded-lg text-xs font-medium" readonly>
                      </div>
                    </div>
                </div>
              </div>

              <!-- CARD 8: TARIFAS -->
              <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-brand-blue px-5 py-3 flex items-center gap-3">
                  <div class="w-7 h-7 rounded-lg bg-white/20 flex items-center justify-center text-white text-sm">
                    <font-awesome-icon :icon="['fas', 'dollar-sign']" />
                  </div>
                  <h2 class="font-bold text-white">Tarificación</h2>
                </div>
                <div class="p-5 space-y-4">
                  <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Tipo de ajuste <span class="text-brand-blue">*</span></label>
                    <select v-model="form.tipo_ajuste" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium" required>
                      <option value="presencial">Presencial</option>
                      <option value="virtual">Virtual</option>
                      <option value="express">Express</option>
                      <option value="alcance">Alcance</option>
                      <option value="vh_reparado">VH Reparado</option>
                      <option value="cambio_taller">Inspección cambio taller</option>
                      <option value="reinspeccion">Re inspección</option>
                      <option value="repetir">Repetir (Tarifa $0)</option>
                      <option value="mal_realizado">Mal realizado (Tarifa $0)</option>
                    </select>
                  </div>
                  
                    <div>
                      <label class="block text-sm font-semibold text-gray-700 mb-1.5 uppercase text-[10px] tracking-widest">Tarifa Ajustador (TARIFAP)</label>
                      <div class="relative">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-brand-blue font-medium">$</span>
                        <input v-model="form.tarifa_ajustador_valor" type="number" step="0.01" class="w-full pl-10 pr-4 py-2.5 bg-blue-50 border border-blue-200 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-bold font-mono text-brand-blue">
                      </div>
                    </div>

                    <div class="p-4 bg-gray-50 border border-gray-200 rounded-xl space-y-4">
                      <label class="flex items-center gap-3 cursor-pointer">
                        <input v-model="form.aplica_kilometraje" type="checkbox" class="w-5 h-5 text-brand-blue rounded focus:ring-brand-blue border-gray-300">
                        <span class="font-semibold text-gray-700">Aplica kilometraje extra</span>
                      </label>
                      
                      <div v-if="form.aplica_kilometraje" class="mt-4 space-y-3 border-t border-gray-200 pt-4">
                        <div>
                          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Valor Kilometraje ($)</label>
                          <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 font-medium text-sm">$</span>
                            <input v-model="form.valor_kilometraje" type="number" step="0.01" class="w-full pl-8 pr-3 py-2 bg-white border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium font-mono">
                          </div>
                        </div>
                      </div>
                    </div>
                    
                    <div class="bg-indigo-600 rounded-xl p-5 shadow-lg">
                      <p class="text-indigo-200 text-xs font-semibold uppercase tracking-wider mb-1">Honorario Perito (TARIFAP + KM)</p>
                      <p class="text-3xl font-black text-white">${{ calculateHonorarioPerito }}</p>
                    </div>

                    <div class="bg-brand-blue rounded-xl p-5 shadow-lg">
                      <p class="text-blue-200 text-xs font-semibold uppercase tracking-wider mb-1">Tarifa Aseguradora Total (BASE + KM)</p>
                      <p class="text-3xl font-black text-white">${{ calculateTotal }}</p>
                    </div>

                    <div class="pt-4 border-t border-gray-100">
                      <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Estado de Pago</label>
                        <select v-model="form.pago_estado" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue transition-all font-medium">
                          <option value="pendiente">Pendiente de pago</option>
                          <option value="pagado">Pagado aseguradora</option>
                          <option value="no_registra">No registra</option>
                        </select>
                      </div>
                    </div>
                </div>
              </div>
            </div>
          </div>

          <!-- BOTONES -->
          <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-5 flex items-center justify-between">
            <Link href="/casos" class="font-semibold text-gray-500 hover:text-gray-700 px-4 py-2 transition-colors">
              <font-awesome-icon :icon="['fas', 'times']" class="mr-2" />Cancelar
            </Link>
            <button type="submit" :disabled="submitting" class="px-6 py-3 bg-brand-blue text-white rounded-xl font-semibold hover:bg-brand-blue transition-colors flex items-center gap-2 shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed">
              <font-awesome-icon v-if="!submitting" :icon="['fas', 'save']" />
              <font-awesome-icon v-else :icon="['fas', 'spinner']" class="fa-spin" />
              {{ submitting ? 'Guardando...' : 'Guardar Caso' }}
            </button>
          </div>

        </form>
      </div>
    </div>
  </AppLayout>
</template>

<style scoped>
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}
</style>
