<link href="/css/tabulator.min.css" rel="stylesheet">
<link href="/css/jquery-ui-1.12.1.min.css" rel="stylesheet">
<link href="/css/select2.min.css" rel="stylesheet">
<script type="text/javascript" src="/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.12.1.js"></script>
<script type="text/javascript" src="/js/tabulator.js"></script>
<script type="text/javascript" src="/js/jquery_tabulator.min.js"></script>
<script type="text/javascript" src="/js/moment.min.js"></script>
<script type="text/javascript" src="/js/select2.js"></script>

<script type="text/javascript" src="/maitre_d/utils.js"></script>
<link href="/maitre_d/utils.css" rel="stylesheet">

<p>
<div id="btnPanel"></div>
<div id="data-table"></div>

<script type="text/javascript">

var childTableOpts =  {
  tableBuilding: init_lookup_columns,
  layout:"fitColumns",
  resoureUrl: "/api/order_details",
  columns:[
    { field: "resource_type_id", title: "ResourceType",
      lookupData : "/api/resource_types",
      cellEdited : ajax_update_row( "/api/order_details/" ),
    },
    { field: "service_type_id", title: "ServiceType",
      lookupData : "/api/service_types",
      cellEdited : ajax_update_row( "/api/order_details/" ),
    },
    {
      field  : "amount",
      title  : "Amount",
      align  : "right",
      editor : "input",
      cellEdited : ajax_update_row( "/api/order_details/" ),
    },
    {
      field: "allocated_resource_id", title: "Alloc Res",
    },
    the_delete_cell( "/api/order_details/" ),
  ],
};

var parentTableOpts = {
  tableBuilding: init_lookup_columns,
  height      : "500",
  ajaxURL     : "/api/orders",
  layout      : "fitColumns",
  placeholder : "No Data Available",
  initialSort : [{ column: "docdate", dir: "asc" }],
  columns: [
    { width: 50 },
    { title: "Agreement", field: "agreement_id",
      headerSort   : true,
      headerFilter : true, headerFilterFunc: header_filter,
      cellEdited   : ajax_update_row( "/api/orders/" ),
      lookupData   : {
        url        : "/api/agreements",
        labelField : "docn",
      },
    },
    { title: "DocN", field: "docn",
      headerSort   : true,
      headerFilter : true, headerFilterFunc: header_filter,
      tooltip      : cell_tooltip(),
      editor       : "input",
      cellEdited   : ajax_update_row( "/api/orders/" ),
    },
    { title: "DocDate", field: "docdate",
      align        : "center",
      headerSort   : true,
      headerFilter : true,
      editor       : dateEditor,
      cellEdited   : ajax_update_row( "/api/orders/" ),
    },
    { title: "Package", field: "package_id",
      headerSort   : true,
      headerFilter : true, headerFilterFunc: header_filter,
      lookupData   : "/api/packages",
      cellEdited   : ajax_update_row( "/api/orders/" ),
    },
    { title: "Suma", field: "suma",
      headerSort : true,
      align      : "right", width: 100,
      formatter  : function(cell, formatterParams, onRendered){
        return parseFloat( cell.getValue() ).toFixed( 2 );
      },
    },
    { title: "Last Billed", field: "last_bill_date", width: 150,
      align      : "center",
      headerSort : true,
    },
    { title: "VM", field: "vm_id", width: 40,
      align     : "center",
      formatter : "tickCross", formatterParams:{
        allowTruthy: true,
      },
    },
    the_delete_cell( "/api/orders/" ),
  ],
  rowClick: function( e, row ) {
    childTableOpts.ajaxURL =
      "/api/order_details?order_id=" + row.getIndex();

    nestedResourceTable( row, childTableOpts, (postData)=>{
      return {
        order_id         : row.getIndex(),
        service_type_id  : postData.service_type_id,
        resource_type_id : postData.resource_type_id,
        amount           : postData.amount,
      };
    },{
        service_level_id : 1,
        order_id         : row.getIndex(),
    });
  },
};

var dataTable =  new Tabulator( "#data-table", parentTableOpts );
$('#btnPanel').append( btnPanel( dataTable, (postData)=>{
  return {
    agreement_id : postData.agreement_id,
    docn         : postData.docn,
    docdate      : postData.docdate,
    package_id   : postData.package_id,
    suma         : postData.suma,
  };
},{
  suma: 0,
  docdate: moment().format( 'YYYY-MM-DD' ),
}));

</script>