POS-Server/app/views/cash_registers_moves/_abonoform.html.erb

<%= form_for(@cash_registers_move, remote: true, html: { class: "form-horizontal", id: "cash_register_move_form" }) do |f| %>
  <%= f.hidden_field(:open_cash_register_id, value: @sale.open_cash_register_id) %>
  <%= f.hidden_field(:sale_id, value: @sale.id) %>
  <div class="portlet-body form">
    <div class="alert alert-danger hidden" id="error_explanation_move"></div>
    <div class="row">
      <!-- div para mostrar total -->
      <div class="col-md-12">
        <h3> <%= @sale.customer.nick_name %> </h3>
        <div class="note note-success row" style="padding: 0px;">
          <div class="col-md-12">
            <div class="col-md-4" style="padding-left:0px"><h4 class="block">Adeudo del cliente:</h4></div>
            <%= hidden_field_tag 'sale_total', @credito %>
            <div class="col-md-8 text-center" style="margin-top:10px;padding-right: 0px;">
              <h3 class="pull-right"><%= number_to_currency(@credito, precision: 2) %></h3>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12">
        <h4 class="form-section" style="margin-top:15px;margin-bottom:15px">Nuevo abono</h4>
        <!-- div fecha -->
        <div class="col-md-12" style="margin-bottom:15px;padding-right:0px">
          <div class="col-md-4 pull-right" style="padding-left:0px;padding-right:0px;">
              <div class='input-group date' id='datetimepicker2'>
                  <input type='text' class="form-control" disabled/>
                  <span class="input-group-addon">
                      <span class="glyphicon glyphicon-calendar"></span>
                  </span>
              </div>
          </div>
        </div>

        <div class="col-md-12" style="padding:0px">
          <!-- recibido -->
          <div class="col-md-4">
            <div class="form-group">
              <span class="help-block">monto recibido. </span>
              <div class="input-group col-md-11">
                <span class="input-group-addon"> $ </span>
                <%= f.number_field :received, { class: "form-control mask_decimal first_input", oninput: 'lock_button()' } %>
              </div>
            </div>
          </div>
          <!-- cantidad -->
          <div class="col-md-4">
            <div class="form-group">
              <span class="help-block">monto a ABONAR. </span>
              <div class="input-group col-md-11">
                <span class="input-group-addon"> $ </span>
                <%= f.number_field :quantity, { class: "form-control mask_decimal", oninput: 'lock_button()' } %>
              </div>
            </div>
          </div>
          <!-- metodo de pago -->
          <div class="col-md-2">
            <div class="form-group">
              <span class="help-block">forma de pago. </span>
              <div class="input-group col-md-12">
                <%= f.select :payment_method_id, PaymentMethod.vigentes.map { |c| [c.method, c.id] }, {:include_blank => "Seleccione", :selected => @cash_id}, { class: "form-control" } %>
              </div>
            </div>
          </div>
          <!-- boton agregar -->
          <div class="col-md-2" style="padding-right:0px; margin-top:30px">
            <button type="button" class="btn green pull-right" onclick="unlockSubmit()">Agregar</button>
          </div>
        </div>
        <!--  datos de la tarjeta cuando aplica -->
        <div class="col-md-12" id="card_info" style="display: none;">
          <div class="form-group">
            <%= f.label :cardnumber, { class: "col-md-3 control-label" } do %> Tarjeta: <span class="required">*</span>
            <% end %>
            <div class="col-md-8">
              <%= f.text_field :cardnumber, { class: "form-control", maxlength: 4 } %>
              <span class="help-block">Últimos 4 dígitos de la tarjeta. </span>
            </div>
          </div>
        </div>
      </div>
      <!-- div para mostrar cambio -->
      <div class="col-md-offset-6 col-md-6">
        <div class="note note-success row" style="padding: 0px;">
          <div class="col-md-12">
            <div class="col-md-4" style="padding-left:0px"><h4 class="block pull-left">Cambio:</h4></div>
            <div class="col-md-8 text-center" style="margin-top:10px;padding-right: 0px;">
              <h4 id="display_change" class="pull-right"></h4>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12">
        <button type="button" class="btn green btn-block" disabled id="save_move" onclick="submitForm()">Abonar a crédito</button>
      </div>
    </div>
  </div>

<% end %>
<script type="text/javascript">
  var timeout = null;
  $('#datetimepicker2').datetimepicker({
    icons: {
      date: "fa fa-calendar"
    },
    format: "DD/MM/YYYY",
    defaultDate: new Date()
  });

  $('form#cash_register_move_form').bind('ajax:complete', function() {
    $('#save_move').attr('disabled', false);
  });

  $('#dialog').removeClass('bs-modal-lg');
  $('#dialog .modal-dialog').removeClass('modal-lg');

  $('#cash_registers_move_payment_method_id').on('change', function() {
    // $('#display_change').html(formatter.format(0));
    $('#display_change').html(accounting.formatMoney(0));

    $('#save_move').attr('disabled', true);
    if ($(this).val() != <%= @cash_id %>) {
      $("#card_info").fadeIn();
      $('#cash_registers_move_received').attr('disabled', true);
      $('#cash_registers_move_received').val("");
    } else {
      $("#card_info").fadeOut();
      $("#cash_registers_move_cardnumber").val("");
      $('#cash_registers_move_received').attr('disabled', false);
    }
  });


  function unlockSubmit() {
    var method = $('#cash_registers_move_payment_method_id').val();
    var received = $('#cash_registers_move_received').val();
    var quantity = $('#cash_registers_move_quantity').val();
    var change = 0;
    var isReady = false;

    if (method == <%= @cash_id %>) {
      var received = $('#cash_registers_move_received').val();
      var quantity = $('#cash_registers_move_quantity').val();
      if(received && quantity && (quantity <= <%= @credito %> ) ) {
        change = received - quantity;
        isReady = true;
      } else {
        toastr["error"]("Hay datos que falta ingresar o la cantidad es incorrecta.");
      }
    } else {
      if (quantity) {
        isReady = true;
      }
    }

    // $('#display_change').html(formatter.format(change));
    $('#display_change').html(accounting.formatMoney(change));

    if (isReady) {
      $("#save_move").attr('disabled', false);
    } else  {
      $("#save_move").attr('disabled', true);
    }
  }

  function submitForm() {
    $('#save_move').attr('disabled', true);
    $('#cash_register_move_form').submit();
  }

  function lock_button() {
    $("#save_move").attr('disabled', true);
  }
</script>