<div class="modal-content" <%= (App.rtl ? 'style="direction:rtl;"' : '') %>>
    <div style="padding-bottom: 50px">
        <h4>{Literal}Sale/Promotion Details{/Literal}</h4>
    </div>
    <form id="sales_details">
        <div class="row">
            <div class="input-field col s12 m3" id="saleType">
                <label class="active">{Literal}Select Sale Type{/Literal}</label>
                <select id="sale-type-dropdown" required>
                    <option value="0">{Literal}Percent Discount{/Literal}</option>
                    <option value="1">{Literal}Item Quantity{/Literal}</option>
                    <option value="2">{Literal}Quantity Price{/Literal}</option>
                    <option value="5">{Literal}Quantity Percent Discount{/Literal}</option>
                    <option value="3">{Literal}Quantity Price By Percent{/Literal}</option>
                    <option value="4">{Literal}Quantity Price By Price{/Literal}</option>
                    <option value="6">{Literal}Comp Item By Quantity{/Literal}</option>
                </select>
            </div>

                
            <% if (sales.discount != 0)
                sales.discount = parseInt(sales.discount * 100);
            %>
                            
            <div id="percent" class="col s12 m8 offset-m1"> 
                {Literal}Percent Discount of{/Literal}:
                <div class="input-field inline input-field-small">
                    <input id="percentDiscount1" type="number" value="<%= sales.discount %>" class="validate" max="100">
                    <span class="helper-text" data-error="This field contains invalid characters" data-success=""></span>
                </div>
                %
            </div>

            <div id="itemQuantity" style="display: none" class="col s12 m8 offset-m1">
                {Literal}Quantity of{/Literal} &nbsp;
                <div class="input-field inline input-field-small">
                    <input id="quantity1" type="number" value="<%= sales.quantity %>">
                </div>
                {Literal}item(s) for the total price of{/Literal}
                <div class="input-field inline input-field-small">
                    <input id="price1" type="number" value="<%= sales.forPrice %>">
                </div>
            </div>

            
            <div id="quantityPrice" style="display: none" class="col s12 m8 offset-m1">
                <!-- <div class="row">
                    {Literal}Quantity of{/Literal} &nbsp;
                    <div class="input-field inline input-field-small">
                        <input id="quantity4" type="number" value="<%= sales.quantityLevel %>">
                    </div>
                    {Literal}with each having the price of {/Literal}
                    <div class="input-field inline input-field-small">
                        <input id="price3" type="number" value="<%= sales.quantityPrice %>">
                    </div>
                </div> -->
                <table class="row col s6">
                    <tr>
                        <td>{Literal}Quantity{/Literal}</td>
                        <% if(sales.quantityLevel != 0 && sales.quantityPrice != 0 && sales.quantityPriceIsPct) { %>
                            <td id="price-percent-label">{Literal}Percent Discount{/Literal}</td>
                        <% } else { %>
                            <td id="price-percent-label">{Literal}Price Each{/Literal} {Literal}($){/Literal}</td>
                        <% }  %>
                        <td><a class="btn-floating waves-effect waves-light add-quantity-price"><i class="material-icons">add</i></a></td>
                    </tr>
                    <%  var quantityPrice = sales.quantityPrice;
                    if(sales.quantityLevel != 0 && sales.quantityPrice != 0 && sales.quantityPriceIsPct)
                        quantityPrice = parseInt(sales.quantityPrice * 100);
                    %>

                    <tr data-id="<%=sales.id %>">
                        <td class="input-field">
                            <input id="quantity4" type="number" value="<%= sales.quantityLevel %>">
                        </td>
                        <td class="input-field">
                            <input id="price3" type="number" value="<%= quantityPrice %>">
                        </td>
                        <td>
                            <a class="btn-floating waves-effect waves-light red remove-quantity-price"><i class="material-icons">remove</i></a>
                        </td>
                    </tr>
                    <% _.each(sales.quantityPriceSales, function(sale) {
                        var quantityPrice = sale.quantityPrice;
                        if(sales.quantityLevel != 0 && sales.quantityPrice != 0 && sales.quantityPriceIsPct)
                            quantityPrice = parseInt(sale.quantityPrice * 100);
                        %>

                        <tr data-id="<%=sale.id %>">
                        <td class="input-field">
                            <input type="number" value="<%= sale.quantityLevel %>">
                        </td>
                        <td class="input-field">
                            <input type="number" value="<%= quantityPrice %>">
                        </td>
                        <td>
                            <a class="btn-floating waves-effect waves-light red remove-quantity-price"><i class="material-icons">remove</i></a>
                        </td>
                        </tr>
                    <%})%>
                </table>
            </div>

            <div id="quantityPercent" style="display: none" class="col s12 m8 offset-m1">
                {Literal} Buy{/Literal} &nbsp;
                <div class="input-field inline input-field-small">
                    <input id="quantity2" type="number" value="<%= sales.initialQuantity %>">
                </div>
                    {Literal}items(s) and the next item is{/Literal}
                <div class="input-field inline input-field-small">
                    <input id="percentDiscount2" type="number" value="<%= sales.nextDiscountPct%>" max="100">
                </div> 
                    % {Literal}off{/Literal}.
            </div>

            <div id="quantityByPrice" style="display: none" class="col s12 m8 offset-m1">
                {Literal}Buy{/Literal} &nbsp;
                <div class="input-field inline input-field-small">
                    <input id="quantity3" type="number" value="<%= sales.initialQuantity %>">
                </div>
                {Literal}item(s) and the next item is{/Literal}
                <div class="input-field inline input-field-small">
                    <input id="price2" type="number" value="<%= sales.nextDiscountPrice %>">
                </div>
                {Literal}off{/Literal}
            </div>

            <div id="qualifyingQty" class="col s12 m8 offset-m1" style="display:none;"> 
                {Literal}Qualifying Qty of{/Literal}:
                <div class="input-field inline input-field-small">
                    <input id="qualifyingQty1" type="number" value="<%= qualifyingQtyType.qualifyingQty %>" class="validate" max="100">
                    <span class="helper-text" data-error="This field contains invalid characters" data-success=""></span>
                </div>
            </div>
        </div>

        <% if(dataType == 'salePrice') 
            var id = sales.id;
        else
            var id = qualifyingQtyType.id;
        %>
        <div class="row">
            <div class="input-field col s12 m3" style="display: none">
                <input id="id" type="text" value="<%= id %>">
            </div>
        </div>

        <div class="row salePrice">
            <div class="input-field col s12 m2">
                <label>
                    <input name="group1" id="byItem" type="radio" class="with-gap by-item-group">
                    <span>{Literal}Single Item{/Literal}</span>
                </label>
            </div>
        </div>
        <div class="row">
            <div class="byItemCategory">
                <div class="input-field col s12 m4">
                    <label>
                        <input name="group1" id="byCategory" type="radio" class="with-gap by-item-group">
                        <span>{Literal}By Item Category{/Literal}</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="byItemType">
                <div class="input-field col s12 m4">
                    <label>
                        <input name="group1" id="byType" type="radio" class="with-gap by-item-group">
                        <span>{Literal}By Item Type{/Literal}</span>
                    </label>
                </div>
            </div>
  
         

            <div class = "byItemText">
                <div class="input-field col s12 m3 byItemText">                  
                    <input type="text" id="items" value="<%= sales.item %>" class="autocomplete validate" autocomplete="off">
                    <label  class ="active" for="items"><i class="material-icons left">filter_list</i>{Literal}Search Item{/Literal}</label>  
                    <span class="helper-text" data-error="This field cannot be blank or contain invalid characters" data-success=""></span>  
                </div>
            </div>

            <div class="byItemDescription">
                <div class="input-field col s12 m3">
                    <input id="itemDescription" type="text" disabled="disabled" value="" maxlength="25">
                    <label class="active" for="type">{Literal}Item Description{/Literal}</label>
                </div>
            </div>
           
            
            <div class="byItemTypeText">
                <div class="input-field col s12 m3">
                    
                    <% if(dataType == 'salePrice') 
                        var type = !sales.groupIsCategory ? sales.group : '';
                    else
                        var type = qualifyingQtyType.qualifyingType;
                    %>

                    
                    <input id="type" type="text" disabled="disabled" value="<%= type %>" class="validate" maxlength="25">
                    <label class="active" for="type">{Literal}Selected Item Type{/Literal}</label>
                    <span class="helper-text" data-error="This field cannot be blank or contain invalid characters" data-success=""></span>
                </div>
               
            </div>
            <div class="byItemCategoryText">
                <div class="input-field col s12 m3">
                    
                    <% if(dataType == 'salePrice') 
                        var category = sales.groupIsCategory ? sales.group : '';
                     else
                        var category = qualifyingQtyType.qualifyingType;
                    %>

                    <input id="category" type="text" disabled="disabled" value="<%=  category %>" class="validate" maxlength="25">
                    <label class="active" for="category">{Literal}Selected Item Category{/Literal}</label>
                    <span class="helper-text" data-error="This field cannot be blank or contain invalid characters" data-success=""></span>
                </div>
                
            </div>

            <div class="byItemTypeButton" style="display: none;">
                <div class="input-field col s12 m4">
                    <a data-input="type" href="#select-type-modal" class="waves-effect waves-light btn-large modal-trigger select-item-type">{Literal}Select Item Type{/Literal}</a>
                </div>
            </div>
            <div class="byItemCategoryButton" style="display: none;">
                <div class="input-field col s12 m4">
                    <a data-input="category" href="#select-category-modal" class="waves-effect waves-light btn-large modal-trigger select-item-category">{Literal}Select Item Category{/Literal}</a>
                </div>
            </div>
        </div>

       

        <div class="row" id="qualifyingQtyTypeBlock" >
            <div class="col s12 m4"></div>
            <div class="compItemByQuantityType">
                <div class="input-field col s12 m3">
                    <input id="allowedType" type="text" disabled="disabled" value="<%= qualifyingQtyType.allowedType %>" class="validate" maxlength="25">
                    <label class="active" for="type">{Literal}Selected Comp Item Type{/Literal}</label>
                    <span class="helper-text" data-error="This field cannot be blank or contain invalid characters" data-success=""></span>
                </div>
            </div>
            <div class="compItemByQuantityCategory">
                <div class="input-field col s12 m3">
                    <input id="allowedCategory" type="text" disabled="disabled" value="<%=  qualifyingQtyType.allowedType %>" class="validate" maxlength="25">
                    <label class="active" for="type">{Literal}Selected Comp Item Category{/Literal}</label>
                    <span class="helper-text" data-error="This field cannot be blank or contain invalid characters" data-success=""></span>
                </div>
            </div>

            <div class="compItemByQuantityType">
                <div class="input-field col s12 m4">
                    <a data-input="allowedType" href="#select-type-modal" class="waves-effect waves-light btn-large modal-trigger select-item-type">{Literal}Select Item Type{/Literal}</a>
                </div>
            </div>
            <div class="compItemByQuantityCategory">
                <div class="input-field col s12 m4">
                    <a data-input="allowedCategory" href="#select-category-modal" class="waves-effect waves-light btn-large modal-trigger select-item-category">{Literal}Select Item Category{/Literal}</a>
                </div>
            </div>
        </div>

        <div class="row salePrice">
            <div class="input-field col s12 m4">
                <label>
                    <input id="everyDay" type="checkbox" class="filled-in">
                    <span>{Literal}Every Day{/Literal}</span>
                </label>
            </div>
        </div>

        <div class="row salePrice">
            <div class="byCertainDays">
                <div class="input-field col s12 m4">
                    <label>
                        <input id="certainDays" type="checkbox" class="filled-in">
                        <span>{Literal}Certain Days{/Literal}</span>
                    </label>
                </div>
            </div>
            <% 
                var start = moment(sales.start).format("YYYY-MM-DD");
                var end =  moment(sales.end).format("YYYY-MM-DD");
            %>
            <div class="input-field col s12 m3">
                <input class="datepicker validate" id="startDay" type="text" value="<%= start %>">
                <label class="active" for="startDay">{Literal}Start Date{/Literal}</label>
                <span class="helper-text" data-error="This field contains invalid characters" data-success=""></span>
            </div>

            <div class="input-field col s12 m3">
                <input class="datepicker validate" id="endDay" type="text"  value="<%= end %>">
                <label class="active" for="endDay">{Literal}End Date{/Literal}</label>
                <span class="helper-text" data-error="This field contains invalid characters" data-success=""></span>
            </div>
        </div>
        <div class="row salePrice">
            <div class="dayCheckboxes col s12 m8 offset-m4">
                <div class="input-field inline input-field-checkbox">
                    <label>
                        <input id="mon" type="checkbox" class="filled-in" data-type="sales.monday"<%= sales.monday ? 'checked': '' %>>
                        <span>{Literal}MON{/Literal}</span>
                    </label>
                </div>
                <div class="input-field inline input-field-checkbox">
                    <label>
                        <input id="tue" type="checkbox" class="filled-in" data-type="sales.tuesday"<%= sales.tuesday ? 'checked': '' %>>
                        <span>{Literal}TUE{/Literal}</span>
                    </label>
                </div>
                <div class="input-field inline input-field-checkbox">
                    <label>
                        <input id="wed" type="checkbox" class="filled-in" data-type="sales.wednesday"<%= sales.wednesday ? 'checked': '' %>>
                        <span>{Literal}WED{/Literal}</span>
                    </label>
                </div>
                <div class="input-field inline input-field-checkbox">
                    <label>
                        <input id="thu" type="checkbox" class="filled-in" data-type="sales.thursday"<%= sales.thursday ? 'checked': '' %>>
                        <span>{Literal}THU{/Literal}</span>
                    </label>
                </div>
                <div class="input-field inline input-field-checkbox">
                    <label>
                        <input id="fri" type="checkbox" class="filled-in" data-type="sales.friday"<%= sales.friday ? 'checked': '' %>>
                        <span>{Literal}FRI{/Literal}</span>
                    </label>
                </div>
                <div class="input-field inline input-field-checkbox">
                    <label>
                        <input id="sat" type="checkbox" class="filled-in" data-type="sales.saturday"<%= sales.saturday ? 'checked': '' %>>
                        <span>{Literal}SAT{/Literal}</span>
                    </label>
                </div>
                <div class="input-field inline input-field-checkbox">
                    <label>
                        <input id="sun" type="checkbox" class="filled-in" data-type="sales.sunday"<%= sales.sunday ? 'checked': '' %>>
                        <span>{Literal}SUN{/Literal}</span>
                    </label>
                </div>
            </div>
        </div>
        <br>
        <div class="row salePrice">
            <div class="input-field col s12 m4">
                <label>
                    <input id="allDay" type="checkbox" class="filled-in">
                    <span>{Literal}All Day{/Literal}</span>
                </label>
            </div>
        </div>
        <div class="row salePrice">
            <div class="byCertainTimes">
                <div class="input-field col s12 m4">
                    <label>
                        <input id="certainTimes" type="checkbox" class="filled-in">
                        <span>{Literal}Certain Times{/Literal}</span>
                    </label>
                </div>
            </div>
            <% 
                var fromMinutesTimeFormat = moment(sales.start).format("hh:mm A");
                var thruMinutesTimeFormat = moment(sales.end).format("hh:mm A");
            %>
            <div class="timePickers">
                <div class="timePick">
                    <div class="input-field col s12 m3">
                        <input class="timepicker validate" id="startTime" type="text" value="<%= fromMinutesTimeFormat %>">
                        <label class="active" for="startTime">{Literal}Start Time{/Literal}</label>
                        <span class="helper-text" data-error="This field contains invalid characters" data-success=""></span>
                    </div>

                    <div class="input-field col s12 m3">
                        <input class="timepicker validate" id="endTime" type="text" value="<%= thruMinutesTimeFormat %>">
                        <label class="active" for="endTime">{Literal}End Time{/Literal}</label>
                        <span class="helper-text" data-error="This field contains invalid characters" data-success=""></span>
                    </div>
                </div>
            </div>
        </div>
    </form>
    
    <script>
        var that = this; 
        var select = document.querySelectorAll('select');
        var instances = M.FormSelect.init(select, {
            autoClose: true,
            container: 'body' 
        });

        var elems = document.querySelectorAll('.datepicker');
        var instances = M.Datepicker.init(elems, {
            autoClose: true,
            container: 'body',
            i18n: App.i18n,
            isRTL: App.rtl,
            format: 'yyyy-mm-dd' 
        });

        var pickerElement = document.querySelector('#startTime');
        var pickerElement2 = document.querySelector('#endTime');
        var instances = M.Timepicker.init(pickerElement, {
            autoClose: true,
            container: 'body',
            i18n: App.i18n,
            isRTL: App.rtl
        });
        var instances2 = M.Timepicker.init(pickerElement2, {
            autoClose: true,
            container: 'body',
            i18n: App.i18n,
            isRTL: App.rtl
        });

        that.timepicker = instances;
        that.timepicker = instances2;

    </script>
</div>

<div class="modal-footer">
    <a href="javascript:void(0)" class="waves-effect waves-green btn green left save-button">{Literal}Save{/Literal}</a>
    <a href="javascript:void(0)" class="modal-close waves-effect waves-light left btn-flat">{Literal}Cancel{/Literal}</a>
    <a href="#delete-sales-modal" class="waves-effect waves-light red-text right modal-trigger btn-flat delete-button">{Literal}Delete{/Literal}</a>
</div>


<div id="delete-sales-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 sale/promotion?{/Literal}</p>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" id="delete-sales-confirm" class="modal-close waves-effect waves-green btn red left" data-sales-id="<%= sales.id %>">{Literal}Delete{/Literal}</a>
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat left">{Literal}Cancel{/Literal}</a>
        <input type="hidden" id="delete-sales-id" />
    </div>
</div>

<div id="select-type-modal" class="modal">
    <div class="modal-content">
        <div style="padding-bottom: 50px;"> 
            <h4>{Literal}Select Item Type{/Literal}</h4>
        </div>
        
        <div class="row">
            <% _.each(itemTypes, function(itemTypes) { %>
            <div id ="salesCards">
                <div class="col s12 m4 xl4">
                    <div class="card-panel card-panel-entity item-type-card z-depth-1 sequence-card hoverable white-text waves-effect waves-light " style="background-color: #3970b7" data-id="<%= itemTypes.name %>" data-selected='0'>
                        <div class="row description truncate" style="position: relative; right: -5px; height: 48px;">
                            &nbsp;&nbsp;<%= itemTypes.name %>
                        </div>
                        <div class="edit" style="display: none">
                            <a href="javascript:void(0)" class="btn-floating btn-large waves-effect waves-light ap-dark-blue choose-type-trigger"
                                data-id="<%= itemTypes.name %>">
                                <i class="material-icons">check</i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <% }); %>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="waves-effect waves-light btn-flat" onclick="hideSelectItemTypes()">{Literal}Cancel{/Literal}</a>
        <input type="hidden" id="item-type-id" />
    </div>
</div>

<div id="select-category-modal" class="modal">
    <div class="modal-content">
        <div style="padding-bottom: 50px;"> 
            <h4>{Literal}Select Item Category{/Literal}</h4>
        </div>
        
        <div class="row">
            <% _.each(itemCategories, function(thisCategory) { %>
            <div id ="salesCards">
                <div class="col s12 m4 xl4">
                    <div class="card-panel card-panel-entity item-category-card z-depth-1 sequence-card hoverable white-text waves-effect waves-light " style="background-color: #3970b7" data-id="<%= thisCategory.name %>" data-selected='0'>
                        <div class="row description truncate" style="position: relative; right: -5px; height: 48px;">
                            &nbsp;&nbsp;<%= thisCategory.name %>
                        </div>
                        <div class="edit" style="display: none">
                            <a href="javascript:void(0)" class="btn-floating btn-large waves-effect waves-light ap-dark-blue choose-category-trigger"
                                data-id="<%= thisCategory.name %>">
                                <i class="material-icons">check</i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <% }); %>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="waves-effect waves-light btn-flat" onclick="hideSelectItemTypes()">{Literal}Cancel{/Literal}</a>
        <input type="hidden" id="item-type-id" />
    </div>
</div>

<script>
    function hideSelectItemTypes () {
        $('#select-type-modal').hide();
    }
</script>


