<!--  Data Tables -->
<link rel="stylesheet" href="/assets/js/DataTables/css/jquery.dataTables.min.css" />
<script src="/assets/js/DataTables/js/jquery.dataTables.min.js"></script>

<!--  Autocomplete Combo Box -->
<link rel="stylesheet" href="/assets/css/addon/autocomplete-combobox.css" />
<script src="/assets/js/addon/autocomplete-combobox.js"></script>

<script type = "text/javascript">
function dV(l) {
  return(confirm('Are you sure that you want to delete ' + l + '?'));
}

function openVoIP(peer_name) {
 settings = "width=410, height=223, top=20, left=20, titlebar=no, scrollbars=no, location=no, directories=no, status=no, menubar=no, toolbar=no, resizable=no, dependent=no";
 page_url = 'https://manage.ubixtechnologies.net/web_phone.php?data[peer]=' + peer_name;
 win = window.open(page_url, 'Web Phone', settings);
 win.focus();
}
</script>

<h1>Extensions List</h1>
<hr />
<br />
VoIP Account: <select id="actList"></select> <button id="addExt">Add Extension</button><br /><br />
<br /><br />
<table id="extTable" class="display">
  <thead>
    <tr>
      <td>EXT</td>
      <td>Account</td>
      <td>Caller ID</td>
      <td>Mailbox</td>
      <td>Recording</td>
      <td>Status</td>
      <td>Delete</td>
      <td>Launch</td>
    </tr>
  </thead>
</table>


<div id="dialog-edit-extension" title="Edit Extension">
<h1>Extension Settings</h1>
<hr />
<p class="validateTips">All form fields are required.</p>
<form method="post" id="edit-extension-form">
<input type="hidden" name="data[req]" value="extension_edit" />
<input type="hidden" name="data[ext]" id="e_ext" />
<table class="bTable">
<tr>
  <td>Extension:</td>
  <td id="e_ext_label"></td>
  <td>Secret:</td>
  <td><input type="text" name="data[secret]" id="e_secret"></td>
</tr>
<tr>
  <td>Caller ID Name:</td>
  <td><input type="text" name="data[callerid_name]" id="e_cid_name"></td>
  <td>Caller ID Number:</td>
  <td><input type="text" name="data[callerid_number]" id="e_cid_number"></td>
</tr>
<tr>
  <td>Mailbox:</td>
  <td><select name="data[mailbox]" id="e_mailbox"></select></td>
  <td>Update Voicemail:</td>
  <td><input type="checkbox" name="data[uvm]" value="1" checked></td> 
</tr>
<tr>
  <td>Recording:</td>
  <td><select name="data[ext_recording]" id="e_recording"></select></td>
  <td>Status:</td>
  <td><select name="data[ext_active]" id="e_active"><option value="1">Active</option><option value="0">Disabled</option></select></td>
</tr>
</table>
</form>
</div>

<div id="dialog-add-extension" title="Add Extension">
  <div style="float:left;">
    <h1>New Extension Settings</h1>
    <hr />
    <p class="validateTips">All form fields are required.</p>
    <form method="post" id="add-extension-form">
      <table class="bTable">
<tr>
  <td>Account:</td>
  <td><select id="ae_actList"></select></td>
</tr>
<tr>
  <td>Extension:</td>
  <td><input type="text" name="data[ext]" id="a_ext"> <button id="a_ext_next">Get Next Available</button></td>
</tr>
<tr>
  <td>Secret:</td>
  <td><input type="text" name="data[secret]" id="a_secret"></td>
</tr>
<tr>
  <td>Caller ID:</td>
  <td>Name: <input type="text" name="data[callerid_name]" id="a_cid_name"> Number: <input type="text" name="data[callerid_number]" id="a_cid_number"></td>
</tr>
<tr>
  <td>Mailbox:</td>
  <td><select name="data[mailbox]" id="a_mailbox"></select></td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td><input type="checkbox" name="data[uvm]" value="1" checked> Create New Mailbox</td>
</tr>
      </table>
    </form>
  </div>
  <div style="width:350px;float:right;">
    <h1>Existing Extensions</h1>
    <hr />
    <table id="eExt">
      <thead>
        <tr>
          <th>EXT</th>
          <th>Caller ID</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>

<script src="/assets/js/admin/voip/extension.js"></script>