{% extends 'layouts/panel_layout.html.twig' %}

{% block title %}

Facturación
{% endblock %}


{% block stylesheets %}
    {{ encore_entry_link_tags('facturacion_nuevo') }}
    <style>
        @media print {
            body * {
                visibility: hidden;
            }
            
            .print-area, .print-area * {
                visibility: visible;
            }
            
            .print-area {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                font-family: Arial, sans-serif;
            }
            
            .no-print {
                display: none !important;
            }
            
            .print-header {
                text-align: center;
                margin-bottom: 20px;
                border-bottom: 2px solid #000;
                padding-bottom: 15px;
            }
            
            .logo-container img {
                margin-bottom: 10px;
            }
            
            .print-header h2 {
                margin: 10px 0;
                font-size: 20px;
                font-weight: bold;
            }
            
            .print-header p {
                margin: 5px 0;
                font-size: 14px;
            }
            
            .print-table {
                width: 100%;
                border-collapse: collapse;
                margin-top: 20px;
                font-size: 12px;
            }
            
            .print-table th, .print-table td {
                border: 1px solid #000;
                padding: 8px;
                text-align: left;
            }
            
            .print-table th {
                background-color: #f0f0f0;
                font-weight: bold;
                text-align: center;
            }
            
            .print-table tfoot th {
                background-color: #e0e0e0;
                font-weight: bold;
            }
            
            .text-right {
                text-align: right;
            }
            
            @page {
                margin: 1cm;
            }
        }
    </style>
{% endblock %}

{% block content %}

    {# TITULO #}
    <div class="bg-dark m-b-30">
        <div class="container">
            <div class="row p-b-60 p-t-60">

                <div class="col-md-10 mx-auto text-center text-white p-b-30">
                    <div class="m-b-20">
                        <div class="avatar avatar-xl my-auto">
                            <i class="icon-placeholder mdi mdi-ticket-account" style="font-size: 5rem"></i>
                            <i class="mdi mdi-plus position-absolute"  style="font-size: 3rem"></i>
                        </div>
                    </div>
                    <h1 id="page-offset">Nueva factura {% if updated is defined %}({{ updated }}){% endif %}</h1>
                </div>

            </div>
        </div>
    </div>

    {# BOTONERA PRINCIPAL #}
    <div class="container pull-up pb-5 mb-3">

        <div class="row">

            <div class="col-12 m-b-30">
                <div class="card card-hover" style="cursor: pointer">
                    <div class="card-body">

                        <div class="row py-2 px-2">

                            <div class="col-6">

                                <h4 class="text-muted pb-4">
                                    ASIGNACIÓN
                                </h4>

                                <h3 >
                                    {% if is_granted('ROLE_CAJERO') %}
                                        {% set currentVendedor = factura.vendedor ? factura.vendedor.id: app.user.id %}
                                    <select name="factura[vendedor]" id="factura_vendedor" class="form-control js-select2 initial-tab" >
                                    {% for vendedor in vendedores %}
                                        <option value="{{ vendedor.id }}" {% if currentVendedor == vendedor.id %}selected{% endif %}>
                                            {{ vendedor.nombre }}
                                            {% if vendedor.role == 'ROLE_ADMIN' %}
                                                (admin)
                                            {% elseif vendedor.role == 'ROLE_CAJERO' %}
                                                (cajero)
                                            {% elseif vendedor.role == 'ROLE_VENDEDOR' %}
                                                (vendedor)
                                            {% endif %}
                                        </option>
                                    {% endfor %}
                                    </select>
                                    {% else %}
                                        {{ factura.vendedor.nombre }}
                                    {% endif %}
                                </h3>

                            </div>

                            <div class="col-6">

                                <p class="text-right">
                                    <a href="{{ path('facturacion_index') }}" class="btn btn-outline-dark">
                                        <i class="mdi mdi-restore mdi-18px m-r-5"></i> Volver
                                    </a>
                                </p>

                                <h4 class="text-right">
                                    <small class="text-muted">Proceso Nº: </small> {{ factura.codfacturaTmp }}
                                </h4>

                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>

    {# CONTENIDO PRINCIPAL #}
    <div class="container-fluid pull-up pb-5 mb-5">

        <div class="card mb-1" >
            <div class="card-body pt-4" id="cliente_container">
                <div class="row">

                    <div class="col-5">
                        <form name="factura_cliente" method="post" action="#" autocomplete="off">
                            <div class="form-row">

                                <div class="form-group form-inline col-12">
                                    <label class="col-4" for="factura_cliente_cuenta">Cliente Nº:</label>
                                    <input type="text" id="factura_cliente_cuenta" name="cliente[cuenta]"
                                           class="form-control col-5" value="{{ factura.cliente.cuenta }}" readonly>
                                    <div class="col-3 text-right p-0" style="display: none;">
                                        <button type="button" class="btn btn-sm btn-primary p-1" onclick="alert('Nothing to do!')">
                                            <i class="mdi mdi-magnify"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-primary p-1" onclick="alert('Nothing to do!')">
                                            <i class="mdi mdi-contacts"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="form-group form-inline col-12">
                                    <label class="col-4" for="factura_cliente_nombre">Nombre:</label>
                                    <input type="text" id="factura_cliente_nombre" name="cliente[apenom]"
                                           class="form-control col-8 input-autocompletable"
                                           value="{{ factura.cliente.apenom }}"
                                           disabled="disabled"
                                           data-autocomplete-label="{{ factura.cliente.apenom }}"
                                           data-autocomplete-id="{{ factura.cliente.cuenta }}"
                                           maxlength="200" data-entity="Cliente" data-search-field="apenom" data-min-text="2">
                                </div>

                                <div class="form-group form-inline col-12">
                                    <label class="col-4" for="factura_cliente"></label>
                                    <div class="col-8 text-muted pl-0 infocliente">
                                        CUIT/DNI > <span>{{ factura.cliente.cuilt ? factura.cliente.cuilt : factura.cliente.dni }}</span>
                                        <input type="hidden" id="cuit" name="cuit" value="{{ factura.cliente.cuilt ? factura.cliente.cuilt : factura.cliente.dni }}" />
                                    </div>
                                    <div id="set_auto" class="text-right col-12" style="display: none;">
                                        <label class="cstm-switch" for="cant_auto">
                                            <input type="checkbox" id="cant_auto" name="cant_auto" value="1" class="cstm-switch-input">
                                            <span class="cstm-switch-indicator bg-warning "></span>
                                            <span class="cstm-switch-description">Cant. Auto</span>
                                        </label>
                                    </div>
                                </div>

                            </div>
                        </form>
                    </div>

                    <div class="col-3">

                        <a href="{{ path('cliente_edit', { cuenta: factura.cliente.cuenta } ) }}" class="btn btn-outline-primary text-center w-100">
                            MODIFICAR <br/>
                            CLIENTE
                        </a>

                        <h4 id="cond_iva" class="pt-2 text-center" style="display: none;">
                            <small class="text-secondary">CONDICION IVA</small> <br/>
                            <span class="text-danger">{{ factura.cliente.apenom }}</span>
                        </h4>

                    </div>

                    <div class="col-4 text-right">

                        <p>Saldo en Cuenta Corriente:
                            <span>
                            {% if factura.cliente.cuentaCorriente %}
                                ${{ ((factura.cliente.cuentaCorriente.totalF()|default(0)) + (factura.cliente.cuentaCorriente.totalNF()|default(0))) | number_format(2, ',', '.') }}
                            {% else %}
                                $0.00
                            {% endif %}
                            </span>
                        </p>

                        <p>
                            <a href="javascript:alert('Nothing to show!')" class="btn-link">
                                Ver Resumen de Cuenta
                            </a>
                        </p>

                        <h4 id="historico_de_compras"  class="pt-2 text-right" style="display: none;">
                            <small class="text-secondary" onClick="alert('#')">
                                Historico <a href="#" class="btn-link">Actividades</a>
                            </small>
                        </h4>

                        {% if not is_granted('ROLE_VENDEDOR') %}
                            <div class="form-group form-inline col-12">
                                <label class="col-4" for="factura_factura_fecha">Fecha:</label>
                                <input type="text" id="factura_factura_fecha" name="factura[fecha]"
                                       class="form-control col-8 datesingle text-right">
                            </div>
                        {% endif %}

                    </div>

                </div>
            </div>
        </div>

        <div class="card mb-1">
            <div class="card-body" id="articulo_container">

                <form id="factura_articulo" method="post" action="{{ path("facturacion_nueva_linea", { id: factura.id }) }}" autocomplete="off">
                    <input type="hidden" id="no_afecta_al_encolar" name="articulo[noAfectaAlEncolar]" value="0" />

                    <div class="form-row">

                        <div class="col-6">

                            <div class="row">

                                <div class="form-group form-inline col-9">
                                    <label class="col-4" for="factura_articulo_codigo">Código</label>
                                    <input type="text" id="factura_articulo_codigo" name="articulo[codigo]"
                                           class="form-control col-8 {% if not is_granted('ROLE_CAJERO') %}initial-tab{% endif %}">
                                </div>

                                <div class="col-3" style="display:none">
                                    <button type="button" class="btn btn-secondary" tabindex="-1"
                                            onclick="alert('Nothing to do!')">
                                        <i class="mdi mdi-magnify"></i>
                                    </button>
                                </div>

                                <div class="form-group form-inline col-12">

                                    <label class="col-3" for="factura_articulo_descripcion">Descripción</label>
                                    <div class="input-group col-9 p-0">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text bg-success" id="prepend-0"></span>
                                        </div>
                                        <input type="text" id="factura_articulo_descripcion" name="articulo[descripcion]"
                                               class="form-control input-autocompletable"
                                               maxlength="200" data-entity="Articulo" data-search-field="descripcion" data-min-text="2"
                                               aria-describedby="prepend-0">
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="col-3 pb-1">
                            <div class="avatar avatar-xl" id=foto_preview style="display: none; cursor: pointer">
                                <img src="" alt="..." class="avatar-img rounded">
                            </div>
                        </div>

                        <div class="col-3 text-left p-3 border-dark" id="stock-container" style="border-radius: 6px">

                            <p class="m-0 pb-1">
                                <span  class="text-secondary pr-2">Stock Actual:</span> <span id="stock_actual"></span>
                            </p>

                            <p class="m-0 pb-1">
                                <span class="text-secondary pr-2">Quedarían:</span> <span id="stock_quedarian"></span>
                            </p>

                            <p class="m-0 pb-1">
                                <span class="text-secondary pr-2">Otro Local:</span> <span id="#stock_otro_local"></span>
                                <span class="spinner-border text-primary mini-spinner mx-2" style="display: none;"></span>
                            </p>

                            <p class="m-0 pb-1">
                                <span class="text-secondary pr-2 text-danger" style="display: none;"
                                      id="pr_ot_listas"></span>
                            </p>
                        </div>

                        <div class="form-group form-inline col-3 pt-3">
                            <label class="col-3 text-secondary p-0" for="factura_articulo_precio">
                                <span class="w-100 text-right">Precio</span>
                            </label>
                            <div class="input-group col-9">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="prepend-1">$</span>
                                </div>
                                <input type="hidden" id="factura_articulo_precio_real" name="articulo[precioReal]">
                                <input type="text" class="form-control" id="factura_articulo_precio"  name="articulo[precio]"
                                       aria-describedby="prepend-1">
                            </div>
                        </div>

                        <div class="form-group form-inline col-2 pt-3">
                            <label class="col-6 text-secondary" for="factura_articulo_descuento_linea">
                                <span class="w-100 text-right">Des/Aum (%) </span>
                            </label>
                            <input type="text" id="factura_articulo_descuento_linea" name="articulo[descuento_linea]"
                                   class="form-control col-6">
                        </div>

                        <div class="form-group form-inline col-2 pt-3">
                            <label class="col-6 text-secondary" for="factura_articulo_descuento_monto_linea">
                                <span class="w-100 text-right">Des/Aum ($) </span>
                            </label>
                            <input type="text" id="factura_articulo_descuento_monto_linea" name="articulo[descuento_monto_linea]"
                                   class="form-control col-6">
                        </div>

                        <div class="form-group form-inline col-2 pt-3">
                            <label class="col-7 text-secondary" for="factura_articulo_cantidad">
                                <span class="w-100 text-right">Cantidad</span>
                            </label>
                            <input type="number" id="factura_articulo_cantidad" name="articulo[cantidad]"
                                   class="form-control col-5">
                        </div>

                        <div class="form-group form-inline col-3 pt-3">
                            <label class="col-4 text-secondary p-0" for="factura_articulo_importe">
                                <span class="w-100 text-right">Importe</span>
                            </label>
                            <div class="input-group col-8">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="prepend-2">$</span>
                                </div>
                                <input type="text" class="form-control" id="factura_articulo_importe"  name="articulo[importe]"
                                       aria-describedby="prepend-2">
                                <input type="hidden" name="factura[ivaVenta]" id="factura_articulo_iva_venta" />
                            </div>
                        </div>

                        <div class="col-12 text-right">
                            <button type="button" class="btn btn-outline-success" id="agregar-producto">Agregar</button>
                        </div>

                    </div>
                </form>
            </div>
        </div>

        <div class="card mb-1">
            <div class="card-body" style="height: 33vh; overflow-y: auto" data-ui="factulinea-container">
                {% include 'facturacion/templates/table_factulinea.html.twig'
                with { factulineas: factura.factuLinea, lineaActual: 0 } %}
            </div>
        </div>

        <form action="{{ path('facturacion_guardar', { id: factura.id }) }}" id="form_factura" method="POST">
        <div class="card" style="cursor: pointer">
            <div class="card-body">
                <div class="row pb-5">

                    <input type="hidden" name="cc[cuotas]" id="cc_cuotas_transf">

                    <div class="col-4">
                        <button type="button" class="btn btn-sm btn-success" id="guardar_factura">
                            <i class="mdi mdi-check mr-2"></i> aceptar
                        </button>
                        <a href="{{ path('facturacion_temporal_borrar', { id: factura.id }) }}" class="btn btn-sm btn-danger ml-2">
                            <i class="mdi mdi-close-circle"></i> cancelar
                        </a>
                        <button  type="button"  class="btn btn-sm btn-dark ml-2" id="imprimir-productos">
                            <i class="mdi mdi-printer"></i> imprimir
                        </button>
                    </div>

                    <div class="col-8">

                        <div class="form-row">

                            <div class="form-group form-inline col-12" style="display: none;">

                                <label class="col-6" for="factura_base_imponible">
                                    <span class="w-100 text-right">Sub-total: </span>
                                </label>

                                <div class="input-group col-6">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">$</span>
                                    </div>
                                    <input type="text" class="form-control text-right" id="factura_base_imponible"
                                           name="factura[baseImponible]" readonly="readonly">
                                </div>

                            </div>

                            <div class="form-group form-inline col-12" style="display: none;">

                                <label class="col-6" for="factura_base_impuesto">
                                    <span class="w-100 text-right">IVA:</span>
                                </label>

                                <div class="input-group col-6">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">$</span>
                                    </div>
                                    <input type="text" class="form-control text-right" id="factura_base_impuesto"
                                           name="factura[baseImpuesto]" readonly="readonly">
                                    <input name="factura[iva]" id="factura_iva" type="hidden"/>
                                </div>

                            </div>

                            <div class="form-group form-inline col-12">

                                <label class="col-6" for="factura_precio_total">
                                    <span class="w-100 text-right">Subtotal:</span>
                                </label>

                                <div class="input-group col-6">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">$</span>
                                    </div>
                                    <input type="text" class="form-control text-right" id="factura_precio_total"
                                           value="{{ factura.subtotal ? factura.subtotal | number_format(2) : ''  }}"
                                           name="factura[precioTotal]" size="10" readonly="readonly">
                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="col-6 col-md-5 pt-3">

                        <div class="form-row" >

                            <label class="cstm-switch col-4">
                                <input type="checkbox" id="imprime" name="imprime" value="1"
                                       class="cstm-switch-input">
                                <span class="cstm-switch-indicator"></span>
                                <label class="ml-2 text-danger pt-2" for="id_talonario">(F)</label>
                            </label>

                            <div class="col-8">
                                <select class="form-control js-select2" disabled="disabled"
                                        name="id_talonario" id="id_talonario"></select>
                            </div>

                            <label class="cstm-switch col-4">
                                <input type="checkbox" id="nota_credito" name="nota_credito" class="cstm-switch-input">
                                <span class="cstm-switch-indicator"></span>
                                <label class="ml-2 pt-2 text-uppercase">Nota de Crédito</label>
                            </label>

                            <div class="col-8 my-2">
                                <select class="form-control js-select2" disabled="disabled"
                                        name="facturaRelacionada" id="id_fact_rel">
                                    <option value="">Seleccione Factura</option>
                                    {% for f in facturasimpagasnf %}
                                        <option value="{{ f.factura.codfactura }}">| Factura: {{ f.factura.codfactura }} | Vencimiento: {{ f.vencimiento | date('d-m-Y')}} | Saldo: {{ f.montoremanente | number_format(2,",",".")}} </option>
                                    {% endfor %}
                                </select>
                            </div>

                        </div>

                        <hr/>

                        <div class="">

                            <div class=" m-b-10" style="display: none">
                                <label class="cstm-switch" >
                                    <input type="radio" name="tipo_cuenta" value="cheque" onchange="$('#mdlCheque').modal('show');"
                                           class="cstm-switch-input">
                                    <span class="cstm-switch-indicator"></span>
                                    <span class="cstm-switch-description text-uppercase">Cheque</span>
                                </label>
                            </div>

                            <div class=" m-b-10" style="display: none">
                                <label class="cstm-switch">
                                    <input type="radio" name="tipo_cuenta" value="financiera" onchange="$('#mdlFinanciera').modal('show');"
                                           class="cstm-switch-input">
                                    <span class="cstm-switch-indicator"></span>
                                    <span class="cstm-switch-description text-uppercase">Financiera</span>
                                </label>
                            </div>

                            <div class=" m-b-10">
                                <label class="cstm-switch">
                                    <input type="radio" name="tipo_cuenta"  value="efectivo"
                                           class="cstm-switch-input">
                                    <span class="cstm-switch-indicator"></span>
                                    <span class="cstm-switch-description text-uppercase">Efectivo</span>
                                </label>
                            </div>

                            <div class=" m-b-10" style="display: none">
                                <label class="cstm-switch">
                                    <input type="radio" name="tipo_cuenta" value="tarjeta"
                                           onchange="$('#mdlTarjeta').modal('show');" class="cstm-switch-input">
                                    <span class="cstm-switch-indicator"></span>
                                    <span class="cstm-switch-description text-uppercase">Tarjeta</span>
                                </label>
                            </div>

                            <div class=" m-b-10" >
                                <label class="cstm-switch">
                                    <input type="radio" name="tipo_cuenta" checked value="cuenta_corriente"
                                           onchange="$('#mdlCuentaCorriente').modal('show');"
                                           data-cuota-vencida="1"
                                           class="cstm-switch-input">
                                    <span class="cstm-switch-indicator"></span>
                                    <span class="cstm-switch-description text-uppercase">Cuenta corriente</span>
                                </label>
                            </div>

                            <div class=" m-b-10" style="display: none">
                                <label class="cstm-switch">
                                    <input type="radio" name="tipo_cuenta" value="pago_dividido"
                                           onchange="$('#mdlPagoDividido').modal('show');" class="cstm-switch-input">
                                    <span class="cstm-switch-indicator"></span>
                                    <span class="cstm-switch-description text-uppercase">Pago dividido</span>
                                </label>
                            </div>

                            <div class=" m-b-10" style="display: none">
                                <label class="cstm-switch">
                                    <input type="radio" name="tipo_cuenta" value="pago_mutual"
                                           onchange="$('#mdlMutual').modal('show');" class="cstm-switch-input">
                                    <span class="cstm-switch-indicator"></span>
                                    <span class="cstm-switch-description text-uppercase">MUTUAL</span>
                                </label>
                            </div>

                             <div class=" m-b-10">
                                <label class="cstm-switch">
                                    <input type="radio" name="tipo_cuenta" value="transferencia"
                                           onchange="$('#mdlTransferencia').modal('show');" class="cstm-switch-input">
                                    <span class="cstm-switch-indicator"></span>
                                    <span class="cstm-switch-description text-uppercase">TRANSFERENCIA</span>
                                </label>
                            </div>

                            <div class=" m-b-10">
                                <label class="cstm-switch">
                                    <input type="radio" name="tipo_cuenta" value="cheque"
                                           onchange="$('#mdlCheque').modal('show');" class="cstm-switch-input">
                                    <span class="cstm-switch-indicator"></span>
                                    <span class="cstm-switch-description text-uppercase">Cheque</span>
                                </label>
                            </div>

                            <div class=" m-b-10" style="display: none">
                                <label class="cstm-switch">
                                    <input type="radio" name="tipo_cuenta" value="qr"
                                           onchange="$('#mdlQR').modal('show');" class="cstm-switch-input">
                                    <span class="cstm-switch-indicator"></span>
                                    <span class="cstm-switch-description text-uppercase">QR</span>
                                </label>
                            </div>

                        </div>

                    </div>

                    {% include 'facturacion/templates/formTotales.html.twig' %}

                    <div style="display:none;" class="col-6 col-md-5 offset-md-2 p-2">

                        <div class="form-row border border-secondary p-2">

                            {# <div class="form-group form-inline col-12">

                                <label class="col-6" for="factura_descuento">
                                    <span class="w-100 text-right">Aplica Descuento:</span>
                                </label>

                                <div class="input-group col-6">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="prepend-3">%</span>
                                    </div>
                                    <input type="number" class="form-control text-right" id="factura_descuento"
                                           value="{{ factura.porcentajeDesc ? factura.porcentajeDesc : descuentoEfectivo }}"
                                           name="factura[descuento]">
                                </div>

                            </div> #}

                            {#<div class="form-group form-inline col-12">#}
                                {#<label class="col-6" for="factura_aumento_costo">#}
                                    {#<span class="w-100 text-right">Aumento Sobre el Costo:</span>#}
                                {#</label>#}
                                {#<div class="input-group col-6">#}
                                    {#<div class="input-group-prepend">#}
                                        {#<span class="input-group-text" id="prepend-3">%</span>#}
                                    {#</div>#}
                                    {#<input type="number" class="form-control text-right" id="factura_aumento_costo"#}
                                           {#name="factura[aumentoCosto]">#}
                                    {#<input name="total_costo" id="total_costo" type="hidden" value=""/>#}
                                {#</div>#}
                            {#</div>#}

                            <div class="form-group form-inline col-12">
                                <label class="col-6" for="factura_aumento_total">
                                    <span class="w-100 text-right">Aumento Sobre el Total:</span>
                                </label>
                                <div class="input-group col-6">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="prepend-3">%</span>
                                    </div>
                                    <input type="number" class="form-control text-right" id="factura_aumento_total"
                                           value="{{ factura.porcentajeAum ? factura.porcentajeAum : '' }}"
                                           name="factura[aumentoTotal]">
                                    <input name="factura[sobreTotal]" type="hidden" value=""/>
                                </div>
                            </div>

                            <div class="form-group form-inline col-12">
                                <label class="col-6" for="factura_aumento_total">
                                    <span class="w-100 text-right">Aumento por forma de pago</span>
                                </label>
                                <div class="input-group col-6">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="prepend-3">$</span>
                                    </div>
                                    <input type="number" class="form-control text-right"
                                           name="factura[aumentoFormaPago]">
                                </div>
                            </div>

                            <div class="form-group form-inline col-12">
                                <label class="col-4" for="factura_total">
                                    <span class="w-100 text-right">Total:</span>
                                </label>
                                <div class="input-group col-8">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="prepend-3">$</span>
                                    </div>
                                    <input type="text" class="form-control text-right" id="factura_total"
                                           value="{{ factura.TotalFactura ? factura.TotalFactura : '' }}"
                                           size="10" aria-describedby="prepend-3">
                                </div>
                            </div>

                        </div>
{# 
                        <div class="text-center pt-3">
                            <button type="button" class="btn btn-lg btn-info text-uppercase" onclick="$('#mdlAccesoOtrasOperaciones').modal('show');">
                                Otras operaciones
                            </button>
                        </div> #}
                    </div>

                </div>
            </div>
        </div>

        {# MODAL - CUENTA CORRIENTE #}
        <div class="modal fade" id="mdlCuentaCorriente" tabindex="-1" role="dialog" aria-hidden="true"
             data-keyboard="false" data-backdrop="static">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">

                    <div class="modal-header d-block">
                        <h5 class="modal-title">DATOS CUENTA CORRIENTE</h5>
                        <small class="text-primary"> {{ factura.cliente ? factura.cliente.apenom : '' }}</small>
                    </div>

                    <div class="modal-body">

                        {% include 'facturacion/templates/cuenta_corriente.html.twig' with { form_prefix: 'cc', cliente: factura.cliente } %}

                    </div>

                    <div class="modal-footer">
                        <button type="button" id="cancelar_pago_cuenta_corriente" data-dismiss="modal" class="btn btn-outline-secondary">DENEGAR</button>
                        <button type="button" id="aceptar_pago_cuenta_corriente" class="btn btn-primary">GRABAR</button>
                    </div>

                </div>
            </div>
        </div>

        </form>
    </div>

    {# ÁREA DE IMPRESIÓN OCULTA #}
    <div class="print-area" style="display: none;">
        <div class="print-header">
            <div class="logo-container" style="text-align: center; margin-bottom: 15px;">
                <img src="{{ asset('images/logo.png') }}" alt="Logo" style="max-height: 80px; max-width: 200px;">
            </div>
            <h2>LISTA DE PRODUCTOS - PEDIDO TEMPORAL</h2>
            <p><strong>Pedido Nº:</strong> {{ factura.codfacturaTmp }}</p>
            <p><strong>Cliente:</strong> {{ factura.cliente.apenom }} ({{ factura.cliente.cuenta }})</p>
            <p><strong>Vendedor:</strong> <span id="print-vendedor">{{ factura.vendedor.nombre }}</span></p>
            <p><strong>Fecha:</strong> {{ "now"|date("d/m/Y H:i") }}</p>
        </div>
        
        <table class="print-table">
            <thead>
                <tr>
                    <th>ITEM</th>
                    <th>CÓDIGO</th>
                    <th>DESCRIPCIÓN</th>
                    <th>CANTIDAD</th>
                    <th>P.UNITARIO</th>
                    <th>DESC/AUM</th>
                    <th class="text-right">IMPORTE</th>
                </tr>
            </thead>
            <tbody id="print-table-body">
                {# Contenido se llenará dinámicamente con JavaScript #}
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="6" class="text-right">SUBTOTAL:</th>
                    <th class="text-right" id="print-subtotal">$ 0.00</th>
                </tr>
            </tfoot>
        </table>
    </div>

    {# MODALES - ACCESO OTRAS OPERACIONES #}
    <div class="modal fade" id="mdlAccesoOtrasOperaciones" tabindex="-1" role="dialog" aria-hidden="true"
         data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">NECESITA PERMISO</h5>
                </div>

                <div class="modal-body">

                    <div class="pt-1 form-inline col-12">
                        <label class="col-5" for="password_operaciones">CLAVE: </label>
                        <input type="password" id="password_operaciones" name="password_operaciones"
                               class="form-control col-7" autocomplete="off">
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" id="cancelar_acceso_otras_operaciones" data-dismiss="modal" class="btn btn-outline-secondary">CANCELAR</button>
                    <button type="button" id="aceptar_acceso_otras_operaciones" class="btn btn-primary">AUTORIZAR</button>
                </div>

            </div>
        </div>
    </div>

    {# MODALES - OTRAS OPERACIONES #}
    <form action="#" id="form_factura_extra">
    <div class="modal fade" id="mdlOtrasOperaciones" tabindex="-1" role="dialog" aria-hidden="true"
         data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">PERMISO CONCEDIDO: OTRAS OPERACIONES</h5>
                </div>

                <div class="modal-body pl-3">

                    <input type="hidden" name="factura[token]" id="otrasOperaciones_token"/>
                    <div class=" m-b-10">
                        <label class="cstm-switch">
                            <input type="checkbox" name="no_afecta_stock" value="1"
                                   class="cstm-switch-input">
                            <span class="cstm-switch-indicator"></span>
                            <span class="cstm-switch-description text-uppercase">NO Afecta Stock</span>
                        </label>
                    </div>

                    <div class=" m-b-10">
                        <label class="cstm-switch">
                            <input type="checkbox" name="no_afecta_caja" value="1"
                                   class="cstm-switch-input">
                            <span class="cstm-switch-indicator"></span>
                            <span class="cstm-switch-description text-uppercase">NO afecta caja</span>
                        </label>
                    </div>

                    <div class=" m-b-10">
                        <label class="cstm-switch">
                            <input type="checkbox" name="factura[pago_anticipado]" value="1"
                                   class="cstm-switch-input">
                            <span class="cstm-switch-indicator"></span>
                            <span class="cstm-switch-description text-uppercase">Pago Anticipado <small>NO afecta caja, SI afecta stock</small></span>
                        </label>
                    </div>

                    <div class=" m-b-10">
                        <label class="cstm-switch">
                            <input type="checkbox" name="factura[nota_credito]" value="1"
                                   class="cstm-switch-input">
                            <span class="cstm-switch-indicator"></span>
                            <span class="cstm-switch-description text-uppercase">Es nota de credito</span>
                        </label>
                    </div>

                    <div class=" m-b-10">
                        <label class="cstm-switch">
                            <input type="checkbox" name="factura[especial]" value="1" data-ui="operacion-especial"
                                   class="cstm-switch-input">
                            <span class="cstm-switch-indicator"></span>
                            <span class="cstm-switch-description text-uppercase">Es operación especial</span>
                        </label>
                    </div>


                </div>

                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-outline-secondary">ACEPTAR</button>
                </div>

            </div>
        </div>
    </div>
    </form>

    {# MODALES - CHEQUE #}
    <div class="modal fade" id="mdlCheque" tabindex="-1" role="dialog" aria-hidden="true"
         data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">DATOS CHEQUE</h5>
                </div>

                <div class="modal-body">

                    <form action="{{ path('facturacion_temporal_agregar_cheque', { id: factura.id }) }}" id="form_mdlCheque">
                    {% include 'facturacion/templates/cheque.html.twig' with { id: 'mdlCheque', form_prefix: 'cheque',
                        cliente: factura.cliente.apenom } %}
                    </form>

                </div>

                <div class="modal-footer">
                    <button type="button" id="cancelar_pago_cheque" data-dismiss="modal" class="btn btn-outline-secondary">CANCELAR</button>
                    <button type="button" id="aceptar_pago_cheque" class="btn btn-primary">GRABAR</button>
                </div>

            </div>
        </div>
    </div>

    {# MODALES - FINANCIERA #}
    <div class="modal fade" id="mdlFinanciera" tabindex="-1" role="dialog" aria-hidden="true"
         data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">DATOS FINANCIERA</h5>
                </div>

                <div class="col-12">
                    <h6 class="text-right">
                        <span class="text-secondary">TOTAL COMPROBANTE: $</span> <span class="total_alcanzado"></span> |
                    </h6>
                    <h6 class=" text-right">
                        <span class="text-secondary">TOTAL AUMENTO: $</span><span id="aumentoFinanciera2">0</span>
                    </h6>
                    <h6 class=" text-right">
                        <span class="text-secondary">TOTAL EN EFECTIVO: $</span><span id="efectivoFinanciera">0</span>
                    </h6>
                </div>

                <div class="modal-body">

                    <form action="{{ path('facturacion_temporal_agregar_financiera', { id: factura.id }) }}" id="form_mdlFinanciera">
                        {% include 'facturacion/templates/financiera.html.twig' with { id: 'mdlFinanciera', form_prefix: 'financiera',
                            tipos: tiposfinancieras } %}
                    </form>


                </div>

                <div class="modal-footer">
                    <button type="button" id="cancelar_pago_financiera" data-dismiss="modal" class="btn btn-outline-secondary">CANCELAR</button>
                    <button type="button" id="aceptar_pago_financiera" class="btn btn-primary">GRABAR</button>
                </div>

            </div>
        </div>
    </div>

    {# MODALES - MUTUAL #}
    <div class="modal fade" id="mdlMutual" tabindex="-1" role="dialog" aria-hidden="true"
         data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">DATOS MUTUALES</h5>
                </div>

                <div class="col-12">
                    <h6 class="text-right">
                        <span class="text-secondary">TOTAL COMPROBANTE: $</span> <span class="total_alcanzado"></span>
                    </h6>

                        <h6 class="autocalculado text-right">
                            <span class="text-secondary">TOTAL AUMENTO: $</span> <span class="total_aumentado"></span>
                        </h6>
                    <h6 class="final text-right">
                        <span class="text-secondary">TOTAL FINAL: $</span> <span class="total_mutual_final"></span>
                    </h6>
                </div>

                <div class="modal-body">

                    <form action="{{ path('facturacion_temporal_agregar_mutual', { id: factura.id }) }}" id="form_mdlMutual">
                        {% include 'facturacion/templates/mutual.html.twig' with { id: 'mdlMutual', form_prefix: 'mutual',
                            tipos: tiposmutuales } %}
                    </form>


                </div>

                <div class="modal-footer">
                    <button type="button" id="cancelar_pago_mutual" data-dismiss="modal" class="btn btn-outline-secondary">CANCELAR</button>
                    <button type="button" id="aceptar_pago_mutual" class="btn btn-primary">GRABAR</button>
                </div>

            </div>
        </div>
    </div>

    {# MODAL - QR #}
    <div class="modal fade" id="mdlQR" tabindex="-1" role="dialog" aria-hidden="true"
         data-keyboard="false" data-backdrop="static" >
        <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 66vw">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">DATOS QR</h5>
                </div>

                <div class="col-12">
                    <h6 class="text-right">
                        <span class="text-secondary">TOTAL COMPROBANTE: $</span> <span class="total_alcanzado"></span>
                    </h6>
                    <h6 class="autocalculado text-right">
                        <span class="text-secondary">PAGADO: $</span> <span class="total_autocalculado"></span>
                    </h6>
                    <h6 class="autocalculado text-right">
                        <span>RESTA PAGAR: $</span> <span class="text-danger resta_pagar"></span>
                    </h6>
                </div>

                <div class="modal-body">

                    <form action="{{ path('facturacion_temporal_agregar_qr', { id: factura.id }) }}" id="form_mdlQR">
                        {% include 'facturacion/templates/box_qr.html.twig' with { id: 'mdlQR', form_prefix: 'qr',
                            tipos: tiposQR } %}
                    </form>

                </div>

                <div class="col-md-12 p-4">
                    <span class="text-secondary ">DESCUENTO POR FORMA DE PAGO :$<span class="descuentoQR">0</span ></span><br>
                </div>

                <div class="modal-footer">
                    <button type="button" id="cancelar_pago_qr" data-dismiss="modal" class="btn btn-outline-secondary">CANCELAR</button>
                    <button type="button" id="aceptar_pago_qr" class="btn btn-primary">GRABAR</button>
                </div>

            </div>
        </div>
    </div>

    {# MODALES - TARJETA #}
    <div class="modal fade" id="mdlTarjeta" tabindex="-1" role="dialog" aria-hidden="true"
         data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 66vw">
            <div class="modal-content px-3">

                <div class="modal-header">
                    <h5 class="modal-title">DATOS TARJETA</h5>
                </div>

                <div class="modal-body">

                    <div class="col-12">
                        <h6 class="text-right">
                            <span class="text-secondary">TOTAL COMPROBANTE: $</span> <span class="total_alcanzado"></span>
                        </h6>
                        <h6 class="autocalculado text-right">
                            <span class="text-secondary">RECARGO POR METODO DE PAGO: $</span> <span class="total_aumentado"></span> |
                            <span class="text-secondary">PAGADO: $</span> <span class="total_autocalculado"></span>
                        </h6>
                        <h6 class="autocalculado text-right">
                            <span class="text-secondary">RESTA PAGAR: $</span> <span class="resta_pagar"></span>
                        </h6>
                    </div>

                    <form action="{{ path('facturacion_temporal_tarjeta_agregar', { id: factura.id }) }}" id="form_mdlTarjeta">
                    {% include 'facturacion/templates/box_tarjeta.html.twig' with { id: 'mdlTarjeta', form_prefix: 'tarjeta',
                        tipos: tiposTarjeta } %}
                    </form>
                </div>
{#                <div class="col-md-12 p-4">#}
{#                    <span class="text-secondary ">AUMENTO POR FORMA DE PAGO :$<span class="aumentoTarjetas">0</span ></span><br>#}
{#                    <span class="text-secondary ">DESCUENTO :$<span class="descuentoDebito">0</span></span><br>#}
{#                </div>#}

                <div class="modal-footer">
                    <button type="button" id="cancelar_pago_tarjeta"  data-dismiss="modal"  class="btn btn-outline-secondary">CANCELAR</button>
                    <button type="button" id="aceptar_pago_tarjeta" class="btn btn-primary">ACEPTAR</button>
                </div>

            </div>
        </div>
    </div>

    {# MODALES - PAGO DIVIDIDO #}
    <div class="modal fade" id="mdlPagoDividido" tabindex="-1" role="dialog" aria-hidden="true"
         data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 66vw">
            <div class="modal-content px-3">

                <div class="modal-body">

                    <form action="{{ path('facturacion_temporal_pago_dividido_agregar', { id: factura.id }) }}" id="form_mdlPagoDividido">

                    <div class="row">

                        <div class="col-12 col-lg-6 offset-lg-6 bg-gray-300 py-2 mb-3 border rounded shadow-sm"
                             style="position: sticky;top: 2rem;z-index: 1;">
                                <h6 class="text-right"><span>TOTAL FACTURA: $</span> <b class="total_alcanzado"></b> |
                                    <div class="d-none descuento_efectivo">
                                        <span class="text-secondary">Descuento: $</span> <b class="descuento_total"></b> |
                                    </div>
                                    <span>RESTA PAGAR:</span> <b class="resta_pagar text-danger"></b>
                                </h6>
                                <h6 class="autocalculado text-right">
                                    <span>TOTAL AUMENTO: $</span> <b class="total_aumentado">0</b> |
                                    <span>AUTOCALCULADO: $</span> <b class="total_autocalculado"></b>
                                </h6>
                        </div>

                        {# <div class="col-6">

                            <h5 class="bg-dark text-light p-2">CHEQUE</h5>

                            {% include 'facturacion/templates/cheque.html.twig' with { id: 'mdlCheque', form_prefix: 'pagoDivido[cheque]',
                                cliente: factura.cliente.apenom, mostrarImporte: true } %}

                        </div> #}

                        <div class="col-6 mb-3">
                            <h5 class="bg-dark text-light p-2">FINANCIERA</h5>
                            {% include 'facturacion/templates/financieraDividido.html.twig' with { id: 'mdlFinanciera', form_prefix: 'financiera', tipos: tiposfinancieras } %}
                        </div>

                        <div class="col-6 mb-3">
                            <h5 class="bg-dark text-light p-2">MUTUAL</h5>
                            {% include 'facturacion/templates/mutualDividido.html.twig' with { id: 'mdlMutual', form_prefix: 'mutual', tipos: tiposmutuales } %}
                        </div>
                        <div class="col-6">

                            <h5 class="bg-dark text-light p-2 col-12">EFECTIVO</h5>

                            <div class="pt-1 form-inline col-12 px-0 mb-5">
                                <label class="col-4 justify-content-end" for="pago_dividido_importe"><span class="text-danger p-r-5">*</span>Importe: $</label>
                                <input type="text" id="pago_dividido_importe" name="pagoDivido[efectivo]" autocomplete="off"
                                       class="form-control col-8 importe" onclick="$(this).select()">
                            </div>
                            <span class="text-secondary ">DESCUENTO POR EFECTIVO :$<span id="descuento_efectivo_bloque">0</span></span><br>
                            <span class="text-secondary ">DEBERIA COBRAR:$<span id="deberia_cobrar_efectivo_bloque">0</span></span>
                        </div>
                        <div class="col-6">
                            <h5 class="bg-dark text-light p-2 mt-2 col-12">CUENTA CORRIENTE</h5>

                            {% include 'facturacion/templates/cuenta_corriente.html.twig' with {
                                form_prefix: 'pagoDivido[cc]', showImporte: true, cliente: factura.cliente } %}
                        </div>

                        <div class="col-12 pt-3">
                            <h5 class="bg-dark text-light p-2">DATOS TARJETA</h5>
                            {% include 'facturacion/templates/box_tarjeta.html.twig' with { id: 'mdlPagoDividido', form_prefix: 'pagoDivido[tarjeta]',
                                tipos: tiposTarjeta, action: '#' } %}
                                <div class="col-md-12 p-4">
                                <span class="text-secondary ">AUMENTO POR FORMA DE PAGO :$<span class="aumentoTarjetas">0</span ></span><br>
                                <span class="text-secondary ">DESCUENTO POR DEBITO :$<span class="descuentoDebito">0</span></span>
                            </div>
                        </div>

                        <div class="col-12 pt-3">
                            <h5 class="bg-dark text-light p-2">DATOS PAGO QR</h5>
                            {% include 'facturacion/templates/box_qr.html.twig' with { id: 'mdlPagoDividido', form_prefix: 'pagoDivido[qr]',
                                tipos: tiposTarjeta, action: '#' } %}
                            <div class="col-md-12 p-4">
                                <span class="text-secondary ">DESCUENTO POR FORMA DE PAGO :$<span class="descuentoQR">0</span ></span><br>
                            </div>
                        </div>

                    </div>

                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" id="cancelar_pago_dividido" data-dismiss="modal" class="btn btn-outline-secondary">CANCELAR</button>
                    <button type="button" id="aceptar_pago_dividido" class="btn btn-primary">ACEPTAR</button>
                </div>

            </div>
        </div>
    </div>

    {# MODALES - TRANSFERENCIA #}
    <div class="modal fade" id="mdlTransferencia" tabindex="-1" role="dialog" aria-hidden="true"
         data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">DATOS TRANSFERENCIA BANCARIA</h5>
                </div>

                <div class="col-12">
                    <h6 class="text-right">
                        <span class="text-secondary">TOTAL COMPROBANTE: $</span> <span class="total_alcanzado"></span>
                    </h6>

{#                        <h6 class="autocalculado text-right">#}
{#                            <span class="text-secondary">TOTAL AUMENTO: $</span> <span class="total_aumentado"></span>#}
{#                        </h6>#}
                </div>

                <div class="modal-body">

                    <form action="{{ path('facturacion_temporal_agregar_transferencia', { id: factura.id }) }}" id="form_mdlTransferencia">
                        {% include 'facturacion/templates/transferencia.html.twig' with { id: 'mdlTransferencia', form_prefix: 'transferencia',
                            cliente: factura.cliente.apenom } %}
                    </form>


                </div>

                <div class="modal-footer">
                    <button type="button" id="cancelar_pago_transferencia" data-dismiss="modal" class="btn btn-outline-secondary">CANCELAR</button>
                    <button type="button" id="aceptar_pago_transferencia" class="btn btn-primary">GRABAR</button>
                </div>

            </div>
        </div>
    </div>

    {# MODALES - PRODUCT PAGE #}
    <div class="modal fade" id="mdlProductPage" tabindex="-1" role="dialog" aria-hidden="true"
         data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered" role="document" style="min-width: 85vw; min-height: 50vh;">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title mx-auto"><strong class="text-primary" data-ui="art-name"></strong></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="row">

                        <div class="col-12 col-md-6">
                            <table class="table table-striped">
{#                                <tr><td class="py-1">GENERO</td><td class="py-1"><strong data-ui="art-genero"></strong></td></tr>#}
{#                                <tr><td class="py-1">COLOR</td><td class="py-1"><strong data-ui="art-color"></strong></td></tr>#}
                                <tr><td class="py-1">CATEGORÍA</td><td class="py-1"><strong data-ui="art-categoria"></strong></td></tr>
{#                                <tr><td class="py-1">DISCIPLINA</td><td class="py-1"><strong data-ui="art-disciplina"></strong></td></tr>#}
                                <tr><td class="py-1">MARCA</td><td class="py-1"><strong data-ui="art-marca"></strong></td></tr>
                                <tr><td class="py-1" colspan="2">OBSERVACIONES</td></tr>
                                <tr><td class="py-1 pl-5" colspan="2" data-ui="art-observacion"></td>
                                </tr>
                            </table>
                        </div>

                        <div class="col-12 col-md-6 d-flex">
                            <div id="carouselExampleControls" class="carousel slide my-auto w-100 bg-gray-400 p-3 rounded" data-ride="carousel">
                                <div class="carousel-inner"></div>
                                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script>
        // CONTAINER DE URLS A USAR EN JAVASCRIPT DESDE PATH IN SYMFONY
        const urlContainer = {
          buscarArticulo: '{{ path("articulo_filtrar") }}',
          obtenerCliente: '{{ path("obtener_cliente_json", { cuenta: factura.cliente.cuenta}) }}',
          borrarCheque: '{{ path("facturacion_temporal_cheque_borrar", { id: factura.id }) }}',
          borrarFinanciera: '{{ path("facturacion_temporal_financiera_borrar", { id: factura.id }) }}',
          borrarMutual: '{{ path("facturacion_temporal_mutual_borrar", { id: factura.id }) }}',
          borrarQR: '{{ path("facturacion_temporal_qr_borrar", { id: factura.id }) }}',
          borrarTarjeta: '{{ path("facturacion_temporal_tarjeta_borrar", { id: factura.id }) }}',
          borrarTransferencia: '{{ path("facturacion_temporal_transferencia_borrar", { id: factura.id }) }}',
          autorizarOperaciones: '{{ path("usuario_autorizacion" ) }}',
          borrarLinea: '{{ path('facturacion_borrar_linea', { id: '_id_' } ) }}',
          ver: '{{ path('facturacion_ver', { id: '_id_' }) }}?imprimir=1',
          actualizar: '{{ path('facturacion_temporal_actualizar', { id: factura.id } ) }}',
          obtener_forma_pago: '{{ path('obtener_forma_pago', { id: factura.id } ) }}',
          buscarplan: '{{ path("list_plan_finan")}}',
          buscarplanmutuales: '{{ path("list_plan_mutual")}}',
          buscarcoeficientes: '{{ path("list_coeficientes_financieras")}}',
          planesTarjeta: '{{ path("planes_por_marcas_tarjetas") }}',
          planpagoid:   '{{ path("list_plan_mutual_pagos") }}',
          getImages: "{{ path ('getImages')}}",
          BuscoF: '{{ path("list_creditosf")}}',
          BuscoNF: '{{ path("list_creditosnf")}}',


        };

        const tipoTalonario = [];
        {% for talonario in talonarios %}
        tipoTalonario.push({
          id: '{{ talonario.idTalonario }}', text: '{{ talonario.tipoComprobante.tipoComp }}',
          factura: '{{ 'FACTURA' in talonario.tipoComprobante.tipoComp }}' == 1,
          visible: false, tipo: '{{ talonario.tipoComprobante.tipo }}' });
        {% endfor %}

      //  console.log(tipoTalonario);

        // TODO: CONSIDERE REUBICAR
        function enter2tab(e) {

          if (e.keyCode == 13) {

            const el$ = $(this);
            const selector = el$.attr('tabindex');

            const cb = parseInt(el$.attr('tabindex'));

            if ($('#' + selector + ' :input[tabindex=\'' + (cb + 1) + '\']') != null) {
                $('#' + selector + ' :input[tabindex=\'' + (cb + 1) + '\']').focus();
                $('#' + selector + ' :input[tabindex=\'' + (cb + 1) + '\']').select();
              e.preventDefault();
              return false;
            }
          }
        }

        $(document).ready(function () {
          let tb = $('#form_row_mdlTarjeta input');
          tb.data('enter2tab-selector', '#form_row_mdlTarjeta');
          if ($.browser && $.browser.mozilla) $(tb).keypress(enter2tab); else  $(tb).keydown(enter2tab);
          tb = $('#form_row_mdlCheque input');
          tb.data('enter2tab-selector', '#form_row_mdlCheque');
          if ($.browser && $.browser.mozilla) $(tb).keypress(enter2tab); else  $(tb).keydown(enter2tab);
        });

        // Función para imprimir productos encolados
        function imprimirProductos() {
            // Obtener los datos de la tabla actual
            const tableBody = $('[data-ui="factulinea-container"] tbody tr');
            const printTableBody = $('#print-table-body');
            const printSubtotal = $('#print-subtotal');
            const printVendedor = $('#print-vendedor');
            
            // Limpiar tabla de impresión
            printTableBody.empty();
            
            // Obtener vendedor actual
            const vendedorActual = $('#factura_vendedor option:selected').text() || '{{ factura.vendedor.nombre }}';
            printVendedor.text(vendedorActual);
            
            let subtotal = 0;
            
            // Llenar tabla de impresión con los datos actuales
            tableBody.each(function(index) {
                const row = $(this);
                const item = row.find('td').eq(0).text();
                const codigo = row.find('td').eq(1).text();
                const cantidad = row.find('td').eq(2).text();
                const descripcion = row.find('td').eq(3).text();
                const precioUnitario = row.find('td').eq(4).text();
                const descAum = row.find('td').eq(5).text();
                const importe = row.find('td').eq(6).text();
                
                // Agregar al subtotal
                const importeNum = parseFloat(importe.replace(/[^\d.-]/g, '')) || 0;
                subtotal += importeNum;
                
                // Crear fila para impresión
                const printRow = `
                    <tr>
                        <td>${item}</td>
                        <td>${codigo}</td>
                        <td>${descripcion}</td>
                        <td class="text-right">${cantidad}</td>
                        <td class="text-right">$${precioUnitario}</td>
                        <td class="text-right">${descAum}</td>
                        <td class="text-right">$${importe}</td>
                    </tr>
                `;
                printTableBody.append(printRow);
            });
            
            // Actualizar subtotal
            printSubtotal.text('$ ' + subtotal.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
            
            // Mostrar mensaje si no hay productos
            if (tableBody.length === 0) {
                printTableBody.append(`
                    <tr>
                        <td colspan="7" style="text-align: center; font-style: italic; padding: 20px;">
                            No hay productos agregados al pedido
                        </td>
                    </tr>
                `);
            }
            
            // Mostrar área de impresión y ejecutar impresión
            $('.print-area').show();
            window.print();
            $('.print-area').hide();
        }
        
        // Bind del botón de imprimir
        $(document).ready(function() {
            $('#imprimir-productos').on('click', function() {
                imprimirProductos();
            });
        });

    </script>
    {{ encore_entry_script_tags('facturacion_nuevo') }}
    {{ encore_entry_script_tags('facturacion_calcularTotales') }}
    {{ encore_entry_script_tags('facturacion_pagoDivididoFinanciera') }}
    {{ encore_entry_script_tags('facturacion_financiera') }}
    {{ encore_entry_script_tags('facturacion_pagoDivididoMutual') }}
{% endblock %}