<div class="modal-content" <%=(App.rtl ? 'style="direction:rtl"' : '' ) %>>
    <div style="padding-bottom: 50px">
        <h4 style="font-size: 1.2rem">{Literal}Scheduled Email Reports{/Literal}</h4>
    </div>
    <form autocomplete="off" >
        <div class="row col m9">
            <!-- <label class="col m2 s3" style="font-size: 1em;" for="">{Literal}Schedule Details{/Literal}</label> -->
            <input hidden id="id" value="<%= scheduledReport.id %>">
            <div class="switch" style="padding-bottom: 0.8rem;">
                <label>
                    <input <%= scheduledReport.active ? 'checked' : '' %> id="active" data-name="active" type="checkbox">
                    <span class="lever"></span>
                    {Literal}Active{/Literal}
                </label>
            </div>
            <div class="col m3 s12">
                <label class="active" for="description">{Literal}Description{/Literal}</label>
                <input id="description" type="text" class="validate" value="<%= scheduledReport.description%>">
                <span class="helper-text" data-error="{Literal}This field can't be empty{/Literal}" data-success=""></span>
            </div>
            <div class="col m3 s12">
                <label>{Literal}Report Name{/Literal}</label>
                <select id="reportName">
                    <% _.each(reportKeys, function(key) { %>
                        <option <%= scheduledReport.reportName == key ? 'selected':'' %> value="<%=key %>"><%=reports[key].name %></option>
                        <%})%>
                </select>
            </div>
            <div class="col m2 s12 sendEvery">
                <label class="active" for="sendEvery">{Literal}Send{/Literal}</label>
                <select id="sendEvery">
                    <option <%= scheduledReport.sendEvery == 'thisDay'? 'selected':'' %> value="thisDay">{Literal}Today{/Literal}</option>
                    <option <%= scheduledReport.sendEvery == 'lastDay'? 'selected':'' %> value="lastDay">{Literal}Yesterday{/Literal}</option>
                    <option <%= scheduledReport.sendEvery == 'lastWeek'? 'selected':'' %> value="lastWeek">{Literal}Last Week{/Literal}</option>
                    <option <%= scheduledReport.sendEvery == 'thisWeek'? 'selected':'' %> value="thisWeek">{Literal}This Week{/Literal}</option>
                    <option <%= scheduledReport.sendEvery == 'lastMonth'? 'selected':'' %> value="lastMonth">{Literal}Last Month{/Literal}</option>
                    <option <%= scheduledReport.sendEvery == 'thisMonth'? 'selected':'' %> value="thisMonth">{Literal}This Month{/Literal}</option>
                    <!-- <option <%= scheduledReport.sendEvery == 'lastQuarter'? 'selected':'' %> value="lastQuarter">{Literal}Last Quarter{/Literal}</option>
                    <option <%= scheduledReport.sendEvery == 'thisQuarter'? 'selected':'' %> value="thisQuarter">{Literal}This Quarter{/Literal}</option> -->
                </select>
            </div>
         
                
            <div class="col m2 s12 dayOfWeek">
                <label class="active" for="dayOfWeek">{Literal}Day of Week{/Literal}</label>
                <select id="dayOfWeek">
                   <option  <%= scheduledReport.dayOfWeek == '1'? 'selected':'' %> value="1">{Literal}Sunday{/Literal}</option>
                   <option  <%= scheduledReport.dayOfWeek == '2'? 'selected':'' %> value="2">{Literal}Monday{/Literal}</option>
                   <option  <%= scheduledReport.dayOfWeek == '3'? 'selected':'' %> value="3">{Literal}Tuesday{/Literal}</option>
                   <option  <%= scheduledReport.dayOfWeek == '4'? 'selected':'' %> value="4">{Literal}Wednesday{/Literal}</option>
                   <option  <%= scheduledReport.dayOfWeek == '5'? 'selected':'' %> value="5">{Literal}Thursday{/Literal}</option>
                   <option  <%= scheduledReport.dayOfWeek == '6'? 'selected':'' %> value="6">{Literal}Friday{/Literal}</option>
                   <option  <%= scheduledReport.dayOfWeek == '7'? 'selected':'' %> value="7">{Literal}Saturday{/Literal}</option>
                </select>
            </div>
            <div class="col m2 s12 dayOfMonth">
                <label class="active" for="dayOfMonth">{Literal}Day of Month{/Literal}</label>
                <select id="dayOfMonth">
                    <% _.range(1, 11).forEach((current, index, range)=> { %>
                        <option  <%= scheduledReport.dayOfMonth == current ? 'selected':'' %> value="<%=current%>"><%=current%></option>
                        <%})%>
                </select>
            </div>
            <div class="col m2 s12">
                <label class="active" for="time">{Literal}Time of Day{/Literal}</label>
                <select id="time">
                    <% for(var hour=0; hour < 24; hour++) {
                       var timeText = String(hour).padStart(2, '0'); %>
                    <option  <%= scheduledReport.time == hour ? 'selected':'' %> value="<%= hour%>"> <%= timeText %>:00</option>
                    <%}%>
                 </select>
            </div>
        </div>
        <div class="row">
            <div class="col m3 s12 option" data-option="locations">
                 <div class="input-field">
                    <label class="active" for="locations">{Literal}Locations{/Literal}</label>
                    <select id="locations" multiple>
                        <option <%= scheduledReport.locations.includes("ALL") ? 'selected':'' %> value="ALL">{Literal}All{/Literal}</option>
                        <% _.each(App.cloudLocations, function(location) { %>
                            <option <%= scheduledReport.locations.includes(location) ? 'selected':'' %> value="<%=location %>"><%=location %></option>
                            <%})%>
                    </select>
                </div>
            </div>
            <div class="col m3 s12 option" data-option="customer">
                <label class="active" for="customer">{Literal}Customer{/Literal}</label>
                    <input class="" id="customer" type="text" value="<%= scheduledReport.customer %>">
            </div>
            <div class="col m3 s12 option" data-option="employee">
                <div class="input-field">
                    <input class="" id="employee" type="text" value="<%= scheduledReport.employee %>">
                    <label class="active" for="employee">{Literal}Employee{/Literal}</label>
                </div>
            </div>
            <div class="col m3 s12 option" data-option="till">
                    <label class="active" for="till">{Literal}Till{/Literal}</label>
                    <select id="till">
                        <!-- <option <%= scheduledReport.till == 'all' ? 'selected':'' %> value="all">{Literal}All Tills{/Literal}</option> -->
                        <% _.each(App.tillsList, function(till) { %>
                            <option <%= scheduledReport.till == till.id ? 'selected':'' %> value="<%=till.id %>"><%=till.name %></option>
                            <%})%>
                    </select>
                </div>
            </div>
        <div class="row" id="emailsList">
            <label class="col m2 s12" style="font-size: 1em; position: absolute" for="">{Literal}Mailing List{/Literal}</label>
            <% _.each(scheduledReport.emailList, function(email) { %>
            <div class="col m3 s12">
                <div class="input-field row">
                    <i class="material-icons small prefix remove-email-icon red-text" style="cursor: pointer;">close</i>
                    <input class="email validate" type="email" value="<%= email %>">
                    <span class="helper-text" data-error="{Literal}incorrect email format{/Literal}" data-success=""></span>
                </div>
            </div>
            <%})%>
        </div>
    </form>
</div>

<div class="modal-footer">
    <a id="deleteScheduledEmailReportBtn" data-target="delete-scheduled-email-report-modal"
        class="waves-effect waves-light btn-flat red-text right modal-trigger delete-button">{Literal}Delete{/Literal}</a>
    <a id="addEmailBtn" style="margin-right: 5px"
        class="waves-effect waves-light btn ap-blue left">{Literal}Add Email{/Literal}</a>
    <a href="javascript:void(0)" class="waves-effect waves-green btn green save-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 id="delete-scheduled-email-report-modal" class="modal">
    <div class="modal-content">
        <div style="padding-bottom: 50px;">
            <h6>{Literal}Confirm Deletion{/Literal}</h6>
        </div>
        <p>{Literal}Are you sure that you would like to remove this Item{/Literal}?</p>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" id="delete-scheduled-email-report-confirm"
            class="waves-effect waves-green btn red left">{Literal}Delete{/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="add-email-modal" class="modal">
    <div class="modal-content">
        <div style="padding-bottom: 50px;">
            <h6>{Literal}Add Email{/Literal}</h6>
        </div>
        
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" id="delete-scheduled-email-report"
            class="modal-close waves-effect waves-green btn red left">{Literal}Delete{/Literal}</a>
        <input type="hidden" id="" />
        <a href="javascript:void(0)"
            class="modal-close waves-effect waves-light btn-flat left">{Literal}Cancel{/Literal}</a>
    </div>
</div>
