<?php
    $baseUrl = Yii::app()->theme->baseUrl; 
    $cs = Yii::app()->getClientScript();
    Yii::app()->clientScript->registerCoreScript('jquery');
?>


<div class="panel panel-primary">
 
  <div class="panel-body"> 
<center>
<?php
echo CHtml::link("<span class='glyphicon glyphicon-earphone' aria-hidden='true'></span> PANGGIL ANTRIAN",array(Yii::app()->controller->id.'/Panggil'),array('class'=>'btn btn-success btn-lg'));
?>

<?php
echo CHtml::link("<span class='glyphicon glyphicon-transfer' aria-hidden='true'></span> REFRESH PAGE",array(Yii::app()->controller->id.'/admin'),array('class'=>'btn btn-warning btn-lg'));
?>



</center>
<table class="table table-bordered table-striped table-hover" >
<thead>
<th width="20px">NOMER</th>

<th width="">JENIS ANTRIAN</th>
<th width="120px">STATUS</th>

<th width="20px;">AKSI</th>
</thead>
<tbody>
<?php
$i = 0;
foreach($data  as $row):
$i++;
 ?>
<tr>


<td><?php echo $row->nomor ;?></td>
<td>
	<?php
if(!empty($row->rel_jenis->nama_loket))
{echo $row->rel_jenis->nama_loket;}
?>
</td>
<td>
<?php
if($row->status=="waiting")
{
 echo "<span class='label label-danger'>Waiting......</span>";
}
else
{
	
 echo "<span class='label label-success'>Finish......</span>";
}
?>
	
</td>



<td>
<?php
echo CHtml::link("<span class='glyphicon glyphicon-earphone' aria-hidden='true'></span> Panggil Ulang",array(Yii::app()->controller->id.'/Panggilulang','id'=>$row->id,'id_jenis'=>$row->id_jenis,'nomor'=>$row->nomor),array('class'=>'btn btn-info btn-xs'));
?>
</td>
</tr>
<?php endforeach ?>
</tbody>
</table>



<div style="float: right;">
<?php
$this->widget('CLinkPager', array(
'pages'=>$halaman,
));
?>
</div>

</div>
</div>





<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width" />


  </head>

  <body onload="speak();">
   

    <form>
      <label for="txt">Enter text</label>
      <input id="txt" type="text" class="txt"  value="<?php echo $text;?>" />
      <div>
        <label for="rate"></label
        ><input type="hidden" min="0.5" max="2" value="1" step="0.1" id="rate" />
        <div class="rate-value"></div>
        <div class="clearfix"></div>
      </div>
      <div>
        <label for="pitch"></label
        ><input type="hidden" min="0" max="2" value="1" step="0.1" id="pitch" />
        <div class="pitch-value"></div>
        <div class="clearfix"></div>
      </div>
      <select></select>
     <!-- <div class="controls">
        <button id="play" type="submit">Play</button>
      </div>-->
    </form>

  </body>
</html>


<script type="text/javascript">
  const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector(".txt");
const voiceSelect = document.querySelector("select");

const pitch = document.querySelector("#pitch");
const pitchValue = document.querySelector(".pitch-value");
const rate = document.querySelector("#rate");
const rateValue = document.querySelector(".rate-value");

let voices = [];

function populateVoiceList() {
  voices = synth.getVoices().sort(function (a, b) {
    const aname = a.name.toUpperCase();
    const bname = b.name.toUpperCase();

    if (aname < bname) {
      return -1;
    } else if (aname == bname) {
      return 0;
    } else {
      return +1;
    }
  });
  const selectedIndex =
    voiceSelect.selectedIndex < 0 ? 0 : voiceSelect.selectedIndex;
  voiceSelect.innerHTML = "";

  for (let i = 0; i < voices.length; i++) {
    const option = document.createElement("option");
    option.textContent = `${voices[i].name} (${voices[i].lang})`;

    if (voices[i].default) {
      option.textContent += " -- DEFAULT";
    }

    option.setAttribute("data-lang", voices[i].lang);
    option.setAttribute("data-name", voices[i].name);
    voiceSelect.appendChild(option);
  }
  voiceSelect.selectedIndex = selectedIndex;
}

populateVoiceList();

if (speechSynthesis.onvoiceschanged !== undefined) {
  speechSynthesis.onvoiceschanged = populateVoiceList;
}

function speak() {
  if (synth.speaking) {
    console.error("speechSynthesis.speaking");
    return;
  }

  if (inputTxt.value !== "") {
    const utterThis = new SpeechSynthesisUtterance(inputTxt.value);

    utterThis.onend = function (event) {
      console.log("SpeechSynthesisUtterance.onend");
    };

    utterThis.onerror = function (event) {
      console.error("SpeechSynthesisUtterance.onerror");
    };

    const selectedOption =
      voiceSelect.selectedOptions[0].getAttribute("data-name");
    //utterThis.lang = 'Microsoft Gadis Online (Natural) - Indonesian (Indonesia)';
    for (let i = 0; i < voices.length; i++) {
      if (voices[i].name === selectedOption) {
        utterThis.voice = voices[i];
        break;
      }
    }
    utterThis.pitch = pitch.value;
    utterThis.rate = rate.value;
    synth.speak(utterThis);
  }
}

inputForm.onsubmit = function (event) {
  event.preventDefault();

  speak();

  inputTxt.blur();
};

pitch.onchange = function () {
  pitchValue.textContent = pitch.value;
};

rate.onchange = function () {
  rateValue.textContent = rate.value;
};

voiceSelect.onchange = function () {
  speak();
};
</script>