<!-- timepicker addon -->
<link rel="stylesheet" href="/assets/css/addon/jquery-ui-timepicker-addon.css">
<script src="/assets/js/addon/jquery-ui-timepicker-addon.js"></script>

<!--  DataTables addon -->
<link rel="stylesheet" href="/assets/js/DataTables/css/jquery.dataTables.min.css" />
<script src="/assets/js/DataTables/js/jquery.dataTables.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" src="/assets/js/addon/jquery.transform2d.js"></script>
<script type="text/javascript" src="/assets/js/addon/mod.csstransforms.min.js"></script>
<script type="text/javascript" src="/assets/js/addon/jquery.grab.js"></script>
<script type="text/javascript" src="/assets/js/addon/jquery.jplayer.js"></script>
<link rel="stylesheet" href="/assets/css/addon/circle.player.css" />
<script type="text/javascript" src="/assets/js/addon/circle.player.js"></script>

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

<div id="jquery_jplayer_1" class="cp-jplayer"></div>

<h1>Call Detail Report</h1>
<hr />
<div style="float:left;">
<form>
<table>
<tr>
  <td>Date Range:</td>
  <td><input type="text" value="" id="sDate"></td>
  <td align="center">-</td>
  <td><input type="text" value="" id="eDate"></td>
</tr>
</table>
</form>
</div>
<div style="float:left;padding-left:25px;">
<button id="fData" style="display:none;">Update CDR</button>
</div>
<br />
<table id="cdrTable" class="display">
  <thead>
  <tr>
    <th>Date</th>
    <th>Origination</th>
    <th>Call Path</th>
    <th>Destination</th>
    <th>Duration</th>
    <th>Disposition</th>
    <th>Recording</th>
    <th>Server</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <th style="padding:4px;">Date</th>
    <th style="padding:4px;">Origination</th>
    <th style="padding:4px;">Call Path</th>
    <th style="padding:4px;">Destination</th>
    <th style="padding:4px;">Duration</th>
    <th style="padding:4px;">Disposition</th>
    <th style="padding:4px;">Recording</th>
    <th style="padding:4px;">Server</th>
  </tr>
  </tfoot>
</table>
<br /><br />

<a href="/csv.php?data[start]={START}&data[end]={END}&data[from_ext]={FROM_EXT}&data[to_ext]={TO_EXT}">Download CSV</a>