{% extends "base.html" %}
{% block title %}Ayuda{% endblock %}
{% block page_title %}Centro de ayuda{% endblock %}

{% block content %}
<div class="row g-4">

  <!-- Barra lateral de navegación -->
  <div class="col-lg-3">
    <div class="card sticky-top" style="top:80px">
      <div class="list-group list-group-flush rounded">
        <a href="#inicio-rapido" class="list-group-item list-group-item-action py-2" style="font-size:.85rem">
          <i class="bi bi-rocket me-2 text-primary"></i>Inicio rápido
        </a>
        <a href="#facturas" class="list-group-item list-group-item-action py-2" style="font-size:.85rem">
          <i class="bi bi-file-earmark-text me-2 text-primary"></i>Facturas
        </a>
        <a href="#gastos" class="list-group-item list-group-item-action py-2" style="font-size:.85rem">
          <i class="bi bi-receipt me-2 text-primary"></i>Gastos y tickets
        </a>
        <a href="#banco" class="list-group-item list-group-item-action py-2" style="font-size:.85rem">
          <i class="bi bi-bank me-2 text-primary"></i>Banco
        </a>
        <a href="#fiscal" class="list-group-item list-group-item-action py-2" style="font-size:.85rem">
          <i class="bi bi-calendar3 me-2 text-primary"></i>Fiscal
        </a>
        <a href="#backup" class="list-group-item list-group-item-action py-2" style="font-size:.85rem">
          <i class="bi bi-shield-check me-2 text-primary"></i>Copias de seguridad
        </a>
        <a href="#soporte" class="list-group-item list-group-item-action py-2" style="font-size:.85rem">
          <i class="bi bi-headset me-2 text-primary"></i>Soporte
        </a>
      </div>
    </div>
  </div>

  <!-- Contenido -->
  <div class="col-lg-9">

    <!-- Inicio rápido -->
    <div id="inicio-rapido" class="card mb-4">
      <div class="card-header py-3 fw-semibold">
        <i class="bi bi-rocket me-2 text-primary"></i>Inicio rápido — los primeros pasos
      </div>
      <div class="card-body p-4">
        <ol class="mb-0" style="line-height:2">
          <li><strong>Configura tu empresa</strong> — Ve a <a href="{{ url_for('configuracion.index') }}">Configuración</a> y rellena tu nombre, NIF y dirección. Estos datos aparecen en todas tus facturas.</li>
          <li><strong>Crea tus clientes</strong> — En <em>Contactos → Clientes</em> añade los clientes a los que facturas con frecuencia.</li>
          <li><strong>Emite tu primera factura</strong> — En <em>Facturación → Nueva factura emitida</em>. Selecciona el cliente, añade las líneas y haz clic en «Crear factura».</li>
          <li><strong>Registra tus gastos</strong> — Facturas recibidas de proveedores van en <em>Facturas recibidas</em>; gastos menores (comidas, parking) en <em>Tickets de gasto</em>.</li>
          <li><strong>Importa movimientos bancarios</strong> — Descarga el CSV de tu banco y súbelo en <em>Banco → Importar CSV</em>. ContaApp detecta automáticamente las columnas.</li>
        </ol>
      </div>
    </div>

    <!-- Facturas -->
    <div id="facturas" class="card mb-4">
      <div class="card-header py-3 fw-semibold">
        <i class="bi bi-file-earmark-text me-2 text-primary"></i>Facturas
      </div>
      <div class="card-body p-4">
        <div class="accordion" id="acc-facturas">

          <div class="accordion-item border-0 border-bottom">
            <h2 class="accordion-header">
              <button class="accordion-button collapsed py-3" type="button" data-bs-toggle="collapse" data-bs-target="#f1" style="font-size:.9rem">
                ¿Cómo numero las facturas correctamente?
              </button>
            </h2>
            <div id="f1" class="accordion-collapse collapse" data-bs-parent="#acc-facturas">
              <div class="accordion-body pt-0" style="font-size:.87rem;color:#475569">
                ContaApp genera automáticamente el número de factura en formato <code>AÑO-NNNN</code> (ej: <code>2026-0001</code>). La numeración es correlativa sin saltos. Puedes editarla si necesitas partir de un número distinto, pero asegúrate de no dejar huecos, ya que la Agencia Tributaria lo exige.
              </div>
            </div>
          </div>

          <div class="accordion-item border-0 border-bottom">
            <h2 class="accordion-header">
              <button class="accordion-button collapsed py-3" type="button" data-bs-toggle="collapse" data-bs-target="#f2" style="font-size:.9rem">
                ¿Qué es el IRPF en una factura de autónomo?
              </button>
            </h2>
            <div id="f2" class="accordion-collapse collapse" data-bs-parent="#acc-facturas">
              <div class="accordion-body pt-0" style="font-size:.87rem;color:#475569">
                El IRPF (retención) se aplica cuando facturas a empresas o profesionales. El tipo general es el <strong>15 %</strong> (7 % los 2 primeros años de actividad). Selecciona el porcentaje en el campo «IRPF %» al crear la factura. El cliente retiene ese importe y lo ingresa a Hacienda en tu nombre; tú lo declaras en el Modelo 130.
              </div>
            </div>
          </div>

          <div class="accordion-item border-0 border-bottom">
            <h2 class="accordion-header">
              <button class="accordion-button collapsed py-3" type="button" data-bs-toggle="collapse" data-bs-target="#f3" style="font-size:.9rem">
                ¿Puedo enviar la factura por email directamente?
              </button>
            </h2>
            <div id="f3" class="accordion-collapse collapse" data-bs-parent="#acc-facturas">
              <div class="accordion-body pt-0" style="font-size:.87rem;color:#475569">
                Sí. Primero configura tus datos SMTP en <a href="{{ url_for('configuracion.index') }}">Configuración → Email SMTP</a>. Después, en el detalle de cualquier factura emitida, usa el botón «Enviar por email». Se generará el PDF automáticamente y se enviará adjunto.
              </div>
            </div>
          </div>

          <div class="accordion-item border-0">
            <h2 class="accordion-header">
              <button class="accordion-button collapsed py-3" type="button" data-bs-toggle="collapse" data-bs-target="#f4" style="font-size:.9rem">
                ¿Cómo genero una factura rectificativa o abono?
              </button>
            </h2>
            <div id="f4" class="accordion-collapse collapse" data-bs-parent="#acc-facturas">
              <div class="accordion-body pt-0" style="font-size:.87rem;color:#475569">
                Ve a <em>Facturación → Rectificativas → Nueva rectificativa</em>. Selecciona la factura original y ajusta el importe. La rectificativa queda vinculada a la factura original en el historial. Para abonos a proveedores usa <em>Abonos a proveedores</em>.
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <!-- Gastos y tickets -->
    <div id="gastos" class="card mb-4">
      <div class="card-header py-3 fw-semibold">
        <i class="bi bi-receipt me-2 text-primary"></i>Gastos y tickets
      </div>
      <div class="card-body p-4" style="font-size:.87rem;color:#475569">
        <p><strong>Facturas recibidas</strong> — Para gastos con factura formal de un proveedor (asesor, proveedor de material, etc.). Regístralas en <em>Facturas recibidas → Nueva</em> e introduce el IVA soportado que podrás deducir.</p>
        <p><strong>Tickets de gasto</strong> — Para gastos menores sin factura formal: comidas con clientes, parking, gasolina, material de oficina pequeño. Solo necesitas el importe total y el IVA incluido; ContaApp calcula la base automáticamente.</p>
        <p class="mb-0"><strong>Categorías</strong> — Asigna una categoría a cada gasto para ver el desglose en los informes. Ve a <em>Análisis → Categorías</em> para crear las tuyas propias.</p>
      </div>
    </div>

    <!-- Banco -->
    <div id="banco" class="card mb-4">
      <div class="card-header py-3 fw-semibold">
        <i class="bi bi-bank me-2 text-primary"></i>Banco — importar movimientos
      </div>
      <div class="card-body p-4" style="font-size:.87rem;color:#475569">
        <ol class="mb-0" style="line-height:1.9">
          <li>Descarga el extracto en formato CSV desde la web de tu banco (normalmente en Cuenta → Movimientos → Exportar).</li>
          <li>Ve a <em>Banco → Importar CSV</em> y sube el archivo.</li>
          <li>ContaApp detecta automáticamente las columnas de fecha, descripción e importe. Corrígelas si es necesario y haz clic en «Importar».</li>
          <li>Los movimientos duplicados (mismo fecha + descripción + importe) se descartan automáticamente.</li>
        </ol>
      </div>
    </div>

    <!-- Fiscal -->
    <div id="fiscal" class="card mb-4">
      <div class="card-header py-3 fw-semibold">
        <i class="bi bi-calendar3 me-2 text-primary"></i>Modelos fiscales
      </div>
      <div class="card-body p-4" style="font-size:.87rem;color:#475569">
        <table class="table table-sm mb-0">
          <thead class="table-light">
            <tr><th>Modelo</th><th>¿Qué es?</th><th>Periodicidad</th></tr>
          </thead>
          <tbody>
            <tr>
              <td class="fw-semibold">303</td>
              <td>Autoliquidación del IVA (diferencia entre IVA repercutido y soportado)</td>
              <td>Trimestral</td>
            </tr>
            <tr>
              <td class="fw-semibold">130</td>
              <td>Pago fraccionado del IRPF para autónomos en estimación directa</td>
              <td>Trimestral</td>
            </tr>
            <tr>
              <td class="fw-semibold">390</td>
              <td>Resumen anual del IVA</td>
              <td>Anual (enero)</td>
            </tr>
            <tr>
              <td class="fw-semibold">347</td>
              <td>Operaciones con terceros superiores a 3.005,06 €/año</td>
              <td>Anual (febrero)</td>
            </tr>
          </tbody>
        </table>
        <p class="mt-3 mb-0 text-muted small">ContaApp calcula automáticamente los importes a partir de tus facturas. Puedes exportar cada modelo a Excel desde su propia página.</p>
      </div>
    </div>

    <!-- Backup -->
    <div id="backup" class="card mb-4">
      <div class="card-header py-3 fw-semibold">
        <i class="bi bi-shield-check me-2 text-primary"></i>Copias de seguridad
      </div>
      <div class="card-body p-4" style="font-size:.87rem;color:#475569">
        <p>ContaApp realiza una copia de seguridad automática al arrancar (si han pasado más de 24 h desde la última). Las copias se guardan en tu carpeta <code>Documentos/ContaApp/backups/</code>.</p>
        <p class="mb-0">Para hacer una copia manual o restaurar una anterior, ve a <a href="{{ url_for('backup.index') }}">Copias de seguridad</a>. Se recomienda copiar también esta carpeta a un disco externo o nube periódicamente.</p>
      </div>
    </div>

    <!-- Soporte -->
    <div id="soporte" class="card mb-4">
      <div class="card-header py-3 fw-semibold">
        <i class="bi bi-headset me-2 text-primary"></i>Soporte técnico
      </div>
      <div class="card-body p-4 text-center">
        <i class="bi bi-envelope-heart" style="font-size:2.5rem;color:#4f86f7;opacity:.7"></i>
        <p class="mt-3 mb-1 fw-semibold">¿Tienes dudas o has encontrado un error?</p>
        <p class="text-muted mb-3" style="font-size:.87rem">
          Escríbenos a <a href="mailto:soporte@contaapp.es">soporte@contaapp.es</a>
          con una descripción del problema e intentaremos responderte en menos de 48&nbsp;h.
        </p>
        <a href="mailto:soporte@contaapp.es?subject=Consulta%20ContaApp%20v{{ _version }}" class="btn btn-primary">
          <i class="bi bi-envelope me-1"></i>Contactar soporte
        </a>
      </div>
    </div>

  </div>
</div>
{% endblock %}