
<script>
// Definimos una variable en JavaScript
var valorInicial = "0";
</script>
<html lang="es">
<form id="form-quotation" class="form-horizontal" action="quotation.php" method="post" enctype="multipart/form-data">
  <div class="box-body">

    <div class="form-group">
      <label for="date" class="col-sm-3 control-label">
        <?php echo trans('label_date'); ?><i class="required">*</i>
      </label>
      <div class="col-sm-6">
        <input type="text" class="form-control datepicker" name="date" ng-model="date" autocomplete="off" />
      </div>
    </div>

    <div class="form-group">
      <label for="reference_no" class="col-sm-3 control-label">
        <?php echo trans('label_reference_no'); ?><i class="required">*</i>
      </label>
      <div class="col-sm-6">
        <input type="text" class="form-control" id="reference_no" name="reference_no" ng-model="refNo" autocomplete="off" readonly/>
      </div>
    </div>

    <div class="form-group">
      <label for="quotation-note" class="col-sm-3 control-label">
        <?php echo trans('label_note'); ?>
      </label>
      <div class="col-sm-6">
        <textarea id="quotation-note" class="form-control" name="quotation-note" ng-model="quotationNote"></textarea>
      </div>
    </div>

     <div class="form-group">
      <label for="status" class="col-sm-3 control-label">
        <?php echo trans('TIPO DE COMPROBANTE'); ?><i class="required">*</i>
      </label>
      <div class="col-sm-6">
        <select id="status" class="form-control" name="status" >
		<option value=""><?php echo trans('text_select'); ?></option>
		<option value="presupuesto"><?php echo trans('Presupuesto'); ?></option>
          <option value="venta anticipada"><?php echo trans('Venta Anticipada'); ?></option>
          
        </select>
      </div>
    </div>


    <div class="well well-sm">
      <div class="form-group">
        <label for="customer_id" class="col-sm-3 control-label">
          <?php echo trans('label_customer'); ?><i class="required">*</i>
        </label>
        <div class="col-sm-6">
          <div class="input-group">
            <select id="customer_id" class="form-control" name="customer_id" >
              <option value=""><?php echo trans('text_select'); ?></option>
              <?php foreach (get_customers() as $the_customer) : ?>
                <option value="<?php echo $the_customer['customer_id'];?>" readonly/>
                <?php echo $the_customer['customer_name'];?>
              </option>
            <?php endforeach;?>
            </select>
            <div class="input-group-addon no-print" style="padding: 2px 8px; border-left: 0;">
              <a id="edit_customer" href="customer.php">
              <i class="fa fa-pencil" id="addIcon" style="font-size: 1.2em;"></i>
              </a>
            </div>
            <div class="input-group-addon no-print" style="padding: 2px 7px; border-left: 0;">
              <button id="view_customer" class="btn btn-xs" style="background:#F5F5F5;color:#276B92">
              <i class="fa fa-eye" id="addIcon" style="font-size: 1.2em;"></i>
              </button>
            </div>
            <div class="input-group-addon no-print" style="padding: 2px 8px;">
              <a id="add_customer" href="customer.php">
              <i class="fa fa-plus-circle" id="addIcon" style="font-size: 1.2em;"></i>
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="sup_id" class="col-sm-3 control-label">
          <?php echo trans(''); ?>
        </label>
        <div class="col-sm-6">
        <input type="hidden" class="form-control" id="sup_id" class="form-control select2" name="sup_id" readonly/>
        </div>
      </div>

      <div class="form-group">
        <label for="image" class="col-sm-3 control-label">
          <?php echo trans('label_add_product'); ?>
        </label>
        <div class="col-sm-6">
          <div class="input-group wide-tip">
            <div class="input-group-addon" style="padding-left: 10px; padding-right: 10px;">
              <i class="fa fa-barcode addIcon fa-2x"></i>
            </div>
            <input type="text" name="add_item" value="" class="form-control input-lg autocomplete-product" id="add_item" data-type="p_name" onKeyPress="return event.keyCode != 13;" onClick="this.select();" placeholder="<?php echo trans('placeholder_search_product'); ?>" autocomplete="off" tabindex="1">
            <div class="input-group-addon" style="padding-left: 10px; padding-right: 10px;">
              <a id="add_new_product" href="product.php">
                <i class="fa fa-plus-circle addIcon fa-2x" id="addIcon"></i>
              </a>
            </div>
          </div>
        </div>  
      </div>

      <div class="row">
        <div class="col-md-12">
          <div class="table-responsive">
            <table id="product-table" class="table table-striped table-bordered">
              <thead>
                <tr class="bg-info">
                  <th class="w-30 text-center">
                    <?php echo trans('label_product'); ?>
                  </th>
                  <th class="w-15 text-center">
                    <?php echo trans('label_available'); ?>
                  </th>
                  <th class="w-10 text-center">
                    <?php echo trans('label_quantity'); ?>
                  </th>
                  <th class="w-15 text-center">
                    <?php echo trans('label_sell_price'); ?>
                  </th>
                  <th class="w-10 text-center">
                    <?php echo trans('label_item_tax'); ?>
                  </th>
                  <th class="w-15 text-center">
                    <?php echo trans('label_subtotal'); ?>
                  </th>
                  <th class="w-5 text-center">
                    <i class="fa fa-trash-o"></i>
                  </th>
                </tr>
              </thead>
              <tbody>   
              </tbody>
              <tfoot>
                <tr class="bg-gray">
                  <th class="text-right" colspan="5">
                    <?php echo trans('label_subtotal'); ?>
                  </th>
                  <th class="col-sm-2 text-right">
                    <input id="total-tax" type="hidden" name="total-tax" ng-model="totalTax">
                    <input id="total-amount" type="hidden" name="total-amount" ng-model="totalAmount">
                    <span id="total-amount-view">{{ totalAmountView }}</span>
                  </th>
                  <th class="w-25p">&nbsp;</th>
                </tr>
                <tr class="bg-gray">
                  <th class="text-right" colspan="5">
                    <?php echo trans('label_order_tax');?> (%)
                  </th>
                  <th class="col-sm-2 text-right">
                    <input ng-change="addOrderTax();" id="order-tax" class="text-right p-5" type="taxt" name="order-tax" ng-model="orderTax" onClick="this.select();" ondrop="return false;" onKeyPress="return IsNumeric(event);" onpaste="return false;" autocomplete="off">
                  </th>
                  <th class="w-25p">&nbsp;</th>
                </tr>
                <tr class="bg-gray">
                  <th class="text-right" colspan="5">
                    <?php echo trans('label_shipping_charge'); ?>
                  </th>
                  <th class="col-sm-2 text-right">
                    <input ng-change="addShippingAmount();" id="shipping-amount" class="text-right p-5" type="taxt" name="shipping-amount" ng-model="shippingAmount" onClick="this.select();" ondrop="return false;" onKeyPress="return IsNumeric(event);" onpaste="return false;" autocomplete="off">
                  </th>
                  <th class="w-25p">&nbsp;</th>
                </tr>
                <tr class="bg-gray">
                  <th class="text-right" colspan="5">
                    <?php echo trans('label_others_charge'); ?>
                  </th>
                  <th class="col-sm-2 text-right">
                    <input ng-change="addOthersCharge();" id="others-charge" class="text-right p-5" type="taxt" name="others-charge" ng-model="othersCharge" onClick="this.select();" ondrop="return false;" onKeyPress="return IsNumeric(event);" onpaste="return false;" autocomplete="off">
                  </th>
                  <th class="w-25p">&nbsp;</th>
                </tr>
                <tr class="bg-gray">
                  <th class="text-right" colspan="5">
                    <?php echo trans('label_discount_amount'); ?>
                  </th>
                  <th class="col-sm-2 text-right">
                    <input ng-change="addDiscountAmount();" id="discount-amount" class="text-right p-5" type="taxt" name="discount-amount" ng-model="discountAmount" onClick="this.select();" ondrop="return false;" onKeyPress="return IsNumeric(event);" onpaste="return false;" autocomplete="off">
                  </th>
                  <th class="w-25p">&nbsp;</th>
                </tr>
                <tr class="bg-yellow">
                  <th class="text-right" colspan="5">
                    <?php echo trans('label_payable_amount'); ?>
                  </th>
                  <th class="col-sm-2 text-right">
                    <input type="hidden" name="payable-amount" ng-model="payableAmount" value="{{ payableAmount }}">
                    <h4 class="text-center"><b>{{ payableAmount | formatDecimal:2 }}</b></h4>
                  </th>
                  <th class="w-25p">&nbsp;</th>
				  
				 
			    <tr class="bg-blue">
                  <th class="text-right" colspan="6">
                    <?php echo trans('label_payment_method'); ?>                  </th>
                  <th class="col-sm-2 text-center">
                    <select id="pmethod-id" class="form-control select2" name="pmethod-id">
                      <?php foreach (get_pmethods() as $pmethod):?>
                        <option value="<?php echo $pmethod['pmethod_id'];?>"><?php echo $pmethod['name'];?></option>
                      <?php endforeach;?>
                    </select>                  </th>
                </tr>
				  
				  <tr class="bg-blue">
                  <th class="text-right" colspan="6">
                    <?php echo trans('label_paid_amount'); ?>                  </th>
                  <th class="col-sm-2 text-right">
                    <input   ng-change="addPaidAmount();" id="paid-amount" class="text-center paidAmount" type="taxt" name="paid-amount" ng-model="paidAmount" onClick="this.select();" ondrop="return false;" onKeyPress="return IsNumeric(event);" onpaste="return false;" autocomplete="off">                  </th>
                </tr>
				  
				  
				  
				    <tr class="bg-gray">
                  <th colspan="2" class="w-10 text-right">
                    <?php echo trans('BALANCE CONTRA PARTIDA'); ?>                  </th>
                  <th colspan="4" class="w-70 bg-green text-center">
    <input type="hidden" name="due-amount" id="due-amount" value="{{ paidAmount > 0 ? paidAmount -  importePesificado - importeTarjeta - importeChequet  - importePesos - importeDeposito  : 0 | formatDecimal:2    }}">
    <span>{{ paidAmount > 0 ? paidAmount - importePesificado - importeChequet - importeTarjeta - importePesos - importeDeposito  : 0 | number:2  }}</span>                  </th>
                  <th>&nbsp;</th>
                </tr>
                <tr class="bg-gray">
                  <th colspan="2" class="w-10 text-right">
                    <?php echo trans('label_change_amount'); ?>                  </th>
                  <th colspan="4" class="w-70 bg-green text-center">
                    <input type="hidden" name="change-amount" value="{{ changeAmount }}">
                    <span>{{ changeAmount | number:2 }}</span>                  </th>
                  <th>&nbsp;</th>
                </tr>
               
                 

              </tfoot>
            </table>
          </div>
				 <table>
				 <tbody>   
              </tbody>
              <tfoot>
              
               <tr class="bg-blue">
                  <th colspan="2" class="w-10 text-right">CAJA DIARIA PESOS </th>
                  <th colspan="2" class="w-70 bg-blue text-center"><span class="col-sm-4 text-right"></th>
                  <th width="366"  class="bg-blue">Importe<span class="w-70 bg-blue text-center">
    <input name="importe-pesos" class="text-center paidAmount" id="importe-pesos"   size="10" maxlength="80"  ng-model="importePesos" />              </th>
                </tr>
				 <tr class="bg-gray">
                  <th height="28" colspan="5" class="w-10 text-right"><span class="col-sm-8 text-right"></th>
                </tr>
				
				<tr class="bg-blue">
                  <th colspan="2" class="w-10 text-right">CAJA TARJETA </th>
                  <th class="w-70 bg-blue text-center">Comp Nro <span class="w-10 text-right">
                    <input name="numero-tarjeta" class="text-center paidAmount" id="numero-tarjeta" size="10" maxlength="80"  ng-model="numeroTarjeta" />
                  </span></th>
                  <th width="137" colspan="-1" class="w-70 bg-blue text-center"><span class="w-10 text-right">
                    Fecha
                    <input type="date" name="fecha-tarjeta" class="text-center paidAmount" id="fecha-tarjeta" size="10" maxlength="80"  ng-model="fechaTarjeta" />
                  </span></th>
                  <th  class="bg-blue"><span class="w-70 bg-blue text-center">
                    Importe
                    <input name="importe-tarjeta" class="text-center paidAmount" id="importe-tarjeta"   size="10" maxlength="80"  ng-model="importeTarjeta" />
                  </span></th>
                </tr>
				 <tr class="bg-gray">
                  <th height="28" colspan="5" class="w-10 text-right"><span class="col-sm-8 text-right"></th>
                </tr>
				
				 <tr class="bg-blue">
				   <th colspan="2" class="w-10 text-right">CAJA DEPOSITO </th>
				   <th class="w-70 bg-blue text-center">Comp Nro <span class="w-10 text-right">
                   <input name="numero-deposito" class="text-center paidAmount" id="numero-deposito" size="10" maxlength="80"  ng-model="numeroDeposito" />
                   </span></th>
				   <th colspan="-1" class="w-70 bg-blue text-center"><span class="w-10 text-right">Fecha
                       <input type="date" name="fecha-deposito" class="text-center paidAmount" id="fecha-deposito" size="10" maxlength="80"  ng-model="fechaDeposito" />
                   </span></th>
				   <th  class="bg-blue">Importe<span class="w-70 bg-blue text-center"><span class="w-10 text-right">
                   <input name="importe-deposito" class="text-center paidAmount" id="importe-deposito" size="10" maxlength="80"  ng-model="importeDeposito" />
                   </span></span></th>
			    </tr>
				 <tr class="bg-gray">
				   <th colspan="2" class="w-10 text-right">&nbsp;</th>
				   <th class="w-70 bg-gray text-center">&nbsp;</th>
				   <th colspan="-1" class="w-70 bg-gray text-center">&nbsp;</th>
				   <th  class="bg-gray">&nbsp;</th>
			    </tr>
				 <tr class="bg-blue">
				   <th colspan="2" class="w-10 text-right">CAJA DOLAR </th>
				   <th class="w-70 bg-blue text-center"><span class="w-10 text-right">
				     <input name="importe-dolar" class="text-center paidAmount" id="importe-dolar" size="10" maxlength="80"  value= "{{ valorInicial }}" ng-model="importeDolar" />
Imp u$</span></th>
				   <th colspan="-1" class="w-70 bg-blue text-center"><span class="w-10 text-right">Cotizacion
                       <input name="importe-cotizacion" class="text-center paidAmount" id="importe-cotizacion" value= "{{ valorInicial }}" size="10" maxlength="80"  ng-model="importeCotizacion" />
				   </span></th>
				   <th  class="bg-blue"><span class="w-10 text-right"><span class="w-70 bg-blue text-center">
				     <span class="col-sm-4 text-right">Importe Pesos</span>
				     <input name="importe-pesificado" class="text-center paidAmount" id="importe-pesificado" size="10" maxlength="80"  ng-model="importePesificado" />
				     <h4 class="text-center"><b>{{ importeDolar > 0 ? importeDolar * importeCotizacion  : 0 | number:2    }}</b></h4>
				   </span></span></th>
			    </tr>
				 <tr class="bg-gray">
				   <th colspan="2" class="w-10 text-right">&nbsp;</th>
				   <th class="w-70 bg-gray text-center">&nbsp;</th>
				   <th colspan="-1" class="w-70 bg-gray text-center">&nbsp;</th>
				   <th  class="bg-gray">&nbsp;</th>
			    </tr>
				 <tr class="bg-blue">
                  <th colspan="2" class="w-10 text-right">CAJA CHEQUE </th>
                  <th colspan="2" class="w-70 bg-blue text-center">
				
  <!-- La primera fila siempre está presente -->
v<style>
  /* Texto oscuro dentro de la fila */
  #filas-container .formulario-fila {
    background: #cfd6dd;     /* tu color de fondo */
    color: #111827;          /* texto oscuro y legible */
  }

  /* Inputs visibles y legibles */
  #filas-container .formulario-fila input[type="text"],
  #filas-container .formulario-fila input[type="date"],
  #filas-container .formulario-fila input[type="number"] {
    background: #ffffff;     /* fondo blanco para contraste */
    color: #111827;          /* texto oscuro */
    border: 1px solid #9ca3af;
    border-radius: 6px;
    padding: 6px 8px;
    outline: none;
  }

  /* Placeholders (compatibilidad cross-browser) */
  #filas-container .formulario-fila input::placeholder { color: #6b7280; opacity: 1; }
  #filas-container .formulario-fila input::-webkit-input-placeholder { color: #6b7280; }
  #filas-container .formulario-fila input::-moz-placeholder { color: #6b7280; }
  #filas-container .formulario-fila input:-ms-input-placeholder { color: #6b7280; }
  #filas-container .formulario-fila input:-moz-placeholder { color: #6b7280; }

  /* Enfoque visible */
  #filas-container .formulario-fila input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
  }

  /* Grupo de radios y etiquetas legibles */
  #filas-container .radio-group label {
    color: #111827;
  }

  /* Botones + y - con texto visible */
  #filas-container .btn-mini {
    background: #ffffff;
    color: #111827;
    border: 1px solid #9ca3af;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
  }
  #filas-container .btn-mini:hover {
    background: #f3f4f6;
  }
</style>

<div id="filas-container">
  <!-- Fila plantilla (index 0) -->
  <div class="formulario-fila" data-index="0"
       style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px 12px;align-items:end;padding:10px;margin-bottom:8px;border:1px solid #e5e7eb;border-radius:10px;">
    <input type="text"  name="num_cheque[]"     placeholder="Numero de Cheque">
    <input type="date"  name="fecha_emision[]"  placeholder="Fecha de emision">
    <input type="date"  name="fecha_cheque[]"   placeholder="Fecha de cobro">
    <input type="text"  name="importe_cheque[]" placeholder="Importe de Cheque">
    <input type="text"  name="cuit_titular[]"   placeholder="CUIT del Titular">

    <!-- Tipo de cheque: radios excluyentes por fila -->
    <div class="radio-group" style="display:flex;gap:14px;align-items:center;padding:6px 2px;grid-column:span 2;">
      <label style="display:inline-flex;gap:6px;align-items:center;">
        <input type="radio" data-name="tipo_cheque" name="tipo_cheque[0]" value="2"> FÍSICO
      </label>
      <label style="display:inline-flex;gap:6px;align-items:center;">
        <input type="radio" data-name="tipo_cheque" name="tipo_cheque[0]" value="17"> ECHEQ
      </label>
    </div>

    <input type="text" name="banco[]"         placeholder="Banco">
    <input type="text" name="observaciones[]" placeholder="Observaciones">

    <div class="fila-actions" style="display:flex;gap:8px;justify-content:flex-end;">
      <button type="button" class="btn-mini" onclick="agregarFila()">+</button>
      <button type="button" class="btn-mini" onclick="eliminarFila(this)">-</button>
    </div>
  </div>
</div>


					
		  </div>
		  
		  
		  </th>
                  <th width="366"  class="bg-blue">Importe<span class="w-70 bg-blue text-center"><span class="w-10 text-right">
                  <input name="importe-chequet" class="text-center paidAmount" id="importe-chequet" size="10" maxlength="80"  ng-model="importeChequet" />
                  </span></span></th>
                </tr>
				 <tr class="bg-gray">
                  <th height="28" colspan="5" class="w-10 text-right"><span class="col-sm-8 text-right"></th>
                </tr>
                
                <tr class="bg-gray">
                  <th colspan="5" class="w-10 text-right"><label></label></th>
                </tr>
              </tfoot>
            </table>
            
            <div class="mt-1">

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

    <div class="form-group">
      <div class="col-sm-6 col-sm-offset-3 text-center">            
        <button id="update-quotation-submit" class="btn btn-block btn-lg btn-info" data-form="#form-quotation" data-datatable="#quotation-quotation-list" name="submit" data-loading-text="Updating...">
          <i class="fa fa-fw fa-pencil"></i>
          <?php echo trans('button_update'); ?>
        </button>
      </div>
    </div>
    
  </div>
</form>
<script>
  // --- Suma de cheques al total (importe-chequet) ---
  function parseNum(v) {
    if (v == null) return 0;
    v = v.toString().trim().replace(/\./g,'').replace(',', '.');
    var n = parseFloat(v);
    return isNaN(n) ? 0 : n;
  }
  function recalcImporteChequet() {
    const importes = document.querySelectorAll('#filas-container input[name="importe_cheque[]"]');
    let total = 0;
    importes.forEach(inp => total += parseNum(inp.value));
    const target = document.getElementById('importe-chequet');
    if (target) {
      target.value = total.toFixed(2);
      target.dispatchEvent(new Event('input', { bubbles:true }));
      target.dispatchEvent(new Event('change', { bubbles:true }));
    }
  }
  document.addEventListener('input', function(e){
    if (e.target && e.target.name === 'importe_cheque[]') recalcImporteChequet();
  });

  // --- Clonado y renumeración de radios por fila ---
  function renumerarFilas() {
    const cont = document.getElementById('filas-container');
    const filas = cont.querySelectorAll('.formulario-fila');
    filas.forEach((fila, idx) => {
      fila.dataset.index = idx;
      fila.querySelectorAll('input[type="radio"][data-name="tipo_cheque"]').forEach(r => {
        r.name = `tipo_cheque[${idx}]`;   // cada fila, su propio grupo
      });
    });
  }

  function limpiarFila(fila) {
    fila.querySelectorAll('input').forEach(i => {
      if (i.type === 'radio') i.checked = false;
      else i.value = '';
    });
  }

  function agregarFila() {
    const cont = document.getElementById('filas-container');
    const base = cont.querySelector('.formulario-fila:last-of-type');
    const nueva = base.cloneNode(true);
    limpiarFila(nueva);
    cont.appendChild(nueva);
    renumerarFilas();
    recalcImporteChequet();
  }

  function eliminarFila(btn) {
    const cont = document.getElementById('filas-container');
    const fila = btn.closest('.formulario-fila');
    if (cont.querySelectorAll('.formulario-fila').length > 1) {
      fila.remove();
      renumerarFilas();
      recalcImporteChequet();
    }
  }

  document.addEventListener('DOMContentLoaded', function(){
    renumerarFilas();
    recalcImporteChequet();
  });
</script>
