@extends('panel.layouts.superadmin.app')
@section('page-title')
<title>
{{ LaraCore::setting('html_prefix') }} {{ (LaraCore::setting('html_prefix') != '') ? '|' : '' }} Subscriptions</title>
@stop
@section('content')
<style type="text/css">
span.select2-container.select2-container--default.select2-container--open{width: 100px !important;}
</style>
<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">Subscriptions</h3>
          </div>
          <div class="box-body">
            <div class="row">
              <div class="col-md-3">
                <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>
              </div>
              <div class="col-md-3">
                <label for="filter">Search</label>
                <input type="text" class="form-control" id="filter" value="" />
              </div>
            </div>
            <div class="table-responsive">
              <div id="tablecontent" style="margin-top: 15px"></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>
<script>
  $(document).ready(function () {
    loadSubscriptionData();
  });

  function loadSubscriptionData(){
    var _token = $('hidden[name=_token]').val();
    $.ajax({
      type: "POST",
      url : '{{route("edit.subscriptions.post")}}',
      dataType: 'json',
      data: {},
      success: function (data) {
        var metadata = [];
        metadata.push({ name: "id", label: "#", datatype: "string", editable: false, class:'cstm-th', width:'20%'});
        metadata.push({ name: "account_name", label: "Account Name", datatype: "string", editable: false, class:'cstm-th', width:'20%'});
        metadata.push({ name: "branch_name", label: "Branch Name", datatype: "string", editable: false, class:'cstm-th', width:'20%'});
        metadata.push({ name: "account_created_date", label: "Account Created", datatype: "date", editable: false, class:'cstm-th', width:'20%'});
        metadata.push({ name: "start_date", label: "Current Sub. Start", datatype: "date", editable: false, class:'cstm-th', width:'20%'});
        metadata.push({ name: "end_date", label:"Current Sub. End", datatype: "date", editable: false, class:'cstm-th', width:'20%'});
        metadata.push({ name: "type", label: "Type", datatype: "string", editable: true, class:'cstm-th', width:'20%'});
        metadata.push({ name: "amount", label: "Amount/Mo.", datatype: "string", editable: true, class:'cstm-th', width:'20%'});

        metadata[6].values = JSON.parse(data.types);

        var data1 = [];
        all_data = data.response_data;

        jQuery.each( all_data, function( i, val ) {
          data1.push({
            id: val.id, 
            values: {
              "id":val.id, 
              "account_name":val.account_name, 
              "branch_name":val.branch_name, 
              "account_created_date":val.account_created_date, 
              "start_date":val.start_date, 
              "end_date":val.end_date, 
              "type":val.type,
              "amount":val.amount
            }});
        });

        editableGrid = new EditableGrid("DemoGridFull", {
          pageSize: 25      
        });
        editableGrid.load({"metadata": metadata, "data": data1});
        editableGrid.initializeGrid();
      },
      error: function (jqXHR, exception) {
        console.log('Something went wrong');
      }
    });
  }
  
  $( ".filter" ).change(function(e) {
    e.preventDefault();
    loadSubscriptionData();
  });
  
</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) {
      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.subscriptions.list")}}',
          type: "POST",
          data: this.getRowValues(rowIndex),
        }).done(function (response, textStatus, jqXHR){
          toastr.success('Subscription 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", "subscriptiongrid", "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