<?php 

class AddonSelInpDt  {
  private $scope;
  private $label;
  private $tblRows;
  private $control;

  public function __construct($entry) {

    if (isset($entry)) {
      $this->size = $entry->size;
      $this->scope = $entry->scope;
      $this->form  = $entry->form;
      $this->label = $entry->label;
      $this->leftSide = $entry->leftSide;

      if (null !== $entry->options)
        $this->options = json_encode($entry->options);
      else
        $this->options = '{}';

      if (isset($entry->placeHolder)) 
        $this->placeHolder = "placeholder=\"$entry->placeHolder\""; 
      else 
        $this->placeHolder = "";

      if (isset($entry->readOnly))
        $this->readOnly = $entry->readOnly;
      else 
        $this->readOnly = "";
        
      $this->today = date('Y-m-d');    
        
    }    
  }
  
  public function outputLayout() {

    $layout = "
<div id='outer-container'>
  <div id='scrollable' style='height:" . $this->size . "em;'>
    <table class='table table-condensed'>
      <thead><tr>
        <th colspan='3'>$this->label</th>
      </tr></thead>    
      <tbody id='frm$this->scope'>
      </tbody>
    </table>
  </div>
  <button id='put$this->scope' class='btn btn-inverse' 
    onclick='put$this->scope();'>Enter</button>
</div>
    ";
    return $layout;
  }	

  public function outputScript() {

	  $script = "
// INPUT-SELECTS
var selectId$this->scope = 0;

$(document).ready(function() {
  document.getElementById('put$this->scope').style.display= 'none';
 });

//$(document).on('click', '#pat$this->scope', function (e) {
//  document.getElementById('pat$this->scope').value = '';
//  document.getElementById('pat$this->scope').focus();
//}); 

$(document).on('change', '.sel$this->scope', function (e) {
  $(this).closest('tr').prop('class', '$this->form');
  $(this).closest('td').prop('class', 'field$this->form');
}); 

$(document).on('change', '.inp$this->scope', function (e) {
  $(this).closest('tr').prop('class', '$this->form');
  $(this).closest('td').prop('class', 'field$this->form');
  $(this).attr('data-value', $(this).val());
}); 

$(document).on('change', '.dat$this->scope', function (e) {
  $(this).closest('tr').prop('class', '$this->form');
  $(this).closest('td').prop('class', 'field$this->form');
  $(this).attr('data-value', $(this).val());
}); 

function com$this->scope (message) {
  $('#valmsg$this->scope').html('');
  var key = Object.keys(message); 

  if (key == 'selectId') {
    selectId$this->scope = message[key][0];
    get$this->scope (selectId$this->scope);
    if (selectId$this->scope == 0)
      document.getElementById('put$this->scope').style.display= 'none';
    else
      document.getElementById('put$this->scope').style.display= 'block';
  }    
}

multiFunction['com$this->scope'] = {
  com$this->scope: com$this->scope
}; 

function hnt$this->scope(list) {
  var layout='';

  for (var i=0; i<list.length; i++) {

    var inner = list[i].text;
    var args = list[i].id + ', \'' + inner + '\'';

	layout += '<a href=\"#/\" onclick=\"sel$this->scope(' + args + ');\">' + inner + '</a><br>';
  }	
  return layout;
} 

function res$this->scope (pattern) {
  if (pattern.length == 0) { 
    document.getElementById('hint$this->scope').innerHTML='';
    document.getElementById('hint$this->scope').style.border='0px';
  }

  else {
    var xhr = new XMLHttpRequest();
    var params = 'pattern=' + pattern + '&' + 'selid=' + selectId$this->scope;

    xhr.open('POST', 'ajax/res$this->scope.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {//Call function when the state changes.

      if(xhr.readyState == 4 && xhr.status == 200) {
        var response = JSON.parse(xhr.responseText)
        document.getElementById('hint$this->scope').innerHTML=hnt$this->scope(response);
        document.getElementById('hint$this->scope').style.border='1px';
      }
    }  
    xhr.send(params);
  }  
}

function gen$this->scope(rows) {
  var optId;
  var text;
  var options = JSON.parse('$this->options');
  var selections = '';

  for (var j=0; j<options.length; j++) {
    optId = options[j].id;
    text  = options[j].text;
    selections += '<option value=' + optId + '>' + text + '</option>';
  }    
  
  var layout = 
    '<tr id=0>' +
      '<td data-element=select style=width:20%;>' +
        '<select class=sel$this->scope>' + selections + '</select>' +
      '</td>' +
      '<td data-element=input style=width:40%;>' + 
        '<input type=text class=inp$this->scope $this->placeHolder>' +
      '</td>' +
      '<td data-element=date style=width:40%;>' + 
        '<input type=date class=dat$this->scope value=$this->today>' + 
      '</td>' + 
    '</tr>';
             
  for (var i=0; i<rows.length; i++) {
    var id = rows[i].id
    var selValue = rows[i].selValue;
    var inpValue = rows[i].inpValue;
    var datValue = rows[i].datValue;
    selections = '';

    for (var j=0; j<options.length; j++) {
      optId = options[j].id;
      text  = options[j].text;

      var attributes = '';
      if (selValue == optId)
        attributes = ' selected';

      selections += '<option value=' + optId + attributes + '>' + text + '</option>';
    }    

    layout += 
      '<tr id=' + id + '>' +
        '<td class=field$this->scope data-element=select style=width:25%;>' +
          '<select class=sel$this->form>' + selections +
          '<option value=-1>Delete</option></select>' +
        '</td>' +
        '<td style=width:75%;>' + 
          '<input type=text class=inp$this->form value=\"' + inpValue + '\">' +
        '</td>' +
        '<td>' + 
          '<input type=date id=dat$this->form value=' + datValue + '>' + 
        '</td>' + 
      '</tr>';
  }  
             
  return layout;
} 

function get$this->scope (selectId) {
  document.getElementById ('frm$this->scope').innerHTML = '';
  
  if (selectId > 0) {
    var params = 'selectid=' + selectId;

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'ajax/get$this->scope.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        var response = JSON.parse(xhr.responseText)
        document.getElementById('frm$this->scope').innerHTML = gen$this->scope(response);
        $('.dat$this->scope').closest('tr').prop('class', '$this->form');
        $('.dat$this->scope').closest('td').prop('class', 'field$this->form');
        $('.dat$this->scope').attr('data-value', '$this->today');
      }
    }  
    xhr.send(params);
  }    
}

function put$this->scope () {
  var comma   = '';
  var addIds  = '';
  var selVals = '';
  var inpVals = '';
  var datVals = '';
  var elements = '';

  $('.$this->form').each(function() {
    addIds  += comma + $(this).prop('id');

    $(this).children('.field$this->form').each(function(){
      var element = $(this).attr('data-element')
      elements  += comma + element;
alert ('element:' + element);
      
      if (element == 'select')
        selVals += comma + $(this).find('select option:selected').val();
      else if (element == 'input')
        inpVals += comma + $(this).find('input').attr('data-value');
      else if (element == 'date') {
        datVals += comma + $(this).find('input').attr('data-value');
      }
    });
    comma = ',';
  });
  
  var params = 'selectid=' + selectId$this->scope + '&' + 
               'addids=' + addIds + '&' + 'elements=' + elements + '&' +
               'selvals=' + selVals + '&' + 'inpvals=' + inpVals + '&' +
               'datvals=' + datVals;

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/put$this->scope.php', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function() {//Call a function when the state changes.
    if (xhr.readyState == 4 && xhr.status == 200) {
      var response = JSON.parse(xhr.responseText)
      get$this->scope (response);
    }
  }  
  xhr.send(params);
}

    "; 
    return $script;
  }
}

?>