{% macro transaction_form_js(config) %}
<script>
  globalThis.transactionFormConfig = {{ config | tojson | safe }};
</script>
{% endmacro %}

{% macro smart_select(doctype, name, label, initial_value='', initial_label='', filters={}, filter_sources=[], required=False, min_chars=1, preload=False, required_filters=[], auto_select_default=False, load_on_filter_change=False, x_model=None, on_select=None, initial_value_expr=None, initial_label_expr=None) %}
<div class="ca-smart-select" x-data='smartSelect({
    doctype: "{{ doctype }}",
    name: "{{ name }}",
    minChars: {{ min_chars }},
    preload: {{ "true" if preload else "false" }},
    loadOnFilterChange: {{ "true" if load_on_filter_change else "false" }},
    filters: {{ filters | tojson }},
    filterSources: {{ filter_sources | tojson }},
    requiredFilters: {{ required_filters | tojson }},
    autoSelectDefault: {{ "true" if auto_select_default else "false" }},
    initialValue: {{ initial_value_expr if initial_value_expr else initial_value | tojson }},
    initialLabel: {{ initial_label_expr if initial_label_expr else initial_label | tojson }},
    onSelect: {{ on_select if on_select else "null" }},
    messages: {
      placeholder: "{{ _('Buscar') }} {{ label }}",
      loading: "{{ _('Buscando...') }}",
      noResults: "{{ _('Sin resultados') }}",
      minChars: "{{ _('Escriba para buscar') }}",
      clear: "{{ _('Limpiar') }}",
      invalid: "{{ _('Seleccione una opción válida') }}",
      error: "{{ _('No se pudo buscar') }}"
    }
  })'
  {% if x_model %}x-effect="{% if x_model.startswith('modalLine.') %}if (modalLine) {{ x_model }} = selectedValue{% else %}{{ x_model }} = selectedValue{% endif %}"{% endif %}
>
  <input type="hidden" id="{{ name }}" name="{{ name }}" x-model="selectedValue">
  <div class="ca-smart-select-input-wrap">
    <input class="form-control ca-smart-select-input" type="text" x-model="search" @input="onInput"
      @focus="onFocus" @blur="closeSoon" placeholder="{{ _('Buscar') }} {{ label }}" {% if required %}required{% endif %}>
    <button class="ca-smart-select-clear" type="button" x-show="selectedValue" @click="clearSelection"
      title="{{ _('Limpiar') }}">×</button>
  </div>
  <div class="ca-smart-select-menu" x-show="open" x-cloak>
    <div class="ca-smart-select-state" x-show="loading" x-text="messages.loading"></div>
    <template x-for="option in options" :key="option.value">
      <button class="ca-smart-select-option" type="button"
        @mousedown.prevent="selectOptionFromValues(option.value !== undefined ? option.value : option.id, option.display_name || option.label || '', option)">
        <span x-text="option.display_name"></span>
      </button>
    </template>
    <div class="ca-smart-select-state" x-show="!loading && !options.length && search.length >= minChars"
      x-text="messages.noResults"></div>
    <div class="ca-smart-select-state text-danger" x-show="error" x-text="error"></div>
  </div>
</div>
{% endmacro %}

{% macro transaction_form_header(title, status_label='Borrador', cancel_url=None, submit_label=None, doctype=None) %}
<style>
  .ca-journal-toolbar {
    align-items: center;
    display: flex;
    gap: .5rem;
    justify-content: space-between;
  }

  .ca-journal-grid {
    overflow-x: auto;
  }

  .ca-journal-table {
    min-width: 1120px;
    table-layout: fixed;
  }

  .ca-journal-table th,
  .ca-journal-table td {
    vertical-align: middle;
  }

  .ca-journal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    justify-content: center;
    white-space: nowrap;
  }

  .ca-transaction-detail-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ca-transaction-summary {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
  }

  @media (max-width: 768px) {
    .ca-journal-toolbar {
      align-items: stretch;
      flex-direction: column;
    }

    .ca-transaction-detail-grid {
      grid-template-columns: 1fr;
    }
  }
</style>
<div class="ca-journal-toolbar mb-3">
  <div>
    <h4 class="mb-1">{{ _(title) }}</h4>
    <p class="text-muted mb-0">{{ _(status_label) }}</p>
  </div>
  <div class="d-flex gap-2 flex-wrap">
    <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#columnsModal">
      <i class="bi bi-sliders"></i> {{ _('Columnas') }}
    </button>
    {% if cancel_url %}
    <a href="{{ cancel_url }}" class="btn btn-sm btn-outline-danger">
      <i class="bi bi-x-circle"></i> {{ _('Cancelar') }}
    </a>
    {% else %}
    <button class="btn btn-sm btn-outline-danger" type="button" onclick="history.back()">
      <i class="bi bi-x-circle"></i> {{ _('Cancelar') }}
    </button>
    {% endif %}
    <button class="btn btn-sm btn-primary" type="submit" form="form-main">
      <i class="bi bi-save"></i> {{ submit_label or _('Guardar') }}
    </button>
  </div>
</div>

<div class="ca-card p-3 mb-3">
  <input type="hidden" id="transaction_entity_type" :value="(formKey || '').split('.')[1] || ''">
  <div class="row g-3">
    <div class="col-md-6">
      <label class="form-label" for="company">{{ _('Compañía') }} <span class="text-danger">*</span></label>
      {{ smart_select(
          doctype="company",
          name="company",
          initial_value_expr="header.company",
          initial_label_expr="header.company",
          label=_("Compañía"),
          preload=True,
          required=True,
          x_model="header.company",
          on_select="function(opt){ document.dispatchEvent(new CustomEvent('company-selected', {detail: opt})); }"
      ) }}
    </div>
    <div class="col-md-6">
      <label class="form-label" for="naming_series">{{ _('Secuencia') }}</label>
      {{ smart_select(
          doctype="naming_series",
          name="naming_series",
          label=_("Secuencia"),
          filters={"company": {"selector": "#company"}, "entity_type": {"selector": "#transaction_entity_type"}},
          filter_sources=["#company", "#transaction_entity_type"],
          required_filters=["company", "entity_type"],
          auto_select_default=True,
          load_on_filter_change=True,
          x_model="header.naming_series"
      ) }}
    </div>
    <div class="col-md-6">
      <label class="form-label" for="currency">{{ _('Moneda') }}</label>
      {{ smart_select(
          doctype="currency",
          name="currency",
          initial_value_expr="header.currency",
          initial_label_expr="header.currency",
          label=_("Moneda"),
          x_model="header.currency"
      ) }}
    </div>
    <div class="col-md-6">
      <label class="form-label" for="posting_date">{{ _('Fecha') }} <span class="text-danger">*</span></label>
      <input type="date" class="form-control" id="posting_date" name="posting_date" x-model="header.posting_date" required>
    </div>
  </div>
</div>
{% endmacro %}

{% macro transaction_grid(items_disponibles, uoms_disponibles, source_api_url=None, source_label='', warehouses_disponibles=None, title='Líneas de detalle') %}
<section class="border rounded-2 p-3 mt-3">
  <div class="ca-journal-toolbar mb-3">
    <h5 class="mb-0">{{ _(title) }}</h5>
    <div class="d-flex gap-2 flex-wrap">
      <button class="btn btn-sm btn-outline-secondary" type="button"
              x-show="availableSourceTypes.length > 0"
              data-bs-toggle="modal" data-bs-target="#modalAutofill"
              @click="fetchSource('{{ source_api_url or '' }}')">
        <i class="bi bi-arrow-repeat"></i> {{ _('Actualizar Elementos') }}
      </button>
      <button class="btn btn-sm btn-outline-secondary" type="button" @click="addMultipleRows(5)">
        <i class="bi bi-plus-square"></i> {{ _('Añadir múltiple') }}
      </button>
      <button class="btn btn-sm btn-outline-primary" type="button" @click="addRow()">
        <i class="bi bi-plus-lg"></i> {{ _('Añadir fila') }}
      </button>
      <button class="btn btn-sm btn-outline-info" type="button" x-show="viewKey === 'draft' && supportsLineImport()" @click="openImportModal()">
        <i class="bi bi-file-earmark-spreadsheet"></i> {{ _('Importar líneas') }}
      </button>
    </div>
  </div>

  <div class="ca-journal-grid">
    <p class="text-muted small mb-2">{{ _('Detalle editable de las líneas del documento, con artículo, cantidad, unidad, precio y monto.') }}</p>
    <table class="table table-sm table-bordered ca-journal-table">
      <caption>{{ _(title) }}</caption>
      <thead>
        <tr>
          <th style="width: 52px;">{{ _('No.') }}</th>
          <template x-for="column in visibleColumns" :key="column.field">
            <th :style="'width:' + (column.width * 90) + 'px'" x-text="column.label"></th>
          </template>
          <th style="width: 220px;">{{ _('Acciones') }}</th>
        </tr>
      </thead>
      <tbody>
        <template x-for="(line, index) in lines" :key="line.uid">
          <tr>
            <td class="text-center" x-text="index + 1"></td>
            <template x-for="column in visibleColumns" :key="column.field">
              <td>
                <template x-if="column.field === 'item_code'">
                  <div class="ca-smart-select" x-data='smartSelect({
                      doctype: "item",
                      name: "item_code_" + index,
                      minChars: 1,
                      filters: { company: { selector: "#company" } },
                      filterSources: ["#company"],
                      requiredFilters: ["company"],
                      initialValue: line.item_code,
                      initialLabel: line.item_code,
                      onSelect: function(opt) {
                        line.item_code = opt.value || opt.id || "";
                        line.item_name = opt.name || opt.item_name || opt.display_name || opt.label || "";
                        line.allowed_uoms = opt.allowed_uoms || opt.uoms || (opt.default_uom ? [opt.default_uom] : []);
                        line.uom = opt.default_uom || line.allowed_uoms[0] || line.uom || "";
                        onItemChange(line);
                      },
                      messages: {
                        placeholder: "{{ _('Buscar item') }}",
                        loading: "{{ _('Buscando...') }}",
                        noResults: "{{ _('Sin resultados') }}",
                        minChars: "{{ _('Escriba para buscar') }}",
                        clear: "{{ _('Limpiar') }}",
                        invalid: "{{ _('Seleccione una opción válida') }}",
                        error: "{{ _('No se pudo buscar') }}"
                      }
                    })'>
                    <input type="hidden" :name="'item_code_' + index" x-model="selectedValue">
                    <div class="ca-smart-select-input-wrap">
                      <input class="form-control form-control-sm ca-smart-select-input" type="text" x-model="search" @input="onInput"
                        @focus="onFocus" @blur="closeSoon" :placeholder="column.label">
                      <button class="ca-smart-select-clear" type="button" x-show="selectedValue" @click="clearSelection"
                        title="{{ _('Limpiar') }}">×</button>
                    </div>
                    <div class="ca-smart-select-menu" x-show="open" x-cloak>
                      <div class="ca-smart-select-state" x-show="loading" x-text="messages.loading"></div>
                      <template x-for="option in options" :key="option.value">
                        <button class="ca-smart-select-option" type="button"
                          @mousedown.prevent="selectOptionFromValues(option.value !== undefined ? option.value : option.id, option.display_name || option.label || '', option)">
                          <span x-text="option.display_name"></span>
                        </button>
                      </template>
                      <div class="ca-smart-select-state" x-show="!loading && !options.length && search.length >= minChars"
                        x-text="messages.noResults"></div>
                      <div class="ca-smart-select-state text-danger" x-show="error" x-text="error"></div>
                    </div>
                  </div>
                </template>
                <template x-if="column.field === 'item_name'">
                  <input class="form-control form-control-sm" type="text" :name="'item_name_' + index" x-model="line.item_name">
                </template>
                <template x-if="column.field === 'uom'">
                  <div class="ca-smart-select" x-data='smartSelect({
                      doctype: "uom",
                      name: "uom_" + index,
                      minChars: 0,
                      preload: false,
                      preloadOnFocus: true,
                      filters: {
                        code: function() {
                          return line.allowed_uoms && line.allowed_uoms.length ? line.allowed_uoms : [];
                        }
                      },
                      requiredFilters: ["code"],
                      initialValue: line.uom,
                      initialLabel: line.uom,
                      onSelect: function(opt) {
                        line.uom = opt.value || opt.id || "";
                      },
                      messages: {
                        placeholder: "{{ _('UOM') }}",
                        loading: "...",
                        noResults: "",
                        minChars: "",
                        clear: "×",
                        invalid: "!",
                        error: "!"
                      }
                    })'>
                    <div x-effect="if (line.uom && selectedValue !== line.uom) { selectedValue = line.uom; selectedLabel = line.uom; search = line.uom; options = []; }"></div>
                    <input type="hidden" :name="'uom_' + index" x-model="selectedValue">
                    <div class="ca-smart-select-input-wrap">
                      <input class="form-control form-control-sm ca-smart-select-input" type="text" x-model="search" @input="onInput"
                        @focus="onFocus" @blur="closeSoon" :placeholder="column.label">
                    </div>
                    <div class="ca-smart-select-menu" x-show="open" x-cloak>
                      <template x-for="option in options" :key="option.value">
                        <button class="ca-smart-select-option" type="button"
                          @mousedown.prevent="selectOptionFromValues(option.value !== undefined ? option.value : option.id, option.display_name || option.label || '', option)">
                          <span x-text="option.display_name"></span>
                        </button>
                      </template>
                    </div>
                  </div>
                </template>
                <template x-if="column.field === 'qty'">
                  <input class="form-control form-control-sm text-end" type="number" step="0.0001" min="0"
                    :name="'qty_' + index" x-model.number="line.qty" @input="calcAmount(line)">
                </template>
                <template x-if="column.field === 'rate'">
                  <input class="form-control form-control-sm text-end" type="number" step="0.0001" min="0"
                    :name="'rate_' + index" x-model.number="line.rate" @input="calcAmount(line)">
                </template>
                <template x-if="column.field === 'amount'">
                  <div class="text-end px-2">
                    <span x-text="formatMoney(line.amount)"></span>
                    <input type="hidden" :name="'amount_' + index" :value="line.amount">
                  </div>
                </template>
              </td>
            </template>
            <td>
              <div class="ca-journal-actions">
                <button class="btn btn-sm btn-outline-secondary" type="button" @click="openDetails(index)"
                  title="{{ _('Ver detalle') }}"><i class="bi bi-pencil"></i></button>
                <button class="btn btn-sm btn-outline-secondary" type="button" @click="insertRow(index, -1)"
                  title="{{ _('Insertar arriba') }}"><i class="bi bi-arrow-up-square"></i></button>
                <button class="btn btn-sm btn-outline-secondary" type="button" @click="insertRow(index, 1)"
                  title="{{ _('Insertar abajo') }}"><i class="bi bi-arrow-down-square"></i></button>
                <button class="btn btn-sm btn-outline-secondary" type="button" @click="moveRow(index, -1)"
                  title="{{ _('Subir') }}"><i class="bi bi-arrow-up"></i></button>
                <button class="btn btn-sm btn-outline-secondary" type="button" @click="moveRow(index, 1)"
                  title="{{ _('Bajar') }}"><i class="bi bi-arrow-down"></i></button>
                <button class="btn btn-sm btn-outline-secondary" type="button" @click="duplicateRow(index)"
                  title="{{ _('Duplicar') }}"><i class="bi bi-copy"></i></button>
                <button class="btn btn-sm btn-outline-danger" type="button" @click="removeRow(index)"
                  title="{{ _('Eliminar') }}"><i class="bi bi-trash"></i></button>
              </div>
              <input type="hidden" :name="'warehouse_' + index" :value="line.warehouse || ''">
              <input type="hidden" :name="'account_' + index" :value="line.account || ''">
              <input type="hidden" :name="'cost_center_' + index" :value="line.cost_center || ''">
              <input type="hidden" :name="'unit_' + index" :value="line.unit || ''">
              <input type="hidden" :name="'project_' + index" :value="line.project || ''">
              <input type="hidden" :name="'remarks_' + index" :value="line.remarks || ''">
              <input type="hidden" :name="'source_type_' + index" :value="line.source_type || ''">
              <input type="hidden" :name="'source_id_' + index" :value="line.source_id || ''">
              <input type="hidden" :name="'source_item_id_' + index" :value="line.source_item_id || ''">
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</section>

<section class="border rounded-2 p-3 mt-3">
  <div class="ca-transaction-summary">
    <strong>{{ _('Subtotal') }}:</strong>
    <span x-text="formatMoney(totalAmount)"></span>
    <strong>{{ _('Impuestos y Cargos') }}:</strong>
    <span x-text="formatMoney(documentTaxTotal)"></span>
    <strong>{{ _('Total Documento') }}:</strong>
    <span x-text="formatMoney(grandTotal)"></span>
  </div>
  <input type="hidden" name="tax_lines_payload" :value="serializedTaxLines()">
  <input type="hidden" name="tax_summary_payload" :value="serializedTaxSummary()">
</section>

<section class="border rounded-2 p-3 mt-3">
  <div class="ca-journal-toolbar mb-3">
	    <h5 class="mb-0">{{ _('Impuestos y Cargos') }}</h5>
	    <div class="d-flex gap-2 align-items-center">
	      <span class="small text-muted" x-show="taxCharges.loading">{{ _('Calculando...') }}</span>
	      <button class="btn btn-sm btn-outline-primary" type="button" @click="addTaxLine()">
	        <i class="bi bi-plus-lg"></i> {{ _('Añadir impuesto/cargo') }}
	      </button>
	      <button class="btn btn-sm btn-outline-primary" type="button" @click="fetchTaxPreview()">
	        <i class="bi bi-arrow-repeat"></i> {{ _('Recalcular') }}
	      </button>
    </div>
  </div>

  <div class="alert alert-danger py-2" role="alert" x-show="taxCharges.error" x-text="taxCharges.error"></div>

  <div class="table-responsive">
    <table class="table table-sm table-bordered ca-journal-table mb-0">
      <caption>{{ _('Detalle de impuestos y cargos') }}</caption>
      <thead>
        <tr>
          <th>{{ _('Concepto') }}</th>
          <th>{{ _('Tipo') }}</th>
          <th class="text-end">{{ _('Base') }}</th>
          <th class="text-end">{{ _('Tasa') }}</th>
          <th class="text-end">{{ _('Monto') }}</th>
	          <th style="width: 110px;">{{ _('Acciones') }}</th>
	        </tr>
	      </thead>
      <tbody>
        <template x-for="(taxLine, taxIndex) in taxCharges.lines" :key="taxLine.line_id || taxIndex">
          <tr>
            <td x-text="taxLine.concept"></td>
            <td x-text="taxLine.type"></td>
            <td class="text-end" x-text="formatMoney(taxLine.base_amount)"></td>
            <td class="text-end" x-text="formatMoney(taxLine.rate)"></td>
            <td class="text-end" x-text="formatMoney(taxLine.amount)"></td>
	            <td class="text-center">
	              <button class="btn btn-sm btn-outline-secondary" type="button" @click="openTaxLineDetails(taxIndex)"
	                title="{{ _('Ver detalle') }}">
	                <i class="bi bi-pencil"></i>
	              </button>
	              <button class="btn btn-sm btn-outline-danger" type="button" x-show="taxLine.manual"
	                @click="removeTaxLine(taxIndex)" title="{{ _('Eliminar') }}">
	                <i class="bi bi-trash"></i>
	              </button>
	            </td>
          </tr>
        </template>
        <tr x-show="!taxCharges.lines.length">
          <td colspan="6" class="text-center text-muted py-3">{{ _('Sin líneas fiscales aplicables para este documento.') }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

<div class="modal fade" id="modalAutofill" tabindex="-1" aria-hidden="true" x-show="availableSourceTypes.length > 0">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="bi bi-table me-2"></i>{{ _('Actualizar Elementos') }}
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ _('Cerrar') }}"></button>
      </div>
      <div class="modal-body">
        {# --- Step 1: Search and Select Documents --- #}
        <div x-show="autofillStep === 1">
          <div class="row g-2 mb-3">
            <div class="col-md-5">
              <label class="form-label small">{{ _('Tipo de Documento Origen') }}</label>
              <select class="form-select form-select-sm" x-model="searchCriteria.source_type" @change="fetchSourceDocuments()">
                <option value="">{{ _('Seleccione') }}</option>
                <template x-for="dt in availableSourceTypes" :key="dt.value">
                   <option :value="dt.value" x-text="dt.label"></option>
                </template>
              </select>
            </div>
            <div class="col-md-5">
              <label class="form-label small">{{ _('Tercero') }}</label>
              <input type="text" class="form-control form-control-sm" :value="header.party_label || header.party" readonly>
            </div>
            <div class="col-md-2 d-flex align-items-end">
              <button type="button" class="btn btn-sm btn-outline-secondary w-100" @click="fetchSourceDocuments()">
                <i class="bi bi-arrow-clockwise me-1"></i>{{ _('Refrescar') }}
              </button>
            </div>
          </div>

          <div x-show="loadingSource" class="text-center py-3">
            <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
            {{ _('Buscando documentos...') }}
          </div>

          <div x-show="!loadingSource">
            <p class="text-muted small mb-2">{{ _('Elementos disponibles en el documento de origen para traerlos al detalle actual.') }}</p>
            <table class="table table-sm ca-table">
              <caption>{{ _("Documentos origen disponibles") }}</caption>
              <thead>
                <tr>
                  <th style="width:5%"><input type="checkbox" @change="sourceDocuments.forEach(d => d.selected = $event.target.checked)"></th>
                  <th>{{ _('No. Documento') }}</th>
                  <th>{{ _('Fecha') }}</th>
                  <th>{{ _('Líneas Pendientes') }}</th>
                </tr>
              </thead>
              <tbody>
                <template x-for="doc in sourceDocuments" :key="doc.source_id">
                  <tr>
                    <td><input type="checkbox" x-model="doc.selected"></td>
                    <td x-text="doc.document_no"></td>
                    <td x-text="doc.posting_date"></td>
                    <td x-text="doc.pending_lines"></td>
                  </tr>
                </template>
                <tr x-show="!sourceDocuments.length">
                   <td colspan="4" class="text-center text-muted py-3">{{ _('No se encontraron documentos pendientes.') }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        {# --- Step 2: Select Items from Documents --- #}
        <div x-show="autofillStep === 2">
          <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="table table-sm ca-table">
              <caption>{{ _("Elementos de los documentos seleccionados") }}</caption>
              <thead>
                <tr>
                  <th style="width:5%"><input type="checkbox" @change="sourceItems.forEach(i => i.selected = $event.target.checked)"></th>
                  <th>{{ _('Documento') }}</th>
                  <th>{{ _('Código') }}</th>
                  <th>{{ _('Descripción') }}</th>
                  <th>{{ _('Pendiente') }}</th>
                  <th>{{ _('Traer') }}</th>
                </tr>
              </thead>
              <tbody>
                <template x-for="(si, idx) in sourceItems" :key="idx">
                  <tr>
                    <td><input type="checkbox" x-model="si.selected"></td>
                    <td class="small" x-text="si.source_document_no"></td>
                    <td x-text="si.item_code"></td>
                    <td x-text="si.item_name"></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>
                  </tr>
                </template>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">
          <i class="bi bi-x-circle me-1"></i>{{ _('Cancelar') }}
        </button>
        <button type="button" class="btn btn-sm btn-primary" x-show="autofillStep === 1" :disabled="!sourceDocuments.some(d => d.selected)" @click="fetchSourceItems()">
          {{ _('Siguiente') }} <i class="bi bi-arrow-right ms-1"></i>
        </button>
        <button type="button" class="btn btn-sm btn-outline-primary" x-show="autofillStep === 2" @click="autofillStep = 1">
          <i class="bi bi-arrow-left me-1"></i> {{ _('Atrás') }}
        </button>
        <button type="button" class="btn btn-sm btn-primary" x-show="autofillStep === 2" data-bs-dismiss="modal" @click="applySource()">
          <i class="bi bi-arrow-repeat me-1"></i>{{ _('Actualizar') }}
        </button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="lineDetailModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ _('Detalle de línea') }}</h5>
        <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="{{ _('Cerrar') }}"></button>
      </div>
      <div class="modal-body">
        <template x-if="activeIndex !== null && modalLine !== null">
          <div>
            <div class="ca-transaction-detail-grid">
          <div>
            <label class="form-label">{{ _('Cuenta') }}</label>
            {{ smart_select(
                doctype="account",
                name="modal_account",
                label=_("Cuenta"),
                filters={"company": {"selector": "#company"}},
                filter_sources=["#company"],
                required_filters=["company"],
                x_model="modalLine.account",
                initial_value_expr="modalLine.account",
                initial_label_expr="modalLine.account_label || modalLine.account"
            ) }}
          </div>
          <div>
            <label class="form-label">{{ _('Centro de costos') }}</label>
            {{ smart_select(
                doctype="cost_center",
                name="modal_cost_center",
                label=_("Centro de costos"),
                filters={"company": {"selector": "#company"}},
                filter_sources=["#company"],
                required_filters=["company"],
                x_model="modalLine.cost_center",
                initial_value_expr="modalLine.cost_center",
                initial_label_expr="modalLine.cost_center_label || modalLine.cost_center"
            ) }}
          </div>
          <div>
            <label class="form-label">{{ _('Unidad de negocio') }}</label>
            {{ smart_select(
                doctype="unit",
                name="modal_unit",
                label=_("Unidad de negocio"),
                filters={"company": {"selector": "#company"}},
                filter_sources=["#company"],
                required_filters=["company"],
                x_model="modalLine.unit",
                initial_value_expr="modalLine.unit",
                initial_label_expr="modalLine.unit"
            ) }}
          </div>
          <div>
            <label class="form-label">{{ _('Proyecto') }}</label>
            {{ smart_select(
                doctype="project",
                name="modal_project",
                label=_("Proyecto"),
                filters={"company": {"selector": "#company"}},
                filter_sources=["#company"],
                required_filters=["company"],
                x_model="modalLine.project",
                initial_value_expr="modalLine.project",
                initial_label_expr="modalLine.project"
            ) }}
          </div>
          {% if warehouses_disponibles %}
          <div>
            <label class="form-label">{{ _('Bodega') }}</label>
            <select class="form-select" x-model="modalLine.warehouse">
              <option value="">{{ _('Seleccione') }}</option>
              {% for warehouse in warehouses_disponibles %}
              <option value="{{ warehouse.code }}">{{ warehouse.code }}{% if warehouse.name %} — {{ warehouse.name }}{% endif %}</option>
              {% endfor %}
            </select>
          </div>
          {% endif %}
          <div>
            <label class="form-label">{{ _('Trazabilidad') }}</label>
            <input class="form-control" type="text"
              :value="[modalLine.source_type, modalLine.source_document_no || modalLine.source_id, modalLine.source_item_id].filter(Boolean).join(' / ')"
              readonly>
          </div>
            </div>
            <div class="mt-3">
              <label class="form-label">{{ _('Observaciones') }}</label>
              <textarea class="form-control" rows="3" x-model="modalLine.remarks"></textarea>
            </div>
          </div>
        </template>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">
          <i class="bi bi-x-circle me-1"></i>{{ _('Cancelar') }}
        </button>
        <button class="btn btn-primary" type="button" @click="saveModalLine()">
          <i class="bi bi-check-lg me-1"></i>{{ _('Guardar detalle') }}
        </button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="taxChargeDetailModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ _('Detalle de impuesto/cargo') }}</h5>
        <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="{{ _('Cerrar') }}"></button>
      </div>
      <div class="modal-body">
        <template x-if="taxCharges.activeIndex !== null && taxCharges.modalLine !== null">
          <div>
            <div class="row g-3">
	              <div class="col-md-6">
	                <label class="form-label">{{ _('Concepto') }}</label>
	                <input class="form-control" type="text" x-model="taxCharges.modalLine.concept"
	                  :readonly="!taxCharges.modalLine.manual">
	              </div>
	              <div class="col-md-6">
	                <label class="form-label">{{ _('Tipo') }}</label>
	                <select class="form-select" x-model="taxCharges.modalLine.type"
	                  :disabled="!taxCharges.modalLine.manual">
	                  <option value="tax">{{ _('Impuesto') }}</option>
	                  <option value="charge">{{ _('Cargo') }}</option>
	                  <option value="withholding">{{ _('Retención') }}</option>
	                  <option value="deduction">{{ _('Deducción') }}</option>
	                </select>
	              </div>
	              <div class="col-md-4">
	                <label class="form-label">{{ _('Base') }}</label>
	                <input class="form-control text-end" type="number" step="0.0001"
	                  x-model.number="taxCharges.modalLine.base_amount"
	                  :readonly="!taxCharges.modalLine.manual">
	              </div>
	              <div class="col-md-4">
	                <label class="form-label">{{ _('Tasa') }}</label>
	                <input class="form-control text-end" type="number" step="0.0001"
	                  x-model.number="taxCharges.modalLine.rate"
	                  :readonly="!taxCharges.modalLine.manual">
	              </div>
	              <div class="col-md-4">
	                <label class="form-label">{{ _('Monto') }}</label>
	                <input class="form-control text-end" type="number" step="0.0001"
	                  x-model.number="taxCharges.modalLine.amount"
	                  :readonly="!taxCharges.modalLine.manual || taxCharges.modalLine.calculation_method === 'percentage'">
	              </div>
	              <div class="col-md-6">
	                <label class="form-label">{{ _('Método de cálculo') }}</label>
	                <select class="form-select" x-model="taxCharges.modalLine.calculation_method"
	                  :disabled="!taxCharges.modalLine.manual">
	                  <option value="manual">{{ _('Manual') }}</option>
	                  <option value="percentage">{{ _('Porcentaje') }}</option>
	                  <option value="fixed">{{ _('Fijo') }}</option>
	                </select>
	              </div>
	              <div class="col-md-6">
	                <label class="form-label">{{ _('Tratamiento contable') }}</label>
	                <select class="form-select" x-model="taxCharges.modalLine.accounting_treatment"
	                  :disabled="!taxCharges.modalLine.manual">
	                  <option value="separate_tax_account">{{ _('Cuenta separada') }}</option>
	                  <option value="capitalizable_inventory_cost">{{ _('Capitalizable a inventario') }}</option>
	                  <option value="expense">{{ _('Gasto') }}</option>
	                </select>
	              </div>
	              <div class="col-md-6">
	                <label class="form-label">{{ _('Prorrateo') }}</label>
	                <select class="form-select" x-model="taxCharges.modalLine.allocation_method"
	                  :disabled="!taxCharges.modalLine.manual">
	                  <option value="by_value">{{ _('Por valor') }}</option>
	                  <option value="by_quantity">{{ _('Por cantidad') }}</option>
	                  <option value="by_weight">{{ _('Por peso') }}</option>
	                  <option value="by_volume">{{ _('Por volumen') }}</option>
	                  <option value="equal">{{ _('Partes iguales') }}</option>
	                </select>
	              </div>
	              <div class="col-md-6 d-flex align-items-end">
	                <div class="form-check">
	                  <input class="form-check-input" id="tax-affects-inventory" type="checkbox"
	                    x-model="taxCharges.modalLine.affects_inventory" :disabled="!taxCharges.modalLine.manual">
	                  <label class="form-check-label" for="tax-affects-inventory">{{ _('Afecta inventario') }}</label>
	                </div>
	              </div>
	              <div class="col-md-12">
                <label class="form-label">{{ _('Cuenta contable') }}</label>
                {{ smart_select(
                    doctype="account",
                    name="modal_tax_account",
                    label=_("Cuenta contable"),
                    filters={"company": {"selector": "#company"}},
                    filter_sources=["#company"],
                    required_filters=["company"],
                    x_model="taxCharges.modalLine.account_id",
                    initial_value_expr="taxCharges.modalLine.account_id",
                    initial_label_expr="taxCharges.modalLine.account_id"
                ) }}
              </div>
            </div>
            <div class="mt-3">
              <label class="form-label">{{ _('Observaciones') }}</label>
              <textarea class="form-control" rows="3" x-model="taxCharges.modalLine.notes"></textarea>
            </div>
          </div>
        </template>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">
          <i class="bi bi-x-circle me-1"></i>{{ _('Cancelar') }}
        </button>
        <button class="btn btn-primary" type="button" @click="saveTaxLineModal()">
          <i class="bi bi-check-lg me-1"></i>{{ _('Guardar detalle') }}
        </button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modalImportLines" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-file-earmark-spreadsheet me-2"></i>{{ _('Asistente de Importación de Líneas') }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ _('Cerrar') }}"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3" x-show="importModal.schema">
          <h6>{{ _('Columnas aceptadas:') }}</h6>
          <div class="d-flex flex-wrap gap-2 mb-2">
            <template x-for="col in (importModal.schema && importModal.schema.columns ? importModal.schema.columns : [])" :key="col.key">
              <span class="badge" :class="col.required ? 'bg-primary' : 'bg-secondary'" :title="col.required ? '{{ _('Requerido') }}' : '{{ _('Opcional') }}'">
                <span x-text="col.label"></span>
                <template x-if="col.required"><span class="ms-1">*</span></template>
              </span>
            </template>
          </div>
          <p class="small text-muted">{{ _('Puede incluir columnas con nombres alternativos (ej: Artículo, Producto, Item).') }}</p>
          <div class="alert alert-info py-2 small mb-0">
            <i class="bi bi-info-circle me-2"></i> {{ _('Las líneas importadas se agregarán al final del detalle actual.') }}
          </div>
        </div>

        <ul class="nav nav-tabs mb-3" id="importTabs" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="paste-tab" data-bs-toggle="tab" data-bs-target="#paste-panel" type="button" role="tab">
              <i class="bi bi-clipboard me-1"></i>{{ _('Pegar desde Excel/Google Sheets') }}
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="upload-tab" data-bs-toggle="tab" data-bs-target="#upload-panel" type="button" role="tab">
              <i class="bi bi-upload me-1"></i>{{ _('Subir Archivo XLSX') }}
            </button>
          </li>
        </ul>

        <div class="tab-content" id="importTabsContent">
          <div class="tab-pane fade show active" id="paste-panel" role="tabpanel">
            <div class="mb-3">
              <label class="form-label">{{ _('Pegue aquí las celdas incluyendo el encabezado:') }}</label>
              <textarea class="form-control font-monospace" rows="8" x-model="importModal.pastedText" @input="onPasteAreaInput()" placeholder="Item	Cantidad	Precio..."></textarea>
            </div>
          </div>
          <div class="tab-pane fade" id="upload-panel" role="tabpanel">
            <div class="mb-3">
              <label class="form-label">{{ _('Seleccione archivo XLSX:') }}</label>
              <input type="file" class="form-control" accept=".xlsx" @change="handleFileUpload($event)">
              <div class="mt-2">
                <button type="button" class="btn btn-sm btn-outline-secondary" @click="downloadTemplate()">
                  <i class="bi bi-download"></i> {{ _('Descargar Plantilla') }}
                </button>
              </div>
            </div>
          </div>
        </div>

        <div class="mt-4" x-show="importModal.parsedRows.length > 0">
          <h6>{{ _('Vista previa de datos') }} (<span x-text="importModal.parsedRows.length"></span> {{ _('líneas') }})</h6>
          <div class="table-responsive" style="max-height: 300px;">
            <p class="text-muted small mb-2">{{ _('Vista previa de las filas importadas antes de agregarlas al detalle.') }}</p>
            <table class="table table-sm table-bordered">
              <caption class="visually-hidden">{{ _('Vista previa de datos importados') }}</caption>
              <thead>
                <tr>
                  <template x-for="col in (importModal.schema && importModal.schema.columns ? importModal.schema.columns : [])" :key="col.key">
                    <th x-text="col.label"></th>
                  </template>
                </tr>
              </thead>
              <tbody>
                <template x-for="(row, idx) in importModal.parsedRows.slice(0, 50)" :key="idx">
                  <tr>
                    <template x-for="col in (importModal.schema && importModal.schema.columns ? importModal.schema.columns : [])" :key="col.key">
                      <td x-text="row[col.key] || ''"></td>
                    </template>
                  </tr>
                </template>
              </tbody>
            </table>
            <p class="small text-muted" x-show="importModal.parsedRows.length > 50">{{ _('Mostrando solo las primeras 50 líneas.') }}</p>
          </div>
        </div>

        <div class="mt-3" x-show="importModal.errors.length > 0">
          <div class="alert alert-danger">
            <h6>{{ _('Errores de validación:') }}</h6>
            <ul class="mb-0">
              <template x-for="(err, idx) in importModal.errors" :key="idx">
                <li>
                  <template x-if="err.row !== undefined">
                    <span class="fw-bold" x-text="'{{ _('Fila') }} ' + err.row + ': '"></span>
                  </template>
                  <span x-text="err.message"></span>
                </li>
              </template>
            </ul>
          </div>
        </div>

        <div class="mt-3" x-show="importModal.isValidated && importModal.errors.length === 0">
          <div class="alert alert-success py-2">
            <i class="bi bi-check-circle-fill me-2"></i> {{ _('Datos validados correctamente. Listo para insertar.') }}
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          <i class="bi bi-x-circle me-1"></i>{{ _('Cancelar') }}
        </button>
        <button type="button" class="btn btn-primary" :disabled="importModal.parsedRows.length === 0 || importModal.validating" x-show="!importModal.isValidated" @click="validateImport()">
          <span x-show="importModal.validating" class="spinner-border spinner-border-sm me-1"></span>
          <i class="bi bi-check2-circle me-1" x-show="!importModal.validating"></i>{{ _('Validar datos') }}
        </button>
        <button type="button" class="btn btn-success" x-show="importModal.isValidated" @click="insertImportedLines()">
          <i class="bi bi-box-arrow-in-down me-1"></i>{{ _('Insertar líneas') }}
        </button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="columnsModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ _('Configurar columnas') }}</h5>
        <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="{{ _('Cerrar') }}"></button>
      </div>
      <div class="modal-body">
        <template x-for="(column, index) in preferences.columns" :key="column.field">
          <div class="d-flex align-items-center gap-2 mb-2">
            <input class="form-check-input" type="checkbox" x-model="column.visible" :disabled="column.required"
              title="{{ _('Las columnas obligatorias siempre permanecen visibles.') }}">
            <span class="flex-grow-1" x-text="column.label"></span>
            <input class="form-control form-control-sm text-end" style="width: 80px;" type="number" min="1" max="4"
              x-model.number="column.width">
            <button class="btn btn-sm btn-outline-secondary" type="button" @click="moveColumn(index, -1)"><i class="bi bi-arrow-up"></i></button>
            <button class="btn btn-sm btn-outline-secondary" type="button" @click="moveColumn(index, 1)"><i class="bi bi-arrow-down"></i></button>
          </div>
        </template>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline-secondary" type="button" @click="resetPreferences()">
          <i class="bi bi-arrow-counterclockwise me-1"></i>{{ _('Restablecer') }}
        </button>
        <button class="btn btn-primary" type="button" @click="savePreferences()">
          <i class="bi bi-check-lg me-1"></i>{{ _('Actualizar') }}
        </button>
      </div>
    </div>
  </div>
</div>
{% endmacro %}