292 lines
20 KiB
PHP
292 lines
20 KiB
PHP
<div>
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
|
<svg class="w-7 h-7 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<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>
|
|
Lector de Correo — IMAP
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
|
|
|
|
{{-- ── Formulario de configuración ─────────────────── --}}
|
|
<div class="bg-white rounded-2xl shadow p-6">
|
|
<h2 class="text-lg font-semibold text-gray-700 mb-4 flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
</svg>
|
|
Configuración del servidor
|
|
</h2>
|
|
|
|
<form wire:submit.prevent="save" class="space-y-4">
|
|
|
|
{{-- Host y puerto --}}
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<div class="col-span-2">
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Servidor IMAP *</label>
|
|
<input wire:model="correo_imap_host" type="text"
|
|
placeholder="imap.gmail.com / imap.outlook.com"
|
|
class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
|
|
@error('correo_imap_host') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Puerto *</label>
|
|
<input wire:model="correo_imap_port" type="number" min="1" max="65535"
|
|
class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
|
|
@error('correo_imap_port') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
|
|
</div>
|
|
</div>
|
|
|
|
{{-- SSL, Carpeta y Ventana de tiempo --}}
|
|
<div class="flex items-center gap-4 flex-wrap">
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Seguridad</label>
|
|
<select wire:model="correo_imap_ssl"
|
|
class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none">
|
|
<option value="1">SSL / TLS (puerto 993)</option>
|
|
<option value="0">Sin SSL (puerto 143)</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Carpeta</label>
|
|
<input wire:model="correo_imap_folder" type="text" placeholder="INBOX"
|
|
class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-32 focus:outline-none focus:ring-2 focus:ring-blue-400">
|
|
@error('correo_imap_folder') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Leer correos de los últimos</label>
|
|
<div class="flex items-center gap-2">
|
|
<input wire:model="correo_imap_minutos" type="number" min="1" max="1440"
|
|
class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-24 focus:outline-none focus:ring-2 focus:ring-blue-400">
|
|
<span class="text-sm text-gray-500">minutos</span>
|
|
</div>
|
|
@error('correo_imap_minutos') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
|
|
<p class="text-xs text-gray-400 mt-1">Máx: 1440 (24h). Se traen hasta 5 correos.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Usuario --}}
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Correo / Usuario *</label>
|
|
<input wire:model="correo_imap_user" type="email"
|
|
placeholder="pagos@tuempresa.com"
|
|
class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
|
|
@error('correo_imap_user') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
|
|
</div>
|
|
|
|
{{-- Contraseña --}}
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Contraseña / App Password *</label>
|
|
<input wire:model="correo_imap_password" type="password"
|
|
placeholder="••••••••••••"
|
|
class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
|
|
@error('correo_imap_password') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
|
|
<p class="text-xs text-gray-400 mt-1">
|
|
Para Gmail usa una
|
|
<a href="https://myaccount.google.com/apppasswords" target="_blank" class="text-blue-500 underline">App Password</a>
|
|
(necesitas verificación en 2 pasos activa).
|
|
</p>
|
|
</div>
|
|
|
|
{{-- Habilitado --}}
|
|
<label class="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
|
|
<input wire:model="correo_imap_enabled" type="checkbox" value="1"
|
|
class="rounded border-gray-300 text-blue-500 focus:ring-blue-400">
|
|
Habilitar lectura automática de correos
|
|
</label>
|
|
|
|
{{-- Acciones --}}
|
|
<div class="flex gap-3 pt-2 border-t border-gray-100">
|
|
<button type="submit"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white text-sm px-5 py-2 rounded-lg transition flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Guardar configuración
|
|
</button>
|
|
<button type="button" wire:click="probar" wire:loading.attr="disabled"
|
|
class="bg-green-500 hover:bg-green-600 disabled:opacity-60 text-white text-sm px-5 py-2 rounded-lg transition flex items-center gap-2">
|
|
<svg wire:loading wire:target="probar" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/>
|
|
</svg>
|
|
<svg wire:loading.remove wire:target="probar" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<span wire:loading.remove wire:target="probar">Probar conexión</span>
|
|
<span wire:loading wire:target="probar">Conectando...</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
{{-- Ayuda rápida --}}
|
|
<div class="mt-5 p-4 bg-gray-50 rounded-xl text-xs text-gray-500 space-y-1">
|
|
<p class="font-semibold text-gray-600 mb-2">Configuraciones comunes:</p>
|
|
<div class="grid grid-cols-2 gap-x-4 gap-y-1">
|
|
<span class="font-medium">Gmail</span><span>imap.gmail.com : 993 (SSL)</span>
|
|
<span class="font-medium">Outlook/Hotmail</span><span>imap-mail.outlook.com : 993 (SSL)</span>
|
|
<span class="font-medium">Yahoo</span><span>imap.mail.yahoo.com : 993 (SSL)</span>
|
|
<span class="font-medium">cPanel / Hosting</span><span>mail.tudominio.com : 993 (SSL)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ── Resultado de la prueba ───────────────────────── --}}
|
|
<div>
|
|
{{-- Estado de la conexión --}}
|
|
@if($testStatus === 'error')
|
|
<div class="mb-4 bg-red-50 border border-red-200 rounded-xl p-4 flex gap-3">
|
|
<svg class="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<div>
|
|
<p class="font-semibold text-red-700 text-sm">Error de conexión</p>
|
|
<p class="text-red-600 text-xs mt-1 font-mono">{{ $testError }}</p>
|
|
</div>
|
|
</div>
|
|
@elseif($testStatus === 'ok')
|
|
<div class="mb-4 bg-green-50 border border-green-200 rounded-xl p-4 flex gap-3">
|
|
<svg class="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<div>
|
|
<p class="font-semibold text-green-700 text-sm">Conexión exitosa</p>
|
|
<p class="text-green-600 text-xs mt-1">
|
|
@php $fueraVentana = !empty($emails) && !empty($emails[0]['fuera_de_ventana']); @endphp
|
|
@if(count($emails) === 0)
|
|
No hay correos en la bandeja.
|
|
@elseif($fueraVentana)
|
|
Sin actividad en los últimos <strong>{{ $correo_imap_minutos }} min</strong> — mostrando los últimos {{ count($emails) }} correos disponibles.
|
|
@elseif(count($emails) === 5)
|
|
Se muestran los últimos <strong>5</strong> correos (límite alcanzado).
|
|
@else
|
|
<strong>{{ count($emails) }}</strong> correo(s) en los últimos {{ $correo_imap_minutos }} minutos.
|
|
@endif
|
|
</p>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="mb-4 bg-gray-50 border border-dashed border-gray-300 rounded-xl p-6 text-center text-gray-400">
|
|
<svg class="w-10 h-10 mx-auto mb-2 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
|
|
<p class="text-sm">Configura los datos y pulsa <strong>Probar conexión</strong></p>
|
|
<p class="text-xs mt-1">Se mostrarán los últimos 5 correos de la bandeja</p>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Lista de correos --}}
|
|
@if(count($emails) > 0)
|
|
<div class="space-y-3">
|
|
@foreach($emails as $i => $email)
|
|
<div x-data="{ open: false }"
|
|
class="bg-white rounded-xl shadow border border-gray-100 overflow-hidden">
|
|
{{-- Cabecera del correo --}}
|
|
<button type="button" @click="open = !open"
|
|
class="w-full text-left px-4 py-3 flex items-start justify-between gap-3 hover:bg-gray-50 transition">
|
|
<div class="flex items-start gap-3 min-w-0">
|
|
<span class="flex-shrink-0 w-7 h-7 rounded-full bg-blue-100 text-blue-700 text-xs font-bold flex items-center justify-center mt-0.5">
|
|
{{ $i + 1 }}
|
|
</span>
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold text-gray-800 truncate">
|
|
{{ $email['subject'] ?: '(Sin asunto)' }}
|
|
</p>
|
|
<p class="text-xs text-gray-500 truncate mt-0.5">
|
|
<span class="font-medium">De:</span> {{ $email['from'] ?: '—' }}
|
|
</p>
|
|
@if($email['date'])
|
|
<p class="text-xs text-gray-400 mt-0.5">{{ $email['date'] }}</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<svg :class="open ? 'rotate-180' : ''"
|
|
class="w-4 h-4 text-gray-400 flex-shrink-0 mt-1 transform transition-transform"
|
|
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
</svg>
|
|
</button>
|
|
|
|
{{-- Cuerpo del correo --}}
|
|
<div x-show="open" x-transition class="border-t border-gray-100 px-4 py-3">
|
|
|
|
{{-- Tarjeta de datos Bancolombia ─────────────────── --}}
|
|
@if(!empty($email['bancolombia']))
|
|
@php $bc = $email['bancolombia']; @endphp
|
|
<div class="mb-3 rounded-xl bg-gradient-to-br from-yellow-50 to-amber-50 border border-amber-200 p-4">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<span class="inline-flex items-center gap-1.5 bg-amber-500 text-white text-xs font-bold px-2.5 py-1 rounded-full">
|
|
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
Bancolombia — datos extraídos
|
|
</span>
|
|
@if($bc['tipo'] === 'transferencia_recibida')
|
|
<span class="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full font-medium">Pago recibido</span>
|
|
@elseif($bc['tipo'] === 'transferencia_enviada')
|
|
<span class="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full font-medium">Transferencia enviada</span>
|
|
@endif
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-x-6 gap-y-2 text-sm">
|
|
@if($bc['valor'])
|
|
<div>
|
|
<span class="text-xs text-gray-500 block">Valor</span>
|
|
<span class="font-bold text-green-700 text-lg">${{ $bc['valor'] }}</span>
|
|
</div>
|
|
@endif
|
|
@if($bc['llave'])
|
|
<div>
|
|
<span class="text-xs text-gray-500 block">Llave recibe</span>
|
|
<span class="font-semibold text-gray-800">{{ $bc['llave'] }}</span>
|
|
</div>
|
|
@endif
|
|
@if($bc['fecha'])
|
|
<div>
|
|
<span class="text-xs text-gray-500 block">Fecha</span>
|
|
<span class="font-medium text-gray-700">{{ $bc['fecha'] }}</span>
|
|
</div>
|
|
@endif
|
|
@if($bc['hora'])
|
|
<div>
|
|
<span class="text-xs text-gray-500 block">Hora</span>
|
|
<span class="font-medium text-gray-700">{{ $bc['hora'] }}</span>
|
|
</div>
|
|
@endif
|
|
@if($bc['remitente'])
|
|
<div class="col-span-2">
|
|
<span class="text-xs text-gray-500 block">Remitente</span>
|
|
<span class="font-medium text-gray-700">{{ $bc['remitente'] }}</span>
|
|
</div>
|
|
@endif
|
|
@if($bc['destinatario'])
|
|
<div class="col-span-2">
|
|
<span class="text-xs text-gray-500 block">Destinatario</span>
|
|
<span class="font-medium text-gray-700">{{ $bc['destinatario'] }}</span>
|
|
</div>
|
|
@endif
|
|
@if($bc['cuenta'])
|
|
<div class="col-span-2">
|
|
<span class="text-xs text-gray-500 block">Cuenta</span>
|
|
<span class="font-medium text-gray-700">*{{ $bc['cuenta'] }}</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Texto completo del correo ────────────────────── --}}
|
|
@if($email['body'])
|
|
<p class="text-xs text-gray-400 mb-1 font-medium">Texto completo:</p>
|
|
<pre class="text-xs text-gray-600 whitespace-pre-wrap font-sans leading-relaxed max-h-48 overflow-y-auto">{{ $email['body'] }}</pre>
|
|
@else
|
|
<p class="text-xs text-gray-400 italic">(Sin contenido de texto)</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|