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

const props = defineProps({
  title: String,
  ajustadores: { type: Object, default: () => ({ data: [] }) },
  tipos: { type: Array, default: () => [] },
  filtros: { type: Object, default: () => ({}) },
  ajustador_password: String,
  ajustador_email: String,
});

const showModal = ref(false);
const showPasswordModal = ref(false);
const newAjustadorCredentials = ref({ email: '', password: '' });
const editingId = ref(null);
const search = ref(props.filtros.search || '');
const filterTipo = ref(props.filtros.tipo || '');

watch(() => props.ajustador_password, (val) => {
  if (val) {
    newAjustadorCredentials.value = {
      email: props.ajustador_email,
      password: val,
    };
    showPasswordModal.value = true;
  }
});

const form = useForm({
  ruc: '',
  nombre: '',
  tipo: 'liviano',
  telefono: '',
  email: '',
  ciudad: '',
  tarifa_dp: 0,
  tarifa_rc: 0,
  tarifas: [
    { tipo: 'liviano', valor: 0 },
    { tipo: 'pesado', valor: 0 },
    { tipo: 'express', valor: 0 },
    { tipo: 'virtual', valor: 0 },
    { tipo: 'particular', valor: 0 },
  ],
});

const tiposLabels = {
  liviano: 'Liviano',
  pesado: 'Pesado',
  express: 'Express',
  virtual: 'Virtual',
  particular: 'Particular',
};

function openCreate() {
  form.reset();
  form.tarifas = [
    { tipo: 'liviano', valor: 0 },
    { tipo: 'pesado', valor: 0 },
    { tipo: 'express', valor: 0 },
    { tipo: 'virtual', valor: 0 },
    { tipo: 'particular', valor: 0 },
  ];
  editingId.value = null;
  showModal.value = true;
}

function openEdit(a) {
  editingId.value = a.id;
  form.ruc = a.ruc;
  form.nombre = a.nombre;
  form.tipo = a.tipo || 'liviano';
  form.telefono = a.telefono || '';
  form.email = a.email || '';
  form.ciudad = a.ciudad || '';
  form.tarifa_dp = a.tarifa_dp || 0;
  form.tarifa_rc = a.tarifa_rc || 0;
  
  // Mix existing tariffs with defaults to ensure all types are present
  const baseTarifas = [
    { tipo: 'liviano', valor: 0 },
    { tipo: 'pesado', valor: 0 },
    { tipo: 'express', valor: 0 },
    { tipo: 'virtual', valor: 0 },
    { tipo: 'particular', valor: 0 },
  ];
  
  if (a.tarifas && a.tarifas.length > 0) {
    form.tarifas = baseTarifas.map(bt => {
      const match = a.tarifas.find(t => t.tipo_vehiculo === bt.tipo);
      return { tipo: bt.tipo, valor: match ? match.valor : 0 };
    });
  } else {
    form.tarifas = baseTarifas;
  }
  
  showModal.value = true;
}

function submit() {
  if (editingId.value) {
    form.put(route('ajustadores.update', editingId.value), {
      onSuccess: () => { showModal.value = false; },
    });
  } else {
    form.post(route('ajustadores.store'), {
      onSuccess: () => { showModal.value = false; },
    });
  }
}

function destroy(id) {
  if (confirm('¿Está seguro de eliminar este ajustador?')) {
    router.delete(route('ajustadores.destroy', id));
  }
}

function resetPassword(id) {
  if (confirm('¿Generar nueva contraseña para este ajustador?')) {
    router.post(route('ajustadores.reset-password', id));
  }
}

function doSearch() {
  router.get(route('ajustadores.index'), { 
    search: search.value,
    tipo: filterTipo.value 
  }, { preserveState: true });
}

// Stats
const totalAjustadores = computed(() => props.ajustadores.data.length);
const topTipo = computed(() => {
    if (!props.ajustadores.data.length) return '-';
    const counts = props.ajustadores.data.reduce((acc, a) => {
        acc[a.tipo] = (acc[a.tipo] || 0) + 1;
        return acc;
    }, {});
    return Object.entries(counts).sort((a, b) => b[1] - a[1])[0][0];
});
</script>

<template>
  <Head :title="title" />

  <AppLayout :title="title">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <!-- Header Premium -->
      <div class="mb-10 flex flex-col md:flex-row md:items-end justify-between gap-6">
        <div>
          <span class="text-xs font-bold uppercase tracking-widest text-primary-600 mb-2 block">Catálogos del Sistema</span>
          <h1 class="text-4xl font-extrabold text-slate-900 tracking-tight">Ajustadores <span class="text-slate-400 font-light">de Siniestros</span></h1>
          <p class="text-slate-500 mt-2 max-w-xl">Gestión centralizada de peritos ajustadores, asignación de zonas y configuración de tarifas por tipo de vehículo.</p>
        </div>

        <button @click="openCreate" class="group relative px-8 py-3 bg-slate-900 text-white rounded-2xl font-bold overflow-hidden transition-all hover:pr-12 shadow-xl shadow-slate-200">
            <span class="relative z-10">Nuevo Ajustador</span>
            <svg class="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 opacity-0 group-hover:opacity-100 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
            </svg>
        </button>
      </div>

      <!-- Stats Cards Row -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-10">
        <div v-for="(stat, idx) in [
            { label: 'Total Registros', val: totalAjustadores, icon: 'Users', color: 'blue' },
            { label: 'Tipo Predominante', val: tiposLabels[topTipo] || '-', icon: 'Star', color: 'amber' },
            { label: 'Zonas Cubiertas', val: '5', icon: 'Map', color: 'emerald' },
            { label: 'Tarifa Promedio', val: '$45.00', icon: 'DollarSign', color: 'indigo' }
        ]" :key="idx" class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
            <div class="flex items-center gap-4">
                <div :class="`w-12 h-12 rounded-2xl bg-${stat.color}-50 flex items-center justify-center text-${stat.color}-600`">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path v-if="stat.icon === 'Users'" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                        <path v-if="stat.icon === 'Star'" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.382-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                        <path v-if="stat.icon === 'Map'" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-1.447-.894L15 9m0 8V9m0 0l-6-2" />
                        <path v-if="stat.icon === 'DollarSign'" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <div>
                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ stat.label }}</p>
                    <p class="text-xl font-bold text-slate-900">{{ stat.val }}</p>
                </div>
            </div>
        </div>
      </div>

      <!-- Filters & Search -->
      <div class="flex flex-col md:flex-row items-center gap-4 mb-8 bg-slate-50/50 p-4 rounded-2xl border border-slate-100">
        <div class="relative flex-1 group">
          <input 
            v-model="search" 
            @keyup.enter="doSearch"
            type="text" 
            placeholder="Buscar por RUC, nombre o ciudad..."
            class="w-full pl-12 pr-4 py-3 bg-white border-transparent rounded-xl text-sm focus:ring-2 focus:ring-primary-500 focus:bg-white transition-all shadow-sm group-hover:shadow-md"
          />
          <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </div>
        
        <select v-model="filterTipo" @change="doSearch" class="px-4 py-3 bg-white border-transparent rounded-xl text-sm focus:ring-2 focus:ring-primary-500 shadow-sm min-w-[150px]">
          <option value="">Todos los tipos</option>
          <option v-for="t in tipos" :key="t" :value="t">{{ tiposLabels[t] }}</option>
        </select>

        <button @click="doSearch" class="px-6 py-3 bg-slate-800 text-white rounded-xl text-sm font-bold hover:bg-slate-900 transition-colors">Filtrar</button>
      </div>

      <!-- Main Grid/Table -->
      <div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-xl overflow-hidden glass-morphism hidden md:block">
        <table class="w-full text-left border-collapse">
          <thead>
            <tr class="bg-slate-50/50">
              <th class="px-8 py-5 text-xs font-bold text-slate-400 uppercase tracking-widest border-b border-slate-100">Ajustador</th>
              <th class="px-8 py-5 text-xs font-bold text-slate-400 uppercase tracking-widest border-b border-slate-100">Identificación</th>
              <th class="px-8 py-5 text-xs font-bold text-slate-400 uppercase tracking-widest border-b border-slate-100">Contacto</th>
              <th class="px-8 py-5 text-xs font-bold text-slate-400 uppercase tracking-widest border-b border-slate-100 text-center">Acciones</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-slate-50">
            <tr v-for="a in ajustadores.data" :key="a.id" class="group hover:bg-primary-50/30 transition-colors">
              <td class="px-8 py-6">
                <div class="flex items-center gap-4">
                    <div class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 font-bold text-xs uppercase group-hover:bg-primary-600 group-hover:text-white transition-colors">
                        {{ a.nombre.substring(0, 2) }}
                    </div>
                    <div>
                        <p class="font-bold text-slate-900 leading-tight">{{ a.nombre }}</p>
                        <p class="text-xs text-slate-400 mt-1">{{ a.ciudad || 'Sin ciudad' }}</p>
                    </div>
                </div>
              </td>
              <td class="px-8 py-6">
                <p class="text-sm font-mono text-slate-600">{{ a.ruc }}</p>
                <p class="text-[10px] text-slate-400 uppercase font-bold tracking-tighter mt-1">{{ a.codigo_sistema }}</p>
              </td>
              <td class="px-8 py-6">
                <div class="flex flex-col gap-1">
                    <div class="flex items-center gap-2 text-sm text-slate-600">
                        <svg class="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                        {{ a.email || '—' }}
                    </div>
                    <div class="flex items-center gap-2 text-sm text-slate-600">
                        <svg class="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                        {{ a.telefono || '—' }}
                    </div>
                </div>
              </td>
              <td class="px-8 py-6 text-center">
                <div class="flex items-center justify-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                    <button @click="openEdit(a)" class="p-2 bg-slate-50 text-slate-600 rounded-lg hover:bg-primary-600 hover:text-white transition-all">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                    </button>
                    <button @click="resetPassword(a.id)" class="p-2 bg-slate-50 text-amber-600 rounded-lg hover:bg-amber-600 hover:text-white transition-all" title="Generar contraseña">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg>
                    </button>
                    <button @click="destroy(a.id)" class="p-2 bg-slate-50 text-red-600 rounded-lg hover:bg-red-600 hover:text-white transition-all">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                    </button>
                </div>
              </td>
            </tr>
            <tr v-if="!ajustadores.data.length">
                <td colspan="5" class="px-8 py-20 text-center">
                    <div class="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-10 h-10 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>
                    </div>
                    <p class="text-slate-400 font-medium">No se encontraron ajustadores que coincidan con la búsqueda.</p>
                </td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <!-- Mobile Cards -->
      <div class="md:hidden space-y-3">
        <template v-if="ajustadores.data.length > 0">
          <div v-for="a in ajustadores.data" :key="a.id" class="bg-white rounded-2xl border border-slate-100 shadow-sm p-4 space-y-3">
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 font-bold text-xs uppercase flex-shrink-0">
                {{ a.nombre.substring(0, 2) }}
              </div>
              <div class="min-w-0 flex-1">
                <p class="font-bold text-slate-900 text-sm truncate">{{ a.nombre }}</p>
                <p class="text-[10px] text-slate-400">{{ a.ciudad || 'Sin ciudad' }}</p>
              </div>
            </div>
            <div class="text-xs">
              <span class="text-[9px] text-slate-400 font-bold uppercase block">Identificación</span>
              <p class="font-mono text-slate-700">{{ a.ruc }}</p>
              <p class="text-[10px] text-slate-400 uppercase font-bold">{{ a.codigo_sistema }}</p>
            </div>
            <div class="text-xs space-y-1">
              <div class="flex items-center gap-2 text-slate-600">
                <svg class="w-3 h-3 text-slate-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                <span class="truncate">{{ a.email || '—' }}</span>
              </div>
              <div class="flex items-center gap-2 text-slate-600">
                <svg class="w-3 h-3 text-slate-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                <span>{{ a.telefono || '—' }}</span>
              </div>
            </div>
            <div class="flex items-center justify-end gap-2 pt-2 border-t border-slate-50">
              <button @click="openEdit(a)" class="p-2 bg-slate-50 text-slate-600 rounded-lg hover:bg-primary-600 hover:text-white transition-all">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
              </button>
              <button @click="resetPassword(a.id)" class="p-2 bg-slate-50 text-amber-600 rounded-lg hover:bg-amber-600 hover:text-white transition-all" title="Generar contraseña">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg>
              </button>
              <button @click="destroy(a.id)" class="p-2 bg-slate-50 text-red-600 rounded-lg hover:bg-red-600 hover:text-white transition-all">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
              </button>
            </div>
          </div>
        </template>
        <div v-else class="bg-white rounded-2xl border border-slate-100 shadow-sm p-8 text-center">
          <p class="text-slate-400 font-medium">No se encontraron ajustadores.</p>
        </div>
      </div>
      
      <!-- Pagination Placeholder -->
      <div class="mt-8 flex justify-between items-center px-4">
        <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">Mostrando {{ ajustadores.data.length }} registros</p>
      </div>
    </div>

    <!-- Modal Premium -->
    <div v-if="showModal" class="fixed inset-0 z-[100] overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4 py-8">
            <div @click="showModal = false" class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity"></div>
            
            <div class="relative bg-white w-full max-w-2xl rounded-[2.5rem] shadow-2xl overflow-hidden glass-morphism border border-white/20">
                <div class="px-10 py-8 border-b border-slate-50 flex items-center justify-between bg-slate-50/30">
                    <div>
                        <h3 class="text-2xl font-black text-slate-900 tracking-tight">{{ editingId ? 'Actualizar' : 'Registrar' }} Ajustador</h3>
                        <p class="text-xs text-slate-400 font-bold uppercase tracking-widest mt-1">Configuración técnica y tarifario</p>
                    </div>
                    <button @click="showModal = false" class="w-10 h-10 rounded-full bg-white shadow-sm flex items-center justify-center text-slate-400 hover:text-slate-900 transition-colors">✕</button>
                </div>

                <form @submit.prevent="submit" class="p-10 space-y-8">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div class="space-y-6">
                            <h4 class="text-[10px] font-black text-primary-600 uppercase tracking-[0.2em]">Información General</h4>
                            
                            <div>
                                <label class="form-label text-[10px] font-bold uppercase text-slate-400 mb-2 block">Nombre Completo *</label>
                                <input v-model="form.nombre" type="text" class="w-full px-5 py-3 bg-slate-50 border-transparent rounded-2xl text-sm focus:ring-2 focus:ring-primary-500 focus:bg-white transition-all" required />
                            </div>

                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="form-label text-[10px] font-bold uppercase text-slate-400 mb-2 block">RUC/Cédula *</label>
                                    <input v-model="form.ruc" type="text" class="w-full px-5 py-3 bg-slate-50 border-transparent rounded-2xl text-sm focus:ring-2 focus:ring-primary-500 focus:bg-white transition-all" required />
                                </div>
                                <div>
                                    <label class="form-label text-[10px] font-bold uppercase text-slate-400 mb-2 block">Ciudad Base</label>
                                    <input v-model="form.ciudad" type="text" class="w-full px-5 py-3 bg-slate-50 border-transparent rounded-2xl text-sm focus:ring-2 focus:ring-primary-500 focus:bg-white transition-all" />
                                </div>
                            </div>

                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="form-label text-[10px] font-bold uppercase text-slate-400 mb-2 block">Email</label>
                                    <input v-model="form.email" type="email" class="w-full px-5 py-3 bg-slate-50 border-transparent rounded-2xl text-sm focus:ring-2 focus:ring-primary-500 focus:bg-white transition-all" />
                                </div>
                                <div>
                                    <label class="form-label text-[10px] font-bold uppercase text-slate-400 mb-2 block">Teléfono</label>
                                    <input v-model="form.telefono" type="text" class="w-full px-5 py-3 bg-slate-50 border-transparent rounded-2xl text-sm focus:ring-2 focus:ring-primary-500 focus:bg-white transition-all" />
                                </div>
                            </div>
                        </div>

                        <div class="space-y-6">
                            <h4 class="text-[10px] font-black text-primary-600 uppercase tracking-[0.2em]">Tarifario por Tipo de Ajuste</h4>
                            
                            <div class="bg-indigo-50/50 p-6 rounded-3xl border border-indigo-100 space-y-4">
                                <div class="flex items-center justify-between gap-4 py-2">
                                    <span class="text-xs font-bold text-indigo-700 uppercase tracking-wider">Tarifa DP (Daños Propios)</span>
                                    <div class="relative w-32">
                                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-indigo-400 text-xs">$</span>
                                        <input v-model="form.tarifa_dp" type="number" step="0.01" class="w-full pl-7 pr-3 py-2 bg-white border-transparent rounded-xl text-xs font-bold focus:ring-2 focus:ring-indigo-500 shadow-sm transition-all" />
                                    </div>
                                </div>
                                <div class="flex items-center justify-between gap-4 py-2">
                                    <span class="text-xs font-bold text-indigo-700 uppercase tracking-wider">Tarifa RC (Resp. Civil)</span>
                                    <div class="relative w-32">
                                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-indigo-400 text-xs">$</span>
                                        <input v-model="form.tarifa_rc" type="number" step="0.01" class="w-full pl-7 pr-3 py-2 bg-white border-transparent rounded-xl text-xs font-bold focus:ring-2 focus:ring-indigo-500 shadow-sm transition-all" />
                                    </div>
                                </div>
                            </div>

                            <h4 class="text-[10px] font-black text-primary-600 uppercase tracking-[0.2em]">Tarifas por Tipo Vehículo (Legacy)</h4>
                            
                            <div class="bg-slate-50/50 p-6 rounded-3xl border border-slate-100 space-y-2 max-h-48 overflow-y-auto">
                                <div v-for="t in form.tarifas" :key="t.tipo" class="flex items-center justify-between gap-4 py-1">
                                    <span class="text-[10px] font-bold text-slate-500 uppercase">{{ tiposLabels[t.tipo] }}</span>
                                    <div class="relative w-24">
                                        <span class="absolute left-2 top-1/2 -translate-y-1/2 text-slate-400 text-[10px]">$</span>
                                        <input v-model="t.valor" type="number" step="0.01" class="w-full pl-5 pr-2 py-1 bg-white border-transparent rounded-lg text-[10px] font-bold focus:ring-2 focus:ring-primary-500 shadow-sm" />
                                    </div>
                                </div>
                            </div>
                            <div class="p-4 bg-primary-50 rounded-2xl border border-primary-100">
                                <p class="text-[10px] text-primary-700 font-medium leading-relaxed italic">
                                    * Estas tarifas se aplicarán automáticamente al asignar este ajustador a un caso según el tipo de vehículo.
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-end gap-4 pt-8 border-t border-slate-50">
                        <button type="button" @click="showModal = false" class="px-8 py-3 text-sm font-bold text-slate-400 uppercase tracking-widest hover:text-slate-900 transition-colors">Cerrar</button>
                        <button type="submit" :disabled="form.processing" class="px-10 py-3 bg-slate-900 text-white rounded-2xl font-bold uppercase text-[10px] tracking-widest hover:bg-slate-800 disabled:opacity-50 shadow-xl shadow-slate-200 transition-all active:scale-95">
                            {{ form.processing ? 'Sincronizando...' : (editingId ? 'Actualizar Ajustador' : 'Guardar Ajustador') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Password Modal -->
    <div v-if="showPasswordModal" class="fixed inset-0 z-[100] overflow-y-auto">
      <div @click="showPasswordModal = false" class="fixed inset-0 bg-slate-900/60 backdrop-blur-md transition-opacity"></div>
      <div class="relative min-h-screen flex items-center justify-center p-4">
        <div class="relative bg-white rounded-3xl shadow-2xl max-w-md w-full overflow-hidden">
          <div class="p-8 text-center">
            <div class="w-16 h-16 rounded-full bg-emerald-100 flex items-center justify-center mx-auto mb-4">
              <svg class="w-8 h-8 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
            <h3 class="text-xl font-bold text-slate-900 mb-2">Credenciales del Ajustador</h3>
            <p class="text-slate-500 mb-6">Guarda estas credenciales. Se mostrarán solo una vez.</p>
            
            <div class="bg-slate-50 rounded-xl p-4 space-y-3 text-left">
              <div>
                <p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-1">Email</p>
                <p class="text-sm font-semibold text-slate-700">{{ newAjustadorCredentials.email }}</p>
              </div>
              <div>
                <p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-1">Contraseña</p>
                <div class="flex items-center gap-2">
                  <code class="flex-1 bg-white px-3 py-2 rounded-lg border border-slate-200 text-sm font-mono font-bold text-slate-800">{{ newAjustadorCredentials.password }}</code>
                  <button @click="navigator.clipboard.writeText(newAjustadorCredentials.password)" class="p-2 text-slate-400 hover:text-blue-600 transition-colors" title="Copiar">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
                  </button>
                </div>
              </div>
            </div>

            <div class="mt-4 p-3 bg-blue-50 rounded-xl border border-blue-100">
              <p class="text-xs text-blue-700">
                <strong>Login:</strong> <a :href="route('ajustador.login')" target="_blank" class="underline hover:text-blue-800">{{ route('ajustador.login') }}</a>
              </p>
            </div>
          </div>
          <div class="p-6 border-t border-slate-100 bg-slate-50">
            <button @click="showPasswordModal = false" class="w-full px-6 py-3 bg-slate-900 text-white font-bold rounded-xl hover:bg-slate-800 transition-colors">
              Entendido
            </button>
          </div>
        </div>
      </div>
    </div>
  </AppLayout>
</template>

<style scoped>
.glass-morphism {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
</style>

