sx-fc/app/views/settings/commissions/load_commissioners.html.erb

<div class="row">
  <!-- Column One -->
  <div class="col-lg-5 col-md-5 col-sm-5" style="height: 100%">
    <div class="card">
      <div class="card-header">
        <div><strong id="order-title">COMMISSIONERS </strong></div>
      </div>
      <div class="card-block">
        <div class="card-columns" id="commissioners" style="float: left; padding-top:10px; column-gap: 1.2rem; min-height:600px; max-height:600px; overflow-x:scroll;">
          <% @commissioners.each do |commissioner| %>
              <div class="card tables green text-white commissioner" data-commissioner-id="<%= commissioner.id %>" data-commissioner-name="<%= commissioner.name %>">
                <div class="card-block">
                  <%= commissioner.name %>
                </div>
              </div>
          <% end %>
        </div>
      </div>
    </div>
  </div>

  <!-- Column Two -->
  <div class="col-lg-6 col-md-6 col-sm-6">
    <div class="card">
      <div class="card-header">
        <div><strong id="order-title">INVOICE DETAILS </strong></div>
      </div>
      <div class="card-block">
        <div class="card-title row">
          <div class="col-lg-6 col-md-6 col-sm-6">
            <p> Receipt No: <span id="receipt_no">
                <%= @saleobj.receipt_no rescue '' %>
             </span></p>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-6 text-right">
            <p>Date:
              <span id="receipt_date"><%= @saleobj.created_at.utc.getlocal.strftime("%d/%m/%Y - %I:%M %p") rescue '-' %></span>
            </p>
          </div>
        </div>
        <div class="card-title row customer_detail hide">
          <div class="col-lg-6 col-md-6 col-sm-6">
            <p>Customer : <span id="customer_name"></span></p>
          </div>

        </div>
        <div class="card-text" style="min-height:500px; max-height:500px; overflow-x:scroll">
          <table class="table " id="order-items-table">
            <thead>
            <tr>
              <th width="4%">#</th>
              <th class="" width="40%">Items</th>
              <th style="" width="20%">QTY</th>
              <th class="" width="20%">Price</th>
              <th class="" width="20%">Commissioner</th>
            </tr>
            </thead>
            <tbody>
            <%
              count = 0
              sub_total = 0
              @saleobj.sale_items.each do |sale_item|
                count += 1
                sub_total = sub_total + sale_item.price
            %>
                <input type="hidden" id="sale_id" class="sale_id" value="<%= @saleobj.sale_id %>">
                <%
                  # Can't check for discount
                  unless sale_item.price == 0
                %>
                    <tr id="sale_item" class="sale_item" data-sale-item="<%= sale_item.sale_item_id %>">
                      <td width="4%"><%= count %></td>
                      <td class='product_name' width="40%">
                        <%= sale_item.product_name %>
                      </td>
                      <td class='qty' width="20%">
                        <%= sale_item.qty %>
                      </td>
                      <td class='unit_price' width="20%">
                        <%= sale_item.unit_price %>
                      </td>
                      <td class='commissioner' width="20%">
                        <% product_commission = ProductCommission.find_by_sale_item_id(sale_item.id) %>
                        <%= product_commission.commissioner.name rescue '-' %>
                      </td>
                    </tr>
                <%
                  end
                  end
                %>
            </tbody>
          </table>
        </div>
        <div class="card-footer">
          <table class="table" id="order-charges-table" border="0">
            <tr>
              <td class="charges-name"><strong>Sub Total:</strong></td>
              <td class="item-attr"><strong id="order-sub-total"><%= sub_total %></strong></td>
            </tr>
            <tr class="rebate_amount"></tr>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- Column Three -->
  <div class="col-lg-1 col-md-1 col-sm-1">
    <!-- Waiter Buttons -->
    <button type="button" class="btn btn-primary btn-block" id='back'>Back</button>
    <!--<button type="button" class="btn btn-primary btn-block" id='apply'>Apply</button>-->
  </div>
</div>
<script>
    $(document).ready(function () {
        var selected_sale_item = 0;

        $('.sale_item').on('click', function () {
            $('#order-items-table tr').siblings().css( "background-color", "white" );
            this.style.backgroundColor = 'lightgray';
            var sale_item_id = this.getAttribute('data-sale-item');
            var ajax_url = "/origami/select_sale_item";
            selected_sale_item = sale_item_id;
            localStorage.setItem("selected_sale_item", selected_sale_item);
            $.ajax({
                type: "POST",
                url: ajax_url,
                data: 'sale_item_id=' + sale_item_id,
                success: function (result) {
                    if (result != null){
                        $('#commissioners').empty();
                        result.commissioner.forEach(function (c) {
                            if (result.selected_commissioner != null){
                                if (c.id == result.selected_commissioner.id){
                                    sale_item = "<div class=\"card tables blue text-white commissioner\" onclick=\"click_commissioner(this)\" data-commissioner-id=" + c.id + " data-commissioner-name=\"" + c.name + "\">" + "<div class=\"card-block\">" + c.name + "</div>" + "</div>"
                                }else {
                                    sale_item = "<div class=\"card tables green text-white commissioner\" onclick=\"click_commissioner(this)\" data-commissioner-id=" + c.id + " data-commissioner-name=\"" + c.name + "\">" + "<div class=\"card-block\">" + c.name + "</div>" + "</div>"
                                }
                            }else {
                                sale_item = "<div class=\"card tables green text-white commissioner\" onclick=\"click_commissioner(this)\" data-commissioner-id=" + c.id + " data-commissioner-name=\"" + c.name + "\">" + "<div class=\"card-block\">" + c.name + "</div>" + "</div>"
                            }
                            $('#commissioners').append(sale_item);
                        })
                    }
                }
            });
        });

        $('#back').on('click', function () {
            var table_id = '<%= @table_id %>';
            window.location.href = '/origami/table/' + table_id;
        });

    });

    $('.commissioner').on('click', function () {
        alert('click');
    });

    function click_commissioner(commissioner) {
        var commissioner_id = commissioner.getAttribute('data-commissioner-id');
        var selected_sale_item = localStorage.getItem("selected_sale_item");
        $(commissioner).removeClass("green").addClass("blue");
        $(commissioner).siblings().removeClass("blue").addClass("green");
        $("tr[data-sale-item=" + selected_sale_item + "] td.commissioner").text(commissioner.getAttribute('data-commissioner-name'));
        var ajax_url = "/origami/select_commissioner";
        var param_data = 'sale_item_id=' + selected_sale_item + '&commissioner_id=' + commissioner_id;
        $.ajax({
            type: "POST",
            url: ajax_url,
            data: param_data,
            success: function (result) {
                console.log(selected_sale_item + "," +commissioner_id);
                if(result.deselect == true){
                    $(commissioner).removeClass("blue").addClass("green");
                    $("tr[data-sale-item=" + selected_sale_item + "] td.commissioner").text('-');
                }
            }
        });
    };

</script>