<!--  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>

<!-- jumpToData -->
<script src="https://cdn.datatables.net/plug-ins/1.10.11/api/page.jumpToData().js"></script>

<h1>Seat Assignements</h1>
<hr />
<!--
<button id="addExt">Add New Seat</button>
<br />
-->
<br />
<table id="seatTable" class="display">
  <thead>
    <tr>
      <td>S</td>
      <td>Seat ID</td>
      <td>User</td>
      <td>Device</td>
      <td>Extensions</td>
      <td>Plan</td>
      <td>Status</td>
    </tr>
  </thead>
</table>

<div id="dialog-edit-seat" title="Edit Seat">
<h1>Seat Settings</h1>
<hr />
<p class="validateTips">All form fields are required.</p>
<form method="post" id="edit-seat-form">
<input type="hidden" name="data[req]" value="seat_edit" />
<input type="hidden" name="data[seat]" id="e_seat" />
<table class="bTable">
<tr>
  <td>Seat ID:</td>
  <td id="e_seat_label"></td>
</tr>
<tr>
  <td>Status:</td>
  <td><select name="data[seat_active]" id="e_active"><option value="1">Active</option><option value="0">Disabled</option></select></td>
</tr>
<tr>
  <td>User:</td>
  <td><select name="data[user]" id="e_user"></select> <button id="addUser">New</button></td>
</tr>
<tr>
  <td>Device:</td>
  <td><select name="data[device]" id="e_device"></select></td>
</tr>
</table>
</form>
</div>

<div id="dialog-add-seat" title="Add Seat">
<div style="float:left;">
<h1>Seat Settings</h1>
<hr />
<p class="validateTips">All form fields are required.</p>
<form method="post" id="add-seat-form">
<input type="hidden" name="data[uid]" id="a_ext">
<table class="bTable">
<tr>
  <td>Account:</td>
  <td><select id="ae_actList"></select></td>
  <td>Secret:</td>
  <td><input type="text" name="data[secret]" id="a_secret"></td>
<tr>
  <td>Extension:</td>
  <td id="a_ext_label"></td>
  <td colspan="2">&nbsp;</td>
</tr>
<tr>
  <td>Caller ID Name:</td>
  <td><input type="text" name="data[callerid_name]" id="a_cid_name"></td>
  <td>Caller ID Number:</td>
  <td><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>
  <td>Create New Mailbox:</td>
  <td><input type="checkbox" name="data[uvm]" value="1" checked></td> 
</tr>
</table>
</form>
</div>
<div style="width:250px;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>

<!-- Quick Create -->
<div id="quickCreate" title="Quick Creat">
<h1>Quick Create</h1>
</div>

<script src="/assets/js/user/voip/seats.js"></script>