@extends('panel.layouts.app')
@section('page-title')
<title>
{{ LaraCore::setting('html_prefix') }} {{ (LaraCore::setting('html_prefix') != '') ? '|' : '' }} Receiver</title>
@stop
@section('content')
<div class="content-wrapper">
  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10">
      <section class="content">
        <div class="box box-default">
          <div class="box-header with-border">
            <i class="fa fa-cube"></i>
            <h3 class="box-title">Receivers List</h3>
          </div>
          <div class="box-body">
            <div class="table-responsive">
              <div id="pagecontrol">
                <label for="pagecontrol">Rows per page: </label>
                <select id="pagesize"  class="form-control" name="pagesize">
                  <option value="5">5</option>
                  <option value="10">10</option>
                  <option value="25">25</option>
                  <option value="50">50</option>
                  <option value="100">100</option>
                </select>
              </div>

              <label for="filter">Filter :</label>
              <input type="text" class="form-control" id="filter" value="" />

              <div id="tablecontent"></div>

              <div id="paginator"></div>
            </div>
          </div>
        </div>
      </section>
    </div> 
    <div class="col-md-1"></div>
  </div>
</div>
@stop
@section('custom-scripts')
<script src="{{ laracore_assets('dist/js/editablegrid.js') }}"></script>
<script src="{{ laracore_assets('dist/js/editablegrid_renderers.js') }}"></script>
<script src="{{ laracore_assets('dist/js/editablegrid_editors.js') }}"></script>
<script src="{{ laracore_assets('dist/js/editablegrid_validators.js') }}"></script>
<script src="{{ laracore_assets('dist/js/editablegrid_utils.js') }}"></script>
<style>
    body { font-family:'lucida grande', tahoma, verdana, arial, sans-serif; font-size:11px; }
    h1 { font-size: 15px; }
    a { color: #548dc4; text-decoration: none; }
    a:hover { text-decoration: underline; }
    table.testgrid { border-collapse: collapse; border: 1px solid #CCB; width: 800px; }
    table.testgrid td, table.testgrid th { padding: 5px; border: 1px solid #E0E0E0; }
    table.testgrid th { background: #E5E5E5; text-align: left; }
    input.invalid { background: red; color: #FDFDFD; }
</style>
<script>
  $(document).ready(function () {
    $.ajax({
      type: "POST",
      url : '{{route("post.receiver.list")}}',
      dataType: 'json',
      success: function (data) {
        var metadata = [];
        metadata.push({ name: "id", label: "#", datatype: "string", editable: false});
        metadata.push({ name: "name", label: "Name", datatype: "string", editable: true});
        metadata.push({ name: "email", label:"Email", datatype: "string", editable: true});
        metadata.push({ name: "mobile", label: "Mobile", datatype: "string", editable: true});
        metadata.push({ name: "address", label: "Address", datatype: "string", editable: true});
        metadata.push({ name: "city", label: "City", datatype: "string", editable: true});

        metadata[5].values = data.centers;

        var data1 = [];
        all_data = data.response_data;
        jQuery.each( all_data, function( i, val ) {
          data1.push({id: val.id, values: {"id":val.id, "name":val.name,"email":val.email,"mobile":val.mobile,"address":val.address,"city":val.centers_name}});
        });

        editableGrid = new EditableGrid("DemoGridFull", {
          pageSize: 10      
        });
        editableGrid.load({"metadata": metadata, "data": data1});
        editableGrid.initializeGrid();
      },
      error: function (jqXHR, exception) {
        console.log('Something went wrong');
      }
    });
  });
</script>
<script type="text/javascript">
  var editableGrid = new EditableGrid("DemoGridFull", {
    enableSort: false,
    editmode: "absolute",
    editorzoneid: "edition",
    pageSize: 10,
    maxBars: 10
  });

  function displayMessage(text, style) {
  }

  function image(relativePath) {
    return '';
  }

  function InfoHeaderRenderer(message) { 
    this.message = message; 
    this.infoImage = new Image();
    this.infoImage.src = image("information.png");
  };

  InfoHeaderRenderer.prototype = new CellRenderer();
  InfoHeaderRenderer.prototype.render = function(cell, value) {
    if (value) {
      var link = document.createElement("a");
      link.href = "javascript:alert('" + this.message + "');";
      link.appendChild(this.infoImage);
      cell.appendChild(document.createTextNode("\u00a0\u00a0"));
      cell.appendChild(link);
    }
  };

  EditableGrid.prototype.initializeGrid = function() {
    with (this) {

      setCellRenderer("status_ch", new CellRenderer({
        render: function(cell, value) { 
          cell.innerHTML = value ? '<input name="list_item" type="checkbox"  class="list_item iCheck-helper  minimal" value="' + value + '" tabindex="-1">' : ''; cell.style.textAlign = "center";  
        }
      }));

      modelChanged = function(rowIndex, columnIndex, oldValue, newValue, row) { 
        // console.log('--------------------');
        // console.log(rowIndex);
        // console.log(columnIndex);
        // console.log(oldValue);
        // console.log(newValue);
        // console.log(this.getRowValues(rowIndex));
        // console.log('--------------------');
        $.ajax({
          url : '{{route("update.receiver.list")}}',
          type: "POST",
          data: this.getRowValues(rowIndex),
        }).done(function (response, textStatus, jqXHR){
          toastr.success('Parcels updated successfully !', 'Success !', { onHidden: function() {          
          }});
        });
      };

      tableRendered = function() { this.updatePaginator(); };

      rowSelected = function(oldRowIndex, newRowIndex) {
        if (oldRowIndex < 0) displayMessage("Selected row '" + this.getRowId(newRowIndex) + "'");
        else displayMessage("Selected row has changed from '" + this.getRowId(oldRowIndex) + "' to '" + this.getRowId(newRowIndex) + "'");
      };

      renderGrid("tablecontent", "testgrid", "tableid");

      _$('filter').value = currentFilter ? currentFilter : '';

      _$('filter').onkeyup = function() { editableGrid.filter(_$('filter').value); };

      $("#pagesize").val(pageSize).change(function() { editableGrid.setPageSize($("#pagesize").val()); });
    }
  };

  EditableGrid.prototype.onloadJSON = function(url) {
    this.tableLoaded = function() { 
      displayMessage("Grid loaded from JSON: " + this.getRowCount() + " row(s)"); 
      this.initializeGrid();
    };

    this.loadJSON(url);
  };

  EditableGrid.prototype.updatePaginator = function() {
    var paginator = $("#paginator").empty();
    var nbPages = this.getPageCount();

    var interval = this.getSlidingPageInterval(20);
    if (interval == null) return;

    var pages = this.getPagesInInterval(interval, function(pageIndex, isCurrent) {
      if (isCurrent) return "" + (pageIndex + 1);
      return $("<a>").css("cursor", "pointer").html(pageIndex + 1).click(function(event) { editableGrid.setPageIndex(parseInt($(this).html()) - 1); });
    });

    var link = $("<a>").html("<img src='" + image("gofirst.png") + "'/>&nbsp;");
    if (!this.canGoBack()) link.css({ opacity : 0.4, filter: "alpha(opacity=40)" });
    else link.css("cursor", "pointer").click(function(event) { editableGrid.firstPage(); });
    paginator.append(link);

    link = $("<a>").html("<img src='" + image("prev.png") + "'/>&nbsp;");
    if (!this.canGoBack()) link.css({ opacity : 0.4, filter: "alpha(opacity=40)" });
    else link.css("cursor", "pointer").click(function(event) { editableGrid.prevPage(); });
    paginator.append(link);

    for (p = 0; p < pages.length; p++) paginator.append(pages[p]).append(" | ");

      link = $("<a>").html("<img src='" + image("next.png") + "'/>&nbsp;");
    if (!this.canGoForward()) link.css({ opacity : 0.4, filter: "alpha(opacity=40)" });
    else link.css("cursor", "pointer").click(function(event) { editableGrid.nextPage(); });
    paginator.append(link);

    link = $("<a>").html("<img src='" + image("golast.png") + "'/>&nbsp;");
    if (!this.canGoForward()) link.css({ opacity : 0.4, filter: "alpha(opacity=40)" });
    else link.css("cursor", "pointer").click(function(event) { editableGrid.lastPage(); });
    paginator.append(link);
  };
</script>
@stop