<div class="container-fludi">
  <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"  id="custom-slimscroll">
          <div class="card-columns" id="commissioners" style="float: left; padding-top:10px; column-gap: 1.2rem; ">
            <div style="color: gray"><i>* Select One Item</i></div>
            <% @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 class="p-l-10 "> 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 class="p-r-10">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 id="order-detail-slimscroll">
          <!-- <div class="card-text" style="min-height:500px; max-height:500px; overflow-x:scroll"> -->
          <div id="order-detail-slimscroll" data-height="160">
          <div class="card-text"> 
            <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
                    %>
                    <% if sale_item.status.nil? %>
                    <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.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
                end
                %>
              </tbody>
            </table>
          </div>
          </div>
          </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-default btn-block" id='back'><i class="material-icons">reply</i>Back</button>
      <!--<button type="button" class="btn btn-primary btn-block" id='apply'>Apply</button>-->
    </div>
  </div>
</div>
<script>
  $(document).ready(function () {
    setHeaderBreadCrumb(_COMMISSIONS_);
    var selected_sale_item = 0;

    $('.sale_item').on('click', function () {
      $('#order-items-table tr').siblings().css( "background-color", "white" );
      $('#order-items-table tr').siblings().css( "color", "black" );
      this.style.backgroundColor = 'blue';
      this.style.color = 'white';
      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(result);
        if(result.deselect == true){
          $(commissioner).removeClass("blue").addClass("green");
          $("tr[data-sale-item=" + selected_sale_item + "] td.commissioner").text('-');
        }
        if(result.status == true){
          swal("Information",result.message,"success");
        }else{
          $("tr[data-sale-item=" + selected_sale_item + "] td.commissioner").text('-');
          swal("Opps",result.message,"warning");
        }
      }
    });
  };

</script>
