@using EnVisage.Code.HtmlHelpers
@using Microsoft.AspNet.Identity
@using EnVisage.Code
@model EnVisage.Models.ExpenditureCategoriesListModel
@{
  ViewBag.Title = "Expenditure Categories";
}
@section scripts
{
  <script type="text/javascript">
    var ctr = 0;
    var evdttbl = null;
    var UOMArr = new Array();    
    init.push(function () {
      // SA. ENV-723. Parse incoming Uom list for data table filter
      var uomsForFilterJson = $('#unitsOfMeasureFilterValues').val();
      var uomsStruct = JSON.parse(uomsForFilterJson);

      if (uomsStruct && (uomsStruct.length > 0))
        for (var index = 0; index < uomsStruct.length; index++) {
          UOMArr.push(uomsStruct[index].Name);
        }

      evdttbl = $('#uom').dataTable({
        "bProcessing": true,
        "bServerSide": true,
        "bAutoWidth": false,
        "sAjaxSource": document.URL,
        "sServerMethod": "POST",
        "drawCallback": function (settings) {
          $('.rowexpander').click(expandRow);
          if (settings.json.sSearch_ != null && settings.json.sSearch_.length > 1 && settings.json.sSearch_[2].length > 0
                && settings.aoPreSearchCols[2].sSearch.length == 0) {
            $('span.filterColumn>select').val(settings.json.sSearch_[2]);
          }
        },
        "aoColumns": [
          {
            "mDataProp": "Name",
            "mRender": function (data, type, full) {
              return '<a class="rowexpander" href="javascript:;"><i class="fa fa-plus-square" title="Expand"></i> ' + data + '</a>';
            }
          },
          { "mDataProp": "TypeS" },
          { "mDataProp": "UseTypeS" },
          { "mDataProp": "GLName" },
          { "mDataProp": "GLNumber" },
          //{ "mDataProp": "UOM" },
          {
            "mData": function (data, type, full) {
              var uom = data.UOM;
              return uom;
            }
          },
          { "mDataProp": "CreditDepartment" },
  {
    "mData": function (data, type, full) {
      @if (SecurityManager.CheckSecurityObjectPermission(Areas.ExpenditureCategories, AccessLevel.Write))
                        {
						<text>
      ctr++;
      return ('<a id="btnEdit' + ctr + '" onclick="return CheckLock(this.id, \'ExpenditureCategory\', \'_rplcmnt_\')" data-toggle="popover" data-placement="left" ' + 'class="btn btn-sm btn-primary popover-warning popover-dark" href="@Url.Action("Edit", "ExpenditureCategory", new { @id = "_rplcmnt_" })"><i class="fa fa-edit"></i> Edit</a> ' +
        '<a id="btnDelete' + ctr + '" onclick="return CheckLock(this.id, \'ExpenditureCategory\', \'_rplcmnt_\')" data-toggle="popover" data-placement="left" ' + (data.ScenarioDetailCount > 0 ? 'class="btn btn-sm btn-danger popover-warning popover-dark disabled" href="javascript:void(0);"' : 'class="btn btn-sm btn-danger popover-warning popover-dark" href="@Url.Action("Delete", "ExpenditureCategory", new { @id = "_rplcmnt_" })"') + ' ><i class="fa fa-trash-o"></i> Delete</a>')
      .replace(/_rplcmnt_/g, data.Id);
      </text>
                        }
                        else
                        {
						<text>
      return "";
      </text>
                        }
    }
  }],
      }).columnFilter({
        "aoColumns": [
      { "type": "null" },
      { "type": "null" },
      { "type": "select", sSelector: "@Request.QueryString["UOM"]" }
        ]
      });


 			@if (SecurityManager.CheckSecurityObjectPermission(Areas.ExpenditureCategories, AccessLevel.Write))
            {
			<text>
    	  $('#uom_wrapper .table-caption').html('<a class="btn btn-primary" href="@Url.Action("Edit", "ExpenditureCategory")"><i class="fa fa-plus"></i> Add Expenditure Category</a>');
			</text>
            }
    	  $('#uom_wrapper .dataTables_filter input').attr('placeholder', 'Search...');
    	  $('#uom_wrapper .dataTables_processing').addClass("table-caption");
    	  $('#uom_wrapper .dataTables_processing').html('<span class="h3"><img class="valign-middle" src="../Content/images/loadFA.gif"/></span>');

        // SA. ENV-723. Fill data table Uoms filter with values
    	  var filterSelectControl = $('span.filterColumn>select');

    	  for (var index = 0; index < UOMArr.length; index++) {
    	    var optionHtml = '<option value="' + UOMArr[index] + '" class="">' + UOMArr[index] + '</option>';
    	    filterSelectControl.append(optionHtml);
    	  }

    	  $(filterSelectControl).children('option:first').val('All units');
    	  $(filterSelectControl).children('option:first').text('All units');
    });

    	$(document).ready(function () {
    	  setTimeout(function () {
    	    $('.DT-lf-right>div:first').after('<div class="DT-search" style="vertical-align: middle"><div id="uom_filter" class="dataTables_filter"></div></div>');
    	    $('#uom_filter').append($('span.filter_select'));
    	    $('span.filter_select select').width(128);
    	    $('span.filter_select select').height(28);
    	  }, 500);
    	});

    	function expandRow(evt) {
    	  var tr = $(this).closest('tr');
    	  var row = evdttbl.DataTable().row(tr);

    	  if (row.child.isShown()) {
    	    $(this).children("i.fa").removeClass("fa-minus-square").addClass("fa-plus-square");
    	    row.child.hide();
    	  }
    	  else {
    	    $(this).children("i.fa").removeClass("fa-plus-square").addClass("fa-minus-square");
    	    row.child("<div id='infoPanel" + row.data().Id + "'></div>").show();
    	    $('#infoPanel' + row.data().Id).closest('td').addClass("no-padding no-border");
    	    var loadUrl = '@Url.Action("Details", "ExpenditureCategory", new { @id = "_rplcmnt_" })'.replace(/_rplcmnt_/g, row.data().Id);
    			$('#infoPanel' + row.data().Id).load(loadUrl, function (response, status, xhr) {
    			  if (status == "error") {
    			    showErrorModal('Loading error', 'We are sorry but there was an error, please try again later.');
    			  }
    			});
        }
      }
  </script>
}
<div class="table-light table-responsive">
  @Html.HiddenFor(x => x.UnitsOfMeasureJson, new { @id = "unitsOfMeasureFilterValues" })
  <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="uom">
    <thead>
      <tr>
        <th>Expenditure Category Name
        </th>
        <th>Type
        </th>
        <th>Usage
        </th>
        <th>GL Account Name
        </th>
        <th>GL Account Number
        </th>
        <th>Unit of Measure
        </th>
        <th>Cost Center
        </th>
        <th></th>
      </tr>
    </thead>
    <tfoot style="display: none;">
      <tr>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </tfoot>
  </table>
</div>