<script type="text/javascript">
    function toggleEventsTab(divblock) {
        document.getElementById('eventsview_block').style.display = "none";
        document.getElementById('eventsrefresh_block').style.display = "none";

        document.getElementById('eventsview_li').className = "";
        document.getElementById('eventsrefresh_li').className = "";

        document.getElementById(divblock+'_block').style.display = "";
        document.getElementById(divblock+'_li').className = "active";
    }
</script>

<ul class="tabs  tabs-with-summary" id="ticketlisttabs">
    <li class="active" id="eventsview_li">
        <a onclick="javascript:toggleEventsTab('eventsview');" href="#">Events</a>
    </li>
    <li class="" id="eventsrefresh_li">
        <a onclick="javascript:toggleEventsTab('eventsrefresh');" href="#">Refresh Rate</a>
    </li>
</ul>

<div id="eventsview_block" class="table-tab-summary">
    <div style="background-color: rgb(217, 240, 211) ! important; color: rgb(0, 102, 2) ! important;" class="box_long_min">&nbsp;
    <form id='reportdropdown' action="index.php" method='get' style="float:left;">
        <table border='0' cellpadding='2' cellspacing='0'>
            <tr>
                <td align="center" style="padding-left:5px;">
                    <div style="position:relative;top:-1px;">[l]Show[/l]:&nbsp;</div>
                </td>
                <td align="center" style="padding-right:5px;">
                    <div style="position:relative;top:-2px;">
                    <input type="hidden" name="fuse" value="home" />
                    <input type="hidden" name="view" value="ViewEvents" />
                    <select name="eventtype" id="eventtype">
                        <option value="all" {eventtypeAllSelected} >[l]All events[/l]</option>
                        <option value="profileandpackages" {eventtypeProfileandpackagesSelected} >[l]Profile and Packages events[/l]</option>
                        <option value="billing" {eventtypeBillingSelected} >[l]Billing events[/l]</option>
                        <option value="support" {eventtypeSupportSelected} >[l]Support Tickets events[/l]</option>
                        <option value="ticketfeedback" {eventtypeTicketFeedbackSelected} >[l]Ticket feedback[/l]</option>
                        <option value="note" {eventtypeNoteSelected} >[l]Client/Group Note[/l]</option>
                        <option value="emails" {eventtypeEmailSelected} >[l]E-Mail events[/l]</option>
                        <option value="errors" {eventtypeError} >[l]Process Errors[/l]</option>
                    </select>
                    </div>
                </td>
                <td align="center" style="padding-left:10px;">
                    <div style="position:relative;top:-1px;">[l]Start Date[/l]:&nbsp;</div>
                </td>
                <td align="center" style="padding-right:5px;">
                    <div style="position:relative;top:-2px;"><input class='datefield' type='text' size='12'  name="startdate" id="startdate" value='{startDateValue}' /></div>
                </td>
                <td align="center" style="padding-left:10px;">
                    <div style="position:relative;top:-1px;">[l]End Date[/l]:&nbsp;</div>
                </td>
                <td align="center" style="padding-right:10px;">
                    <div style="position:relative;top:-2px;"><input class='datefield' type='text' size='12'  name="enddate" id="enddate" value='{endDateValue}' /></div>
                </td>
                <td align="center" style="padding-left:10px;">
                    <div style="position:relative;top:-2px;"><span id='ExtSearchBtn'></span></div>
                </td>
            </tr>
        </table>
    </form>
    </div>
</div>

<div id="eventsrefresh_block" class="table-tab-summary" style="display:none;">
    <div style="margin-top:5px;float:left;">Refresh grid &nbsp;&nbsp;</div><div style="margin-top:3px;float:left;"><select id="refreshgridrate"><option value="0">Never</option><option value="1">[l]Every 1 Minute[/l]</option><option value="5">[l]Every 5 Minute[/l]</option><option value="15">[l]Every 15 Minute[/l]</option></select></div>
</div>


<script type="text/javascript">
    startDateValue = '{startDateValue}';
    endDateValue = '{endDateValue}';
</script>
<br/>
<span class="grid-meta" id="eventlistlabel"></span>
<div class="blue-box" style="clear:both;padding:4px !important;">
    <table class="automation">
        <tbody>
            <tr>
                <td>[l]Event List[/l]</td>
            </tr>
        </tbody>
    </table>
</div>
<div id="event-grid"></div>