{% extends "base.html" %}
{% block contenido %}
{% import "transaction_form_macros.html" as tf_macros %}

{%- if TESTING -%}
<div data-test_info="La Plantilla fue renderizada correctamente: cacao_accounting/bancos/templates/bancos/caja_chica_gasto_nuevo.html"></div>
{%- endif -%}

<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('bancos.bancos_') }}" class="link-dark">{{ _('Bancos') }}</a></li>
    <li class="breadcrumb-item"><a href="{{ url_for('bancos.caja_chica_gasto_lista') }}" class="link-dark">{{ _('Gastos de Caja Chica') }}</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{ _('Nuevo gasto') }}</li>
  </ol>
</nav>

<div class="ca-card">
  <div class="ca-card-header">
    <h5 class="ca-card-title"><i class="bi bi-receipt-cutoff"></i> {{ _('Nuevo gasto de caja chica') }}</h5>
    <div class="d-flex gap-2 flex-wrap">
      <a href="{{ url_for('bancos.caja_chica_gasto_lista') }}" class="btn btn-outline-danger btn-sm">{{ _('Cancelar') }}</a>
      <button class="btn btn-primary btn-sm" form="form-main" type="submit"><i class="bi bi-floppy me-1"></i>{{ _('Guardar y contabilizar') }}</button>
    </div>
  </div>
  <div class="p-3">
    <div class="alert alert-warning py-2 small">
      <i class="bi bi-exclamation-triangle me-1"></i>{{ _('Este documento generará un asiento contable: Cargo a cuenta de gasto (Deudora) / Abono a la cuenta de Caja Chica (Acreedora). ') }}
    </div>
  </div>
  <form method="post" id="form-main" class="row g-3 p-3">
    {{ form.csrf_token }}
    <div class="col-md-4">
      <label class="form-label" for="company">{{ _('Compañía') }} <span class="text-danger">*</span></label>
      {{ tf_macros.smart_select(
          doctype="company",
          name="company",
          label=_("Compañía"),
          preload=True,
          required=True,
          initial_value_expr="''",
          initial_label_expr="''",
          on_select="function(opt){ document.dispatchEvent(new CustomEvent('company-selected', {detail: opt})); }"
      ) }}
    </div>
    <div class="col-md-4">
      <label class="form-label" for="naming_series">{{ _('Secuencia') }}</label>
      {{ tf_macros.smart_select(
          doctype="naming_series",
          name="naming_series",
          label=_("Secuencia"),
          filters={"company": {"selector": "#company"}, "entity_type": "petty_cash_expense"},
          filter_sources=["#company"],
          required_filters=["company", "entity_type"],
          auto_select_default=True,
          load_on_filter_change=True,
          default_after_ms=1500
      ) }}
    </div>
    <div class="col-md-4">
      <label class="form-label" for="petty_cash_id">{{ _('Caja Chica') }} <span class="text-danger">*</span></label>
      {{ tf_macros.smart_select(
          doctype="petty_cash",
          name="petty_cash_id",
          label=_("Caja Chica"),
          filters={"company": {"selector": "#company"}},
          filter_sources=["#company"],
          required_filters=["company"],
          required=True,
          on_select="function(opt){ var el = document.getElementById('pc_currency'); if (el) el.value = opt.currency || ''; }"
      ) }}
    </div>
    <div class="col-md-4">
      <label class="form-label" for="pc_currency">{{ _('Moneda') }}</label>
      <input class="form-control form-control-sm" type="text" id="pc_currency" readonly>
    </div>
    <div class="col-md-4">
      <label class="form-label" for="posting_date">{{ _('Fecha') }}</label>
      <input class="form-control form-control-sm" type="date" name="posting_date" id="posting_date" value="{{ form.posting_date.data or '' }}">
    </div>
    <div class="col-md-4">
      <label class="form-label" for="beneficiary">{{ _('Beneficiario / Proveedor') }}</label>
      {{ form.beneficiary(class="form-control form-control-sm", id="beneficiary") }}
    </div>
    <div class="col-md-4">
      <label class="form-label" for="expense_account_code">{{ _('Cuenta de gasto') }} <span class="text-danger">*</span></label>
      {{ tf_macros.smart_select(
          doctype="account_code",
          name="expense_account_code",
          label=_("Cuenta de gasto"),
          filters={"company": {"selector": "#company"}, "account_type": "expense"},
          filter_sources=["#company"],
          required_filters=["company"],
          required=True
      ) }}
    </div>
    <div class="col-md-8">
      <label class="form-label" for="concept">{{ _('Concepto') }} <span class="text-danger">*</span></label>
      {{ form.concept(class="form-control form-control-sm", id="concept", required=True) }}
    </div>
    <div class="col-md-4">
      <label class="form-label" for="amount">{{ _('Importe') }} <span class="text-danger">*</span></label>
      <input class="form-control form-control-sm" type="number" step="0.01" min="0" name="amount" id="amount" value="{{ form.amount.data or '' }}" required>
    </div>
    <div class="col-md-4">
      <label class="form-label" for="cost_center_code">{{ _('Centro de costo') }} <span class="text-danger">*</span></label>
      {{ tf_macros.smart_select(
          doctype="cost_center",
          name="cost_center_code",
          label=_("Centro de costo"),
          filters={"company": {"selector": "#company"}},
          filter_sources=["#company"],
          required_filters=["company"]
      ) }}
    </div>
    <div class="col-md-4">
      <label class="form-label" for="unit_code">{{ _('Unidad de negocio') }}</label>
      {{ tf_macros.smart_select(
          doctype="unit",
          name="unit_code",
          label=_("Unidad de negocio"),
          filters={"company": {"selector": "#company"}},
          filter_sources=["#company"],
          required_filters=["company"]
      ) }}
    </div>
    <div class="col-md-4">
      <label class="form-label" for="project_code">{{ _('Proyecto') }}</label>
      {{ tf_macros.smart_select(
          doctype="project",
          name="project_code",
          label=_("Proyecto"),
          filters={"company": {"selector": "#company"}},
          filter_sources=["#company"],
          required_filters=["company"]
      ) }}
    </div>
    <div class="col-12">
      <label class="form-label" for="remarks">{{ _('Observaciones') }}</label>
      {{ form.remarks(class="form-control form-control-sm", id="remarks", rows=3) }}
    </div>
  </form>
</div>

{% endblock %}