<div id="home-wrapper"style="padding-top: 10px;<%= (App.rtl ? 'direction:rtl' : '') %>">
    <div class="row" style="padding-left: 16px;">
        <h3 style="padding-left: 25px" id="dashboardHeader">{Literal}Dashboard{/Literal}</h3>
        <h3 style="padding-left: 25px; display: none;" id="byHourHeader">{Literal}Sales by Hour{/Literal}</h3>
        <h3 style="padding-left: 25px; display: none;" id="byUserHeader">{Literal}Sales by User{/Literal}</h3>
        <h3 style="padding-left: 25px; display: none;" id="byTypeHeader">{Literal}Sales by Item Type{/Literal}</h3>
        <h3 style="padding-left: 25px; display: none;" id="byCustomerHeader">{Literal}Sales by Customer{/Literal}</h3>
        <h3 style="padding-left: 25px; display: none;" id="byCategoryHeader">{Literal}Sales by Item Category{/Literal}</h3>
        <h3 style="padding-left: 25px; display: none;" id="resetReportHeader">{Literal}Reset Report{/Literal}</h3>
        <h3 style="padding-left: 25px; display: none;" id="gratuityReportHeader">{Literal}Gratuity Report{/Literal}</h3>
        <h3 style="padding-left: 25px; display: none;" id="employeeHourHeader">{Literal}Employee Hours Report{/Literal}</h3>
        <h3 style="padding-left: 25px; display: none;" id="cloudReportHeader">{Literal}Cloud Reports{/Literal}</h3>
    </div>
    <div class="row">
        <div class="col s12">
            <div class="col s12 m3">
                <i id="reportType" class="small material-icons ap-blue-text" style="vertical-align: middle;">sort</i>
                <div class="input-field" style="display: inline-block; width: 85%;">
                    <select id="report-type-filter" data-filter-class="conditional-report-filter">
                        <option selected value="zOutSummary">{Literal}Summary Report{/Literal}</option>
                        <%if(App.serverInfo.hasCloudReporting){%>
                            <option value="zOutCloudSummary">{Literal}Cloud Summary Report{/Literal}</option>
                            <option value="cloudSalesByHour">{Literal}Cloud Sales By Hour{/Literal}</option>
                            <option value="cloudSalesByItem">{Literal}Cloud Sales By Item Types{/Literal}</option>
                        <%}%>
                        <option value="byHour">{Literal}By Hour{/Literal}</option>
                        <option value="byType">{Literal}By Item Type{/Literal}</option>
                        <option value="byUser">{Literal}By User{/Literal}</option>
                        <option value="customerSummary">{Literal}By Customer Summary{/Literal}</option>
                        <option value="itemCategory">{Literal}By Item Category{/Literal}</option>
                        <option value="resetReport">{Literal}Reset Report{/Literal}</option>
                        <% if (App.serverInfo.isFoodService) {%>
                            <option value="gratuityReport">{Literal}Gratuity Report{/Literal}</option>
                        <% } %>
                        <% if (App.serverInfo.hasAccuShift) {%>
                            <option value="employeeHour">{Literal}Employee Hour Report{/Literal}</option>
                        <% } %>
                    </select>
                    <label>{Literal}Report Filter{/Literal}</label>
                </div>
            </div>
            <div id="sequenceSearch" class="col s12 m3" style="display:none">
                <div class="input-field" >
                    <a style="margin-top:12px" href="#sequence-modal" id="sequence-modal-trigger" class="waves-effect waves-light btn-small modal-trigger ap-blue" data-filter-class="conditional-report-filter" data-filter="sequence"><i class="material-icons left">filter_list</i>{Literal}Change Sequence{/Literal}</a>
                </div>
            </div>
            <div id="dateRangeSelector" class="col s12 m3">
                <i id="dateRangeIcon" class="small material-icons ap-blue-text" style="vertical-align: middle;">date_range</i>
                <div class="input-field" style="display: inline-block; width: 85%;">
                    <select id="date-range-preset" data-filter-class="conditional-report-filter" data-filter="timeRange">
                        <option value="custom">{Literal}Custom{/Literal}</option>
                        <option selected value="today">{Literal}Today{/Literal}</option>
                        <option value="yesterday">{Literal}Yesterday{/Literal}</option>
                        <option value="previousWeek">{Literal}Last Week{/Literal}</option>
                        <option value="thisWeek">{Literal}This Week{/Literal}</option>
                        <option value="previousMonth">{Literal}Last Month{/Literal}</option>
                        <option value="thisMonth">{Literal}This Month{/Literal}</option>
                        <option value="previous3Months">{Literal}Last Quarter{/Literal}</option>
                        <option value="this3Months">{Literal}This Quarter{/Literal}</option>
                    </select>
                    <label><i> {Literal}Date Range Preset{/Literal} </i><i id="dateRangeDisplay"></i></label>
                </div>
            </div>
            
            <div id="tillSelector" class="col s12 m3">
                <i id="computerIcon" class="small material-icons ap-blue-text" style="vertical-align: middle;">computer</i>
                <div class="input-field" style="display: inline-block; width: 85%;">
                    <select id="till-dropdown" required>
                        <option value="all">{Literal}All Tills{/Literal}</option>
                        <% _.each(tills, function(till) { %>
                        <option value="<%= till.id %>"><%= till.name %></option>
                        <% }); %>
                    </select>
                    <label>{Literal}Select Till{/Literal}</label>
                </div>
            </div>
            <%if(App.serverInfo.hasCloudReporting){%>
                <div>
                <div id="locationSelector" class="col s12 m3" style="display: none;">
                    <a id="locationIcon" all="true" class="waves-effect waves-light "><i  class="small material-icons ap-blue-text" style="vertical-align: middle;">location_on</i></a>
                    <div class="input-field" style="display: inline-block; width: 85%;">
                        <select multiple id="location-dropdown" required>
                            <!-- <option id="selectAllLocations" value="all">{Literal}All Locations{/Literal}</option> -->
                        </select>
                        <label>{Literal}Select Location{/Literal}</label>
                    </div>
                </div>
            <%}%>
            <div class="col s12 m2" style="text-align: right;">
                <div class="input-field" >
                <a href="javascript:void(0)" class="waves-effect waves-light dropdown-trigger"  data-target='exportDropDown' style="color: black; padding-top: 6%; display: block;">
                    <i class="small material-icons" style="vertical-align: middle; color: #2c5487;">open_in_new</i>
                    <sapn>{Literal}Export Report{/Literal}</sapn>
                </a>
                <ul id='exportDropDown' class='dropdown-content'>
                    <li id="exportToExcel"><a href="javascript:void(0)">{Literal}Export to Excel{/Literal}</a></li>
                    <li id="emailReport"><a href="javascript:void(0)">{Literal}Email Report{/Literal}</a></li>
                  </ul>                
            </div>
        </div>
    </div>
    </div>
    <div class="row" style="text-align: center">
        <div class="preloader-wrapper big center signature-modal-trigger-preloader">
            <div class="spinner-layer spinner-blue-only">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div>
                <div class="gap-patch">
                    <div class="circle"></div>
                </div>
                <div class="circle-clipper right">
                    <div class="circle"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col s12" id="initialGraphs">
            <span class="col s12 m4">
                <div class="card white graphCard" style="height: 150px; border-top: solid #3754a0 4px;">
                    <div class="row" style= "margin-left: 1.25rem;">
                        <span style="display: inline-block; line-height: 32px; font-size: 1.5em;" ><u>{Literal}Sales Revenue{/Literal}</u>
                            <span class = "firstDrop" style="display: none;">
                                <a href="javascript:void(0)"><span class="material-icons" style="padding-left: 5px; color: gray; position: relative; top: 5px;">keyboard_arrow_down</span></a>
                                <ul class="firstDrop-content">
                                    <li><a href="javascript:void(0)">{Literal}Revenue{/Literal}</a></li>
                                    <li><a href="javascript:void(0)">{Literal}Open orders{/Literal}</a></li>
                                    <li><a href="javascript:void(0)">{Literal}Returns{/Literal}</a></li>
                                    <li><a href="javascript:void(0)">{Literal}Discounts{/Literal}</a></li>
                                </ul>
                            </span>
                            <input id="totalSales" type="text" disabled="disabled" style="color: black; padding-top: 10px; font-size: 1.5em; border-bottom: none" value="">
                        </span>
                    </div>
                    <div class="row">
                        <div class="chart-content" style="display: none; color: black;">
                            <div id="sales-line-chart-wrapper">
                                <div id="sales-line-chart" style="color:black;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="border-bottom: .5px solid gray;">
                    <a href="javascript:void(0)" id="firstSeeMore" class="waves-effect" style="display: flex; font-size: 1.25em; color: black;">{Literal}Sales Details{/Literal}</a>
                    <a class="dropDownArrowHome" style="float: right" href="javascript:void(0)"><span class="material-icons" style="color: gray; position: relative; top: -20px;">keyboard_arrow_down</span></a>
                </div>
                <div id="emailSummaryTable">
                    <table id="itemTypeTable" class="table highlight" style="display: none;">
                        <thead>
                            <tr>
                                <th>{Literal}Item Type{/Literal}</th>
                                <th>{Literal}Qty{/Literal}</th>
                                <th style="float:right">{Literal}Total Sales{/Literal}</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>

                    <hr id="itemTypeTableHr" style="display: none;" size=2>


                    
                    <table id="discountTable" class="table highlight" style="display: none;">
                        <thead>
                            <tr>
                                <th>{Literal}Discounts{/Literal}</th>
                                <th style="float:right">{Literal}Total Sales{/Literal}</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                <td>{Literal}Comp Total{/Literal}</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>{Literal}Sales Discount Total{/Literal}</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>{Literal}Price Change Total{/Literal}</td>
                                <td></td>
                            </tr>
                            <tr><td><br></td></tr>
                            <tr>
                                <td>{Literal}Discounts Total{/Literal}</td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </span>

            <span id="transactionCountContainer" class="col s12 m4">
                <div class="card white graphCard" style="height: 150px; border-top: solid #3754a0 4px;">
                    <div class="row" style= "margin-left: 1.25rem;">
                        <span style="display: inline-block; line-height: 32px; font-size: 1.5em;" ><u>{Literal}Transactions{/Literal}</u>
                            <input id="transactionCount" type="text" disabled="disabled" style="color: black; padding-top: 10px; font-size: 1.5em; border-bottom: none" value="">
                        </span>
                    </div>
                    <div class="row">
                        <div class="chart-content" style="display: none">
                            <div id="sales-bar-chart">

                            </div>
                        </div>
                    </div>
                </div>
                <div style="border-bottom: .5px solid gray;">
                    <a href="javascript:void(0)" id="secondSeeMore"  class="waves-effect"  style="display: flex; font-size: 1.25em; color: black;">{Literal}Transaction Details{/Literal}</a>
                    <a class="dropDownArrowHome" style="float: right" href="javascript:void(0)"><span class="material-icons" style="color: gray; position: relative; top: -20px;">keyboard_arrow_down</span></a>
                </div>
                <div id="transactionEmail">
                    <table id="secondGraphTable" class="table highlight" style="display: none;">
                        <thead>
                            <tr>
                                <th>{Literal}Transaction{/Literal}</th>
                                <th style="float:right">{Literal}Count{/Literal}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{Literal}No Sales Count{/Literal}</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>{Literal}Credit Transactions{/Literal}</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>{Literal}Debit Transactions{/Literal}</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>{Literal}Cash Transactions{/Literal} </td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </span>
            <span id="locationsSummaryContainer" class="col s12 m4" style="display: none">
                <div class="card white graphCard" style="height: 150px; border-top: solid #3754a0 4px;">
                    <div class="row" style= "margin-left: 1.25rem;">
                        <span style="display: inline-block; line-height: 32px; font-size: 1.5em;" ><u>{Literal}Total By location{/Literal}</u>
                        </span>
                    </div>
                    <div class="">
                        <div class="chart-content" style="display: none">
                            <div id="locations-sales-bar-chart">

                            </div>
                        </div>
                    </div>
                </div>
                <div style="border-bottom: .5px solid gray;">
                    <a href="javascript:void(0)" id="locationsSeeMore"  class="waves-effect"  style="display: flex; font-size: 1.25em; color: black;">{Literal}Total By location Details{/Literal}</a>
                    <a class="dropDownArrowHome" style="float: right" href="javascript:void(0)"><span class="material-icons" style="color: gray; position: relative; top: -20px;">keyboard_arrow_down</span></a>
                </div>
                <div id="transactionEmail">
                    <table id="locationsGraphTable" class="table highlight" style="display: none;">
                        <thead>
                            <tr>
                                <th>{Literal}Location{/Literal}</th>
                                <th style="float:right">{Literal}Total{/Literal}</th>
                            </tr>
                        </thead>
                        <tbody>
                           
                        </tbody>
                    </table>
                </div>
            </span>

            <span class="col s12 m4">
                <div class="card white graphCard" style="height: 150px; border-top: solid #3754a0 4px;">
                    <div class="row" style= "margin-left: 1.25rem;">
                        <span style="display: inline-block; line-height: 32px; font-size: 1.5em;" ><u>{Literal}Top 5 Tender Types{/Literal}</u>   
                            <input id="totalTender" type="text" disabled="disabled" style="color: black; padding-top: 10px; font-size: 1.5em; border-bottom: none" value="">
                        </span>
                    </div>
                    <div class="row">
                        <div class="chart-content" style="display: none">
                            <div id="sales-donut-chart">

                            </div> 
                        </div>
                    </div>
                </div>
                <div style="border-bottom: .5px solid gray;">
                    <a href="javascript:void(0)" id="thirdSeeMore"  class="waves-effect"  style="display: flex; font-size: 1.25em; color: black;">{Literal}Tender Details{/Literal}</a>
                    <a class="dropDownArrowHome" style="float: right" href="javascript:void(0)"><span class="material-icons" style="color: gray; position: relative; top: -20px;">keyboard_arrow_down</span></a>
                </div>
                <div id="tenderEmail">  
                    <table id="thirdGraphTable" class="table highlight" style="display: none;">
                        <thead>
                            <tr>
                                <th>{Literal}Tender{/Literal}</th>
                                <th style="float:right">{Literal}Amount{/Literal}</th>
                            </tr>
                        </thead>
                        <tbody id="tenderGraphTable">
                            <tr>
                                <td>{Literal}Starting Cash{/Literal}</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>{Literal}Total Cash{/Literal}</td>
                                <td></td>
                            </tr>
                            <tr><td><br></td></tr>
                            
                            <tr>
                                <td>{Literal}Payments On Account{/Literal}</td>
                                <td><input id="paymentsOnAccount" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>
                            <tr>
                                <td>{Literal}Cash Paid Out{/Literal}</td>
                                <td><input id="cashPaidOut" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>
                            <tr>
                                <td>{Literal}Net Cash{/Literal}</td>
                                <td><input id="netCash" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>
                        </tbody>
                    </table>
                    <hr id="taxTableHr" style="display: none;" size=2>  
                    <table id="taxTable" class="table highlight" style="display: none;">
                        <thead>
                            <tr>
                                <th>{Literal}Tax Authority{/Literal}</th>
                                <th style="float:right">{Literal}Amount{/Literal}</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                <td>{Literal}Taxable{/Literal}</td> 
                                <td><input id="taxable" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>
                            <tr>
                                <td>{Literal}Nontaxable{/Literal}</td>
                                <td><input id="nonTaxable" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>
                            <tr>
                                <td>{Literal}Tax Total{/Literal}</td>
                                <td><input id="taxTotal" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>
                            <tr><td><br></td></tr>
                            <tr>
                                <td>{Literal}Auto Gratuity Total{/Literal}</td>
                                <td><input id="autoGratTotal" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>
                            <tr>
                                <td>{Literal}Customer Payment Total{/Literal}</td>
                                <td><input id="customerPayTotal" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>
                            <tr><td><br></td></tr>
                            <tr>
                                <td>{Literal}Total{/Literal}</td>
                                <td><input id="totalTaxAuthority" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </span>
        </div>

        <div class="col s12 m10" id="compReasonGraph" style="display: none; color: black; align-content: center; padding-left: 3.5%;">
            <div class="card white graphCard" style="height: 150px; border-top: solid #3754a0 4px;">
                <div class="row" style= "margin-left: 1.25rem;">
                    <span style="display: inline-block; line-height: 32px; font-size: 1.5em;" ><u>{Literal}Total Transactions Comped{/Literal}</u>
                        <input id="totalCompReasons" type="text" disabled="disabled" style="color: black; padding-top: 10px; font-size: 1.5em; border-bottom: none" value="">
                    </span>
                </div>
                <div class="row">
                    <div class="chart-content" style="display: none; color: black;">
                        <div id="comps-bar-chart-wrapper">
                            <div id="comps-bar-chart" style="color:black;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="border-bottom: .5px solid gray; width: 25%">
                <a href="javascript:void(0)" id="compSeeMore" class="waves-effect" style="display: flex; font-size: 1.25em; color: black;">{Literal}Comp Details{/Literal}</a>
                <a class="dropDownArrowHome" style="float: right" href="javascript:void(0)"><span class="material-icons" style="color: gray; position: relative; top: -20px;">keyboard_arrow_down</span></a>
            </div>
            <div style="width: 25%;">
                <table id="compReasonTable" class="table highlight" style="display: none;">
                    <thead>
                        <tr>
                            <th>{Literal}Comp Reason{/Literal}</th>
                            <th style="float:right">{Literal}Total{/Literal}</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div>
            <span id="locationsSalesContainer" class="col s12 m4" style="display: none;margin-left: 20px;">
                <div class="card white graphCard" style="height: 150px; border-top: solid #3754a0 4px;">
                    <div class="row" style= "margin-left: 1.25rem;">
                        <span style="display: inline-block; line-height: 32px; font-size: 1.5em;" ><u>{Literal}Sales By location{/Literal}</u>
                        </span>
                    </div>
                    <div class="">
                        <div class="chart-content" style="display: none">
                            <div id="locations-sales2-bar-chart">
        
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div style="border-bottom: .5px solid gray;">
                    <a href="javascript:void(0)" id="locationsSeeMore"  class="waves-effect"  style="display: flex; font-size: 1.25em; color: black;">{Literal}Total By location Details{/Literal}</a>
                    <a class="dropDownArrowHome" style="float: right" href="javascript:void(0)"><span class="material-icons" style="color: gray; position: relative; top: -20px;">keyboard_arrow_down</span></a>
                </div>
                <div id="transactionEmail">
                    <table id="locationsGraphTable" class="table highlight" style="display: none;">
                        <thead>
                            <tr>
                                <th>{Literal}Location{/Literal}</th>
                                <th style="float:right">{Literal}Total{/Literal}</th>
                            </tr>
                        </thead>
                        <tbody>
                           
                        </tbody>
                    </table>
                </div> -->
            </span>
        </div>
        <div  id="salesByHourGraph" class="row" style="display: none; color: black; align-content: center;padding-left: 20px;"">
            <div class="col s12 m12">
            <div class="card white graphCard" style="height: 150px; border-top: solid #3754a0 4px;">
                <div class="row" style= "margin-left: 1.25rem;">
                    <span style="display: inline-block; line-height: 32px; font-size: 1.5em;" ><u>{Literal}Top Sales Per Hour{/Literal}</u>
                        <span class = "firstDrop">
                            <a href="javascript:void(0)"><span class="material-icons" style="padding-left: 5px; color: gray; position: relative; top: 5px;">keyboard_arrow_down</span></a>
                            <ul class="firstDrop-content">
                                <li><a href="javascript:void(0)" id="byHourRevenue">{Literal}Revenue{/Literal}</a></li>
                                <li><a href="javascript:void(0)" id="byHourQuantity">{Literal}Transactions Count{/Literal}</a></li>
                            </ul>
                        </span>
                        <input id="totalSalesByHour" type="text" disabled="disabled" style="color: black; padding-top: 10px; font-size: 1.5em; border-bottom: none" value="">
                    </span>
                </div>
                <div class="row">
                    <div class="chart-content" style="display: none; color: black;">
                        <div id="sales-by-hour-bar-chart-wrapper">
                            <div id="sales-by-hour-bar-chart" style="color:black;"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="chart-content" style="display: none; color: black;">
                        <div id="sales-by-hour-quantity-bar-chart-wrapper" style="display: none;">
                            <div id="sales-by-hour-quantity-bar-chart" style="color:black;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="border-bottom: .5px solid gray; width: 50%">
                <a href="javascript:void(0)" id="salesHourSeeMore" class="waves-effect" style="display: flex; font-size: 1.25em; color: black;">{Literal}Sales by Hour Details{/Literal}</a>
                <a class="dropDownArrowHome" style="float: right" href="javascript:void(0)"><span class="material-icons" style="color: gray; position: relative; top: -20px;">keyboard_arrow_down</span></a>
            </div>
            <div id="emailSalesHourTable" style="width: 50%;">
                <table id="salesHourTable" class="table highlight" style="display: none;">
                </table>
            </div>
        </div>
        </div>

        <div class="col s12 m12" id="employeeHourGraph" style="display: none; color: black; align-content: center; padding-left: 3.5%;">
            <div class="card white graphCard" style="height: 150px; border-top: solid #3754a0 4px;">
                <div class="row" style= "margin-left: 1.25rem;">
                    <span style="display: inline-block; line-height: 32px; font-size: 1.5em;" ><u>{Literal}Employee Hours{/Literal}</u>
                        <input id="totalEmployeeHours" type="text" disabled="disabled" style="color: black; padding-top: 10px; font-size: 1.5em; border-bottom: none" value="">
                    </span>
                </div>
                <div class="row">
                    <div class="chart-content" style="display: none; color: black;">
                        <div id="employee-hour-bar-chart-wrapper">
                            <div id="employee-hour-bar-chart" style="color:black;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="border-bottom: .5px solid gray; width: 50%">
                <a href="javascript:void(0)" id="employeeHourSeeMore" class="waves-effect" style="display: flex; font-size: 1.25em; color: black;">{Literal}Employee Hours Details{/Literal}</a>
                <a class="dropDownArrowHome" style="float: right" href="javascript:void(0)"><span class="material-icons" style="color: gray; position: relative; top: -20px;">keyboard_arrow_down</span></a>
            </div>
            <div id="emailEmployeeHoursTable" style="width: 50%;">
                <table id="employeeHoursTable" class="table highlight" style="display: none;">
                    <thead>
                        <tr>
                            <th>{Literal}Day{/Literal}</th>
                            <th>{Literal}Hour{/Literal}</th>
                            <th>{Literal}Total{/Literal}</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="col s12 m12" id="salesByCategory" style="display: none; color: black; align-content: center; padding-left: 3.5%;">
            <div class="card white graphCard" style="height: 150px; border-top: solid #3754a0 4px;">
                <div class="row" style= "margin-left: 1.25rem;">
                    <span style="display: inline-block; line-height: 32px; font-size: 1.5em;" ><u>{Literal}Top 10 Item Categories{/Literal}</u>
                        <input id="totalSalesCategory" type="text" disabled="disabled" style="color: black; padding-top: 10px; font-size: 1.5em; border-bottom: none" value="">
                    </span>
                </div>
                <div class="row">
                    <div class="chart-content" style="display: none; color: black;">
                        <div id="sales-by-category-pie-chart-wrapper">
                            <div id="sales-by-category-pie-chart" style="color:black;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="border-bottom: .5px solid gray; width: 50%">
                <a href="javascript:void(0)" id="salesByCategorySeeMore" class="waves-effect" style="display: flex; font-size: 1.25em; color: black;">{Literal}Sales by Category Details{/Literal}</a>
                <a class="dropDownArrowHome" style="float: right" href="javascript:void(0)"><span class="material-icons" style="color: gray; position: relative; top: -20px;">keyboard_arrow_down</span></a>
            </div>
            <div id="emailSalesByCategoryTable" style="width: 50%;">
                <table id="salesByCategoryTable" class="table highlight" style="display: none;">

                </table>
            </div>
        </div>

        
        <div class="col s12 m12" id="salesByType" style="display: none; color: black; align-content: center; padding-left: 3.5%;">
            <div class="card white graphCard" style="height: 150px; border-top: solid #3754a0 4px;">
                <div class="row" style= "margin-left: 1.25rem;">
                    <span style="display: inline-block; line-height: 32px; font-size: 1.5em;" ><u id="itemsChartTitle">{Literal}Top 10 Item Types{/Literal}</u>
                        <span class = "firstDrop">
                            <a href="javascript:void(0)"><span class="material-icons" style="padding-left: 5px; color: gray; position: relative; top: 5px;">keyboard_arrow_down</span></a>
                            <ul class="firstDrop-content">
                                <li><a href="javascript:void(0)" id="topItemsByType">{Literal}By Type{/Literal}</a></li>
                                <li><a href="javascript:void(0)" id="topItems">{Literal}By Item{/Literal}</a></li>
                            </ul>
                        </span>
                        <input id="totalSalesType" type="text" disabled="disabled" style="color: black; padding-top: 10px; font-size: 1.5em; border-bottom: none" value="">
                    </span>
                </div>
                <div class="row">
                    <div class="chart-content" style="display: none; color: black;">
                        <div id="sales-by-type-bar-chart-wrapper">
                            <div id="sales-by-type-bar-chart" style="color:black;"></div>
                        </div>
                        <div id="sales-by-item-bar-chart-wrapper" style="display: none;">
                            <div id="sales-by-item-bar-chart" style="color:black;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="border-bottom: .5px solid gray; width: 50%">
                <a href="javascript:void(0)" id="salesByTypeSeeMore" class="waves-effect" style="display: flex; font-size: 1.25em; color: black;">{Literal}Sales by Item Details{/Literal}</a>
                <a class="dropDownArrowHome" style="float: right" href="javascript:void(0)"><span class="material-icons" style="color: gray; position: relative; top: -20px;">keyboard_arrow_down</span></a>
            </div>
            <div id="emailSalesByTypeTable" style="width: 50%;">
                <div id="filterByItemContainer" class="input-field col s6" style="display: none;">
                    <input id="filterByItem" placeholder="" type="text" class="validate" autocomplete="off">
                    <label for="filterByItem">{Literal}Filter By Item{/Literal}</label>
                  </div>
                <table id="salesByTypeTable" class="table highlight" style="display: none;">

                </table>
            </div>
        </div>

        <div class="col s12 m12" id="salesByUser" style="display: none; color: black; align-content: center; padding-left: 3.5%;">
            <div class="card white graphCard" style="height: 150px; border-top: solid #3754a0 4px;">
                <div class="row" style= "margin-left: 1.25rem;">
                    <span style="display: inline-block; line-height: 32px; font-size: 1.5em;" ><u>{Literal}Top 10 POS Users{/Literal}</u>
                        <span class = "thirdDrop">
                            <a href="javascript:void(0)"><span class="material-icons" style="padding-left: 5px; color: gray; position: relative; top: 5px;">keyboard_arrow_down</span></a>
                            <ul class="thirdDrop-content">
                                <li><a href="javascript:void(0)" id="userByRevenue">{Literal}By Revenue{/Literal}</a></li>
                                <li><a href="javascript:void(0)" id="userByHour">{Literal}By Hour{/Literal}</a></li>
                            </ul>
                        </span> 
                        <input id="totalSalesUser" type="text" disabled="disabled" style="color: black; padding-top: 10px; font-size: 1.5em; border-bottom: none" value="">
                    </span>
                </div>
                <div class="row">
                    <div class="chart-content" style="display: none; color: black;">
                        <div id="sales-by-user-pie-chart-wrapper">
                            <div id="sales-by-user-pie-chart" style="color:black;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="border-bottom: .5px solid gray; width: 50%">
                <a href="javascript:void(0)" id="salesByUserSeeMore" class="waves-effect" style="display: flex; font-size: 1.25em; color: black;">{Literal}Sales by User Details{/Literal}</a>
                <a class="dropDownArrowHome" style="float: right" href="javascript:void(0)"><span class="material-icons" style="color: gray; position: relative; top: -20px;">keyboard_arrow_down</span></a>
            </div>
            <div id="emailSalesUserTable" style="width: 50%;">
                <table id="salesByUserTable" class="table highlight" style="display: none;">
                    <thead>
                        <tr>
                            <th>{Literal}User{/Literal}</th>
                            <th>{Literal}Total{/Literal}</th>
                            <th>{Literal}Percent of Total Sales{/Literal}</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="col s12 m12" id="salesByCustomer" style="display: none; color: black; align-content: center; padding-left: 3.5%;">
            <div class="card white graphCard" style="height: 150px; border-top: solid #3754a0 4px;">
                <div class="row" style= "margin-left: 1.25rem;">
                    <span style="display: inline-block; line-height: 32px; font-size: 1.5em;" ><u>{Literal}Top 10 Customers{/Literal}</u>
                        <span class = "secondDrop">
                            <a href="javascript:void(0)"><span class="material-icons" style="padding-left: 5px; color: gray; position: relative; top: 5px;">keyboard_arrow_down</span></a>
                            <ul class="secondDrop-content">
                                <li><a href="javascript:void(0)" id="showCashSales" style="width: 160px;">{Literal}Show Cash Sales{/Literal}</a></li>
                                <li><a href="javascript:void(0)" id="hideCashSales" style="width: 160px;">{Literal}Hide Cash Sales{/Literal}</a></li>
                            </ul>
                        </span>
                        <input id="totalSalesCustomer" type="text" disabled="disabled" style="color: black; padding-top: 10px; font-size: 1.5em; border-bottom: none" value="">
                    </span>
                </div>
                <div class="row">
                    <div class="chart-content" style="display: none; color: black;">
                        <div id="sales-by-customer-pie-chart-wrapper">
                            <div id="sales-by-customer-pie-chart" style="color:black;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="border-bottom: .5px solid gray; width: 50%">
                <a href="javascript:void(0)" id="salesByCustomerSeeMore" class="waves-effect" style="display: flex; font-size: 1.25em; color: black;">{Literal}Sales by Customer Details{/Literal}</a>
                <a class="dropDownArrowHome" style="float: right" href="javascript:void(0)"><span class="material-icons" style="color: gray; position: relative; top: -20px;">keyboard_arrow_down</span></a>
            </div>
            <div id="emailSalesCustomerTable" style="width: 50%;">
                <table id="salesByCustomerTable" class="table highlight" style="display: none;">
                    <thead>
                        <tr>
                            <th>{Literal}Customer Name{/Literal}</th>
                            <th>{Literal}Customer Id{/Literal}</th>
                            <th>{Literal}Taxable{/Literal}</th>
                            <th>{Literal}Sub-Total{/Literal}</th>
                            <th>{Literal}Total{/Literal}</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="col s12 m12" id="gratuityReportGraphs" style="display: none; color: black; align-content: center; padding-left: 3.5%;">
            <div class="card white graphCard" style="height: 150px; border-top: solid #3754a0 4px;">
                <div class="row" style= "margin-left: 1.25rem;">
                    <span style="display: inline-block; line-height: 32px; font-size: 1.5em;" ><u>{Literal}Gratuity Analysis{/Literal}</u>
                        <input id="totalGratuity" type="text" disabled="disabled" style="color: black; padding-top: 10px; font-size: 1.5em; border-bottom: none" value="">
                    </span>
                </div>
                <div class="row">
                    <div class="chart-content" style="display: none; color: black;">
                        <div id="gratuity-report-bar-chart-wrapper">
                            <div id="gratuity-report-bar-chart" style="color:black;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="border-bottom: .5px solid gray; width: 50%">
                <a href="javascript:void(0)" id="sixthSeeMore" class="waves-effect" style="display: flex; font-size: 1.25em; color: black;">{Literal}Gratuity Report Details{/Literal}</a>
                <a class="dropDownArrowHome" style="float: right" href="javascript:void(0)"><span class="material-icons" style="color: gray; position: relative; top: -20px;">keyboard_arrow_down</span></a>
            </div>
            <div id="emailGratuityReportTable" style="width: 50%;">
                <table id="sixthGraphTable" class="table highlight" style="display: none;">
                    <thead>
                        <tr>
                            <th>{Literal}User Name{/Literal}</th>
                            <th>{Literal}Gratuity Total{/Literal}</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="row">
        <% if (App.serverInfo.isFoodService) { %>
        <div class="col s12">
            <span class="col s12 m6">
                <div class="card white graphCard" style="height: 150px; border-top: solid #3754a0 4px;">
                    <div class="row" style= "margin-left: 1.25rem;">
                        <span style="display: inline-block; line-height: 32px; font-size: 1.5em;" ><u>{Literal}Tips{/Literal} </u>
                            <input id="totalItems" type="text" disabled="disabled" style="color: black; padding-top: 10px; font-size: 1.5em; border-bottom: none" value=""></span>
                    </div>
                    <div class="row">
                        <div class="chart-content" style="display: none; color: black;">
                            <div id="tips-bar-graph-wrapper">
                                <div id="tips-bar-graph" style="color:black;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="border-bottom: .5px solid gray;">
                    <a href="javascript:void(0)" id="fourthSeeMore" class="waves-effect" style="display: flex; font-size: 1.25em; color: black;">{Literal}Tip Details{/Literal}</a>
                    <a class="dropDownArrowHome" style="float: right" href="javascript:void(0)"><span class="material-icons" style="color: gray; position: relative; top: -20px;">keyboard_arrow_down</span></a>
                </div>
                <div id="emailFoodServiceGraph1" >
                    <table id="fourthGraphTable" class="table highlight" style="display: none;">
                        <thead>
                            <tr>
                                <th>{Literal}Tip Type{/Literal}</th>
                                <th style="float:right">{Literal}Amount{/Literal}</th>
                            </tr>
                        </thead>
        
                        <tbody>
                            <tr>
                                <td>{Literal}Credit Card Tips{/Literal}</td>
                                <td><input id="ccTips" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>
                            <tr>
                                <td>{Literal}AutoGratuity{/Literal}</td>
                                <td><input id="autoGratuity" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>
                            
                            <tr>
                                <td>{Literal}Other Tips{/Literal}</td>
                                <td><input id="otherTips" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>
                            <tr>
                                <td>{Literal}Total Tips{/Literal}</td>
                                <td><input id="totalTips" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </span>
            <span class="col s12 m6">
                <div class="card white graphCard" style="height: 150px; border-top: solid #3754a0 4px;">
                    <div class="row" style= "margin-left: 1.25rem;">
                        <span style="display: inline-block; line-height: 32px; font-size: 1.5em;" ><u>{Literal}Dining Summary{/Literal}</u>
                            <input id="totalItems" type="text" disabled="disabled" style="color: black; padding-top: 10px; font-size: 1.5em; border-bottom: none" value=""></span>
                    </div>
                    <div class="row">
                        <div class="chart-content" style="display: none; color: black;">
                            <div id="dining-bar-graph-wrapper">
                                <div id="dining-bar-graph" style="color:black;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="border-bottom: .5px solid gray;">
                    <a href="javascript:void(0)" id="fifthSeeMore" class="waves-effect" style="display: flex; font-size: 1.25em; color: black;">{Literal}Dining Summary Details{/Literal}</a>
                    <a class="dropDownArrowHome" style="float: right" href="javascript:void(0)"><span class="material-icons" style="color: gray; position: relative; top: -20px;">keyboard_arrow_down</span></a>
                </div>
                <div id="emailFoodServiceGraph2">
                    <table id="fifthGraphTable" class="table highlight" style="display: none;">
                        <thead>
                            <tr>
                                <th>{Literal}Dining Type{/Literal}</th>
                                <th style="float:right">{Literal}Percent{/Literal}</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                <td>{Literal}Dine-In % of Total{/Literal}</td>
                                <td><input id="dineInTotal" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>
                            <tr>
                                <td>{Literal}Dine-In % of Checks{/Literal}</td>
                                <td><input id="dineInChecks" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>
                            <tr>
                                <td>{Literal}Dine-In % of Guests{/Literal}</td>
                                <td><input id="dineInGuests" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>

                            <tr><td><br></td></tr>

                            <tr>
                                <td>{Literal}Take-Out % of Total{/Literal}</td>
                                <td><input id="takeOutTotal" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>
                            <tr>
                                <td>{Literal}Take-Out % of Checks{/Literal}</td>
                                <td><input id="takeOutChecks" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>
                            <tr>
                                <td>{Literal}Take-Out % of Guests{/Literal}</td>
                                <td><input id="takeOutGuests" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>

                            <tr><td><br></td></tr>

                            <tr>
                                <td>{Literal}Delivery % of Total{/Literal}</td>
                                <td><input id="deliveryTotal" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>
                            <tr>
                                <td>{Literal}Delivery % of Checks{/Literal}</td>
                                <td><input id="deliveryChecks" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>
                            <tr>
                                <td>{Literal}Delivery % of Guests{/Literal}</td>
                                <td><input id="deliveryGuests" type="text" disabled="disabled" style="color: black; border-bottom: none; height: 1rem; padding: 0; float: right; direction: RTL;" value=""></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </span>
        <% } %>
        </div>
    </div>
</div>

<div id="shift-wrapper" class="row" style="padding-top: 10px;<%= (App.rtl ? 'direction:rtl' : '') %>">
    <div class="col s12">
        <div class="col s12 m4">
            <div class="quicklink-card z-depth-1 white" style="margin-bottom: 10px">
                <div class="quicklink-card-title ap-dark-blue valign-wrapper waves-effect waves-light">
                    <div class="row" style="height: 100%">
                        <div class="col s1 valign-wrapper" style="height: 100%; padding-left: 15px">
                            <i class="material-icons">close</i>
                        </div>
                        <div class="col s10 valign-wrapper" style="height: 100%">&nbsp; {Literal}Shift Report{/Literal}</div>
                    </div>
                </div>
                <div class="quicklink-card-content" style="display: none">
                    <% if (noTillsWarning === true) { %>
                    <div class="no-tills-warning">
                        {Literal}There are no tills with orders to display{/Literal}
                    </div>
                    <% } %>
                    <div class="ap-collection" data-type="x-out">
                        <% _.each(tills, function(till) { %>
                        <% if (typeof till.hasOrders !== 'undefined' && till.hasOrders === true) { %>
                        <div class="ap-collection-item" data-id="<%= till.id %>">
                            <div class="row" style="margin-bottom: 5px">
                                <div class="col s6 till-name">
                                    {Literal}Till{/Literal} <%= till.name %>
                                </div>
                                <div class="col s6 right-align <%= till.ready === true ? 'ready' : 'open-orders' %>">
                                    <%= till.ready === true ? '{Literal}Ready{/Literal}' : '{Literal}Has open orders{/Literal}' %>
                                </div>
                                
                            </div>
                        </div>
                        <% }}); %>
                    </div>
                </div>
                <div class="quicklink-card-footer"  style="display: none">
                    <div class="row" style="margin-bottom: 2px">
                        <div class="col s6"></div>
                        <div class="col s6 right-align">
                            <a class="waves-effect ap-confirm-green waves-light btn-small disabled generate-button" data-type="x-out">{Literal}X-Out{/Literal}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col s12 m4">
                <div class="quicklink-card z-depth-1 white" style="margin-bottom: 10px">
                    <div class="quicklink-card-title ap-dark-blue valign-wrapper waves-effect waves-light">
                        <div class="row" style="height: 100%">
                            <div class="col s1 valign-wrapper" style="height: 100%; padding-left: 15px;">
                                <span class="right z-out-custom-icon" style="padding-left: 10px">Z</span>
                            </div>
                            <div class="col s10 valign-wrapper" style="height: 100%">&nbsp; {Literal}Shift Reset{/Literal}</div>
                        </div>
                    </div>
                    <div class="quicklink-card-content" style="display: none">
                        <% if (noTillsWarning === true) { %>
                        <div class="no-tills-warning">
                                {Literal}There are no tills with orders to display{/Literal}
                        </div>
                        <% } %>
                        <div class="ap-collection" data-type="z-out">
                            <% _.each(tills, function(till) { %>
                            <% if (typeof till.hasOrders !== 'undefined' && till.hasOrders === true) { %>
                                <div class="ap-collection-item <%= till.ready === true ? '' : 'ap-collection-item-disabled' %>" data-id="<%= till.id %>">
                                    <div class="row" style="margin-bottom: 5px">
                                        <div class="col s6 till-name">
                                            {Literal}Till{/Literal} <%= till.name %>
                                        </div>
                                        <div class="col s6 right-align <%= till.ready === true ? 'ready' : 'open-orders' %>">
                                            <%= till.ready === true ? '{Literal}Ready{/Literal}' : '{Literal}Has open orders{/Literal}' %>
                                        </div>
                                        
                                    </div>
                                </div>
                            <% }}); %>
                        </div>
                    </div>
                    <div class="quicklink-card-footer" style="display: none">
                        <div class="row" style="margin-bottom: 2px">
                            <div class="col s12">
                                <form>
                                    <div class="row">
                                        <div class="input-field col s12" style="padding-left: 25px">
                                            <input id="z-out-total-cash" placeholder="Enter total cash/checks" type="number" step="1.00" value="0.00" <%= noTillsWarning === true ? 'disabled' : 'checked' %>>
                                            <label class="active" for="z-out-total-cash" style="padding-left: 15px;">{Literal}Total Cash/Checks{/Literal}</label>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="col s6">
                                <div class="switch">
                                    <label>
                                        <input type="checkbox" id="z-out-show-graphs" <%= noTillsWarning === true ? 'disabled' : 'checked' %>>
                                        <span class="lever"></span>{Literal}Show Graphs{/Literal}
                                    </label>
                                </div>
                            </div>
                            <div class="col s6 right-align">
                                <a class="waves-effect ap-confirm-green waves-light btn-small disabled generate-button" data-type="z-out">{Literal}Z-Out{/Literal}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col s12 m4">
                <div class="quicklink-card z-depth-1 white" style="margin-bottom: 10px">
                    <div class="quicklink-card-title ap-dark-blue valign-wrapper waves-effect waves-light">
                        <div class="row" style="height: 100%">
                            <div class="col s1 valign-wrapper" style="height: 100%; padding-left: 15px">
                                <i class="material-icons">autorenew</i>
                            </div>
                            <div class="col s10 valign-wrapper" style="height: 100%">&nbsp; {Literal}Master Reset{/Literal}</div>
                        </div>
                    </div>
                    <div class="quicklink-card-content" style="display: none">
                        <% if (noTillsWarning === true) { %>
                        <div class="no-tills-warning">
                            {Literal}There are no tills with orders to display{/Literal}
                        </div>
                        <% } %>
                        <div class="ap-collection master-z-till-list" data-type="master-z">
                                <% _.each(tills, function(till) { %>
                                <% if (typeof till.hasOrders !== 'undefined' && till.hasOrders === true) { %>
                                    <div class="ap-collection-item <%= till.ready === true ? '' : 'ap-collection-item-disabled' %>" data-id="<%= till.id %>">
                                        <div class="row" style="margin-bottom: 5px">
                                            <div class="col s6 till-name">
                                                {Literal}Till{/Literal} <%= till.name %>
                                            </div>
                                            <div class="col s6 right-align <%= till.ready === true ? 'ready' : 'open-orders' %>">
                                                <%= till.ready === true ? '{Literal}Ready{/Literal}' : '{Literal}Has open orders{/Literal}' %>
                                            </div>
                                        
                                        </div>
                                    </div>
                            <% }}); %>
                        </div>
                    </div>
                    <div class="quicklink-card-footer" style="display: none">
                        <div class="row" style="margin-bottom: 2px">
                            <div class="col s6"></div>
                            <div class="col s6 right-align">
                                <a class="waves-effect ap-confirm-green waves-light btn-small disabled generate-button" data-type="master-z">{Literal}Z-Out{/Literal}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div class="col s12" id="embedded-report">

        </div>
    </div>
</div>

<div id="date-range-form-modal" class="modal modal-fixed-footer date-range-form-modal" style="min-height: 25%; min-width: 50%; z-index: 100000;">
    <div class="modal-content">
        <h4>{Literal}Choose Date Range{/Literal}</h4> 
        <div class="row" style="padding-top: 50px;">
            <div class="col s12 m6 offset-m3">
                <div class="input-field">
                    <input class="datepicker" id="fromDate" type="text">
                    <label class="active" for="fromDate">{Literal}From Date:{/Literal}</label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col s12 m6 offset-m3">
                <div class="input-field">
                    <input class="datepicker" id="thruDate" type="text">
                    <label class="active" for="thruDate">{Literal}Through Date:{/Literal} </label>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="waves-effect waves-light green btn-flat choose-date-range-button left">{Literal}Save{/Literal}</a>
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat left">{Literal}Cancel{/Literal}</a>
    </div>
</div>

<div id="email-report-modal" class="modal modal-fixed-footer" style="display: none; width: 55% !important; height: 40% !important;">
    <div class="modal-content" style="color: black;">
        <h3 style="font-size: 2.28em;">{Literal}Email Report{/Literal}</h3>
        <div class="row">
            <div class="input-field col s12 m12">
                <input id="emailInfo" placeholder="{Literal}Email{/Literal}" type="text" style="border-bottom: ridge;">
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat">{Literal}Cancel{/Literal}</a>
        <a href="javascript:void(0)" id="sendEmailReport" class="waves-effect waves-green right btn green">{Literal}Send{/Literal}</a>
    </div>
</div>

<div id="emailReportTemplate" style="display: none;">
    <div class="wrapper" style="min-width: 100%; height: 100%; background-color: #ffffff;">
        <div class="container" style="width: 100%; max-width: 600px; margin: 0 auto; border: solid 1px #e6e7e8; border-radius: 12px;">
            <div id="content" style="padding: 60px 30px 40px; text-align: center;">
                <div id="rptTitle" style="width: 100%; padding: 50px 0; border-top: solid 4px #38569f; border-bottom: solid 4px #38569f;">
                    <h1 id="report-title" style="margin-bottom: 5px; font-size: 26px;">{Literal}Z Reset Summary Report{/Literal}</h1>
                    <p id="dates"></p>
                </div>
                
                <div id="msgBody" style="padding: 60px 30px 40px; text-align: center;">
                    <p style="margin-bottom: 16px;"><strong>{Literal}Please see the attached file for the complete report.{/Literal}</strong></p>
                    <p style="margin-bottom: 16px;">{Literal}To print, open the attachment and select 'Print'{/Literal} <br>{Literal}from your browser settings.{/Literal}</p>
                </div>
            
            </div>

            <div style="padding:20px 10px;background-color:#e6e7e8;border-radius:0 0 11px 11px;text-align:center;font-size:9px;"><a style="text-decoration:none;color:initial;" href="https://www.accupos.com" target="_blank"><span>Powered by AccuPOS Point of Sale</span></a></div>
        </div>
    </div>
</div>

<div class="preloader-template" style="display: none;<%= (App.rtl ? 'direction:rtl' : '') %>">
    <div class="preloader-wrapper small">
        <div class="spinner-layer spinner-blue-only">
            <div class="circle-clipper left">
                <div class="circle"></div>
            </div>
            <div class="gap-patch">
                <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
                <div class="circle"></div>
            </div>
        </div>
    </div>
</div>

<div id="sequence-modal" class="modal bottom-sheet modal-fixed-footer" <%= (App.rtl ? 'style="direction:rtl"' : '') %> >
    <div class="modal-content">
        <div style="padding-bottom: 100px">
            <h4>{Literal}Sequence Details{/Literal}</h4>
        </div>
        <div class="row" id="sequenceRow">
            <% _.each(sequences, function(sequence) { %>
                <div class="col s12 m3">
                    <div class="card-panel card-panel-entity z-depth-1 sequence-card hoverable waves-effect waves-light sendSequence" style="background-color: #ffffff" till-id="<%= sequence.till %>" data-id="<%= sequence.id %>" data-selected='0'>
                        <div class="card-panel-content">
                            <div class="row sequence-title-badge">
                                <%= sequence.id %>
                            </div>
                            <div class="row">
                                {Literal}Seq{/Literal}. #<%= sequence.id %>
                            </div>
                            <div class="row">
                                {Literal}Till:{/Literal} <%= sequence.till %>
                            </div>
                            <div class="row">
                                {Literal}Start{/Literal}: <%=  moment(sequence.start).format('YYYY-MM-DD HH:mm') %>
                            </div>
                            <div class="row">
                                {Literal}End{/Literal}: <%= moment(sequence.end).format('YYYY-MM-DD HH:mm') %>
                            </div>
                        </div>
                    </div>
                </div>
            <% }); %>
        </div>
        <div class="row">
            <div class="col s3" id="sequences-filters">
                <div>
                    <ul class="pagination" id="sequence-pagination" style="display: none" data-current-page="1">
                        <li class="disabled" id="pagination-back">
                            <a href="javascript:void(0)">
                                <i class="material-icons">chevron_left</i>
                            </a>
                        </li>
                        <li class="waves-effect" id="pagination-forward">
                            <a href="javascript:void(0)">
                                <i class="material-icons">chevron_right</i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light left btn-flat cancel-item-type-button">{Literal}Cancel{/Literal}</a>
        <input type="hidden" id="selected-sequence" value="" />
    </div>
</div>

<div id="z-out-message-modal" class="modal modal-fixed-footer" style="width: 50% !important;height: 50% !important;">
    <div class="modal-content">
        <div class="row center"> <i class="ap-blue-text large material-icons">warning</i></div>
        <div class="row">
            <div class="col">
                <h5>{Literal}Automatic end of day credit card batch is disabled. Please preform end of day manually.{/Literal}</h5>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light left btn-flat ">{Literal}Close{/Literal}</a>
    </div>
</div>