{# Esta no es una página web, contiene funciones para que puedan ser usadas en otras páginas. #}
{# Referencia: https://jinja.palletsprojects.com/en/2.11.x/templates/#macros #}

{% import "detail_view_macros.html" as dv_macros %}

{# Ayuda a agregar a importar los mismos archivos en el header de los archivos .html #}
{% macro headertags() -%}
{# Linea en blanco intencional #}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{# Anti-FOUC: apply saved theme before ANY paint #}
<script>
  (function(){
    var t = localStorage.getItem('ca-theme') || 'light';
    document.documentElement.setAttribute('data-theme', t);
  })();
</script>

<meta name="theme-color" content="#2E7D32">
<meta name="msapplication-TileColor" content="#2E7D32">

<meta name="description" content="Aplicación Contable.">
<meta name="author" content="William Moreno Reyes">

{# Bootstrap first so our CSS can override it #}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
{# Our design system last — wins over Bootstrap #}
<link href="{{ url_for('static', filename='css/cacaoaccounting.css') }}" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<link rel="apple-touch-icon" sizes="57x57"
  href="{{ url_for('static', filename='media/favicon/apple-icon-57x57.png') }}">
<link rel="apple-touch-icon" sizes="60x60"
  href="{{ url_for('static', filename='media/favicon/apple-icon-60x60.png') }}">
<link rel="apple-touch-icon" sizes="72x72"
  href="{{ url_for('static', filename='media/favicon/apple-icon-72x72.png') }}">
<link rel="apple-touch-icon" sizes="76x76"
  href="{{ url_for('static', filename='media/favicon/apple-icon-76x76.png') }}">
<link rel="apple-touch-icon" sizes="114x114"
  href="{{ url_for('static', filename='media/favicon/apple-icon-114x114.png') }}">
<link rel="apple-touch-icon" sizes="120x120"
  href="{{ url_for('static', filename='media/favicon/apple-icon-120x120.png') }}">
<link rel="apple-touch-icon" sizes="144x144"
  href="{{ url_for('static', filename='media/favicon/apple-icon-144x144.png') }}">
<link rel="apple-touch-icon" sizes="152x152"
  href="{{ url_for('static', filename='media/favicon/apple-icon-152x152.png') }}">
<link rel="apple-touch-icon" sizes="180x180"
  href="{{ url_for('static', filename='media/favicon/apple-icon-180x180.png') }}">
<link rel="icon" type="image/png" sizes="192x192"
  href="{{ url_for('static', filename='media/favicon/android-icon-192x192.png') }}">
<link rel="icon" type="image/png" sizes="32x32"
  href="{{ url_for('static', filename='media/favicon/favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="96x96"
  href="{{ url_for('static', filename='media/favicon/favicon-96x96.png') }}">
<link rel="icon" type="image/png" sizes="16x16"
  href="{{ url_for('static', filename='media/favicon/favicon-16x16.png') }}">
<meta name="msapplication-TileImage" content="{{ url_for('static', filename='media/favicon/ms-icon-144x144.png') }}">

<link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">

<script src="{{ url_for('static', filename='js/smart-select.js') }}?v=20260506-2" defer></script>
<script src="https://cdn.jsdelivr.net/npm/exceljs@4.4.0/dist/exceljs.min.js"></script>
<script src="{{ url_for('static', filename='js/transaction-form.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/document-flow-tree.js') }}" defer></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>

{%- endmacro %}

{# Ayuda a renderizar la barra superior en las páginas de la aplicación #}
{% macro cabecera() %}
<header class="ca-navbar">
  <div class="ca-navbar-start">
    <button class="ca-navbar-toggler d-md-none" type="button" data-bs-toggle="collapse"
      data-bs-target="#BarraLateralMenu" aria-expanded="false" aria-controls="BarraLateralMenu">
      <i class="bi bi-list"></i>
    </button>
    <a class="ca-navbar-brand" href="{{ url_for('cacao_app.pagina_inicio') }}">
      <img height="30" src="{{ url_for('static', filename='media/cacao_accounting _logo.svg') }}" alt="Cacao Accounting"
        class="d-inline-block align-middle">
    </a>
  </div>
  <div class="ca-navbar-end">
    <button class="ca-nav-btn" id="ca-theme-btn" onclick="caToggleTheme()" title="Cambiar tema" type="button">
      <i class="bi bi-moon-stars-fill" id="ca-theme-icon"></i>
    </button>
    {% if is_cloud_mode() %}
    <a class="ca-nav-btn position-relative" href="{{ url_for('api.my_tasks') }}" title="Mis tareas">
      <i class="bi bi-list-task"></i>
      {% set task_count = current_user_open_task_count() %}
      {% if task_count %}
      <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">{{ task_count }}</span>
      {% endif %}
    </a>
    {% endif %}
    <a class="ca-nav-btn" href="{{ url_for('login.profile') }}" title="Mi perfil">
      <i class="bi bi-person-circle"></i>
    </a>
    <a class="ca-nav-btn" href="{{ url_for('login.cerrar_sesion') }}" title="Cerrar sesión">
      <i class="bi bi-box-arrow-right"></i>
    </a>
  </div>
</header>
<script>
  (function () {
    var icon = document.getElementById('ca-theme-icon');
    function syncIcon() {
      var t = document.documentElement.getAttribute('data-theme');
      if (icon) icon.className = (t === 'dark') ? 'bi bi-sun-fill' : 'bi bi-moon-stars-fill';
    }
    syncIcon();
    globalThis.caToggleTheme = function () {
      var current = document.documentElement.getAttribute('data-theme') || 'light';
      var next = current === 'dark' ? 'light' : 'dark';
      document.documentElement.setAttribute('data-theme', next);
      localStorage.setItem('ca-theme', next);
      syncIcon();
    };
  })();
</script>
{%- endmacro %}

{# Ayuda a renderizar la barra lateral en las páginas de la aplicación #}
{% macro barralateral() -%}
<nav id="BarraLateralMenu" class="ca-sidebar">
  <ul class="nav">
    {% if validar_modulo_activo("accounting") and permisos(modulo=id_modulo("accounting"), usuario=usuario.id).autorizado -%}
    <li class="nav-item">
      <a href="{{ url_for('contabilidad.conta') }}" class="nav-link {% if request.blueprint == 'contabilidad' %}active{% endif %}">
        <i class="bi bi-book"></i>
        Contabilidad
      </a>
    </li>
    {%- endif %}
    {% if validar_modulo_activo("cash") and permisos(modulo=id_modulo("cash"), usuario=usuario.id).autorizado %}
    <li class="nav-item">
      <a href="{{ url_for('bancos.bancos_') }}" class="nav-link {% if request.blueprint == 'bancos' %}active{% endif %}">
        <i class="bi bi-bank"></i>
        Caja y Bancos
      </a>
    </li>
    {%- endif %}
    {% if validar_modulo_activo("purchases") and permisos(modulo=id_modulo("purchases"), usuario=usuario.id).autorizado %}
    <li class="nav-item">
      <a href="{{ url_for('compras.compras_') }}" class="nav-link {% if request.blueprint == 'compras' %}active{% endif %}">
        <i class="bi bi-cart4"></i>
        Compras
      </a>
    </li>
    {%- endif %}
    {% if validar_modulo_activo("inventory") and permisos(modulo=id_modulo("inventory"), usuario=usuario.id).autorizado -%}
    <li class="nav-item">
      <a href="{{ url_for('inventario.inventario_') }}" class="nav-link {% if request.blueprint == 'inventario' %}active{% endif %}">
        <i class="bi bi-shop"></i>
        Inventarios
      </a>
    </li>
    {%- endif %}
    {% if validar_modulo_activo("sales") and permisos(modulo=id_modulo("sales"), usuario=usuario.id).autorizado %}
    <li class="nav-item">
      <a href="{{ url_for('ventas.ventas_') }}" class="nav-link {% if request.blueprint == 'ventas' %}active{% endif %}">
        <i class="bi bi-handbag"></i>
        Ventas
      </a>
    </li>
    {%- endif %}
    {% if modulos_extra -%}
    {% for modulo in modulos_extra -%}
    {% if validar_modulo_activo(modulo.nombre_modulo) and tiene_acceso_bi_empresa(modulo.nombre_modulo, usuario.id) -%}
    <li class="nav-item">
      <a href="{{ url_for( modulo.url ) }}" class="nav-link">
        {{ modulo.icon}}
        {{ modulo.nombre }}
      </a>
    </li>
    {%- endif %}
    {%- endfor %}
    {%- endif %}
    {% if validar_modulo_activo("admin") and permisos(modulo=id_modulo("admin"), usuario=usuario.id).autorizado -%}
    <li class="nav-item">
      <a href="{{ url_for('admin.admin_') }}" class="nav-link {% if request.blueprint == 'admin' %}active{% endif %}">
        <i class="bi bi-gear"></i>
        Administración
        {% set ap_count = pending_approval_count() %}
        {% if ap_count > 0 %}
        <span class="badge bg-warning text-dark ms-1">{{ ap_count }}</span>
        {% endif %}
      </a>
    </li>
    {%- endif %}
    <li class="nav-item d-md-none">
      <a href="{{ url_for('login.cerrar_sesion') }}" class="nav-link">
        <i class="bi bi-box-arrow-right"></i> Cerrar Sesión
      </a>
    </li>
  </ul>
</nav>
{%- endmacro %}


{% macro list_filters(show_status=False, placeholder=None) %}
<div class="p-3 border-bottom">
  <form method="get" action="{{ url_for(request.endpoint) }}" class="row g-2 align-items-end">
    <div class="{% if show_status %}col-md-5{% else %}col-md-8{% endif %}">
      <label class="form-label small text-muted mb-1" for="list-search">{{ _('Buscar') }}</label>
      <input
        type="text"
        id="list-search"
        name="search"
        class="form-control form-control-sm"
        placeholder="{{ placeholder or _('Buscar por documento, tercero o referencia...') }}"
        value="{{ request.args.get('search', '') }}"
      >
    </div>
    {% if show_status %}
    <div class="col-md-3">
      <label class="form-label small text-muted mb-1" for="list-status">{{ _('Estado') }}</label>
      <select id="list-status" name="status" class="form-select form-select-sm">
        <option value="">{{ _('Todos') }}</option>
        <option value="draft" {% if request.args.get('status') == 'draft' %}selected{% endif %}>{{ _('Borrador') }}</option>
        <option value="submitted" {% if request.args.get('status') == 'submitted' %}selected{% endif %}>{{ _('Contabilizado') }}</option>
        <option value="cancelled" {% if request.args.get('status') == 'cancelled' %}selected{% endif %}>{{ _('Cancelado') }}</option>
      </select>
    </div>
    {% endif %}
    <div class="col-auto">
      <button type="submit" class="btn btn-sm btn-primary"><i class="bi bi-search me-1"></i>{{ _('Buscar') }}</button>
      <a href="{{ url_for(request.endpoint) }}" class="btn btn-sm btn-outline-secondary">{{ _('Limpiar') }}</a>
    </div>
  </form>
</div>
{% endmacro %}

{% macro rendizar_paginacion(consulta=None, vista=None) %}
<p class="ca-pagination">{{ consulta.total }} items encontrados.
  <br>
  {% if consulta.has_prev %}
  <a href="{{ url_for(vista, page=consulta.prev_num, search=request.args.get('search', ''), status=request.args.get('status', '')) }}"><i class="bi bi-arrow-left-short"></i> Anterior</a>
  {% endif %}
  Página {{ consulta.page }} de {{ consulta.pages }}
  {% if consulta.has_next %}
  <a href="{{ url_for(vista, page=consulta.next_num, search=request.args.get('search', ''), status=request.args.get('status', '')) }}">Siguiente <i class="bi bi-arrow-right-short"></i></a>
  {% endif %}
</p>
{% endmacro %}

{% macro render_status(status=None, lista_status=None) %}
{%- set normalized_status = status if status is not none else 'activo' -%}
{%- set status_info = lista_status[normalized_status] if lista_status and normalized_status in lista_status else None -%}
<span class="badge" title="{{ status_info.label if status_info else 'Activo' }}">
  <i class="bi bi-circle-fill" style="color:{{ status_info.color if status_info else '#6c757d' }}"></i>
</span>
{% endmacro %}

{% macro module_status_badge(status_info) %}
<span
  class="ca-status-dot {{ status_info.css_class }}"
  title="{{ status_info.title }}"
  aria-label="{{ status_info.label }}"
  data-status="{{ status_info.status }}"
  role="img"
>
  <span class="visually-hidden">{{ status_info.label }}</span>
</span>
{% endmacro %}

{% macro crear_nueva_entidad() %}

<div style="text-align: center; padding: 2rem 0;">
  <p>
    <img src="{{ url_for('static', filename='media/cacao_accounting.png') }}" height="50" width="50"
      alt="Cacao Accounting Logo">
    <br>
    <strong>Bienvenido a Cacao Accounting</strong>
  </p>
  <p>Al parecer es la primera vez que accedes al sistema.</p>
  <p>Para utilizar el sistema debes al menos haber creado una entidad a la que realizar registros:</p>
  <p>
    <a class="btn btn-success btn-sm" href="{{ url_for('contabilidad.nueva_entidad') }}" role="button"><i
        class="bi bi-plus-circle-fill" aria-hidden="true"></i> Crear Nueva
      Entidad</a>
  </p>
  {% if is_cloud_mode() %}
  <p>Los siguientes vínculos pueden ser de su interés:</p>

  <div class="d-flex justify-content-center gap-2">

    <a class="btn btn-secondary btn-sm" href="https://cacao-accounting-manual.readthedocs.io/es/latest/"
      role="button"><i class="bi bi-book-fill" aria-hidden="true"></i> Manual de Usuario</a>

    <a class="btn btn-secondary btn-sm" href="https://cacao-accounting-manual.readthedocs.io/es/latest/"
      role="button"><i class="bi bi-chat-left-dots" aria-hidden="true"></i> Sala de Chat</a>

  </div>

  {% endif %}

</div>

{% endmacro %}

{# ─── Docstatus Badge ──────────────────────────────────────────── #}
{% macro docstatus_badge(docstatus) %}
  {% if docstatus == 0 %}
    <span class="badge bg-secondary"><i class="bi bi-pencil-fill me-1"></i>Borrador</span>
  {% elif docstatus == 1 %}
    <span class="badge bg-success"><i class="bi bi-check-circle-fill me-1"></i>Aprobado</span>
  {% elif docstatus == 2 %}
    <span class="badge bg-danger"><i class="bi bi-x-circle-fill me-1"></i>Cancelado</span>
  {% endif %}
{% endmacro %}

{# ─── Calculated Document Status Badge ────────────────────────── #}
{% macro document_status_badge(status_info, detail=False) %}
  <span class="badge {{ status_info.badge_class }}" title="{{ status_info.full_label }}">
    <i class="bi {{ status_info.icon }} me-1"></i>{{ status_info.label }}
  </span>
  {% if detail %}
    <span class="ms-2 text-muted small">{{ status_info.full_label }}</span>
  {% endif %}
{% endmacro %}

{% macro document_status_for(document_type, document, detail=False) %}
  {{ document_status_badge(document_status_info(document_type, document), detail=detail) }}
{% endmacro %}

{% macro document_collaboration_panel(document_type, document) %}
{% if is_cloud_mode() %}
{% set tasks = document_collaboration_tasks(document_type, document.id) %}
{% set users = collaboration_active_users() %}
<div class="ca-card mt-3" x-data="{ open: false, collaborationSection: 'comment' }">
  <div class="ca-card-header" role="button" tabindex="0" @click="open = !open" @keydown.enter.prevent="open = !open" @keydown.space.prevent="open = !open">
    <h6 class="ca-card-title mb-0"><i class="bi bi-cloud-check me-1"></i>{{ _('Colaboracion') }}</h6>
    <button class="btn btn-sm btn-outline-secondary" type="button" @click.stop="open = !open" :aria-expanded="open.toString()">
      <i class="bi" :class="open ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
    </button>
  </div>
  <div class="p-3" x-show="open" x-cloak>
    <div class="btn-group btn-group-sm mb-3" role="group" aria-label="{{ _('Colaboracion') }}">
      <button
        class="btn"
        :class="collaborationSection === 'comment' ? 'btn-primary' : 'btn-outline-primary'"
        type="button"
        @click="collaborationSection = collaborationSection === 'comment' ? null : 'comment'"
      >
        <i class="bi bi-chat-left-text me-1"></i>{{ _('Comentario') }}
      </button>
      <button
        class="btn"
        :class="collaborationSection === 'task' ? 'btn-primary' : 'btn-outline-primary'"
        type="button"
        @click="collaborationSection = collaborationSection === 'task' ? null : 'task'"
      >
        <i class="bi bi-list-task me-1"></i>{{ _('Crear tarea') }}
      </button>
    </div>

    <section x-show="collaborationSection === 'comment'" x-cloak class="mb-3">
      <form method="post" action="{{ url_for('api.api_document_comment', document_type=document_type, document_id=document.id) }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <label class="form-label small fw-semibold" for="document-comment-{{ document.id }}">{{ _('Comentario') }}</label>
        <div class="d-flex gap-2">
          <textarea class="form-control form-control-sm" id="document-comment-{{ document.id }}" name="comment" rows="2" maxlength="2000" required></textarea>
          <button class="btn btn-sm btn-primary align-self-start" type="submit">{{ _('Comentar') }}</button>
        </div>
      </form>
    </section>

    <section x-show="collaborationSection === 'task'" x-cloak class="mb-3">
      <form method="post" action="{{ url_for('api.api_document_task', document_type=document_type, document_id=document.id) }}" class="row g-2 align-items-end">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="col-md-3">
          <label class="form-label small fw-semibold" for="task-title-{{ document.id }}">{{ _('Nueva tarea') }}</label>
          <input class="form-control form-control-sm" id="task-title-{{ document.id }}" name="title" maxlength="255" required>
        </div>
        <div class="col-md-3">
          <label class="form-label small fw-semibold" for="task-assigned-{{ document.id }}">{{ _('Asignar a') }}</label>
          <select class="form-select form-select-sm" id="task-assigned-{{ document.id }}" name="assigned_to" required>
            <option value=""></option>
            {% for user_row in users %}
            <option value="{{ user_row.id }}">{{ user_row.user }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-2">
          <label class="form-label small fw-semibold" for="task-priority-{{ document.id }}">{{ _('Prioridad') }}</label>
          <select class="form-select form-select-sm" id="task-priority-{{ document.id }}" name="priority">
            <option value="normal">{{ _('Normal') }}</option>
            <option value="low">{{ _('Baja') }}</option>
            <option value="high">{{ _('Alta') }}</option>
          </select>
        </div>
        <div class="col-md-2">
          <label class="form-label small fw-semibold" for="task-due-{{ document.id }}">{{ _('Vencimiento') }}</label>
          <input class="form-control form-control-sm" id="task-due-{{ document.id }}" type="date" name="due_date">
        </div>
        <div class="col-md-2">
          <button class="btn btn-sm btn-outline-primary w-100" type="submit">{{ _('Crear tarea') }}</button>
        </div>
        <div class="col-12">
          <textarea class="form-control form-control-sm" name="description" rows="2" placeholder="{{ _('Descripcion') }}"></textarea>
        </div>
      </form>
    </section>
    <h6 class="small fw-semibold text-muted text-uppercase">{{ _('Tareas del documento') }}</h6>
    {% if tasks %}
    <div class="table-responsive">
      <p class="text-muted small mb-2">{{ _('Detalle de tareas vinculadas al documento, con prioridad, estado y vencimiento.') }}</p>
      <table class="table table-sm align-middle mb-0">
        <caption class="visually-hidden">{{ _('Tareas del documento') }}</caption>
        <thead><tr><th>{{ _('Titulo') }}</th><th>{{ _('Prioridad') }}</th><th>{{ _('Estado') }}</th><th>{{ _('Vencimiento') }}</th></tr></thead>
        <tbody>
          {% for task in tasks %}
          <tr><td>{{ task.title }}</td><td>{{ task.priority }}</td><td>{{ task.status }}</td><td>{{ task.due_date or '-' }}</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="text-muted small mb-0">{{ _('No hay tareas para este documento.') }}</p>
    {% endif %}
  </div>
</div>
{% endif %}
{% endmacro %}

{# ─────────────────────────────────────────────────────────────── #}
{# Árbol de flujo documental — componente reutilizable              #}
{#                                                                   #}
{# Uso:                                                              #}
{#   {{ macros.document_flow_tree("sales_invoice", registro) }}     #}
{#                                                                   #}
{# El componente Alpine.js `documentFlowTree` se registra en        #}
{# cacao_accounting/static/js/document-flow-tree.js y se carga      #}
{# globalmente desde headertags().                                   #}
{# ─────────────────────────────────────────────────────────────── #}
{% macro document_flow_tree(document_type, document, docstatus=None, create_actions_json='[]') %}
{%- set status_value = document.status|default('') -%}
{%- set inferred_docstatus = 1 if status_value == 'submitted' else (2 if status_value == 'cancelled' else 0) -%}
{%- set effective_docstatus = docstatus if docstatus is not none else (document.docstatus|default(inferred_docstatus)) -%}
{%- set api_url = url_for('api.api_document_flow_tree') ~ '?document_type=' ~ document_type ~ '&document_id=' ~ document.id -%}
<div class="ca-card ca-document-flow mt-3"
     x-data='documentFlowTree({ apiUrl: {{ api_url | tojson }}, docstatus: {{ effective_docstatus | int }}, createActions: {{ create_actions_json | safe }} })'>
  <div class="ca-card-header" role="button" tabindex="0" @click="toggle()" @keydown.enter.prevent="toggle()" @keydown.space.prevent="toggle()">
    <div class="d-flex align-items-start gap-2">
      <i class="bi bi-diagram-3 mt-1"></i>
      <div>
        <div class="d-flex align-items-center gap-2 flex-wrap">
          <h6 class="ca-document-flow__title mb-0">{{ _('Flujo documental') }}</h6>
          <span class="ca-flow-badge ca-flow-badge--draft" x-text="documentCountLabel"></span>
        </div>
        <p class="ca-document-flow__subtitle mb-0">{{ _('Trazabilidad completa de esta transacción') }}</p>
      </div>
    </div>
    <button class="btn btn-sm btn-outline-secondary" type="button" @click.stop="toggle()" :aria-expanded="open.toString()">
      <i class="bi" :class="open ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
    </button>
  </div>

  <div x-show="open" x-cloak class="ca-document-flow__body p-3">
    <div class="d-flex align-items-center gap-2 flex-wrap mb-3">
      <button type="button" class="btn btn-sm btn-outline-secondary" @click="expandAll()">{{ _('Expandir todo') }}</button>
      <button type="button" class="btn btn-sm btn-outline-secondary" @click="collapseAll()">{{ _('Contraer todo') }}</button>
      <button type="button" class="btn btn-sm btn-outline-secondary" @click="load()" aria-label="{{ _('Actualizar flujo documental') }}">
        <i class="bi bi-arrow-clockwise"></i>
      </button>
    </div>
    <template x-if="isDraft">
      <div class="ca-document-flow__empty">
        <i class="bi bi-info-circle me-1"></i>
        {{ _('El flujo documental estará disponible cuando el documento sea aprobado.') }}
      </div>
    </template>

    <template x-if="!isDraft">
      <div>
        <div x-show="loading" class="ca-document-flow__loading">
          <span class="spinner-border spinner-border-sm me-1"></span>{{ _('Cargando flujo documental…') }}
        </div>

        <template x-if="!loading && error">
          <div class="ca-document-flow__error">
            <i class="bi bi-exclamation-triangle me-1"></i>
            {{ _('No se pudo cargar el flujo documental.') }}
            <button class="btn btn-link btn-sm p-0 ms-2" @click="load()">{{ _('Reintentar') }}</button>
          </div>
        </template>

        <template x-if="!loading && !error && loaded">
          <div>
            <div class="ca-document-flow__section">
              <p class="ca-document-flow__section-title mb-1">{{ _('Documento actual') }}</p>
              <div x-html="renderCurrentNode()"></div>
            </div>

            <template x-if="createActions.length > 0">
              <div class="ca-document-flow__section">
                <p class="ca-document-flow__section-title mb-1">{{ _('Acciones disponibles') }}</p>
                <div class="d-flex flex-wrap gap-2">
                  <template x-for="action in createActions" :key="action.endpoint + '-' + action.target_type">
                    <a :href="action.create_url" class="btn btn-sm btn-outline-primary" x-show="action.create_url">
                      <i class="bi bi-plus-lg me-1"></i><span x-text="action.label"></span>
                    </a>
                  </template>
                </div>
              </div>
            </template>

            <template x-if="upstream.length > 0">
              <div class="ca-document-flow__section">
                <p class="ca-document-flow__section-title mb-1">{{ _('Origen / Documentos aplicados') }}</p>
                <div x-html="renderNodes(upstream)"></div>
              </div>
            </template>

            <template x-if="downstream.length > 0">
              <div class="ca-document-flow__section">
                <p class="ca-document-flow__section-title mb-1">{{ _('Derivados') }}</p>
                <div x-html="renderNodes(downstream)"></div>
              </div>
            </template>

            <template x-if="upstream.length === 0 && downstream.length === 0">
              <div class="ca-document-flow__empty">
                <i class="bi bi-info-circle me-1"></i>{{ _('No hay documentos relacionados.') }}
              </div>
            </template>

            <template x-if="meta && meta.node_count >= meta.max_nodes">
              <div class="text-muted small mt-2">
                <i class="bi bi-three-dots me-1"></i>
                {{ _('El flujo contiene más documentos. Use búsqueda o filtros.') }}
              </div>
            </template>
          </div>
        </template>
      </div>
    </template>
  </div>
</div>
{% endmacro %}

{# ─── Workflow Buttons (Submit / Cancel) ──────────────────────── #}
{% macro workflow_buttons(docstatus, submit_url, cancel_url, submit_label, cancel_label) %}
  {% if docstatus == 0 %}
    <form method="post" action="{{ submit_url }}" class="d-inline">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <button type="submit" class="btn btn-sm btn-success">
        <i class="bi bi-check-circle me-1"></i>{{ submit_label }}
      </button>
    </form>
  {% elif docstatus == 1 %}
    <form method="post" action="{{ cancel_url }}" class="d-inline">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <button type="submit" class="btn btn-sm btn-outline-danger"
              onclick="return confirm('¿Cancelar este documento?')">
        <i class="bi bi-arrow-counterclockwise me-1"></i>{{ cancel_label }}
      </button>
    </form>
  {% endif %}
{% endmacro %}

{% macro detail_nav_buttons(list_url, new_url) %}
  <a class="btn btn-sm btn-outline-secondary" href="{{ list_url }}">
    <i class="bi bi-list-ul me-1"></i>{{ _('Listado') }}
  </a>
  <a class="btn btn-sm btn-primary" href="{{ new_url }}">
    <i class="bi bi-plus-lg me-1"></i>{{ _('Nuevo') }}
  </a>
{% endmacro %}

{# ─── Line Items Table (Alpine.js) for create forms ──────────── #}
{# Params:                                                         #}
{#   items_disponibles: list of {code, name, uom}                 #}
{#   uoms_disponibles:  list of {code, name}                      #}
{#   source_api_url:    string or None — enables auto-fill modal   #}
{#   source_label:      human-readable source doc label            #}
{% macro lineas_items(items_disponibles, uoms_disponibles, source_api_url=None, source_label="documento origen") %}
<div class="ca-card mt-3"
     x-data="{
       items: [],
       availableItems: {{ items_disponibles | tojson }},
       availableUoms:  {{ uoms_disponibles  | tojson }},
       sourceItems: [],
       loadingSource: false,
       addRow() {
         this.items.push({
           item_code:'', item_name:'', qty:1, uom:'', rate:0, amount:0,
           source_type:'', source_id:'', source_item_id:''
         });
       },
       removeRow(i) {
         this.items.splice(i, 1);
       },
       calcAmount(i) {
         this.items[i].amount = parseFloat(this.items[i].qty || 0) * parseFloat(this.items[i].rate || 0);
       },
       onItemSelect(i) {
         const found = this.availableItems.find(x => x.code === this.items[i].item_code);
         if (found) {
           this.items[i].item_name = found.name;
           if (!this.items[i].uom) this.items[i].uom = found.uom || '';
         }
         this.calcAmount(i);
       },
       fetchSource(apiUrl) {
         this.loadingSource = true;
         fetch(apiUrl, {credentials: 'same-origin'})
           .then(r => r.json())
           .then(data => {
             this.sourceItems = (data.items || []).map(item => Object.assign({selected: true}, item));
             this.loadingSource = false;
           })
           .catch(() => { this.loadingSource = false; });
       },
       applySource() {
         const sel = this.sourceItems.filter(i => i.selected);
         sel.forEach(i => {
           const exists = this.items.some(row =>
             row.source_type === i.source_type &&
             row.source_id === i.source_id &&
             row.source_item_id === i.source_item_id
           );
           if (!exists) {
             this.items.push({
               item_code: i.item_code,
               item_name: i.item_name,
               qty: i.qty,
               uom: i.uom,
               rate: i.rate,
               amount: parseFloat(i.qty || 0) * parseFloat(i.rate || 0),
               source_type: i.source_type || '',
               source_id: i.source_id || '',
               source_item_id: i.source_item_id || ''
             });
           }
         });
       }
     }">
  <div class="ca-card-header">
    <h6 class="ca-card-title mb-0"><i class="bi bi-table me-1"></i>Productos / Servicios</h6>
    <div class="d-flex gap-2">
      {% if source_api_url %}
      <button type="button" class="btn btn-sm btn-outline-secondary"
              data-bs-toggle="modal" data-bs-target="#modalAutofill"
              @click="fetchSource('{{ source_api_url }}')">
        <i class="bi bi-arrow-repeat me-1"></i>Actualizar Elementos
      </button>
      {% endif %}
      <button type="button" class="btn btn-sm btn-outline-primary" @click="addRow()">
        <i class="bi bi-plus me-1"></i>Agregar Línea
      </button>
    </div>
  </div>

  <div class="table-responsive p-2">
    <table class="ca-table">
      <caption class="visually-hidden">Líneas del documento</caption>
      <thead>
        <tr>
          <th scope="col" style="width:22%">Artículo</th>
          <th scope="col" style="width:22%">Descripción</th>
          <th scope="col" style="width:10%">Cantidad</th>
          <th scope="col" style="width:10%">UOM</th>
          <th scope="col" style="width:12%">Precio Unit.</th>
          <th scope="col" style="width:12%">Monto</th>
          <th scope="col" style="width:6%"></th>
        </tr>
      </thead>
      <tbody>
        <template x-for="(item, idx) in items" :key="idx">
          <tr>
            <td>
              <select :name="'item_code_' + idx" x-model="item.item_code"
                      @change="onItemSelect(idx)" class="form-select form-select-sm">
                <option value=""></option>
                <template x-for="ai in availableItems" :key="ai.code">
                  <option :value="ai.code" :selected="ai.code === item.item_code"
                          x-text="ai.code + ' — ' + ai.name"></option>
                </template>
              </select>
              <input type="hidden" :name="'item_name_' + idx" :value="item.item_name">
              <input type="hidden" :name="'source_type_' + idx" :value="item.source_type">
              <input type="hidden" :name="'source_id_' + idx" :value="item.source_id">
              <input type="hidden" :name="'source_item_id_' + idx" :value="item.source_item_id">
            </td>
            <td><input type="text" :name="'item_name_display_' + idx" x-model="item.item_name"
                       class="form-control form-control-sm" placeholder="Descripción"></td>
            <td><input type="number" :name="'qty_' + idx" x-model.number="item.qty" min="0.0001"
                       step="0.0001" @input="calcAmount(idx)" class="form-control form-control-sm"></td>
            <td>
              <select :name="'uom_' + idx" x-model="item.uom" class="form-select form-select-sm">
                <option value=""></option>
                <template x-for="u in availableUoms" :key="u.code">
                  <option :value="u.code" :selected="u.code === item.uom" x-text="u.code"></option>
                </template>
              </select>
            </td>
            <td><input type="number" :name="'rate_' + idx" x-model.number="item.rate" min="0"
                       step="0.0001" @input="calcAmount(idx)" class="form-control form-control-sm"></td>
            <td>
              <span x-text="item.amount.toFixed(2)" style="font-size:.85rem;"></span>
              <input type="hidden" :name="'amount_' + idx" :value="item.amount">
            </td>
            <td>
              <button type="button" class="btn btn-sm btn-outline-danger" @click="removeRow(idx)"
                      title="Eliminar línea"><i class="bi bi-trash"></i></button>
            </td>
          </tr>
        </template>
        <tr x-show="items.length === 0">
          <td colspan="7" class="text-center text-muted py-3" style="font-size:.85rem;">
            Sin líneas. Use "Agregar Línea"{% if source_api_url %} o "Actualizar Elementos"{% endif %}.
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  {% if source_api_url %}
  {# ── Auto-fill modal ── #}
  <div class="modal fade" id="modalAutofill" tabindex="-1" aria-labelledby="modalAutofillLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalAutofillLabel">
            <i class="bi bi-table me-2"></i>Actualizar Elementos desde {{ source_label }}
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>
        <div class="modal-body">
          <div x-show="loadingSource" class="text-center py-3">
            <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
            Cargando elementos…
          </div>
          <div x-show="!loadingSource">
            <table class="ca-table">
              <caption class="visually-hidden">Elementos del documento origen</caption>
              <thead>
                <tr>
                  <th scope="col" style="width:5%"><input type="checkbox"
                    @change="sourceItems.forEach(i => i.selected = $event.target.checked)"></th>
                  <th scope="col">Código</th>
                  <th scope="col">Descripción</th>
                  <th scope="col">Ordenado</th>
                  <th scope="col">Consumido</th>
                  <th scope="col">Pendiente</th>
                  <th scope="col">Traer</th>
                  <th scope="col">UOM</th>
                  <th scope="col">Precio</th>
                </tr>
              </thead>
              <tbody>
                <template x-for="(si, idx) in sourceItems" :key="idx">
                  <tr>
                    <td><input type="checkbox" x-model="si.selected"></td>
                    <td x-text="si.item_code"></td>
                    <td x-text="si.item_name"></td>
                    <td x-text="Number(si.source_qty || si.qty || 0).toFixed(4)"></td>
                    <td x-text="Number(si.consumed_qty || 0).toFixed(4)"></td>
                    <td x-text="Number(si.pending_qty || si.qty || 0).toFixed(4)"></td>
                    <td>
                      <input type="number" x-model.number="si.qty" min="0.0001"
                             :max="si.pending_qty || si.qty" step="0.0001"
                             class="form-control form-control-sm" style="width:90px">
                    </td>
                    <td x-text="si.uom"></td>
                    <td x-text="Number(si.rate || 0).toFixed(2)"></td>
                  </tr>
                </template>
                <tr x-show="sourceItems.length === 0">
                  <td colspan="9" class="text-center text-muted py-3">Sin elementos disponibles.</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal" @click="applySource()">
            <i class="bi bi-arrow-repeat me-1"></i>Actualizar
          </button>
        </div>
      </div>
    </div>
  </div>
  {% endif %}
</div>
{% endmacro %}

{# ─── Line Items read-only table (for detail pages) ───────────── #}
{% macro lineas_tabla_lectura(items, currency_code='') %}
{{ dv_macros.detail_lines_table(items, currency_code=currency_code) }}
{% endmacro %}

{# ─── Audit Timeline (reusable across all document types) ─────── #}
{% macro audit_timeline(timeline, page_size=20) %}
{% set field_labels = {
    'items':               _('Líneas del documento'),
    'memo':                _('Observaciones'),
    'exchange_rate':       _('Tipo de cambio'),
    'fiscal_year_id':      _('Año fiscal'),
    'fiscal_year':         _('Año fiscal'),
    'status':              _('Estado'),
    'date':                _('Fecha'),
    'posting_date':        _('Fecha de contabilización'),
    'reference':           _('Referencia'),
    'entity':              _('Compañía'),
    'company':             _('Compañía'),
    'currency':            _('Moneda'),
    'currency_id':         _('Moneda'),
    'document_no':         _('Número de documento'),
    'serie':               _('Serie'),
    'total_amount':        _('Total'),
    'grand_total':         _('Total general'),
    'remarks':             _('Observaciones'),
    'narration':           _('Descripción'),
    'account':             _('Cuenta'),
    'cost_center':         _('Centro de costos'),
    'third_code':          _('Tercero'),
    'third_type':          _('Tipo de tercero'),
    'payment_method':      _('Método de pago'),
    'bank_account':        _('Cuenta bancaria'),
    'warehouse':           _('Almacén'),
    'item_code':           _('Artículo'),
    'quantity':            _('Cantidad'),
    'rate':                _('Precio unitario'),
    'amount':              _('Monto'),
    'tax':                 _('Impuesto'),
    'discount':            _('Descuento'),
    'party_id':            _('Tercero'),
    'party_type':          _('Tipo de tercero'),
    'due_date':            _('Fecha de vencimiento'),
    'payment_terms':       _('Condiciones de pago')
} %}
{% set total = timeline | length %}
{% set older = timeline[: total - page_size] if total > page_size else [] %}
{% set recent = timeline[total - page_size :] if total > page_size else timeline %}
{% set collapse_id = 'audit-older-' ~ (timeline | first).event.document_id if timeline else 'audit-older' %}
<div class="ca-card mt-3" x-data="{ open: false }">
    <div class="ca-card-header" role="button" tabindex="0" @click="open = !open" @keydown.enter.prevent="open = !open" @keydown.space.prevent="open = !open">
        <h6 class="ca-card-title mb-0">
            <i class="bi bi-clock-history me-1"></i>{{ _('Historial del documento') }}
            {% if total %}<span class="badge bg-light text-dark ms-1 fw-normal">{{ total }}</span>{% endif %}
        </h6>
        <button class="btn btn-sm btn-outline-secondary" type="button" @click.stop="open = !open" :aria-expanded="open.toString()">
            <i class="bi" :class="open ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
        </button>
    </div>
    <div class="p-3" x-show="open" x-cloak>
        {% if timeline %}
        {% set action_map = {
            'created':                _('creó este documento'),
            'updated':                _('editó este documento'),
            'submitted':              _('contabilizó este documento'),
            'approved':               _('aprobó este documento'),
            'cancelled':              _('anuló este documento'),
            'rejected':               _('rechazó este documento'),
            'reversed':               _('revirtió este documento'),
            'reversal_draft_created': _('creó un borrador de reversión'),
            'commented':              _('agregó un comentario')
        } %}
        {% if older %}
        <div class="collapse" id="{{ collapse_id }}">
            <ul class="list-group list-group-flush mb-0">
                {% for row in older %}
                {% set event = row.event %}
                <li class="list-group-item px-0">
                    <div>
                        <strong>{{ event.actor_name or event.actor_user_id or _('Sistema') }}</strong>
                        {{ action_map.get(event.action, audit_action_label(event.action)) }}
                        — <small class="text-muted">{{ event.timestamp }}</small>
                    </div>
                    {% if row.changes %}
                    <ul class="mt-2 mb-0 small">
                        {% for change in row.changes %}
                        <li>
                            {{ _('Cambió') }}
                            <strong>{{ field_labels.get(change.field, change.field) }}</strong>
                            {{ _('de') }} "{{ change.before }}" {{ _('a') }} "{{ change.after }}"
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% if event.comment %}
                    <small class="text-muted">{{ _('Motivo') }}: {{ event.comment }}</small>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
            <hr class="my-2">
        </div>
        <button class="btn btn-sm btn-link px-0 text-muted mb-2"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#{{ collapse_id }}"
                data-label-show="{{ _('Ver') }} {{ older | length }} {{ _('eventos anteriores') }} ▸"
                data-label-hide="{{ _('Ocultar eventos anteriores') }} ▴"
                aria-expanded="false"
                aria-controls="{{ collapse_id }}"
                onclick="var b=this; b.textContent = b.getAttribute('aria-expanded')==='true' ? b.dataset.labelHide : b.dataset.labelShow;">
            {{ _('Ver') }} {{ older | length }} {{ _('eventos anteriores') }} ▸
        </button>
        {% endif %}
        <ul class="list-group list-group-flush">
            {% for row in recent %}
            {% set event = row.event %}
            <li class="list-group-item px-0">
                <div>
                    <strong>{{ event.actor_name or event.actor_user_id or _('Sistema') }}</strong>
                    {{ action_map.get(event.action, audit_action_label(event.action)) }}
                    — <small class="text-muted">{{ event.timestamp }}</small>
                </div>
                {% if row.changes %}
                <ul class="mt-2 mb-0 small">
                    {% for change in row.changes %}
                    <li>
                        {{ _('Cambió') }}
                        <strong>{{ field_labels.get(change.field, change.field) }}</strong>
                        {{ _('de') }} "{{ change.before }}" {{ _('a') }} "{{ change.after }}"
                    </li>
                    {% endfor %}
                </ul>
                {% endif %}
                {% if event.comment %}
                <small class="text-muted">{{ _('Motivo') }}: {{ event.comment }}</small>
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% else %}
        <p class="text-muted mb-0">{{ _('No hay eventos de auditoría registrados.') }}</p>
        {% endif %}
    </div>
</div>
{% endmacro %}