sx-fc/app/views/settings/commissioners/show.html.erb

<div class="page-header">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="<%= root_path %>"><%= t("views.right_panel.button.home") %></a></li>
    <li class="breadcrumb-item"><a href="<%= settings_commissioners_path %>"><%= t("en.commissioners") %></a></li>
    <li class="breadcrumb-item active"><%= t :details %></li>
    <span class="float-right">
      <%= link_to t('.back', :default => t("views.btn.back")), settings_commissioners_path %>
    </span>
  </ol>
</div>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#info" role="tab">Info</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#transaction" id="transaction_tab" role="tab">Transaction</a>
  </li>
</ul>
<!-- Nav tabs - End -->

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
    <div class="tab-content">
      <!--- Panel 0 - Info -->
      <div class="tab-pane active" id="info" role="tabpanel" style="max-height:670px; overflow:auto">
        <div class="card">
          <div class="card-block">
            <table class="table">
              <tbody>
              <tr>
                <td style="width:20%"><%= t("views.right_panel.detail.name") %></td>
                <td><%= @commissioner.name %></td>
              </tr>
              <tr>
                <td style="width:20%"><%= t("views.right_panel.detail.commissioner_photo") %></td>
                <td><%= image_tag @commissioner.image_path, :size => '200x200'%></td>
              </tr>
              <tr>
                <td style="width:20%"><%= t("views.right_panel.detail.employee") %> <%= t("views.right_panel.detail.name") %></td>
                <td><%= @commissioner.employee.name rescue '-' %></td>
              </tr>
              <tr>
                <td style="width:20%"><%= t("views.right_panel.detail.commission") %></td>
                <td><%= @commissioner.commission.name rescue '-' %></td>
              </tr>
              <tr>
                <td style="width:20%"><%= t("views.right_panel.detail.joined_date") %></td>
                <td><%= @commissioner.joined_date.utc.getlocal.strftime('%Y-%b-%d') rescue '-' %></td>
              </tr>
              <tr>
                <td style="width:20%"><%= t("views.right_panel.detail.resigned_date") %></td>
                <td><%= @commissioner.resigned_date.utc.getlocal.strftime('%Y-%b-%d') rescue '-' %></td>
              </tr>
              <tr>
                <td style="width:20%"><%= t("views.right_panel.detail.active") %></td>
                <td><%= @commissioner.is_active %></td>
              </tr>
              <tr>
                <td style="width:20%"><%= t("views.right_panel.detail.created_by") %></td>
                <td><%= Employee.find(@commissioner.created_by).name %></td>
              </tr>
              <tr>
                <td colspan="2" align="right">
                  <%= link_to t("views.btn.edit"), edit_settings_commissioner_path(@commissioner),:class => 'btn btn-primary btn-sm waves-effect' %>
                  <button class="delete btn btn-danger btn-sm waves-effect" data-ref="<%= settings_commissioner_path(@commissioner)%>" data-method="delete">
                    <%= t("views.btn.delete") %>
                  </button>

                  <span class="hidden" id="delete_text">
                      <h6>Are you sure you want to delete this row ?</h6>
                      <h6>This action can't be undo. </h6> 
                  </span>
                </td>
              </tr>
              </tbody>
            </table>
           
          </div>
        </div>
      </div>
      <!--- Panel 1 - Transaction -->
      <div class="tab-pane" id="transaction" role="tabpanel" style="max-height:670px; overflow:auto">
        <div class="card">
          <div class="card-block">

            <table class="table" id="myTable">
              <thead>
              <tr>
                <th><%= 'Product Type' %></th>
                <th><%= 'Product Name' %></th>
                <th><%= 'Qty' %></th>
                <th><%= 'Price' %></th>
                <th><%= 'Amount' %></th>
                <th><%= 'Date' %></th>
              </tr>
              </thead>
              <tbody>

              </tbody>
            </table>
          </div>
        </div>
      </div>

      <br/>

    </div>
  </div>

  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
    <div class="card">
      <div class="body">
        <h5>INFO</h5>
        <h5><i class="material-icons md-18">view_headline <%= t("views.right_panel.header.page_detail") %></i></h5>
        <p>
        1) <%= t("views.right_panel.detail.name") %> - <%= t("views.right_panel.detail.name_txt2") %> <%= t("views.right_panel.detail.for") %> <%= t("views.right_panel.detail.commissioner_txt") %> <br>
        2) <%= t("views.right_panel.detail.employee") %> <%= t("views.right_panel.detail.name_txt2") %> - <%= t("views.right_panel.detail.employee_txt") %> <%= t("views.right_panel.detail.name_txt2") %> <br>
        3) <%= t("views.right_panel.detail.commission_type") %> - <%= t("views.right_panel.detail.commission_type_txt") %> <br>
        4) <%= t("views.right_panel.detail.joined_date") %> - <%= t("views.right_panel.detail.commissioner_txt") %> <%= t("views.right_panel.detail.joined_date_txt") %> <br>
        5) <%= t("views.right_panel.detail.resigned_date") %> - <%= t("views.right_panel.detail.commissioner_txt") %> <%= t("views.right_panel.detail.resigned_date_txt") %> <br>
        6) <%= t("views.right_panel.detail.active") %> - <%= t("views.right_panel.detail.status_txt2") %> <%= t("views.right_panel.detail.for") %> <%= t("views.right_panel.detail.commissioner_txt") %> <br>
        7) <%= t("views.right_panel.detail.created_by") %> - <%= t("views.right_panel.detail.created_by_txt") %> <%= t("views.right_panel.detail.commissioner_txt") %> <br>
        </p>
        <h5><i class="material-icons md-18">list <%= t("views.right_panel.header.button_lists") %></i> </h5>
        <p>
        1) <%= t("views.right_panel.button.edit") %> - <%= t("views.right_panel.detail.edit_btn_txt") %> <%= t("views.right_panel.detail.commissioner_txt") %> <br>
        2) <%= t("views.right_panel.button.delete") %> - <%= t("views.right_panel.detail.delete_btn_txt") %> <%= t("views.right_panel.detail.commissioner_txt") %> <br>
        </p>
        ----------------------------------------------------------------
        <h5>TRANSACTION</h5>
        <h5><i class="material-icons md-18">view_headline <%= t("views.right_panel.header.page_detail") %></i></h5>
        <p>
        1) <%= t("views.right_panel.detail.product") %> <%= t("views.right_panel.detail.type") %> - <%= t("views.right_panel.detail.product_txt") %> <%= t("views.right_panel.detail.type_txt") %> <br>
        2) <%= t("views.right_panel.detail.product") %> <%= t("views.right_panel.detail.name_txt2") %> - <%= t("views.right_panel.detail.product_txt") %> <%= t("views.right_panel.detail.name_txt2") %> <br>
        3) <%= t("views.right_panel.detail.qty") %> - <%= t("views.right_panel.detail.product_txt") %> <%= t("views.right_panel.detail.qty_txt") %> <br>
        4) <%= t("views.right_panel.detail.price") %> - <%= t("views.right_panel.detail.product_txt") %> <%= t("views.right_panel.detail.price_txt") %> <br>
        5) <%= t("views.right_panel.detail.amount") %> - <%= t("views.right_panel.detail.product_txt") %> <%= t("views.right_panel.detail.amount_txt") %> <br>
        6) <%= t("views.right_panel.detail.date") %> - <%= t("views.right_panel.detail.product_txt") %> <%= t("views.right_panel.detail.date_txt") %> <br>
        </p>

        <h5><i class="material-icons md-18">list <%= t("views.right_panel.header.link_lists") %></i> </h5>
        <p>
          1) <%= t("views.right_panel.button.home") %> - <%= t("views.right_panel.detail.home_txt") %> <br>
          2) <%= t("views.right_panel.button.back") %> - <%= t("views.right_panel.detail.back_txt") %> <%= t("views.right_panel.detail.commissioner_txt") %> <br>
        </p>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {

        $("#transaction_tab").click(function () {
            get_transaction();
        });

        function get_transaction() {
            var commissioner_id = <%= @commissioner.id %>
            paramlist = 'commissioner_id=' + commissioner_id ;
            $.ajax({
                type: 'GET',
                url: '<%= settings_get_transaction_by_commissioner_path() %>',
                data: paramlist,
                success: function (data) {
//                    $('#myTable').DataTable().destroy();
                    $('#myTable tbody > tr').remove();
                    $.each(data, function (i, item) {
                        tr = "<tr>" + "<td>" + data[i][0].product_type + "</td>" + "<td>" + data[i][1] + "</td>" + "<td>" + data[i][0].qty + "</td>" + "<td>" + data[i][0].price + "</td>" + "<td>" + data[i][0].amount + "</td>" + "<td>" + new Date(data[i][0].updated_at).toISOString().split('T')[0] + "</td>" + "</tr>";
                        $('#myTable tbody').append(tr);
                    });
//                    $('#myTable').DataTable({
//                        data: data,
//                        columns: [
//                            {data: 'product_type'},
//                            {data: 'product_code'},
//                            {data: 'commission_id'},
//                            {data: 'qty'},
//                            {data: 'price'},
//                            {data: 'amount'}
//                        ],
//                        "order": [[0, "desc"]]
//                    });
                }
            });

        }

    });
</script>