{% set acceso = permisos(modulo=id_modulo("accounting"), usuario=usuario.id)%}
{% extends "base.html" %}
{% block contenido %}

<nav aria-label="breadcrumb">
  <ol class="breadcrumb lh-sm">
    <li class="breadcrumb-item"><a href="{{ url_for('cacao_app.pagina_inicio') }}" class="link-dark"><i class="bi bi-house"></i> Inicio</a></li>
    <li class="breadcrumb-item"><a href="{{ url_for('contabilidad.conta') }}" class="link-dark">Contabilidad</a></li>
    <li class="breadcrumb-item active" aria-current="page">Centros de Costos</li>
  </ol>
</nav>

<div class="ca-card">
  <div class="ca-card-header d-flex justify-content-between align-items-center">
    <h5 class="ca-card-title"><i class="bi bi-diagram-2"></i> Catálogo de Centros de Costos.</h5>
    <a href="{{ url_for('contabilidad.nuevo_centro_costo') }}" class="btn btn-primary btn-sm"><i class="bi bi-plus"></i> Nuevo Centro</a>
  </div>

  {% if entidades_creadas %}

  <form class="row g-2 align-items-end mb-3">
    <div class="col-auto">
      <label class="form-label" for="entidad">Entidad</label>
      <select class="form-select form-select-sm" id="entidad" name="entidad" style="min-width:200px;">
        {%- for entidad in entidades -%}
        <option value="{{ entidad[0].code }}">{{ entidad[0].company_name }}</option>
        {%- endfor -%}
      </select>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary btn-sm">
        <i class="bi bi-arrow-clockwise me-1"></i>Actualizar
      </button>
    </div>
  </form>

  <p class="mb-2" style="font-size:.8rem;color:#64748b;"><strong>Entidad:</strong> {{ entidad[0].company_name }}</p>

  <div class="d-flex gap-2 mb-2">
    <button type="button" class="btn btn-sm btn-outline-secondary"
      @click.prevent="$dispatch('tree-toggle', { open: true })" x-data>
      <i class="bi bi-arrows-expand"></i> {{ _('Expandir todos') }}
    </button>
    <button type="button" class="btn btn-sm btn-outline-secondary"
      @click.prevent="$dispatch('tree-toggle', { open: false })" x-data>
      <i class="bi bi-arrows-collapse"></i> {{ _('Colapsar todos') }}
    </button>
  </div>

  <ul class="ca-tree">
    {%- for centrocostobase in base_centro_costos -%}
    <li x-data="{ open: true }" @tree-toggle.window="open = $event.detail.open">
      <span @click="open = !open" style="cursor:pointer;" class="d-inline-flex align-items-center gap-1">
        <i class="bi me-1" :class="open ? 'bi-chevron-down' : 'bi-chevron-right'" style="font-size:.7rem;color:#94a3b8;"></i>
        <a href="{{ url_for('contabilidad.centro_costo', id_cc=centrocostobase[0].code) }}">
          <strong>{{ centrocostobase[0].code }}</strong>&nbsp;{{ centrocostobase[0].name }}
        </a>
      </span>
      {% if centrocostobase[0].group %}
      <ul x-show="open">
        {% for ccosto01 in ccostos if ccosto01[0].parent == centrocostobase[0].code %}
        {%- set hijos01 = ccostos | selectattr('0.parent', 'equalto', ccosto01[0].code) | list -%}
        {% if ccosto01[0].group and hijos01 %}
        <li x-data="{ open: true }" @tree-toggle.window="open = $event.detail.open">
          <span @click="open = !open" style="cursor:pointer;" class="d-inline-flex align-items-center gap-1">
            <i class="bi me-1" :class="open ? 'bi-chevron-down' : 'bi-chevron-right'" style="font-size:.7rem;color:#94a3b8;"></i>
            <a href="{{ url_for('contabilidad.centro_costo', id_cc=ccosto01[0].code) }}">
              {{ ccosto01[0].code }} — {{ ccosto01[0].name }}
            </a>
          </span>
          <ul x-show="open">
            {% for ccosto02 in ccostos if ccosto02[0].parent == ccosto01[0].code %}
            {%- set hijos02 = ccostos | selectattr('0.parent', 'equalto', ccosto02[0].code) | list -%}
            {% if ccosto02[0].group and hijos02 %}
            <li x-data="{ open: true }" @tree-toggle.window="open = $event.detail.open">
              <span @click="open = !open" style="cursor:pointer;" class="d-inline-flex align-items-center gap-1">
                <i class="bi me-1" :class="open ? 'bi-chevron-down' : 'bi-chevron-right'" style="font-size:.7rem;color:#94a3b8;"></i>
                <a href="{{ url_for('contabilidad.centro_costo', id_cc=ccosto02[0].code) }}">
                  {{ ccosto02[0].code }} — {{ ccosto02[0].name }}
                </a>
              </span>
              <ul x-show="open">
                {% for ccosto03 in ccostos if ccosto03[0].parent == ccosto02[0].code %}
                {%- set hijos03 = ccostos | selectattr('0.parent', 'equalto', ccosto03[0].code) | list -%}
                {% if ccosto03[0].group and hijos03 %}
                <li x-data="{ open: true }" @tree-toggle.window="open = $event.detail.open">
                  <span @click="open = !open" style="cursor:pointer;" class="d-inline-flex align-items-center gap-1">
                    <i class="bi me-1" :class="open ? 'bi-chevron-down' : 'bi-chevron-right'" style="font-size:.7rem;color:#94a3b8;"></i>
                    <a href="{{ url_for('contabilidad.centro_costo', id_cc=ccosto03[0].code) }}">
                      {{ ccosto03[0].code }} — {{ ccosto03[0].name }}
                    </a>
                  </span>
                  <ul x-show="open">
                    {% for ccosto04 in ccostos if ccosto04[0].parent == ccosto03[0].code %}
                    {%- set hijos04 = ccostos | selectattr('0.parent', 'equalto', ccosto04[0].code) | list -%}
                    {% if ccosto04[0].group and hijos04 %}
                    <li x-data="{ open: true }" @tree-toggle.window="open = $event.detail.open">
                      <span @click="open = !open" style="cursor:pointer;" class="d-inline-flex align-items-center gap-1">
                        <i class="bi me-1" :class="open ? 'bi-chevron-down' : 'bi-chevron-right'" style="font-size:.7rem;color:#94a3b8;"></i>
                        <a href="{{ url_for('contabilidad.centro_costo', id_cc=ccosto04[0].code) }}">
                          {{ ccosto04[0].code }} — {{ ccosto04[0].name }}
                        </a>
                      </span>
                      <ul x-show="open">
                        {% for ccosto05 in ccostos if ccosto05[0].parent == ccosto04[0].code %}
                        <li>
                          <a href="{{ url_for('contabilidad.centro_costo', id_cc=ccosto05[0].code) }}">
                            {{ ccosto05[0].code }} — {{ ccosto05[0].name }}
                          </a>
                        </li>
                        {% endfor %}
                      </ul>
                    </li>
                    {% else %}
                    <li>
                      <a href="{{ url_for('contabilidad.centro_costo', id_cc=ccosto04[0].code) }}">
                        {{ ccosto04[0].code }} — {{ ccosto04[0].name }}
                      </a>
                    </li>
                    {% endif %}
                    {% endfor %}
                  </ul>
                </li>
                {% else %}
                <li>
                  <a href="{{ url_for('contabilidad.centro_costo', id_cc=ccosto03[0].code) }}">
                    {{ ccosto03[0].code }} — {{ ccosto03[0].name }}
                  </a>
                </li>
                {% endif %}
                {% endfor %}
              </ul>
            </li>
            {% else %}
            <li>
              <a href="{{ url_for('contabilidad.centro_costo', id_cc=ccosto02[0].code) }}">
                {{ ccosto02[0].code }} — {{ ccosto02[0].name }}
              </a>
            </li>
            {% endif %}
            {% endfor %}
          </ul>
        </li>
        {% else %}
        <li>
          <a href="{{ url_for('contabilidad.centro_costo', id_cc=ccosto01[0].code) }}">
            {{ ccosto01[0].code }} — {{ ccosto01[0].name }}
          </a>
        </li>
        {% endif %}
        {% endfor %}
      </ul>
      {% endif %}
    </li>
    {%- endfor -%}
  </ul>

  {% else %}
  {% import "macros.html" as macros %}
  {{ macros.crear_nueva_entidad() }}
  {% endif %}

</div>
{% endblock %}