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

  <!-- Header -->
  <div class="flex items-center justify-between mb-6">
    <div>
      <h1 class="text-xl font-bold text-slate-800">Partner Recursos</h1>
      <p class="text-sm text-slate-500 mt-0.5">Documentación y comunicados exclusivos para los usuarios partner del portal.</p>
    </div>
  </div>

  <!-- Tabs -->
  <div class="flex border-b border-slate-200 mb-6 gap-0">
    <button @click="tab='recursos'" class="px-5 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors"
      :class="tab==='recursos' ? 'border-[#8eb02f] text-[#8eb02f]' : 'border-transparent text-slate-500 hover:text-slate-700'">
      📁 Recursos
      <span class="ml-1.5 bg-slate-100 text-slate-600 text-xs px-1.5 py-0.5 rounded-full" x-text="recursos.length"></span>
    </button>
    <button @click="tab='comunicados'" class="px-5 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors"
      :class="tab==='comunicados' ? 'border-[#8eb02f] text-[#8eb02f]' : 'border-transparent text-slate-500 hover:text-slate-700'">
      📢 Comunicados
      <span class="ml-1.5 bg-slate-100 text-slate-600 text-xs px-1.5 py-0.5 rounded-full" x-text="comunicados.length"></span>
    </button>
  </div>

  <!-- ──── TAB RECURSOS ─────────────────────────────────────────────────────── -->
  <div x-show="tab==='recursos'" x-cloak>

    <!-- Formulario nuevo recurso -->
    <div class="bg-white border border-slate-200 rounded-xl p-5 mb-6">
      <h3 class="text-sm font-semibold text-slate-700 mb-4">Agregar recurso</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-3">
        <input x-model="newR.nombre" type="text" placeholder="Nombre del recurso *" class="input-f col-span-1">
        <select x-model="newR.categoria" class="input-f">
          <option value="general">General</option>
          <option value="tecnico">Técnico</option>
          <option value="comercial">Comercial</option>
          <option value="marketing">Marketing</option>
        </select>
        <textarea x-model="newR.descripcion" placeholder="Descripción breve..." rows="2" class="input-f sm:col-span-2"></textarea>
        <input x-model="newR.enlace" type="url" placeholder="Enlace externo (opcional, ej: https://...)" class="input-f sm:col-span-2">
        <label class="flex items-center gap-2 text-sm text-slate-600 cursor-pointer">
          <input type="checkbox" x-model="newR.activo" class="rounded accent-[#8eb02f]">
          Visible para partners
        </label>
      </div>
      <button @click="crearRecurso()" class="btn-p text-sm" :disabled="!newR.nombre.trim()">Crear recurso</button>
    </div>

    <!-- Lista de recursos -->
    <div class="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm">
      <table class="w-full text-sm">
        <thead>
          <tr class="bg-slate-50 border-b border-slate-200 text-xs font-semibold text-slate-500 uppercase tracking-wider">
            <th class="px-4 py-3 text-left">Nombre</th>
            <th class="px-4 py-3 text-left hidden sm:table-cell">Categoría</th>
            <th class="px-4 py-3 text-left hidden md:table-cell">Descripción</th>
            <th class="px-4 py-3 text-center">Archivo</th>
            <th class="px-4 py-3 text-center">Visible</th>
            <th class="px-4 py-3 text-center w-24">Acciones</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
          <template x-for="r in recursos" :key="r.ID">
            <tr class="hover:bg-slate-50 transition-colors">
              <!-- Nombre / edición inline -->
              <td class="px-4 py-3">
                <template x-if="editR?.ID === r.ID">
                  <input x-model="editR.nombre" class="input-f text-xs w-full" placeholder="Nombre">
                </template>
                <template x-if="editR?.ID !== r.ID">
                  <span class="font-medium text-slate-800" x-text="r.nombre"></span>
                </template>
              </td>
              <!-- Categoría -->
              <td class="px-4 py-3 hidden sm:table-cell">
                <template x-if="editR?.ID === r.ID">
                  <select x-model="editR.categoria" class="input-f text-xs">
                    <option value="general">General</option>
                    <option value="tecnico">Técnico</option>
                    <option value="comercial">Comercial</option>
                    <option value="marketing">Marketing</option>
                  </select>
                </template>
                <template x-if="editR?.ID !== r.ID">
                  <span class="badge-cat" :class="catClass(r.categoria)" x-text="r.categoria"></span>
                </template>
              </td>
              <!-- Descripción -->
              <td class="px-4 py-3 hidden md:table-cell text-slate-500 text-xs max-w-xs truncate">
                <template x-if="editR?.ID === r.ID">
                  <div class="space-y-1">
                    <div x-text="r.descripcion" class="truncate"></div>
                    <input x-model="editR.enlace" type="url" placeholder="Enlace externo..." class="input-f text-xs w-full">
                  </div>
                </template>
                <template x-if="editR?.ID !== r.ID">
                  <div class="space-y-0.5">
                    <span x-text="r.descripcion"></span>
                    <template x-if="r.enlace">
                      <a :href="r.enlace" target="_blank" class="block text-[#8eb02f] hover:underline text-xs truncate" x-text="r.enlace"></a>
                    </template>
                  </div>
                </template>
              </td>
              <!-- Archivo -->
              <td class="px-4 py-3 text-center">
                <template x-if="r.archivo">
                  <div class="flex items-center justify-center gap-2">
                    <a :href="`/app/partner-recursos/${r.ID}/download`" target="_blank"
                      class="text-[#8eb02f] hover:underline text-xs flex items-center gap-1">
                      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                      <span x-text="r.nombre_orig || 'Descargar'"></span>
                    </a>
                    <label class="cursor-pointer text-slate-400 hover:text-slate-600">
                      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l4-4m0 0l4 4m-4-4v12"/></svg>
                      <input type="file" class="hidden" @change="subirArchivoRecurso(r.ID, $event)">
                    </label>
                  </div>
                </template>
                <template x-if="!r.archivo">
                  <label class="cursor-pointer inline-flex items-center gap-1 text-xs text-slate-500 hover:text-[#8eb02f]">
                    <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l4-4m0 0l4 4m-4-4v12"/></svg>
                    Subir
                    <input type="file" class="hidden" @change="subirArchivoRecurso(r.ID, $event)">
                  </label>
                </template>
              </td>
              <!-- Toggle visible -->
              <td class="px-4 py-3 text-center">
                <button @click="toggleRecurso(r)"
                  class="w-10 h-5 rounded-full transition-colors flex-shrink-0 relative"
                  :class="r.activo ? 'bg-[#8eb02f]' : 'bg-slate-200'">
                  <span class="absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform"
                    :class="r.activo ? 'translate-x-5' : 'translate-x-0.5'"></span>
                </button>
              </td>
              <!-- Acciones -->
              <td class="px-4 py-3 text-center">
                <template x-if="editR?.ID === r.ID">
                  <div class="flex items-center justify-center gap-2">
                    <button @click="guardarRecurso()" class="text-xs text-white bg-[#8eb02f] px-2 py-1 rounded hover:bg-[#6d8c24]">Guardar</button>
                    <button @click="editR=null" class="text-xs text-slate-500 hover:text-slate-700">Cancelar</button>
                  </div>
                </template>
                <template x-if="editR?.ID !== r.ID">
                  <div class="flex items-center justify-center gap-2">
                    <button @click="editR={...r}" class="text-slate-400 hover:text-[#8eb02f]" title="Editar">
                      <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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
                    </button>
                    <button @click="eliminarRecurso(r.ID)" class="text-slate-400 hover:text-red-500" title="Eliminar">
                      <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="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>
                </template>
              </td>
            </tr>
          </template>
          <tr x-show="recursos.length === 0">
            <td colspan="6" class="px-4 py-10 text-center text-slate-400 text-sm">Sin recursos aún.</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- ──── TAB COMUNICADOS ──────────────────────────────────────────────────── -->
  <div x-show="tab==='comunicados'" x-cloak>

    <!-- Formulario nuevo comunicado -->
    <div class="bg-white border border-slate-200 rounded-xl p-5 mb-6">
      <h3 class="text-sm font-semibold text-slate-700 mb-4">Publicar comunicado</h3>
      <div class="space-y-3">
        <input x-model="newC.titulo" type="text" placeholder="Título del comunicado *" class="input-f w-full">
        <textarea x-model="newC.contenido" placeholder="Contenido del comunicado..." rows="4" class="input-f w-full"></textarea>
        <label class="flex items-center gap-2 text-sm text-slate-600 cursor-pointer">
          <input type="checkbox" x-model="newC.activo" class="rounded accent-[#8eb02f]">
          Publicar inmediatamente
        </label>
        <button @click="crearComunicado()" class="btn-p text-sm" :disabled="!newC.titulo.trim()">Publicar</button>
      </div>
    </div>

    <!-- Lista de comunicados -->
    <div class="space-y-3">
      <template x-for="com in comunicados" :key="com.ID">
        <div class="bg-white border rounded-xl p-5 transition-colors" :class="com.activo ? 'border-slate-200' : 'border-dashed border-slate-300 opacity-70'">
          <template x-if="editC?.ID === com.ID">
            <div class="space-y-3">
              <input x-model="editC.titulo" class="input-f w-full font-semibold" placeholder="Título">
              <textarea x-model="editC.contenido" rows="4" class="input-f w-full text-sm"></textarea>
              <label class="flex items-center gap-2 text-sm text-slate-600 cursor-pointer">
                <input type="checkbox" x-model="editC.activo" class="rounded accent-[#8eb02f]">
                Publicado
              </label>
              <div class="flex gap-2">
                <button @click="guardarComunicado()" class="btn-p text-sm">Guardar</button>
                <button @click="editC=null" class="text-sm text-slate-500 hover:text-slate-700">Cancelar</button>
              </div>
            </div>
          </template>
          <template x-if="editC?.ID !== com.ID">
            <div>
              <div class="flex items-start justify-between gap-3">
                <div class="flex-1">
                  <div class="flex items-center gap-2 mb-1">
                    <h3 class="font-semibold text-slate-800 text-sm" x-text="com.titulo"></h3>
                    <span class="text-xs px-2 py-0.5 rounded-full font-medium"
                      :class="com.activo ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-500'"
                      x-text="com.activo ? 'Publicado' : 'Borrador'"></span>
                  </div>
                  <p class="text-sm text-slate-600 whitespace-pre-line leading-relaxed" x-text="com.contenido"></p>
                  <p class="text-xs text-slate-400 mt-2" x-text="formatDate(com.CreatedAt)"></p>
                </div>
                <!-- Archivo adjunto -->
                <div class="flex flex-col items-end gap-2 flex-shrink-0">
                  <template x-if="com.archivo">
                    <div class="flex items-center gap-2">
                      <a :href="`/app/partner-comunicados/${com.ID}/download`" target="_blank"
                        class="text-xs text-[#8eb02f] hover:underline flex items-center gap-1">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                        <span x-text="com.nombre_orig || 'Adjunto'"></span>
                      </a>
                    </div>
                  </template>
                  <label class="cursor-pointer text-xs text-slate-400 hover:text-[#8eb02f] flex items-center gap-1">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
                    <span x-text="com.archivo ? 'Cambiar adjunto' : 'Adjuntar'"></span>
                    <input type="file" class="hidden" @change="subirArchivoComunicado(com.ID, $event)">
                  </label>
                </div>
              </div>
              <div class="flex items-center gap-3 mt-3 pt-3 border-t border-slate-100">
                <button @click="editC={...com}" class="text-xs text-slate-500 hover:text-[#8eb02f] flex items-center gap-1">
                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
                  Editar
                </button>
                <button @click="toggleComunicado(com)" class="text-xs flex items-center gap-1"
                  :class="com.activo ? 'text-amber-500 hover:text-amber-600' : 'text-green-600 hover:text-green-700'"
                  x-text="com.activo ? 'Despublicar' : 'Publicar'">
                </button>
                <button @click="eliminarComunicado(com.ID)" class="text-xs text-slate-400 hover:text-red-500 flex items-center gap-1 ml-auto">
                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" 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>
                  Eliminar
                </button>
              </div>
            </div>
          </template>
        </div>
      </template>
      <p x-show="comunicados.length === 0" class="text-center text-slate-400 text-sm py-10">Sin comunicados publicados.</p>
    </div>
  </div>

</div>

<script>
function partnerRecursos() {
  return {
    tab: 'recursos',
    recursos: [],
    comunicados: [],
    newR: { nombre:'', descripcion:'', categoria:'general', enlace:'', activo:true },
    newC: { titulo:'', contenido:'', activo:true },
    editR: null,
    editC: null,

    async init() {
      await Promise.all([this.loadRecursos(), this.loadComunicados()]);
    },

    async loadRecursos() {
      const r = await axios.get('/app/partner-recursos/data');
      this.recursos = r.data.recursos || [];
    },

    async loadComunicados() {
      const r = await axios.get('/app/partner-comunicados/data');
      this.comunicados = r.data.comunicados || [];
    },

    // ── Recursos ──────────────────────────────────────────────────────────────
    async crearRecurso() {
      try {
        const r = await axios.post('/app/partner-recursos', this.newR);
        this.recursos.unshift(r.data);
        this.newR = { nombre:'', descripcion:'', categoria:'general', enlace:'', activo:true };
      } catch(e) { alert(e.response?.data?.error || 'Error al crear'); }
    },

    async guardarRecurso() {
      try {
        const r = await axios.put(`/app/partner-recursos/${this.editR.ID}`, this.editR);
        const idx = this.recursos.findIndex(x => x.ID === r.data.ID);
        if (idx >= 0) this.recursos[idx] = r.data;
        this.editR = null;
      } catch(e) { alert(e.response?.data?.error || 'Error al guardar'); }
    },

    async toggleRecurso(r) {
      try {
        const updated = await axios.put(`/app/partner-recursos/${r.ID}`, {...r, activo: !r.activo});
        const idx = this.recursos.findIndex(x => x.ID === r.ID);
        if (idx >= 0) this.recursos[idx] = updated.data;
      } catch(e) { alert('Error'); }
    },

    async eliminarRecurso(id) {
      if (!confirm('¿Eliminar este recurso?')) return;
      await axios.delete(`/app/partner-recursos/${id}`);
      this.recursos = this.recursos.filter(x => x.ID !== id);
    },

    async subirArchivoRecurso(id, event) {
      const file = event.target.files[0];
      if (!file) return;
      const fd = new FormData();
      fd.append('archivo', file);
      try {
        const r = await axios.post(`/app/partner-recursos/${id}/upload`, fd);
        const idx = this.recursos.findIndex(x => x.ID === id);
        if (idx >= 0) {
          this.recursos[idx].archivo = r.data.archivo;
          this.recursos[idx].nombre_orig = r.data.nombre_orig;
        }
      } catch(e) { alert(e.response?.data?.error || 'Error al subir'); }
    },

    // ── Comunicados ───────────────────────────────────────────────────────────
    async crearComunicado() {
      try {
        const r = await axios.post('/app/partner-comunicados', this.newC);
        this.comunicados.unshift(r.data);
        this.newC = { titulo:'', contenido:'', activo:true };
      } catch(e) { alert(e.response?.data?.error || 'Error al publicar'); }
    },

    async guardarComunicado() {
      try {
        const r = await axios.put(`/app/partner-comunicados/${this.editC.ID}`, this.editC);
        const idx = this.comunicados.findIndex(x => x.ID === r.data.ID);
        if (idx >= 0) this.comunicados[idx] = r.data;
        this.editC = null;
      } catch(e) { alert(e.response?.data?.error || 'Error al guardar'); }
    },

    async toggleComunicado(com) {
      try {
        const r = await axios.put(`/app/partner-comunicados/${com.ID}`, {...com, activo: !com.activo});
        const idx = this.comunicados.findIndex(x => x.ID === com.ID);
        if (idx >= 0) this.comunicados[idx] = r.data;
      } catch(e) { alert('Error'); }
    },

    async eliminarComunicado(id) {
      if (!confirm('¿Eliminar este comunicado?')) return;
      await axios.delete(`/app/partner-comunicados/${id}`);
      this.comunicados = this.comunicados.filter(x => x.ID !== id);
    },

    async subirArchivoComunicado(id, event) {
      const file = event.target.files[0];
      if (!file) return;
      const fd = new FormData();
      fd.append('archivo', file);
      try {
        const r = await axios.post(`/app/partner-comunicados/${id}/upload`, fd);
        const idx = this.comunicados.findIndex(x => x.ID === id);
        if (idx >= 0) {
          this.comunicados[idx].archivo = r.data.archivo;
          this.comunicados[idx].nombre_orig = r.data.nombre_orig;
        }
      } catch(e) { alert(e.response?.data?.error || 'Error al subir'); }
    },

    catClass(cat) {
      return {
        general:   'cat-general',
        tecnico:   'cat-tecnico',
        comercial: 'cat-comercial',
        marketing: 'cat-marketing',
      }[cat] || 'cat-general';
    },

    formatDate(d) {
      if (!d) return '';
      return new Date(d).toLocaleDateString('es-CO', { day:'2-digit', month:'short', year:'numeric' });
    },
  }
}
</script>

<style>
.btn-p { background:#8eb02f; color:#fff; padding:.5rem 1.25rem; border-radius:.5rem; font-weight:600; cursor:pointer; }
.btn-p:hover { background:#6d8c24; }
.btn-p:disabled { opacity:.5; cursor:default; }
.input-f { border:1px solid #e2e8f0; border-radius:.5rem; padding:.45rem .75rem; font-size:.875rem; outline:none; width:100%; }
.input-f:focus { border-color:#8eb02f; }
.badge-cat { display:inline-block; padding:.15rem .6rem; border-radius:9999px; font-size:.7rem; font-weight:600; text-transform:capitalize; }
.cat-general   { background:#f1f5f9; color:#475569; }
.cat-tecnico   { background:#dbeafe; color:#1d4ed8; }
.cat-comercial { background:#fef9c3; color:#854d0e; }
.cat-marketing { background:#fce7f3; color:#be185d; }
</style>
