{% extends 'base.html.twig' %}
{% block title %}{{ title }}{% endblock %}

{% macro canvas_field(campo, index, unidad) %}
  <div class="voucher-field"
       data-format-field
       data-index="{{ index }}"
       data-field-type="{{ campo.campo }}"
       tabindex="0"
       role="button"
       aria-label="Campo {{ campo.etiqueta }}. Arrastralo o usa las flechas para moverlo."
       style="left: {{ campo.x }}{{ unidad }}; top: {{ campo.y }}{{ unidad }}; width: {{ campo.width }}{{ unidad }}; height: {{ campo.height }}{{ unidad }}; text-align: {{ campo.align|default('left') }}; font-size: {{ campo.fontSize|default('10.00') }}pt; font-family: {{ campo.fontFamily|default('Arial') }};">
    <span class="voucher-field__badge" data-format-field-badge>{{ campo.etiqueta }}</span>
    <span class="voucher-field__content" data-format-field-content>{{ campo.etiqueta }}</span>
    <span class="voucher-field__handle" data-resize-handle role="presentation" aria-hidden="true"></span>
  </div>
{% endmacro %}

{% block content_header %}
  <div class="md:flex md:items-start md:justify-between mb-6">
    <div>
      <a href="{{ path('formato_pago_index') }}" class="text-sm text-primary-700 hover:underline">
        <i class="bi bi-arrow-left" aria-hidden="true"></i> Volver a formatos
      </a>
      <h2 class="mt-2 text-2xl font-bold text-secondary-900">{{ title }}</h2>
      <p class="text-sm text-secondary-500">Arrastra los campos sobre la hoja para colocarlos. Lo que ves es lo que se imprime.</p>
    </div>
    {% if formato %}
      {# target="_blank" (una pestana nueva sin nombre en cada envio) es lo que
         algunos navegadores endurecidos contra popups (p. ej. Brave con
         Shields) bloquean en silencio a partir del segundo clic, sin mostrar
         ningun aviso: el usuario ve "no pasa nada". Un target con nombre fijo
         reutiliza siempre la misma pestana en vez de abrir una nueva cada vez,
         que es el patron que esos navegadores SI dejan pasar de forma
         confiable (y de paso evita acumular pestanas). #}
      <form id="formato-pago-prueba-form" method="post" action="{{ path('formato_pago_test_print', {id: formato.id}) }}" class="mt-4 md:mt-0" target="formato_pago_prueba_{{ formato.id }}" rel="noopener">
        <input type="hidden" name="_token" value="{{ csrf_token('formato_pago_test_' ~ formato.id) }}">
        <button class="btn btn-outline-primary">
          <i class="bi bi-printer" aria-hidden="true"></i> Imprimir prueba
        </button>
      </form>
    {% endif %}
  </div>
{% endblock %}

{% block content %}
  {% import _self as voucher %}
  {% set currentName = form_data.nombre is defined ? form_data.nombre : (formato ? formato.nombre : '') %}
  {% set currentBancoId = form_data.banco_id is defined ? form_data.banco_id : (formato and formato.banco ? formato.banco.id : '') %}
  {% set currentCuentaId = form_data.cuenta_bancaria_id is defined ? form_data.cuenta_bancaria_id : (formato and formato.cuentaBancaria ? formato.cuentaBancaria.id : '') %}
  {% set currentWidth = form_data.papel_ancho is defined ? form_data.papel_ancho : (formato ? formato.papelAncho : '216.00') %}
  {% set currentHeight = form_data.papel_alto is defined ? form_data.papel_alto : (formato ? formato.papelAlto : '90.00') %}
  {% set currentOrientation = form_data.orientacion is defined ? form_data.orientacion : (formato ? formato.orientacion : 'horizontal') %}
  {% set currentUnit = form_data.unidad is defined and form_data.unidad in ['mm', 'cm', 'px'] ? form_data.unidad : (formato ? formato.unidad : 'mm') %}
  {% set currentActive = form_data is not empty ? form_data.activo is defined : (not formato or formato.activo) %}
  {% set hasSubmittedFields = form_data.campos is defined and form_data.campos is iterable and form_data.campos|length > 0 %}
  {% set currentReferenceImageUrl = formato and formato.referenceImagePath ? '/' ~ formato.referenceImagePath|trim('/') : null %}

  {# Una sola lista normalizada de campos alimenta la hoja y el panel lateral. #}
  {% set campos = [] %}
  {% if hasSubmittedFields %}
    {% set campos = form_data.campos %}
  {% elseif formato %}
    {% for campo in formato.campos %}
      {% set campos = campos|merge([{
        campo: campo.campo, etiqueta: campo.etiqueta,
        x: campo.x, y: campo.y, width: campo.width, height: campo.height,
        fontSize: campo.fontSize, fontFamily: campo.fontFamily,
        align: campo.align, visible: campo.visible
      }]) %}
    {% endfor %}
  {% else %}
    {% for key, label in defaultFields %}
      {% set campos = campos|merge([{
        campo: key, etiqueta: label,
        x: '15.00', y: (12 + loop.index0 * 10) ~ '.00',
        width: key == 'monto_letras' ? '150.00' : '70.00', height: '8.00',
        fontSize: '10.00', fontFamily: 'Arial',
        align: 'left', visible: true
      }]) %}
    {% endfor %}
  {% endif %}

  <form method="post" action="{{ action }}" class="space-y-5" data-voucher-format-designer>
    <input type="hidden" name="_token" value="{{ csrf_token(csrf_id) }}">
    {% if form_errors.form is defined %}
      <div class="rounded-lg border border-danger-200 bg-danger-50 px-4 py-3 text-sm text-danger-800" role="alert">
        <strong>No se pudo guardar.</strong> {{ form_errors.form }}
      </div>
    {% endif %}

    {# ---------------------------------------------------------------- 1 #}
    <section class="voucher-panel">
      <header class="voucher-panel__header">
        <span class="voucher-step">1</span>
        <div>
          <h3 class="voucher-panel__title">Datos del formato</h3>
          <p class="voucher-panel__subtitle">Con que banco y cuenta se usa esta plantilla.</p>
        </div>
      </header>
      <div class="voucher-panel__body grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <div class="sm:col-span-2">
          <label class="form-label" for="formato-nombre">Nombre del formato</label>
          <input id="formato-nombre" name="nombre" required maxlength="120" value="{{ currentName }}"
                 placeholder="Ejemplo: Cheque voucher BAC"
                 aria-invalid="{{ form_errors.form is defined ? 'true' : 'false' }}" class="form-input">
        </div>
        <div>
          <label class="form-label" for="formato-banco">Banco</label>
          <select id="formato-banco" name="banco_id" class="form-select">
            <option value="">Cualquier banco</option>
            {% for banco in bancos %}
              <option value="{{ banco.id }}" {% if currentBancoId == banco.id %}selected{% endif %}>{{ banco.nombre }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="form-label" for="formato-cuenta">Cuenta bancaria</label>
          <select id="formato-cuenta" name="cuenta_bancaria_id" class="form-select">
            <option value="">Cualquier cuenta del banco</option>
            {% for cuenta in cuentas %}
              <option value="{{ cuenta.id }}" {% if currentCuentaId == cuenta.id %}selected{% endif %}>{{ cuenta.banco.nombre }} · {{ cuenta.numero }}</option>
            {% endfor %}
          </select>
        </div>
        <label class="voucher-switch sm:col-span-2 xl:col-span-4">
          <input type="checkbox" name="activo" value="1" {% if currentActive %}checked{% endif %}>
          <span><strong>Formato activo</strong> — disponible al imprimir pagos.</span>
        </label>
      </div>
    </section>

    {# ---------------------------------------------------------------- 2 #}
    <section class="voucher-panel">
      <header class="voucher-panel__header">
        <span class="voucher-step">2</span>
        <div>
          <h3 class="voucher-panel__title">Hoja</h3>
          <p class="voucher-panel__subtitle">
            Elige un tamano de la lista o escribe el tuyo. Todas las medidas del formato
            (hoja y campos) se guardan en la unidad que selecciones aqui.
          </p>
        </div>
      </header>
      <div class="voucher-panel__body grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-5">
        <div>
          <label for="papel_preset" class="form-label">Tamano de hoja</label>
          <select id="papel_preset" class="form-select" data-paper-preset>
            <option value="custom">A la medida</option>
            <option value="carta">Carta · 216 × 279 mm</option>
            <option value="oficio">Oficio · 216 × 330 mm</option>
            <option value="legal">Legal · 216 × 356 mm</option>
            <option value="a4">A4 · 210 × 297 mm</option>
          </select>
        </div>
        <div>
          <label for="orientacion" class="form-label">Orientacion</label>
          <select id="orientacion" name="orientacion" class="form-select" data-paper-orientation>
            <option value="vertical" {% if currentOrientation == 'vertical' %}selected{% endif %}>Vertical</option>
            <option value="horizontal" {% if currentOrientation == 'horizontal' %}selected{% endif %}>Horizontal</option>
          </select>
        </div>
        <div>
          <label class="form-label" for="papel_ancho">Ancho de la hoja</label>
          <span class="voucher-measure">
            <input id="papel_ancho" name="papel_ancho" type="number" inputmode="decimal" min="0.01" step="0.01" required
                   value="{{ currentWidth }}" class="voucher-input" data-paper-width data-layout-measurement>
            <span class="voucher-measure__unit" data-unit-label>{{ currentUnit }}</span>
          </span>
        </div>
        <div>
          <label class="form-label" for="papel_alto">Alto de la hoja</label>
          <span class="voucher-measure">
            <input id="papel_alto" name="papel_alto" type="number" inputmode="decimal" min="0.01" step="0.01" required
                   value="{{ currentHeight }}" class="voucher-input" data-paper-height data-layout-measurement>
            <span class="voucher-measure__unit" data-unit-label>{{ currentUnit }}</span>
          </span>
        </div>
        <div>
          <label for="unidad" class="form-label">Unidad de medida</label>
          <select id="unidad" name="unidad" class="form-select" data-paper-unit>
            <option value="mm" {% if currentUnit == 'mm' %}selected{% endif %}>Milimetros (mm)</option>
            <option value="cm" {% if currentUnit == 'cm' %}selected{% endif %}>Centimetros (cm)</option>
            <option value="px" {% if currentUnit == 'px' %}selected{% endif %}>Pixeles (px)</option>
          </select>
        </div>
      </div>
    </section>

    {# ---------------------------------------------------------------- 3 #}
    <section class="voucher-panel">
      <header class="voucher-panel__header">
        <span class="voucher-step">3</span>
        <div>
          <h3 class="voucher-panel__title">Diseno</h3>
          <p class="voucher-panel__subtitle">
            Arrastra cada campo sobre la hoja; la esquina inferior derecha cambia el tamano.
            X se mide desde el borde izquierdo y Y desde el borde superior.
          </p>
        </div>
      </header>

      <div class="voucher-workspace">
        {# ---- vista previa ------------------------------------------------ #}
        <div class="voucher-workspace__canvas">
          <div class="voucher-toolbar">
            <div class="voucher-toolbar__group" role="group" aria-label="Acercar o alejar la vista previa">
              <button type="button" class="voucher-chip" data-zoom-step="-0.1" aria-label="Alejar"><i class="bi bi-dash-lg" aria-hidden="true"></i></button>
              <span class="voucher-chip voucher-chip--static" data-zoom-label aria-live="off">100%</span>
              <button type="button" class="voucher-chip" data-zoom-step="0.1" aria-label="Acercar"><i class="bi bi-plus-lg" aria-hidden="true"></i></button>
              <button type="button" class="voucher-chip" data-zoom-fit>Ajustar</button>
              <button type="button" class="voucher-chip" data-zoom-reset>100%</button>
            </div>
            <div class="voucher-toolbar__group">
              <label class="voucher-toggle"><input type="checkbox" data-canvas-grid checked><span>Cuadricula</span></label>
              <label class="voucher-toggle"><input type="checkbox" data-canvas-snap checked><span>Ajustar a 1 mm y guias de alineacion</span></label>
              <label class="voucher-toggle"><input type="checkbox" data-canvas-sample checked name="usar_datos_ejemplo" value="1" form="formato-pago-prueba-form"><span>Datos de ejemplo</span></label>
            </div>
            {% if formato %}
              <div class="voucher-toolbar__group" data-reference-image-controls>
                <label class="voucher-chip" for="formato-imagen-referencia-input">
                  <i class="bi bi-image" aria-hidden="true"></i> {{ currentReferenceImageUrl ? 'Cambiar imagen' : 'Subir imagen de referencia' }}
                </label>
                <input type="file" id="formato-imagen-referencia-input" name="imagen" accept="image/jpeg,image/png,image/webp"
                       form="formato-imagen-referencia-upload-form" class="sr-only" data-reference-image-input>
                {% if currentReferenceImageUrl %}
                  <label class="voucher-toggle"><input type="checkbox" data-reference-image-toggle checked><span>Mostrar</span></label>
                  <input type="range" class="voucher-range" min="10" max="90" step="5" value="50"
                         data-reference-image-opacity aria-label="Opacidad de la imagen de referencia">
                  <button type="submit" form="formato-imagen-referencia-remove-form" class="voucher-chip voucher-chip--danger"
                          onclick="return confirm('¿Quitar la imagen de referencia de este formato?');">
                    <i class="bi bi-trash" aria-hidden="true"></i> Quitar
                  </button>
                {% endif %}
              </div>
            {% endif %}
          </div>

          <p class="voucher-selection" data-canvas-selection aria-live="polite"></p>

          <div class="voucher-viewport" data-canvas-viewport>
            <div class="voucher-stage" data-canvas-stage>
              <div class="voucher-paper" data-format-canvas data-format-fields-canvas
                   style="width: {{ currentWidth }}{{ currentUnit }}; height: {{ currentHeight }}{{ currentUnit }};">
                {% if currentReferenceImageUrl %}
                  <img src="{{ currentReferenceImageUrl }}" alt="Imagen de referencia para calcar los campos" class="voucher-reference-image" data-reference-image style="opacity: 0.5;">
                {% endif %}
                {% for campo in campos %}
                  {{ voucher.canvas_field(campo, loop.index0, currentUnit) }}
                {% endfor %}
              </div>
            </div>
          </div>
          <p class="voucher-help">
            <i class="bi bi-info-circle" aria-hidden="true"></i>
            Con el campo seleccionado: flechas para mover, <kbd>Shift</kbd>+flechas para avanzar 5 {{ currentUnit }},
            <kbd>Ctrl</kbd>+flechas para cambiar el tamano.
          </p>
        </div>

        {# ---- panel de campos -------------------------------------------- #}
        <aside class="voucher-workspace__side">
          <div class="voucher-side-block">
            <h4 class="voucher-side-title">Empezar con una plantilla</h4>
            <div class="voucher-side-row">
              <select class="form-select" data-layout-preset-select aria-label="Plantilla precargada">
                {% for key, preset in layoutPresets %}
                  <option value="{{ key }}">{{ preset }}</option>
                {% endfor %}
              </select>
              <button type="button" class="btn btn-outline-primary" data-apply-layout-preset>Aplicar</button>
            </div>
            <p class="voucher-side-hint">Reemplaza los campos actuales. Puedes deshacerlo enseguida.</p>
            <div class="voucher-undo" data-layout-undo-bar hidden>
              <span data-layout-undo-text></span>
              <span class="voucher-undo__actions">
                <button type="button" class="voucher-link" data-layout-undo>Deshacer</button>
                <button type="button" class="voucher-link" data-layout-undo-dismiss>Cerrar</button>
              </span>
            </div>
          </div>

          <div class="voucher-side-block">
            <h4 class="voucher-side-title">Agregar un campo</h4>
            <div class="voucher-side-row">
              <label class="sr-only" for="nuevo-campo-formato">Tipo de campo</label>
              <select id="nuevo-campo-formato" class="form-select" data-new-format-field-type>
                <option value="texto">Texto libre</option>
                {% for key, label in fieldCatalog %}
                  {% if key != 'texto' %}
                    <option value="{{ key }}">{{ label }}</option>
                  {% endif %}
                {% endfor %}
              </select>
              <button type="button" class="btn btn-primary" data-add-format-field>Agregar</button>
            </div>
          </div>

          <div class="voucher-side-block voucher-side-block--grow">
            <div class="voucher-side-heading">
              <h4 class="voucher-side-title">Campos del formato</h4>
              <span class="badge badge-neutral" data-format-field-count aria-live="polite"></span>
            </div>
            <div class="voucher-filters" role="group" aria-label="Armar por partes">
              <button type="button" class="voucher-filter is-active" data-group-filter="todos" aria-pressed="true">Todo</button>
              <button type="button" class="voucher-filter" data-group-filter="cheque" aria-pressed="false">Cheque</button>
              <button type="button" class="voucher-filter" data-group-filter="voucher" aria-pressed="false">Voucher</button>
            </div>
            <p class="voucher-status" data-format-field-status role="status" aria-live="polite"></p>
            <p class="voucher-empty" data-fields-empty hidden>Aun no hay campos. Agrega uno o aplica una plantilla.</p>
            <div class="voucher-field-list" data-format-fields-list data-max-fields="{{ maxFields }}">
              {% for campo in campos %}
                {% include 'formato_pago/_campo.html.twig' with {campo: campo, index: loop.index0, unidad: currentUnit} %}
              {% endfor %}
            </div>
          </div>
        </aside>
      </div>
    </section>

    {% set templateField = {
      campo: 'texto', etiqueta: 'Texto adicional',
      x: '15.00', y: '15.00', width: '70.00', height: '8.00',
      fontSize: '10.00', fontFamily: 'Arial', align: 'left', visible: true
    } %}
    <template data-format-field-row-template>
      {% include 'formato_pago/_campo.html.twig' with {campo: templateField, index: '__INDEX__', unidad: currentUnit} %}
    </template>
    <template data-format-field-canvas-template>
      {{ voucher.canvas_field(templateField, '__INDEX__', currentUnit) }}
    </template>

    <div class="voucher-actions">
      <span class="voucher-unsaved-badge" data-unsaved-indicator hidden>
        <i class="bi bi-exclamation-circle" aria-hidden="true"></i> Cambios sin guardar
      </span>
      <a href="{{ path('formato_pago_index') }}" class="btn btn-outline">Cancelar</a>
      <button class="btn btn-primary"><i class="bi bi-check-lg" aria-hidden="true"></i> Guardar formato</button>
    </div>
  </form>

  {% if formato %}
    {# Formularios reales fuera del formulario principal (los <form> no se
       pueden anidar): el input y el boton de arriba se asocian a estos via
       el atributo form="", asi se ven dentro de la barra de herramientas del
       lienzo pero suben/quitan la imagen con su propio POST, sin mezclarse
       con el guardado de los campos del formato. #}
    <form id="formato-imagen-referencia-upload-form" method="post" enctype="multipart/form-data"
          action="{{ path('formato_pago_reference_image_upload', {id: formato.id}) }}" hidden>
      <input type="hidden" name="_token" value="{{ csrf_token('formato_pago_imagen_' ~ formato.id) }}">
    </form>
    <form id="formato-imagen-referencia-remove-form" method="post"
          action="{{ path('formato_pago_reference_image_remove', {id: formato.id}) }}" hidden>
      <input type="hidden" name="_token" value="{{ csrf_token('formato_pago_imagen_eliminar_' ~ formato.id) }}">
    </form>
  {% endif %}
{% endblock %}