@extends('layouts.guest')

@section('title', 'Actualización de Datos Contables')

@section('content')
<div class="w-full max-w-xl mx-auto py-6 px-4 sm:px-6">

    @if($estado === 'exito')
        {{-- =========================================================
             ESTADO: ÉXITO (CONFIRMADO SATISFACTORIAMENTE)
             ========================================================= --}}
        <div class="bg-white dark:bg-slate-800 rounded-3xl shadow-xl overflow-hidden border border-emerald-100 dark:border-slate-700 text-center p-8 sm:p-10 transition-all">
            <div class="w-20 h-20 bg-emerald-100 dark:bg-emerald-900/40 text-emerald-600 dark:text-emerald-400 rounded-full flex items-center justify-center mx-auto mb-6 shadow-inner">
                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
                </svg>
            </div>
            
            <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 mb-3">
                <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> Verificación Completada
            </span>

            <h1 class="text-2xl sm:text-3xl font-extrabold text-slate-800 dark:text-white tracking-tight mb-3">
                ¡Muchas Gracias!
            </h1>
            
            <p class="text-slate-600 dark:text-slate-300 text-sm sm:text-base leading-relaxed mb-6">
                Tu información de identificación ha sido validada y registrada con éxito en el sistema contable de <strong class="text-slate-900 dark:text-white">JoinTrust</strong>.
            </p>

            <div class="bg-slate-50 dark:bg-slate-700/50 rounded-2xl p-4 sm:p-5 text-left mb-6 border border-slate-100 dark:border-slate-600 space-y-2 text-xs sm:text-sm">
                <div class="flex justify-between border-b border-slate-200 dark:border-slate-600/60 pb-2">
                    <span class="text-slate-400 font-medium">Titular:</span>
                    <span class="font-bold text-slate-700 dark:text-slate-200">{{ $cliente->nombre_completo }}</span>
                </div>
                <div class="flex justify-between border-b border-slate-200 dark:border-slate-600/60 pb-2">
                    <span class="text-slate-400 font-medium">Documento:</span>
                    <span class="font-bold text-slate-700 dark:text-slate-200">{{ $cliente->tipo_documento }} {{ substr($cliente->numero_documento, 0, 3) }}***{{ substr($cliente->numero_documento, -2) }}</span>
                </div>
                <div class="flex justify-between pt-1">
                    <span class="text-slate-400 font-medium">Estado:</span>
                    <span class="text-emerald-600 dark:text-emerald-400 font-bold flex items-center gap-1">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        Al día para facturación
                    </span>
                </div>
            </div>

            <p class="text-xs text-slate-400 mb-6">
                Este proceso es de única vez. No volverás a recibir recordatorios de actualización en tus pedidos futuros.
            </p>

            <a href="https://wa.me/573127970756" target="_blank"
                class="inline-flex items-center justify-center gap-2 w-full py-3.5 px-6 rounded-2xl bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-sm shadow-lg shadow-emerald-500/20 transition-all transform active:scale-95">
                <span>Continuar a WhatsApp</span>
                <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="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
            </a>
        </div>

    @elseif($estado === 'ya_verificado')
        {{-- =========================================================
             ESTADO: YA ESTÁ VALIDADO (ACCESO POSTERIOR AL ENLACE)
             ========================================================= --}}
        <div class="bg-white dark:bg-slate-800 rounded-3xl shadow-xl overflow-hidden border border-indigo-100 dark:border-slate-700 text-center p-8 sm:p-10">
            <div class="w-20 h-20 bg-indigo-50 dark:bg-indigo-900/40 text-indigo-600 dark:text-indigo-400 rounded-full flex items-center justify-center mx-auto mb-6">
                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                </svg>
            </div>

            <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-300 mb-3">
                Información al día
            </span>

            <h1 class="text-2xl sm:text-3xl font-black text-slate-800 dark:text-white tracking-tight mb-3">
                Hola, {{ $cliente->nombre_completo }} 👋
            </h1>

            <p class="text-slate-600 dark:text-slate-300 text-sm sm:text-base leading-relaxed mb-6">
                Tus datos de identificación ya fueron validados y se encuentran vinculados a tu cuenta para fines de facturación y soporte contable.
            </p>

            <div class="bg-slate-50 dark:bg-slate-700/40 rounded-2xl p-4 text-xs text-slate-500 dark:text-slate-400 border border-slate-100 dark:border-slate-600 mb-6">
                No es necesario que realices ningún cambio adicional. ¡Agradecemos tu confianza en JoinTrust!
            </div>

            <a href="https://wa.me/573127970756" target="_blank"
                class="inline-flex items-center justify-center gap-2 w-full py-3.5 px-6 rounded-2xl bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-sm shadow-lg shadow-indigo-500/20 transition-all">
                Volver a WhatsApp
            </a>
        </div>

    @elseif($estado === 'expirado' || $estado === 'invalido')
        {{-- =========================================================
             ESTADO: ENLACE EXPIRADO O INVÁLIDO
             ========================================================= --}}
        <div class="bg-white dark:bg-slate-800 rounded-3xl shadow-xl overflow-hidden border border-rose-100 dark:border-slate-700 text-center p-8 sm:p-10">
            <div class="w-20 h-20 bg-rose-50 dark:bg-rose-900/30 text-rose-500 rounded-full flex items-center justify-center mx-auto mb-6">
                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
            </div>

            <h1 class="text-2xl font-bold text-slate-800 dark:text-white mb-3">
                Enlace no disponible
            </h1>

            <p class="text-slate-600 dark:text-slate-300 text-sm mb-6 leading-relaxed">
                {{ $mensaje }}
            </p>

            <a href="https://wa.me/573127970756" target="_blank"
                class="inline-flex items-center justify-center gap-2 w-full py-3.5 px-6 rounded-2xl bg-slate-800 hover:bg-slate-900 text-white font-bold text-sm transition-all">
                Solicitar asistencia en WhatsApp
            </a>
        </div>

    @else
        {{-- =========================================================
             ESTADO: FORMULARIO ACTIVO DE CAPTURA DE DATOS
             ========================================================= --}}
        <div class="bg-white dark:bg-slate-800 rounded-3xl shadow-2xl overflow-hidden border border-slate-100 dark:border-slate-700"
             x-data="{
                nombre: '{{ addslashes($cliente->nombre_completo) }}',
                tipoDoc: '{{ $cliente->tipo_documento ?: 'CC' }}',
                numeroDoc: '{{ addslashes($cliente->numero_documento ?: '') }}',
                email: '{{ addslashes($cliente->email ?: '') }}',
                indicativo: '{{ (str_starts_with($cliente->telefono, "+") ? substr($cliente->telefono, 0, 3) : "+57") }}',
                telefono: '{{ addslashes(str_starts_with($cliente->telefono, "+57") ? substr($cliente->telefono, 3) : (str_starts_with($cliente->telefono, "57") && strlen($cliente->telefono) > 10 ? substr($cliente->telefono, 2) : $cliente->telefono)) }}',
                direccion: '{{ addslashes($direccion?->direccion ?: '') }}',
                detalles: '{{ addslashes($direccion?->detalles ?: '') }}',
                mostrarSegundaDireccion: false,
                direccionSecundaria: '',
                detallesSecundaria: '',
                autoriza: false,
                mostrarPolitica: false,
                isSubmitting: false
             }">

            <!-- Encabezado con Identidad JoinTrust -->
            <div class="bg-gradient-to-r from-red-600 via-rose-600 to-pink-600 p-6 sm:p-8 text-white relative overflow-hidden">
                <div class="absolute -right-8 -top-8 w-36 h-36 bg-white/10 rounded-full blur-xl pointer-events-none"></div>
                <div class="flex items-center gap-3 mb-2">
                    <span class="inline-flex items-center justify-center w-8 h-8 rounded-xl bg-white/20 text-white font-black text-sm backdrop-blur-sm">
                        JT
                    </span>
                    <span class="text-xs font-bold uppercase tracking-wider text-white/90">
                        JoinTrust • Área de Contabilidad
                    </span>
                </div>
                <h1 class="text-2xl sm:text-3xl font-black tracking-tight text-white mb-2">
                    Actualización de Datos
                </h1>
                <p class="text-rose-100 text-xs sm:text-sm leading-relaxed max-w-md">
                    Hola <strong class="text-white">{{ $cliente->nombre_completo }}</strong>. Nos encontramos haciendo ajustes en nuestra contabilidad. Te agradecemos nos apoyes actualizando tu información.
                </p>
            </div>

            <!-- Cuerpo del Formulario -->
            <form action="{{ route('clientes.actualizar_datos.update', $token) }}" method="POST" @submit="isSubmitting = true" class="p-6 sm:p-8 space-y-5">
                @csrf

                @if($errors->any())
                    <div class="p-4 bg-rose-50 dark:bg-rose-900/30 border border-rose-200 dark:border-rose-800 text-rose-700 dark:text-rose-300 rounded-2xl text-xs sm:text-sm space-y-1">
                        <div class="font-bold flex items-center gap-2">
                            <svg class="w-4 h-4 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
                            Por favor corrige los siguientes datos:
                        </div>
                        <ul class="list-disc pl-5">
                            @foreach($errors->all() as $err)
                                <li>{{ $err }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <!-- Nombre Completo / Razón Social -->
                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5">
                        Nombre Completo o Razón Social <span class="text-rose-500">*</span>
                    </label>
                    <input type="text" name="nombre_completo" x-model="nombre" required
                        class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-white font-medium focus:ring-2 focus:ring-rose-500 focus:border-rose-500 outline-none transition text-sm">
                </div>

                <!-- Tipo y Número de Documento (Grid) -->
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div class="sm:col-span-1">
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5">
                            Tipo Doc. <span class="text-rose-500">*</span>
                        </label>
                        <select name="tipo_documento" x-model="tipoDoc" required
                            class="w-full px-3 py-3 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-white font-medium focus:ring-2 focus:ring-rose-500 focus:border-rose-500 outline-none transition text-sm">
                            <option value="CC">Cédula (CC)</option>
                            <option value="NIT">NIT / Empresa</option>
                            <option value="CE">Cédula Ext. (CE)</option>
                            <option value="PASAPORTE">Pasaporte</option>
                            <option value="PPT">Permiso PPT</option>
                        </select>
                    </div>

                    <div class="sm:col-span-2">
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5">
                            Número de Documento <span class="text-rose-500">*</span>
                        </label>
                        <input type="text" name="numero_documento" x-model="numeroDoc" required
                            placeholder="Ej: 1020304050"
                            class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-white font-medium focus:ring-2 focus:ring-rose-500 focus:border-rose-500 outline-none transition text-sm">
                    </div>
                </div>

                <!-- Correo Electrónico -->
                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5">
                        Correo Electrónico
                    </label>
                    <input type="email" name="email" x-model="email"
                        placeholder="ejemplo@correo.com"
                        class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-white font-medium focus:ring-2 focus:ring-rose-500 focus:border-rose-500 outline-none transition text-sm">
                </div>

                <!-- Teléfono Celular / WhatsApp con Indicativo Internacional -->
                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5">
                        Número de Teléfono / WhatsApp
                    </label>
                    <div class="grid grid-cols-3 sm:grid-cols-4 gap-2">
                        <div class="col-span-1">
                            <input type="text" name="indicativo" x-model="indicativo" placeholder="+57"
                                class="w-full px-3 py-3 text-center rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-white font-bold focus:ring-2 focus:ring-rose-500 focus:border-rose-500 outline-none transition text-sm"
                                title="Indicativo internacional de país (ej. +57, +1, +34, +58)">
                        </div>
                        <div class="col-span-2 sm:col-span-3">
                            <input type="tel" name="telefono" x-model="telefono" placeholder="3001234567"
                                class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-white font-medium focus:ring-2 focus:ring-rose-500 focus:border-rose-500 outline-none transition text-sm">
                        </div>
                    </div>
                    <span class="text-[10px] text-slate-400 dark:text-slate-500 mt-1 block">Puedes cambiar el indicativo si tu número es de otro país (ej: +1 EE.UU, +34 España, +58 Venezuela).</span>
                </div>

                <!-- Direcciones Registradas de Entrega (Validación Integral) -->
                <div class="space-y-4 pt-1">
                    <div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-700/60 pb-2">
                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 dark:text-slate-300">
                                📍 Direcciones Registradas de Entrega
                            </label>
                            <span class="text-[10px] text-slate-400 font-medium">Revisa o ajusta tus puntos de entrega habituales</span>
                        </div>
                        <span class="text-[10px] font-bold px-2 py-0.5 rounded-full bg-rose-50 dark:bg-rose-950/40 text-rose-600 dark:text-rose-400 border border-rose-200/50">
                            {{ isset($direcciones) && $direcciones->count() > 0 ? $direcciones->count() . ($direcciones->count() === 1 ? ' Dirección' : ' Direcciones') : '1 Dirección' }}
                        </span>
                    </div>

                    @if(isset($direcciones) && $direcciones->count() > 0)
                        <!-- Lista de Direcciones Existentes -->
                        <div class="space-y-3">
                            @foreach($direcciones as $idx => $dir)
                                <div class="p-3.5 sm:p-4 rounded-2xl border transition-all {{ $dir->es_principal ? 'bg-rose-50/40 dark:bg-rose-950/20 border-rose-200/80 dark:border-rose-800/50 shadow-2xs' : 'bg-slate-50 dark:bg-slate-700/40 border-slate-200 dark:border-slate-600' }}">
                                    <div class="flex items-center justify-between mb-2">
                                        <div class="flex items-center gap-2">
                                            <span class="w-5 h-5 rounded-lg flex items-center justify-center text-[10px] font-black {{ $dir->es_principal ? 'bg-rose-500 text-white' : 'bg-slate-300 dark:bg-slate-600 text-slate-700 dark:text-slate-200' }}">
                                                {{ $idx + 1 }}
                                            </span>
                                            <span class="text-[11px] font-extrabold uppercase tracking-wider {{ $dir->es_principal ? 'text-rose-700 dark:text-rose-400' : 'text-slate-600 dark:text-slate-300' }}">
                                                {{ $dir->es_principal ? 'Dirección Principal' : 'Dirección Adicional' }}
                                            </span>
                                        </div>
                                        @if($dir->es_principal)
                                            <span class="px-2 py-0.5 rounded-full text-[9px] font-black uppercase tracking-wider bg-rose-600 text-white shadow-2xs">
                                                ★ Principal
                                            </span>
                                        @else
                                            <span class="px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider bg-slate-200 dark:bg-slate-600 text-slate-600 dark:text-slate-300">
                                                Secundaria
                                            </span>
                                        @endif
                                    </div>

                                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-2.5">
                                        <div class="sm:col-span-2">
                                            <label class="block text-[9px] font-bold uppercase tracking-widest text-slate-400 mb-1">
                                                Dirección / Nomenclatura
                                            </label>
                                            <input type="text" 
                                                name="direcciones_existentes[{{ $dir->id }}][direccion]" 
                                                value="{{ $dir->direccion }}"
                                                placeholder="Ej: Calle 127 # 15-32"
                                                class="w-full px-3 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-800 dark:text-white font-medium focus:ring-2 focus:ring-rose-500 focus:border-rose-500 outline-none transition text-xs sm:text-sm">
                                        </div>
                                        <div class="sm:col-span-1">
                                            <label class="block text-[9px] font-bold uppercase tracking-widest text-slate-400 mb-1">
                                                Apto / Torre / Detalle
                                            </label>
                                            <input type="text" 
                                                name="direcciones_existentes[{{ $dir->id }}][detalles]" 
                                                value="{{ $dir->detalles }}"
                                                placeholder="Apto / Casa"
                                                class="w-full px-3 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-800 dark:text-white font-medium focus:ring-2 focus:ring-rose-500 focus:border-rose-500 outline-none transition text-xs sm:text-sm">
                                        </div>
                                    </div>

                                    @if($dir->barrio)
                                        <div class="mt-2 flex items-center gap-1.5 text-[10px] text-slate-500 dark:text-slate-400">
                                            <svg class="w-3 h-3 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path></svg>
                                            <span>Barrio: <strong>{{ $dir->barrio }}</strong></span>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @else
                        <!-- Fallback si no tiene direcciones previas registradas -->
                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                            <div class="sm:col-span-2">
                                <label class="block text-[9px] font-bold uppercase tracking-widest text-slate-400 mb-1">Dirección Principal</label>
                                <input type="text" name="direccion" x-model="direccion"
                                    placeholder="Ej: Calle 127 # 15-32"
                                    class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-white font-medium focus:ring-2 focus:ring-rose-500 focus:border-rose-500 outline-none transition text-sm">
                            </div>
                            <div class="sm:col-span-1">
                                <label class="block text-[9px] font-bold uppercase tracking-widest text-slate-400 mb-1">Apto / Torre</label>
                                <input type="text" name="detalles" x-model="detalles"
                                    placeholder="Apto / Torre / Casa"
                                    class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-white font-medium focus:ring-2 focus:ring-rose-500 focus:border-rose-500 outline-none transition text-sm">
                            </div>
                        </div>
                    @endif

                    <!-- Botón para alternar agregar NUEVA dirección adicional -->
                    <div class="pt-1">
                        <button type="button" @click="mostrarSegundaDireccion = !mostrarSegundaDireccion"
                            class="inline-flex items-center gap-1.5 text-xs font-bold text-rose-600 dark:text-rose-400 hover:text-rose-700 dark:hover:text-rose-300 transition-colors">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path x-show="!mostrarSegundaDireccion" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                                <path x-show="mostrarSegundaDireccion" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                            <span x-text="mostrarSegundaDireccion ? 'Ocultar formulario de nueva dirección' : '+ ¿Deseas agregar otra dirección adicional (Oficina, Casa, Familiar)?'"></span>
                        </button>
                    </div>

                    <!-- Campos de Nueva Dirección Adicional -->
                    <div x-show="mostrarSegundaDireccion" x-cloak x-transition
                        class="p-4 bg-slate-50 dark:bg-slate-700/40 rounded-2xl border border-dashed border-rose-300 dark:border-rose-700 space-y-3">
                        <span class="block text-[11px] font-bold uppercase tracking-wider text-rose-700 dark:text-rose-400">
                            ➕ Registrar Nueva Dirección Adicional
                        </span>
                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                            <div class="sm:col-span-2">
                                <input type="text" name="nueva_direccion" x-model="direccionSecundaria"
                                    placeholder="Ej: Cra 7 # 72-13"
                                    class="w-full px-3 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-800 dark:text-white font-medium text-xs focus:ring-2 focus:ring-rose-500 outline-none">
                            </div>
                            <div class="sm:col-span-1">
                                <input type="text" name="nuevos_detalles" x-model="detallesSecundaria"
                                    placeholder="Oficina / Piso"
                                    class="w-full px-3 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-800 dark:text-white font-medium text-xs focus:ring-2 focus:ring-rose-500 outline-none">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Aceptación Habeas Data (Ley 1581 de 2012) -->
                <div class="pt-2 border-t border-slate-100 dark:border-slate-700">
                    <label class="flex items-start gap-3 cursor-pointer group">
                        <input type="checkbox" name="autoriza_tratamiento_datos" value="1" x-model="autoriza" required
                            class="mt-1 w-4 h-4 text-rose-600 rounded border-slate-300 focus:ring-rose-500 dark:border-slate-600 dark:bg-slate-700 transition">
                        <span class="text-xs text-slate-600 dark:text-slate-300 leading-relaxed select-none">
                            Autorizo de manera previa, expresa e informada a <strong>JoinTrust</strong> para el tratamiento de mis datos personales con fines de facturación, emisión de soportes contables y cumplimiento tributario, en cumplimiento de la <strong>Ley 1581 de 2012</strong>.
                            <button type="button" @click="mostrarPolitica = !mostrarPolitica" class="text-rose-600 dark:text-rose-400 underline font-medium hover:text-rose-700 ml-1">
                                Ver términos legales
                            </button>
                        </span>
                    </label>

                    <!-- Desplegable Informativo de Política de Datos -->
                    <div x-show="mostrarPolitica" x-cloak x-transition class="mt-3 p-4 bg-slate-50 dark:bg-slate-700/50 rounded-2xl text-[11px] text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-slate-600 space-y-2 leading-relaxed">
                        <p class="font-bold text-slate-700 dark:text-slate-200">
                            🛡️ Política de Tratamiento de Datos Personales (JoinTrust)
                        </p>
                        <p>
                            Los datos suministrados serán almacenados de forma segura y utilizados exclusivamente para la individualización tributaria, facturación de pedidos y gestión administrativa contable.
                        </p>
                        <p>
                            Como titular de la información, usted tiene derecho a conocer, actualizar, rectificar y suprimir sus datos en cualquier momento comunicándose a nuestra línea de atención directa en WhatsApp o correo electrónico institucional.
                        </p>
                    </div>
                </div>

                <!-- Botón de Envío -->
                <div class="pt-2">
                    <button type="submit" :disabled="!autoriza || isSubmitting"
                        :class="(!autoriza || isSubmitting) ? 'opacity-50 cursor-not-allowed bg-slate-400' : 'bg-gradient-to-r from-red-600 to-rose-600 hover:from-red-700 hover:to-rose-700 shadow-lg shadow-rose-500/25 active:scale-[0.98]'"
                        class="w-full py-4 px-6 rounded-2xl text-white font-extrabold text-sm sm:text-base transition-all flex items-center justify-center gap-2">
                        <span x-show="!isSubmitting">Confirmar y Guardar Información</span>
                        <span x-show="isSubmitting" class="flex items-center gap-2">
                            <svg class="animate-spin w-5 h-5 text-white" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
                            Guardando datos...
                        </span>
                    </button>
                </div>
            </form>

            <!-- Pie de Seguridad -->
            <div class="px-6 py-4 bg-slate-50 dark:bg-slate-700/30 border-t border-slate-100 dark:border-slate-700 text-center text-[11px] text-slate-400 flex items-center justify-center gap-2">
                <svg class="w-4 h-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path></svg>
                <span>Conexión cifrada de extremo a extremo • JoinTrust Colombia</span>
            </div>
        </div>
    @endif

</div>
@endsection