soft_usite/resources/views/notif_config.html

<div x-data="notifConfig()" x-init="init()" class="p-6">

  <div class="mb-6">
    <h1 class="text-xl font-bold text-slate-800">Configuración de notificaciones</h1>
    <p class="text-sm text-slate-500 mt-0.5">
      Define por qué canales se envían las alertas a cada destinatario. Más eventos se agregarán conforme el sistema crezca.
    </p>
  </div>

  <!-- Tabla de configuración -->
  <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
    <table class="w-full text-sm">
      <thead>
        <tr class="bg-slate-50 border-b border-slate-200">
          <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider w-48">Evento</th>
          <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider w-40">Destinatario</th>
          <th class="px-4 py-3 text-center text-xs font-semibold text-slate-500 uppercase tracking-wider">
            📧 Email
          </th>
          <th class="px-4 py-3 text-center text-xs font-semibold text-slate-500 uppercase tracking-wider">
            ✈️ Telegram
          </th>
          <th class="px-4 py-3 text-center text-xs font-semibold text-slate-500 uppercase tracking-wider">
            🔔 Sistema
          </th>
          <th class="px-4 py-3 text-center text-xs font-semibold text-slate-500 uppercase tracking-wider w-24">Guardar</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100">
        <template x-for="row in rows" :key="row.key">
          <tr class="hover:bg-slate-50 transition-colors">
            <td class="px-4 py-3">
              <span class="font-medium text-slate-700" x-text="row.eventoLabel"></span>
            </td>
            <td class="px-4 py-3">
              <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium"
                :class="row.destinatario==='admin' ? 'bg-slate-100 text-slate-700' : 'bg-emerald-50 text-emerald-700'">
                <span x-text="row.destinatario==='admin' ? '👤 Admin' : '🧑‍💼 Cliente portal'"></span>
              </span>
            </td>
            <!-- Email -->
            <td class="px-4 py-3 text-center">
              <label class="inline-flex items-center justify-center cursor-pointer">
                <input type="checkbox" x-model="row.canal_email"
                  class="w-4 h-4 rounded accent-[#8eb02f]">
              </label>
            </td>
            <!-- Telegram -->
            <td class="px-4 py-3 text-center">
              <div class="flex flex-col items-center gap-1">
                <label class="inline-flex items-center justify-center cursor-pointer">
                  <input type="checkbox" x-model="row.canal_telegram"
                    :disabled="row.destinatario==='portal_user' ? false : !hasTelegramConfig"
                    class="w-4 h-4 rounded accent-[#8eb02f] disabled:opacity-40">
                </label>
                <span x-show="row.destinatario==='admin' && !hasTelegramConfig"
                  class="text-xs text-amber-500">Sin bot config.</span>
                <span x-show="row.destinatario==='portal_user'"
                  class="text-xs text-slate-400">Requiere Chat ID en usuario</span>
              </div>
            </td>
            <!-- Sistema -->
            <td class="px-4 py-3 text-center">
              <label class="inline-flex items-center justify-center cursor-pointer">
                <input type="checkbox" x-model="row.canal_sistema"
                  class="w-4 h-4 rounded accent-[#8eb02f]">
              </label>
            </td>
            <!-- Guardar -->
            <td class="px-4 py-3 text-center">
              <button @click="save(row)"
                class="px-3 py-1.5 rounded-lg text-white text-xs font-medium transition-colors"
                style="background:#8eb02f"
                onmouseover="this.style.background='#6d8c24'" onmouseout="this.style.background='#8eb02f'">
                Guardar
              </button>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>

  <!-- Ayuda: Telegram para portal users -->
  <div class="mt-6 bg-blue-50 border border-blue-200 rounded-xl p-4 text-sm text-blue-800">
    <p class="font-semibold mb-1">📱 Telegram para clientes del portal</p>
    <p class="text-blue-700 text-xs leading-relaxed">
      Para notificar a un cliente por Telegram, el cliente debe abrir una conversación con el bot y compartirte su <strong>Chat ID</strong>.
      Luego ve a <a href="/app/portal-usuarios" class="underline font-medium">Portal Usuarios</a> y agrega el Chat ID en su perfil.
      El bot a usar es el mismo configurado en <a href="/app/telegram" class="underline font-medium">Configuración Telegram</a>.
    </p>
  </div>

  <!-- Toast -->
  <div x-show="toast.visible" x-transition
    class="fixed bottom-6 right-6 z-50 px-4 py-3 rounded-xl shadow-lg text-white text-sm font-medium"
    :class="toast.ok ? 'bg-green-600' : 'bg-red-500'"
    x-text="toast.msg">
  </div>

</div>

<script>
// Definición de todos los eventos configurables (extensible)
const EVENTOS = [
  { evento: 'ticket_nuevo',             destinatario: 'admin',       label: 'Ticket nuevo',              icon: '🎫' },
  { evento: 'ticket_respuesta_cliente', destinatario: 'admin',       label: 'Respuesta del cliente',     icon: '💬' },
  { evento: 'ticket_respuesta_admin',   destinatario: 'portal_user', label: 'Respuesta del admin',       icon: '💬' },
  { evento: 'factura_subida',           destinatario: 'portal_user', label: 'Factura subida / disponible', icon: '🧾' },
  // Próximos eventos (deshabilitados por ahora):
  // { evento: 'factura_emitida',       destinatario: 'portal_user', label: 'Factura emitida',          icon: '🧾' },
  // { evento: 'avance_publicado',      destinatario: 'portal_user', label: 'Avance publicado',         icon: '📦' },
];

function notifConfig() {
  return {
    rows: [],
    hasTelegramConfig: false,
    toast: { visible: false, ok: true, msg: '' },

    async init() {
      // Verificar si hay telegram configurado
      try {
        const t = await axios.get('/app/loadtelegram');
        this.hasTelegramConfig = (t.data?.items?.length ?? 0) > 0;
      } catch {}

      // Cargar configuración existente
      let existing = {};
      try {
        const r = await axios.get('/app/notif-config/data');
        (r.data || []).forEach(cfg => { existing[`${cfg.evento}__${cfg.destinatario}`] = cfg; });
      } catch {}

      // Construir filas combinando EVENTOS con config guardada
      this.rows = EVENTOS.map(ev => {
        const key = `${ev.evento}__${ev.destinatario}`;
        const saved = existing[key] || {};
        return {
          key,
          evento: ev.evento,
          destinatario: ev.destinatario,
          eventoLabel: `${ev.icon} ${ev.label}`,
          canal_email:    saved.canal_email    ?? (ev.destinatario === 'admin'),
          canal_telegram: saved.canal_telegram ?? false,
          canal_sistema:  saved.canal_sistema  ?? true,
        };
      });
    },

    async save(row) {
      try {
        await axios.post('/app/notif-config', {
          evento:         row.evento,
          destinatario:   row.destinatario,
          canal_email:    row.canal_email,
          canal_telegram: row.canal_telegram,
          canal_sistema:  row.canal_sistema,
        });
        this.showToast('Configuración guardada', true);
      } catch (e) {
        this.showToast('Error al guardar', false);
      }
    },

    showToast(msg, ok) {
      this.toast = { visible: true, ok, msg };
      setTimeout(() => this.toast.visible = false, 3000);
    },
  };
}
</script>