<?php 

class AddonSelLiv  {
  private $scope;
  private $label;
  private $tblRows;
  private $control;
  private $prompt;

  public function __construct($entry) {

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

      if (isset($entry->entryRows)) 
        $this->entryRows = $entry->entryRows; 
      else 
        $this->entryRows = [];

      if (isset($entry->inpPrompt)) 
        $this->inpPrompt = "placeholder='$entry->inpPrompt'"; 
      else 
        $this->inpPrompt = "";

      if (isset($entry->readOnly))
        $this->readOnly = $entry->readOnly;
      else 
        $this->readOnly = "";

      $selections = "";
      foreach ($entry->options as $option) {
        $selections .= " \
            <option value='$option->id' $selected>$option->text</option> \
        ";
      }
    
      if ($this->leftSide == 'select') {
        $this->addonRow  = " \
      <tr id='add$this->scope'> \
        <td> \
          <select id='sel$this->scope'> \
            $selections \
          </select> \
        </td> \
        <td> \
          <input id='pat$this->scope' type='text' class='$this->iterator' \
              name='$this->scope' $this->inpPrompt \
              onkeyup='res$this->scope (this.value)'> \
          <div id='hint$this->scope' style='position:relative;'></div> \
        </td> \
      </tr> \
          ";
      }
      else {
        $this->addonRow  = " \
      <tr id='add$this->scope'> \
        <td> \
          <input id='pat$this->scope' type='text' class='$this->iterator' \
              name='$this->scope' $this->livPrompt' \
              onkeyup='res$this->scope (this.value)'> \
          <div id='hint$this->scope' style='position:relative;'></div> \
          <input type='text' $this->inpPrompt> \
        </td> \
        <td> \
          <select id='sel$this->scope'> \
            $selections \
          </select> \
        </td> \
      </tr> \
          ";
      } 
      $this->addRow = str_replace ("\\", "", $this->addonRow);
    }    
  }
  
  public function outputLayout() {


    $layout = "
<label for='$this->scope' style='margin-bottom:0px;'>$this->label</label><br>
<div id='outer-container'>
  <div id='scrollable' style='height:" . $this->size . "em;'>
    <table class='table table-condensed'>
      <tbody id='frm$this->scope'>
    ";    
    
    foreach ($this->entryRows as $row) {
      $select = "
          <td>
            <select style='margin:0px;height:28px;'> 
      "; 
      $select .= "
              <option value='0'>$this->selPrompt</option>
      ";
      if ($this->addOption != '')
        $select .= "
              <option value='1'>$this->addOption</option>
        ";

      foreach ($this->options as $option) {
        $selected = "";
        if ($option->id == $row->selValue)
          $selected = "selected";
          
        $select .= "
              <option value='$option->id' $selected>$option->descr</option>
        ";
      }
      if ($this->delOption != '')
        $select .= "
              <option value='-1'>$this->delOption</option>
        ";
      $select .= "
            </select> 
          </td>
      ";

      $input = "
          <td> 
            <input type='text' value='$row->inpValue' $this->inpPrompt> 
          </td> 
      ";
 
      $layout .= "
        <tr id=$row->id class='addon$this->scope'>
      ";
      if ($this->leftSide == 'select')
        $layout .= "$select$input";
      else     
        $layout .= "$input$select";
    
      $layout .= "
        </tr>
      ";

    }
                      
   $layout .= "
      </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 = "

var selectId$this->scope = 0;
var addonRow$this->scope = \"$this->addonRow\";

$(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();
});  

function sel$this->scope (frmValue, frmText) {
//alert (frmValue + ' ' + frmText);
  $('#add$this->scope').prop('class', 'addon$this->scope');
  $('#add$this->scope').prop('id', frmValue);

  $('#pat$this->scope').val(frmText);
  $('#pat$this->scope').removeAttr('onkeyup');
  $('#pat$this->scope').prop('readonly', true);
  $('#pat$this->scope').prop('id', '');

  $('#sel$this->scope').prop('id', '');
  $('#hint$this->scope').remove();
  $('#frm$this->scope').append (addonRow$this->scope);
}

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

  if (key == 'selectId') {
//alert ('$this->scope:' + selectId$this->scope);
    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 id;
  var card_id;
  var text;
  var scope = '$this->scope';

  for (var i=0; i<rows.length; i++) {
    var id = rows[i].id
    var addValue = rows[i].addValue;
    var inpValue = rows[i].inpValue;

    $('#frm$this->scope').append (addonRow$this->scope);
    $('#add$this->scope').prop('class', 'addon$this->scope');
    $('#add$this->scope').prop('id', id);

    $('#pat$this->scope').val(inpValue);
    $('#pat$this->scope').removeAttr('onkeyup');
    $('#pat$this->scope').prop('readonly', true);
    $('#pat$this->scope').prop('id', '');

    $('#sel$this->scope option[value=' + addValue +']').prop('selected', true);
    $('#sel$this->scope').prop('id', '');
    $('#hint$this->scope').remove();

  }  
  $('#frm$this->scope').append (addonRow$this->scope);
} 

function get$this->scope (selectId) {
  document.getElementById ('frm$this->scope').innerHTML = '';
  
  if (selectId > 0) {
    var params = 'selid=' + 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)
        gen$this->scope(response);
      }
    }  
    xhr.send(params);
  }    
}

function put$this->scope (selid) {
  var comma  = '';
  var inpids = '';
  var addids = '';

  $('.addon$this->scope').each(function() {
    inpids += comma + $(this).prop('id');
    addids += comma + $(this).find('select option:selected').val();
    comma = ',';
  });
  
  var params = 'selid=' + selectId$this->scope + '&' + 
               'inpids=' + inpids + '&' + 'addids=' + addids;

  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;
  }
}

?>