142 lines
9.8 KiB
PHP
142 lines
9.8 KiB
PHP
<div>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
|
<svg class="w-7 h-7 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
|
</svg>
|
|
Plantillas de Mensaje
|
|
</h1>
|
|
<button wire:click="openForm()" class="bg-green-500 hover:bg-green-600 text-white text-sm px-4 py-2 rounded-lg flex items-center gap-2 transition">
|
|
<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="M12 4v16m8-8H4"/></svg>
|
|
Nueva Plantilla
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex gap-3 mb-4 flex-wrap">
|
|
<input wire:model.live.debounce.300ms="search" type="text" placeholder="Buscar plantilla..."
|
|
class="border border-gray-300 rounded-lg px-4 py-2 text-sm w-64 focus:outline-none focus:ring-2 focus:ring-green-400">
|
|
<select wire:model.live="filterStatus" class="border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none">
|
|
<option value="">— Todos los estados —</option>
|
|
<option value="pending">Pendiente</option>
|
|
<option value="approved">Aprobada</option>
|
|
<option value="rejected">Rechazada</option>
|
|
<option value="paused">Pausada</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow overflow-hidden">
|
|
<table class="w-full text-sm">
|
|
<thead class="bg-gray-50 border-b">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-gray-600">Nombre</th>
|
|
<th class="px-4 py-3 text-left text-gray-600">Template (Meta)</th>
|
|
<th class="px-4 py-3 text-left text-gray-600">Idioma</th>
|
|
<th class="px-4 py-3 text-left text-gray-600">Header</th>
|
|
<th class="px-4 py-3 text-center text-gray-600">Estado</th>
|
|
<th class="px-4 py-3 text-center text-gray-600">Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100">
|
|
@forelse($templates as $tpl)
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 font-medium text-gray-800">{{ $tpl->name }}</td>
|
|
<td class="px-4 py-3 font-mono text-xs text-gray-600">{{ $tpl->template_name }}</td>
|
|
<td class="px-4 py-3 uppercase text-gray-500 text-xs">{{ $tpl->language_code }}</td>
|
|
<td class="px-4 py-3 text-gray-500 text-xs capitalize">{{ $tpl->header_type }}</td>
|
|
<td class="px-4 py-3 text-center">
|
|
@php
|
|
$colors = ['approved'=>'green','pending'=>'yellow','rejected'=>'red','paused'=>'gray'];
|
|
$c = $colors[$tpl->status] ?? 'gray';
|
|
@endphp
|
|
<span class="text-xs px-2 py-0.5 rounded-full bg-{{ $c }}-100 text-{{ $c }}-700 capitalize">{{ $tpl->status }}</span>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<div class="flex justify-center gap-2">
|
|
<button wire:click="openForm({{ $tpl->id }})" class="text-yellow-500 hover:text-yellow-700 transition">
|
|
<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="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 wire:click="delete({{ $tpl->id }})" wire:confirm="¿Eliminar esta plantilla?" class="text-red-400 hover:text-red-600 transition">
|
|
<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="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>
|
|
@empty
|
|
<tr><td colspan="6" class="px-4 py-8 text-center text-gray-400">No hay plantillas registradas</td></tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
<div class="p-3 border-t border-gray-100">{{ $templates->links() }}</div>
|
|
</div>
|
|
|
|
{{-- Modal Formulario --}}
|
|
@if($showForm)
|
|
<div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
|
<div class="bg-white rounded-2xl shadow-xl w-full max-w-lg p-6 max-h-screen overflow-y-auto">
|
|
<h3 class="text-lg font-bold text-gray-800 mb-4">{{ $editId ? 'Editar Plantilla' : 'Nueva Plantilla' }}</h3>
|
|
<form wire:submit.prevent="save" class="space-y-4">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Nombre interno *</label>
|
|
<input wire:model="name" type="text" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-400">
|
|
@error('name') <p class="text-red-500 text-xs">{{ $message }}</p> @enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Nombre en Meta *</label>
|
|
<input wire:model="templateName" type="text" placeholder="solo_minusculas_sin_espacios"
|
|
class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-400">
|
|
@error('templateName') <p class="text-red-500 text-xs">{{ $message }}</p> @enderror
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Idioma</label>
|
|
<input wire:model="languageCode" type="text" placeholder="es"
|
|
class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Estado</label>
|
|
<select wire:model="status" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none">
|
|
<option value="pending">Pendiente</option>
|
|
<option value="approved">Aprobada</option>
|
|
<option value="rejected">Rechazada</option>
|
|
<option value="paused">Pausada</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Tipo header</label>
|
|
<select wire:model="headerType" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none">
|
|
<option value="none">Ninguno</option>
|
|
<option value="text">Texto</option>
|
|
<option value="image">Imagen</option>
|
|
<option value="video">Video</option>
|
|
<option value="document">Documento</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
@if($headerType === 'text')
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Texto del header</label>
|
|
<input wire:model="headerText" type="text" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none">
|
|
</div>
|
|
@endif
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Cuerpo del mensaje *</label>
|
|
<textarea wire:model="bodyText" rows="4" placeholder="Hola {{nombre}}, tu pedido {{codigo}} está listo."
|
|
class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-green-400"></textarea>
|
|
@error('bodyText') <p class="text-red-500 text-xs">{{ $message }}</p> @enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Pie de página</label>
|
|
<input wire:model="footerText" type="text" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none">
|
|
</div>
|
|
<div class="flex justify-end gap-3 pt-2 border-t border-gray-100">
|
|
<button type="button" wire:click="resetForm()" class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800">Cancelar</button>
|
|
<button type="submit" class="bg-green-500 hover:bg-green-600 text-white text-sm px-4 py-2 rounded-lg">Guardar</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|