soft_usite/resources/views/tickets_admin.html

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

  <div class="flex items-center justify-between mb-6">
    <div>
      <h1 class="text-xl font-bold text-slate-800">Tickets de soporte</h1>
      <p class="text-sm text-slate-500 mt-0.5">Todos los tickets abiertos por clientes del portal</p>
    </div>
    <!-- Filtro estado -->
    <div class="flex items-center gap-2">
      <template x-for="s in estados" :key="s.val">
        <button @click="filtro=s.val; load()"
          :class="filtro===s.val ? 'text-white' : 'bg-white text-slate-600 border border-slate-200 hover:bg-slate-50'"
          :style="filtro===s.val ? 'background:#8eb02f' : ''"
          class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
          x-text="s.label">
        </button>
      </template>
    </div>
  </div>

  <!-- Loading -->
  <div x-show="loading" class="text-center py-12 text-slate-400 text-sm">Cargando tickets...</div>

  <!-- Empty -->
  <div x-show="!loading && tickets.length===0" class="text-center py-12 text-slate-400 text-sm">
    No hay tickets con este filtro.
  </div>

  <!-- Lista -->
  <div x-show="!loading" class="space-y-3">
    <template x-for="t in tickets" :key="t.ID">
      <div class="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm">
        <!-- Cabecera del ticket -->
        <div class="p-4 flex items-start gap-4 cursor-pointer" @click="t._open = !t._open">
          <!-- Indicador de estado -->
          <div class="mt-0.5 w-2.5 h-2.5 rounded-full flex-shrink-0" :class="dotClass(t.estado)"></div>
          <div class="flex-1 min-w-0">
            <div class="flex flex-wrap items-center gap-2 mb-1">
              <span class="badge" :class="ticketBadge(t.estado)" x-text="t.estado"></span>
              <span class="badge" :class="prioridadBadge(t.prioridad)" x-text="t.prioridad"></span>
              <span x-show="t.proyecto && t.proyecto.nombre" class="text-xs text-slate-400">
                📁 <span x-text="t.proyecto ? t.proyecto.nombre : ''"></span>
              </span>
            </div>
            <h3 class="font-semibold text-sm text-slate-800 truncate" x-text="t.titulo"></h3>
            <p class="text-xs text-slate-500 mt-0.5">
              Por: <span x-text="t.autor_nombre"></span> &middot; <span x-text="formatDate(t.CreatedAt)"></span>
              <span x-show="t.mensajes && t.mensajes.length" class="ml-2 text-slate-400">
                💬 <span x-text="t.mensajes ? t.mensajes.length : 0"></span>
              </span>
            </p>
          </div>
          <!-- Cambiar estado -->
          <div class="flex items-center gap-2 flex-shrink-0" @click.stop>
            <select @change="cambiarEstado(t, $event.target.value)"
              class="text-xs border border-slate-200 rounded-lg px-2 py-1.5 outline-none bg-white text-slate-700">
              <option value="abierto"      :selected="t.estado==='abierto'">Abierto</option>
              <option value="en_progreso"  :selected="t.estado==='en_progreso'">En progreso</option>
              <option value="resuelto"     :selected="t.estado==='resuelto'">Resuelto</option>
              <option value="cerrado"      :selected="t.estado==='cerrado'">Cerrado</option>
            </select>
            <a :href="`/app/proyectos/${t.proyecto_id}/detalle`" title="Ver proyecto"
              class="text-slate-400 hover:text-slate-600 transition-colors" @click.stop>
              <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
              </svg>
            </a>
          </div>
        </div>

        <!-- Detalle expandido -->
        <div x-show="t._open" class="border-t border-slate-100 px-4 pb-4">
          <p class="text-sm text-slate-600 py-3 border-b border-slate-100" x-text="t.descripcion"></p>

          <!-- Mensajes -->
          <template x-if="t.mensajes && t.mensajes.length">
            <div class="space-y-2 mt-3">
              <template x-for="m in t.mensajes" :key="m.ID">
                <div class="flex gap-2" :class="m.es_admin ? 'justify-end' : ''">
                  <div :class="m.es_admin ? 'bg-primary/10' : 'bg-slate-100'"
                    class="rounded-xl px-3 py-2 text-sm max-w-sm text-slate-700">
                    <div class="text-xs font-semibold mb-1"
                      :style="m.es_admin ? 'color:#8eb02f' : 'color:#64748b'"
                      x-text="m.autor_nombre"></div>
                    <span x-text="m.contenido"></span>
                    <div class="text-xs text-slate-400 mt-1" x-text="formatDate(m.CreatedAt)"></div>
                  </div>
                </div>
              </template>
            </div>
          </template>

          <!-- Responder -->
          <div class="mt-3 flex gap-2">
            <input x-model="t._reply" type="text" placeholder="Escribir respuesta..."
              class="flex-1 border border-slate-200 rounded-xl px-3 py-2 text-sm outline-none"
              @keydown.enter.prevent="responder(t)"
              onfocus="this.style.borderColor='#8eb02f'" onblur="this.style.borderColor='#e2e8f0'">
            <button @click="responder(t)"
              class="px-4 py-2 rounded-xl text-white text-sm font-medium transition-colors"
              style="background:#8eb02f"
              onmouseover="this.style.background='#6d8c24'" onmouseout="this.style.background='#8eb02f'">
              Responder
            </button>
          </div>
        </div>
      </div>
    </template>
  </div>

</div>

<script>
function ticketsAdmin() {
  return {
    tickets: [],
    loading: true,
    filtro: 'todos',
    estados: [
      { val: 'todos',      label: 'Todos' },
      { val: 'abierto',    label: 'Abiertos' },
      { val: 'en_progreso',label: 'En progreso' },
      { val: 'resuelto',   label: 'Resueltos' },
      { val: 'cerrado',    label: 'Cerrados' },
    ],

    async init() { await this.load(); },

    async load() {
      this.loading = true;
      try {
        const r = await axios.get(`/app/tickets/data?estado=${this.filtro}`);
        this.tickets = (r.data || []).map(t => ({ ...t, _open: false, _reply: '' }));
      } finally {
        this.loading = false;
      }
    },

    async cambiarEstado(t, estado) {
      await axios.put(`/app/tickets/${t.ID}/estado`, { estado });
      t.estado = estado;
    },

    async responder(t) {
      const contenido = (t._reply || '').trim();
      if (!contenido) return;
      await axios.post(`/app/tickets/${t.ID}/mensaje`, { contenido });
      if (!t.mensajes) t.mensajes = [];
      t.mensajes.push({ ID: Date.now(), contenido, es_admin: true, autor_nombre: 'Admin', CreatedAt: new Date().toISOString() });
      t._reply = '';
      t._open = true;
    },

    dotClass(e) {
      return { 'bg-yellow-400': e==='abierto', 'bg-blue-400': e==='en_progreso', 'bg-green-400': e==='resuelto', 'bg-slate-300': e==='cerrado' };
    },
    ticketBadge(e) {
      return { 'badge-warning': e==='abierto', 'badge-info': e==='en_progreso', 'badge-success': e==='resuelto', 'badge-default': e==='cerrado' };
    },
    prioridadBadge(p) {
      return { 'badge-danger': p==='urgente', 'badge-warning': p==='alta', 'badge-info': p==='media', 'badge-default': p==='baja' };
    },
    formatDate(d) {
      if (!d) return '';
      return new Date(d).toLocaleString('es-CO', { dateStyle: 'short', timeStyle: 'short' });
    },
  };
}
</script>