
<!-- ===== REPORTES ===== -->
<?php if(_nav('reportes')): ?>
<div class="page" id="page-reportes">
  <div class="ph">
    <div><div class="pt">Reportes</div><div class="ps">Informes mensuales de marketing digital por cliente</div></div>
  </div>

  <!-- Estado: sin cliente seleccionado -->
  <div id="rpt-no-client" style="display:none;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:12px;background:var(--bg3);border:1px solid var(--br2);border-radius:13px">
    <div style="font-size:44px">📋</div>
    <div style="font-family:var(--fh);font-size:18px;font-weight:700">Selecciona un cliente</div>
    <div style="font-size:13px;color:var(--m);max-width:380px;line-height:1.7">Elige un cliente desde la lista principal para ver su historial de reportes y generar uno nuevo.</div>
  </div>

  <!-- Generador -->
  <div class="cfg-card">
    <div class="chd"><div class="ctit">Generar Reporte</div></div>

    <!-- Tarjetas de servicios: siempre visibles, toggle al hacer clic si está conectado -->
    <div style="margin-bottom:18px">
      <div style="font-size:11px;color:var(--m);margin-bottom:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px">Selecciona los servicios a incluir</div>
      <div style="display:flex;gap:10px;flex-wrap:wrap" id="rpt-svc-cards">
        <!-- Meta Ads -->
        <div id="rpt-card-meta" data-click="toggleRptService|meta"
          style="flex:1;min-width:140px;border:2px solid var(--br);border-radius:10px;padding:14px 16px;cursor:not-allowed;opacity:.45;transition:all .2s;user-select:none">
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
            <span style="font-size:18px">📘</span>
            <span id="rpt-chk-meta" style="width:18px;height:18px;border-radius:4px;border:2px solid var(--br2);background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:11px"></span>
          </div>
          <div style="font-size:13px;font-weight:700">Meta Ads</div>
          <div id="rpt-badge-meta" style="font-size:10px;color:var(--m);margin-top:3px">Verificando...</div>
        </div>
        <!-- Google Ads -->
        <div id="rpt-card-google" data-click="toggleRptService|google"
          style="flex:1;min-width:140px;border:2px solid var(--br);border-radius:10px;padding:14px 16px;cursor:not-allowed;opacity:.45;transition:all .2s;user-select:none">
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
            <span style="font-size:18px">🟢</span>
            <span id="rpt-chk-google" style="width:18px;height:18px;border-radius:4px;border:2px solid var(--br2);background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:11px"></span>
          </div>
          <div style="font-size:13px;font-weight:700">Google Ads</div>
          <div id="rpt-badge-google" style="font-size:10px;color:var(--m);margin-top:3px">Verificando...</div>
        </div>
        <!-- SEO -->
        <div id="rpt-card-seo" data-click="toggleRptService|seo"
          style="flex:1;min-width:140px;border:2px solid var(--br);border-radius:10px;padding:14px 16px;cursor:not-allowed;opacity:.45;transition:all .2s;user-select:none">
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
            <span style="font-size:18px">🔍</span>
            <span id="rpt-chk-seo" style="width:18px;height:18px;border-radius:4px;border:2px solid var(--br2);background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:11px"></span>
          </div>
          <div style="font-size:13px;font-weight:700">SEO Orgánico</div>
          <div id="rpt-badge-seo" style="font-size:10px;color:var(--m);margin-top:3px">Verificando...</div>
        </div>
        <!-- TikTok Ads -->
        <div id="rpt-card-tiktok" data-click="toggleRptService|tiktok"
          style="flex:1;min-width:140px;border:2px solid var(--br);border-radius:10px;padding:14px 16px;cursor:not-allowed;opacity:.45;transition:all .2s;user-select:none">
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
            <span style="font-size:18px">🎵</span>
            <span id="rpt-chk-tiktok" style="width:18px;height:18px;border-radius:4px;border:2px solid var(--br2);background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:11px"></span>
          </div>
          <div style="font-size:13px;font-weight:700">TikTok Ads</div>
          <div id="rpt-badge-tiktok" style="font-size:10px;color:var(--m);margin-top:3px">Verificando...</div>
        </div>
        <!-- Email Marketing -->
        <div id="rpt-card-email" data-click="toggleRptService|email"
          style="flex:1;min-width:140px;border:2px solid var(--br);border-radius:10px;padding:14px 16px;cursor:not-allowed;opacity:.45;transition:all .2s;user-select:none">
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
            <span style="font-size:18px">📧</span>
            <span id="rpt-chk-email" style="width:18px;height:18px;border-radius:4px;border:2px solid var(--br2);background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:11px"></span>
          </div>
          <div style="font-size:13px;font-weight:700">Email Marketing</div>
          <div id="rpt-badge-email" style="font-size:10px;color:var(--m);margin-top:3px">Verificando...</div>
        </div>
      </div>
    </div>

    <!-- Período -->
    <div style="display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:4px">
      <div>
        <div style="font-size:11px;color:var(--m);margin-bottom:5px">Período</div>
        <select id="rpt-period" data-change="rptPeriodChange" style="padding:7px 10px;border-radius:6px;border:1px solid var(--br2);background:var(--bg2);color:var(--t);font-family:var(--fb);font-size:12px">
          <option value="last_7">Últimos 7 días</option>
          <option value="last_15">Últimos 15 días</option>
          <option value="last_30" selected>Últimos 30 días</option>
          <option value="last_90">Últimos 90 días (3 meses)</option>
          <option value="this_month">Mes actual</option>
          <option value="last_month">Mes anterior</option>
          <option value="custom">Rango personalizado</option>
        </select>
      </div>
      <div id="rpt-custom-range" style="display:none;gap:8px;align-items:center">
        <div>
          <div style="font-size:11px;color:var(--m);margin-bottom:5px">Desde</div>
          <input type="date" id="rpt-since" style="padding:7px 10px;border-radius:6px;border:1px solid var(--br2);background:var(--bg2);color:var(--t);font-family:var(--fb);font-size:12px">
        </div>
        <div>
          <div style="font-size:11px;color:var(--m);margin-bottom:5px">Hasta</div>
          <input type="date" id="rpt-until" style="padding:7px 10px;border-radius:6px;border:1px solid var(--br2);background:var(--bg2);color:var(--t);font-family:var(--fb);font-size:12px">
        </div>
      </div>
      <button id="rpt-gen-btn" data-click="generateReport" style="padding:8px 20px;border-radius:6px;font-size:13px;font-weight:600;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">
        📊 Generar Reporte
      </button>
    </div>
    <div id="rpt-status" style="font-size:12px;color:var(--m);margin-top:8px;min-height:18px"></div>
  </div>

  <!-- Preview -->
  <div id="rpt-preview-wrap" style="display:none">
    <div class="cfg-card" style="padding:0;overflow:hidden">
      <div style="padding:12px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--br);flex-wrap:wrap;gap:8px">
        <div style="font-size:13px;font-weight:600" id="rpt-preview-title">Reporte generado</div>
        <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
          <button data-click="exportReportPdf" id="btn-rpt-pdf" style="padding:6px 14px;border-radius:6px;font-size:12px;background:rgba(232,39,42,.12);border:1px solid rgba(232,39,42,.3);color:var(--red);cursor:pointer;font-family:var(--fb);font-weight:600">⬇ PDF</button>
          <button data-click="downloadReport" style="padding:6px 14px;border-radius:6px;font-size:12px;background:rgba(34,201,122,.1);border:1px solid rgba(34,201,122,.2);color:var(--g);cursor:pointer;font-family:var(--fb);font-weight:600">⬇ HTML</button>
          <button data-click="toggleRptEmailRow" style="padding:6px 14px;border-radius:6px;font-size:12px;background:rgba(155,127,244,.12);border:1px solid rgba(155,127,244,.25);color:var(--p);cursor:pointer;font-family:var(--fb);font-weight:600">📧 Enviar</button>
          <button data-click="printReport" style="padding:6px 14px;border-radius:6px;font-size:12px;background:rgba(74,158,248,.1);border:1px solid rgba(74,158,248,.2);color:var(--b);cursor:pointer;font-family:var(--fb);font-weight:600">🖨 Imprimir</button>
          <button data-click="shareReport" id="btn-rpt-share" style="padding:6px 14px;border-radius:6px;font-size:12px;background:rgba(34,201,122,.1);border:1px solid rgba(34,201,122,.2);color:var(--g);cursor:pointer;font-family:var(--fb);font-weight:600">🔗 Compartir</button>
          <button data-click="closeRptPreview" style="padding:6px 12px;border-radius:6px;font-size:12px;background:var(--bg2);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb);font-weight:600" title="Cerrar vista previa">✕</button>
        </div>
      </div>
      <!-- Fila envío email (oculta por defecto) -->
      <div id="rpt-email-row" style="display:none;align-items:center;gap:8px;padding:10px 18px;border-bottom:1px solid var(--br);background:var(--bg3);flex-wrap:wrap">
        <span style="font-size:11px;color:var(--m);white-space:nowrap">Enviar a:</span>
        <input type="email" id="rpt-email-to" placeholder="email@cliente.com" style="flex:1;min-width:200px;padding:5px 10px;border-radius:6px;border:1px solid var(--br2);background:var(--bg2);color:var(--t);font-family:var(--fb);font-size:12px" onkeydown="if(event.key==='Enter')sendReportEmail()">
        <button data-click="sendReportEmail" id="btn-rpt-send-email" style="padding:5px 14px;border-radius:6px;font-size:12px;background:rgba(155,127,244,.15);border:1px solid rgba(155,127,244,.3);color:var(--p);cursor:pointer;font-family:var(--fb);font-weight:600;white-space:nowrap">Enviar →</button>
        <span id="rpt-email-status" style="font-size:12px;color:var(--m)"></span>
      </div>
      <!-- Comparativa vs período anterior -->
      <div id="rpt-compare-row" style="display:none;padding:8px 18px;background:var(--bg2);border-bottom:1px solid var(--br);font-size:11px;color:var(--t)"></div>
      <iframe id="rpt-iframe" style="width:100%;height:700px;border:none;background:#fff"></iframe>
    </div>
  </div>

  <!-- AVI Análisis ejecutivo del reporte -->
  <div id="rpt-avi-wrap" style="display:none">
    <div class="cfg-card">
      <div class="chd">
        <div style="display:flex;align-items:center;gap:8px">
          <div style="width:26px;height:26px;background:linear-gradient(135deg,var(--red),#c9186b);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;flex-shrink:0">✦</div>
          <div class="ctit">AVI — Análisis Ejecutivo</div>
        </div>
        <button class="cact" data-click="rptAviAnalyze" id="btn-rpt-avi-retry">Regenerar</button>
      </div>
      <div class="avi-resp" id="rpt-avi-resp" style="white-space:normal;font-size:13px;line-height:1.7"></div>
    </div>
  </div>

  <!-- Historial -->
  <div class="cfg-card">
    <div class="chd"><div class="ctit">Historial de Reportes</div><button class="cact" data-click="loadReportHistory">Actualizar</button></div>
    <div id="rpt-history">
      <div style="font-size:12px;color:var(--m);text-align:center;padding:20px">Genera tu primer reporte para verlo aquí.</div>
    </div>
  </div>

  <!-- A3 — Preview de configuración antes de generar -->
  <div id="rpt-config-preview" style="display:none;background:var(--bg3);border:1px solid var(--br2);border-radius:10px;padding:14px 16px;margin-bottom:6px">
    <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--m);margin-bottom:10px">Resumen de configuración</div>
    <div style="display:flex;gap:12px;flex-wrap:wrap;font-size:12px">
      <div><span style="color:var(--m)">Período:</span> <span id="rpt-prev-period" style="font-weight:600">Últimos 30 días</span></div>
      <div><span style="color:var(--m)">Servicios:</span> <span id="rpt-prev-services"></span></div>
      <div id="rpt-prev-email-row" style="display:none"><span style="color:var(--m)">Email destino:</span> <span id="rpt-prev-email" style="font-weight:600"></span></div>
      <div id="rpt-prev-next-row" style="display:none"><span style="color:var(--m)">Próximo envío:</span> <span id="rpt-prev-next" style="font-weight:600;color:var(--b)"></span></div>
    </div>
  </div>

  <!-- Configuración envío automático -->
  <div class="cfg-card" id="rpt-settings-card" style="display:none">
    <div class="chd"><div class="ctit">Configuración del Reporte</div></div>
    <div style="display:flex;flex-direction:column;gap:14px">

      <!-- A2 — Marca del reporte -->
      <div style="background:var(--bg3);border:1px solid var(--br2);border-radius:9px;padding:14px 16px">
        <div style="font-size:12px;font-weight:600;margin-bottom:10px;color:var(--t)">Marca del reporte</div>
        <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px">
          <input type="checkbox" id="rpt-use-logo" style="width:16px;height:16px;accent-color:var(--red)" data-change="_scMultiCall|saveRptClientSettings|updateRptPreview">
          <span>Incluir logo del cliente en el PDF (usa logo de Activos de Marca)</span>
        </label>
      </div>

      <!-- A1 — Email + auto-envío + día de envío -->
      <div style="background:var(--bg3);border:1px solid var(--br2);border-radius:9px;padding:14px 16px">
        <div style="font-size:12px;font-weight:600;margin-bottom:10px;color:var(--t)">Envío automático mensual</div>
        <div style="margin-bottom:10px">
          <div style="font-size:11px;color:var(--m);margin-bottom:5px">Email del cliente</div>
          <input type="email" id="rpt-contact-email" placeholder="cliente@empresa.com"
            style="width:100%;max-width:360px;padding:8px 12px;border-radius:7px;border:1px solid var(--br2);background:var(--bg2);color:var(--t);font-family:var(--fb);font-size:13px"
            data-change="updateRptPreview">
        </div>
        <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px">
          <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px">
            <input type="checkbox" id="rpt-auto-send" style="width:16px;height:16px;accent-color:var(--red)" data-change="updateRptPreview">
            <span>Activar envío automático</span>
          </label>
          <div style="display:flex;align-items:center;gap:8px;font-size:13px">
            <span style="color:var(--m)">Día del mes:</span>
            <input type="number" id="rpt-send-day" min="1" max="28" value="1"
              style="width:56px;padding:5px 8px;border-radius:6px;border:1px solid var(--br2);background:var(--bg2);color:var(--t);font-family:var(--fb);font-size:13px;text-align:center"
              data-change="updateRptPreview">
          </div>
        </div>
        <div id="rpt-next-run" style="font-size:12px;color:var(--b);margin-bottom:10px;display:none"></div>
      </div>

      <div>
        <button data-click="saveRptClientSettings" style="padding:7px 18px;border-radius:7px;font-size:12px;font-weight:600;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">Guardar configuración</button>
        <span id="rpt-settings-status" style="font-size:12px;color:var(--m);margin-left:10px"></span>
      </div>
    </div>
  </div>

</div>
<?php endif ?>
