<?php 

class InputSelects  {
  private $scope;
  private $scopeId;
  private $label;
  private $rowList;
  private $control;
  private $hint;

  public function __construct($entry) {

    if (isset($entry)) {
      $this->scope   = $entry->scope;
      $this->scopeId = $entry->scopeId;
      $this->label   = $entry->label;
      
      if (isset($entry->placeholder)) 
        $this->hint    = "placeholder='$entry->placeholder'"; 
      else 
        $this->hint = "";
      
      $this->rowList  = $entry->rowList;

      if (null == $entry->rowList)
        $this->rowList = [];
      else 
        $this->rowList = $entry->rowList;
      
      if (null != $entry->readOnly)
        $this->readOnly = $entry->readOnly;
      else 
        $this->readOnly = "";

      $selections = "<option value=0>$entry->addOption</option>";
      
      foreach ($entry->selList as $option) {
        $selections .= "<option value=$option->id>$option->text</option>";
      }
      $selections .= "<option value=-1>$entry->delOption</option>";
      
      if ($entry->leftSide == 'input') {
        $this->control  = "
      <tr id='template$this->scope'>
        <td>
          <input type=text id=0 class=input$this->scope value='' $this->hint>
        </td>
        <td>        
          <select id=0 class=select$this->scope style=margin:0px;height:26px>
            $selections
          </select>
         </td>
        <td>        
          <button id=0 class='btn btn-inverse commit$this->scope' >Commit</button>
         </td>
      </tr>         
          ";
      }
      else {
        $this->control  = "
      <tr id='template$this->scope'>
        <td style=width:40%>
          <select id=0 class=select$this->scope style=margin:0px;height:26px;>
            $selections
          </select>
        </td>
        <td style=width=55%>        
          <input type=text id=0 class=input$this->scope value='' $this->hint>
        </td>
        <td style=width=5%>        
          <button id=0 class='btn btn-inverse commit$this->scope' >Commit</button>
        </td>
      </tr>         
          ";
      } 
    }    
  }
  
  public function outputLayout() {

    $layout = "
<label for='$this->scope' style='margin-bottom:0px;'>$this->label</label><br>
<div style='border:1px solid #ccc;height:10em;overflow-x:auto;'>
  <table style='float:right;'>
    <tbody id='list$this->scope'>
    ";    
    
    foreach ($this->rowList as $row) {
    
      $layout .= "
    $this->control
      "; 
    }
                      
    $layout .= "
    </tbody>
  </table>
</div>
   ";
    return $layout;
  }	

    public function outputScript() {

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

$(document).on('click', '.commit$this->scope', function (e) {
  var scope = '$this->scope';
  $('.listrow$this->scope').each (function () {
    var rowid = $(this).prop('id');
    var selid = $(this).find('select option:selected').val();
    var text  = $(this).find('input').val(); 
    put$this->scope ('commit', rowid, selid, text);
  });
  
});

$(document).on('change', '.select$this->scope', function (e) {
  var value = $(this).val();
  var rowid  = $(this).prop('id'); // selected row id

  if (value == -1)
    put$this->scope ('delete', rowid, '', '');
    
  else {
    var selid  = $(this).val();
    put$this->scope ('commit', rowid, selid, '');
  }
});

function notify$this->scope (messageId) {
  current$this->scope = messageId;
  get$this->scope (messageId);
}

function gen$this->scope(rows) {
  var id;
  var card_id;
  var text;
  var scope = '$this->scope';
  
  $('.listrow$this->scope').each (function () {
    $(this).remove();
  });    
  
  for (var i=0; i<rows.length; i++) {

    var id     = rows[i].id;
    var sel_id = rows[i].select_id;
    var text   = rows[i].text;
    $('#template$this->scope').clone().appendTo('#list$this->scope');
    $('#template$this->scope').find('select').prop('id', id)
    $('#template$this->scope').find('option[value='+sel_id+']').prop('selected', true);
    $('#template$this->scope').find('input').prop('id', id);
    $('#template$this->scope').find('input').val(text);
    $('#template$this->scope').find('button').remove();
    $('#template$this->scope').prop('class', 'listrow$this->scope');
    $('#template$this->scope').prop('id', id);
  }  
} 

function get$this->scope (id) {

  var params = 'currid=' + id;
  
  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() {//Call a function when the state changes.
    if (xhr.readyState == 4 && xhr.status == 200) {
      var response = JSON.parse(xhr.responseText)
      gen$this->scope(response);
   }
  }  
  xhr.send(params);
}


function put$this->scope (action, rowid, selid, text) {

  var params = 'action=' + action + '&' + 'rowid=' + rowid + '&' + 'selid=' + selid + '&' + 
               'text=' + text + '&' + 'currid=' + current$this->scope;
  
  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)
      
      if (action == 'delete')
        $('#'+rowid+'.listrow$this->scope').remove();
      else if (response != rowid) {
        $('#template$this->scope').clone().appendTo('#list$this->scope');
        $('#template$this->scope').find('select').prop('id', response)
        $('#template$this->scope').find('input').prop('id', response);
        $('#template$this->scope').find('button').remove();
        $('#template$this->scope').prop('class', 'listrow$this->scope');
        $('#template$this->scope').prop('id', response);
        $('#template$this->scope').find('input').val('');
      }
      else 
       $('#'+rowid+'.commit$this->scope').html('Remove');
    }
  }  
  xhr.send(params);
}

function putdel$this->scope (id) {

  var params = 'id=' + id;
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/putdel$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 (curr$this->scope);
    }
  }  
  xhr.send(params);
}
	  
    "; 
    return $script;
  }
}

?>