<!-- 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/mixing/index.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 Mixed</th>
    <th>Name</th>
    <th>Ingredients</th>
    <th>New Lot #</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <th style="padding:4px;">Date Mixed</th>
    <th style="padding:4px;">Name</th>
    <th style="padding:4px;">Ingredients</th>
    <th style="padding:4px;">New Lot #</th>
  </tr>
  </tfoot>
</table>