<div class="modal-content scroll scrollbar-juicy-peach" <%= (App.rtl ? 'style="direction:rtl"' : '') %> >
    <div style="padding-bottom: 50px">
        <h4>{Literal}Item Details{/Literal}</h4>
    </div>
    <div class="row form-no-margin">
       
    </div> 
    <form id="item_details1">
        <div class="row form-no-margin">
            <div id="productLine1" class="input-field col s12 m3" style="padding-bottom: 35px;">
                <label class="active">{Literal}Select Product Line{/Literal}</label>
                <select id="product-line-dropdown" required>
                    <!-- <option value="0" selected>{Literal}Choose Product Line{/Literal}</option> -->
                    <option value="none" selected>{Literal}None{/Literal}</option>
                    
                    <% _.each(productLine, function(productLine) { %>
                    <option value="<%= productLine.id %>" <%= items.productLine == productLine.id ? 'selected' : '' %>><%= productLine.description %></option>
                    <% }); %>
                </select>
            </div>

            <% function insertSpecial(text) {
                if(text){   
                    text = text.replaceAll('"', '&quot;');
                    return text.replaceAll("'", '&apos;');
                }
                else
                    return text;
            }%>
            
            <div class="input-field col s12 m3">
                <input placeholder="{Literal}Leave empty to auto generate SKU{/Literal}" id="id" type="text" value="<%= insertSpecial(items.id) %>" class="validate" maxlength="50" disabled>
                <label class="active" for="id">{Literal}Item Code{/Literal}</label>
                <span class="helper-text" data-error="{Literal}This field can't contain special characters{/Literal}" data-success=""></span>
            </div>

            <div class="input-field col s12 m3">
                <input id="description" type="text" value="<%= insertSpecial(items.description) %>" class="validate" maxlength="30">
                <label class="active" for="description">{Literal}Item Description{/Literal}</label>
                <span class="helper-text" data-error="{Literal}This field can't be empty or contain special characters{/Literal}" data-success=""></span>
            </div>
            <div id="price1" class="input-field col s12 m2" style="display: none">
                <input id="secondPrice" step="any" type="number" value="<%= items.priceLevel1 %>" class="validate">
                <label class="active" for="secondPrice">{Literal}Item Price{/Literal}</label>
                <span class="helper-text" data-error="{Literal}This field can't be empty or contain special characters{/Literal}" data-success=""></span>
            </div>
            <div id="price0" class="input-field col s12 m2">
                <input id="price" step="any" type="number" value="<%= items.priceLevel1 %>" class="validate" max="999999">
                <label class="active" for="price">{Literal}Item Price{/Literal}</label>
                <span class="helper-text" data-error="{Literal}This field can't be empty or contain special characters{/Literal}" data-success=""></span>
            </div>
            
        </div>
        <div class="row form-no-margin">
            <div class="row">
                <div class="input-field col s12 m3 sales" style="display: block">
                    <input id="accountingCode" value="<%= insertSpecial(items.accountingCode) %>" >
                    <label class="active" for="detialedDesc">{Literal}Accounting Id{/Literal}</label>
                </div>
                <div  class="input-field col s12 m3 sales" style="display: block">
                    <label class="active">{Literal}Sales Account{/Literal}</label>
                    <select id="sales-account-dropdown" required>
                        <option value="Create New Sales Account" selected>{Literal}Create New Sales Account{/Literal}</option>
                        <% var current = 0; %>
                        <% _.each(salesAccounts, function(salesAccounts) { %>
                        <option value="<%= salesAccounts.id %>" <%= items.salesAccount == salesAccounts ? 'selected' : '' %>><%= salesAccounts %></option>
                        <% current++; %>
                        <% }); %>
                    </select>
                </div>
            </div>
        </div>
        <div class="row form-no-margin">
            <div class = "row">
                <div class="input-field col s12 m3">
                    <label class="active">{Literal}Item Type{/Literal}</label>
                    <select id="item-type-dropdown" required>
                        <option value="Create New Item Type" selected>{Literal}Create New Item Type{/Literal}</option>
                        <% _.each(itemTypes, function(itemType) { %>
                        <option value="<%= itemType.id %>" <%= items.type == itemType.name ? 'selected' : '' %>><%= itemType.name %></option>
                        <% }); %>
                    </select>
                </div>
                <div id="category2" class="input-field col s12 m3" >
                    <label class="active">{Literal}Item Category{/Literal}</label>
                    <select id="item-category-dropdown2" required>
                        <option value="Create New Item Category">{Literal}Create New Item Category{/Literal}</option>
                        <% _.each(category, function(category) { %>
                        <option value="<%= category.name %>" <%= items.category === category.name ? 'selected' : '' %>><%= category.name %></option>
                        <% }); %>
                    </select>
                </div>
                <% if(App.serverInfo.isAutoCreateMenuButtons && isCreateMode){ %>
                <div id="menuPages" class="input-field col s12 m3" >
                    <label class="active">{Literal}Menu Page{/Literal}</label>
                    <select id="menu-page-dropdown" required>
                        <% var foundMenuPage = false %>
                        <!-- <option value="Choose Menu Page" selected disabled>{Literal}Choose Menu Page{/Literal}</option> -->
                        <option value="none">{Literal}None{/Literal}</option>
                        <!-- <option value="" <%= items.menuPage == "" ? 'selected' : '' %>>MAIN</option> -->
                        <% _.each(menuPages, function(menuPage) { %>
                            <option value="<%= menuPage %>" <%= items.menuPage == menuPage ? 'selected' : '' %>><%= menuPage %></option>
                        <% }); %>                    
                    </select>
                </div>
                <div id="menuKeysets" class="input-field col s12 m3">
                    <select id="menu-key-set">
                        <% var current = 0; %>
                        <!-- <option value="Create New Menu Key Set">{Literal}Create New Menu Key Set{/Literal}</option> -->
                        <!-- <option value="noMenuButton" <%= items.menuKeySet == '' ? 'selected' : '' %>>{Literal}No Menu Key Set{/Literal}</option> -->
                        <option value="" <%= items.menuKeySet == '' ? 'selected' : '' %>>MAIN</option>
                        <% _.each(menuKeySets, function(menuKeySet) { %>
                            <option value="<%= menuKeySet %>" <%= items.menuKeySet == menuKeySet ? 'selected' : '' %>><%= menuKeySet %></option>
                        <% current++; %>
                        <% }); %>
                    </select>
                    <label>{Literal}Menu Key Set{/Literal}</label>
                </div>
                <% } %>
                <div id="quantity1" class="input-field col s12 m2">
                    <input id="quantity" type="number" value="<%= items.onHand %>">
                    <label class="active" for="quantity">{Literal}Quantity On Hand{/Literal}</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12 m8">
                    <input id="detialedDesc" value="<%= insertSpecial(items.itemExtended.DetailedDescription) %>">
                    <label class="active" for="detialedDesc">{Literal}Detailed Description{/Literal}</label>
                </div>
            </div>
            <div class = "row">         
                <div id="availability1" class="input-field col s12 m4" style="padding-bottom: 35px;">
                    <label class="active">{Literal}Availability{/Literal}</label>
                    <select id="availability-dropdown" required onchange="availableShow(this.value)">>
                        <option value="NONE" <%= items.trackAvailableOption == "NONE" ? 'selected' : '' %>>{Literal}No Warning{/Literal}</option>
                        <option value="WARN" <%= items.trackAvailableOption == "WARN" ? 'selected' : '' %>>{Literal}Warn at or below quantity of{/Literal}</option>
                        <option value="STOP" <%= items.trackAvailableOption == "STOP" ? 'selected' : '' %>>{Literal}No Sale when none available{/Literal}</option>
                    </select>
                </div>

                <div id="available1" class="input-field col s12 m2" style="display: none;">
                    <input id="warnAvailableNumber" type="number" value="<%= items.warnAvailableNumber %>">
                    <label class="active" for="warnAvailableNumber">{Literal}Warn at{/Literal}</label>
                </div>
                <div id="available2" class="input-field col s12 m2" <%= items.trackAvailableOption == "NONE" ? 'style="display:none"' : '' %>>
                    <input id="available" type="number" value="<%= items.available %>">
                    <label class="active" for="available">{Literal}Available{/Literal}</label>
                </div>
                <div id="courseName" class="input-field col s12 m4" <%= App.serverInfo.isFoodService && courses.length > 0 ?  '' :'style="display:none"' %>>
                    <label class="active">{Literal}Course Name{/Literal}</label>
                    <select id="course-dropdown" required>
                        <option value="">None</option>
                        <% _.each(courses, function(course) { %>
                            <option value="<%= course.name %>" <%= course.name == items.courseName ? 'selected' : '' %>><%= course.number %>.&nbsp; <%= course.name %></option>
                        <% }); %>
                    </select>
                </div>
                <div id="image" class="input-field col s12 m2">
                    <input accept=".png" hidden type="file">
                    <% if(items.itemExtended.imageUrl != '') {%>
                    <img style="width: 84px;"  src="/serverImages/<%= items.itemExtended.imageUrl %>.png" alt="{Literal}Select Image{/Literal}">
                    <% } else {%>
                        <div style="text-align: center;border-radius: 5px;outline: #838383 1px dotted;color:#838383;font-size: smaller;">
                            <div>{Literal}Click to select an item image{/Literal}</div>
                            <img class="item-image-placeholder" style="width: 84px;" src="/img/logo.png">
                        </div>
                    <% } %>
                </div>
                <!-- <div class="input-field col s12 m3" style="padding-bottom: 50px;">
                    <label>
                        <input type="checkbox" class="filled-in advanced">
                        <span>{Literal}Advanced Item Setup{/Literal}</span>
                    </label>
                </div> -->
            </div>
            <% var attributeItemNumbers =  Object.keys(itemAttributes) %>
            <div class="row item-attributes-row" <%= attributeItemNumbers.length > 0 && isCreateMode ?  '' :'style="display:none"' %> >
                <div class="input-field col s12 m3">
                    <select id="attribute1">
                        
                        <option value="">{Literal}None{/Literal}</option>
                        <% _.each(attributeItemNumbers, function(attributeNumber) { %>
                            <option value="<%= attributeNumber %>" ><%= attributeNumber %></option>
                        <% }); %>
                    </select>
                    <label>{Literal}Attribute 1{/Literal}</label>
                </div>
                <div class="input-field col s12 m3">
                    <select  multiple id="attributeSKUs1">
                        
                    </select>
                    <label>{Literal}Attribute SKU Components 1{/Literal}</label>
                </div>
                <div class="input-field col s12 m3">
                    <select id="attribute2">
                        <option value="">{Literal}None{/Literal}</option>
                        <% _.each(attributeItemNumbers, function(attributeNumber) { %>
                            <option value="<%= attributeNumber %>" ><%= attributeNumber %></option>
                        <% }); %>
                    </select>
                    <label>{Literal}Attribute 2{/Literal}</label>
                    <span class="helper-text" data-error="{Literal}Attribute 1 cannot be the same as Attribute2{/Literal}" data-success=""></span>
                </div>
                <div class="input-field col s12 m3">
                    <select  multiple id="attributeSKUs2">
                        
                    </select>
                    <label>{Literal}Attribute SKU Components 2{/Literal}</label>
                </div>
            </div>
        </div>
        <div class="row form-no-margin">
            <div id="altDescription1" class="input-field col s12 m4" style="display: none">
                <input id="altDescription" type="text" value="<%= insertSpecial(items.altDescription) %>" class="validation" maxlength="50">
                <label class="active" for="altDescription">{Literal}Alternative Description{/Literal}</label>
                <span class="helper-text" data-error="This field contains invalid characters" data-success=""></span>
            </div>
            <% if(App.serverInfo.isFoodService) { %>
                <div id="choiceGroup1" class="input-field col s12 m4" style="display: none">
                    <label class="active">{Literal}Choice Group{/Literal}</label>
                    <select id="choice-group-dropdown" required>
                        <option value="None">None</option>
                        <% _.each(choiceGroups, function(choice) { %>
                        <option value="<%= choice.id %>" <%= items.choiceGroup == choice.id ? 'selected' : '' %>><%= choice.name %></option>
                        <% }); %>
                    </select>
                </div>
            <% } %>
            <% if(App.serverInfo.hasVatTax) { %>
                <div id="taxable1" class="input-field col s12 m4" style="margin-top:20px; display: none">
                    <label class="active">{Literal}VAT Tax{/Literal}</label>
                    <select id="vat-tax-dropdown">
                        <option value="" disabled></option>
                        <% _.each(vatCode, function(vatCode) { %>
                        <option value="<%= items.vatCode %>" <%= items.vatCode == vatCode.code ? 'selected' : '' %>><%= vatCode.code %></option>
                        <% }); %>
                    </select>
                </div>
            <% } %>
        </div>
        <div class="row form-no-margin">
            <div id="price2" class="input-field col s12 m2" style="display: none">
                <input id="priceLevel2" step="any" type="number" class="validate" value="<%= items.priceLevel2 %>">
                <label class="active" for="priceLevel2">{Literal}Price Level 2{/Literal}</label>
                <span class="helper-text" data-error="This field contains invalid characters" data-success=""></span>
            </div>

            <div id="price3" class="input-field col s12 m2" style="display: none">
                <input id="priceLevel3" step="any" type="number" class="validate" value="<%= items.priceLevel3 %>">
                <label class="active" for="priceLevel3">{Literal}Price Level 3{/Literal}</label>
                <span class="helper-text" data-error="This field contains invalid characters" data-success=""></span>
            </div>

            <div id="price4" class="input-field col s12 m2"  style="display: none">
                <input id="priceLevel4" step="any" type="number" class="validate" value="<%= items.priceLevel4 %>">
                <label class="active" for="priceLevel4">{Literal}Price Level 4{/Literal}</label>
                <span class="helper-text" data-error="This field contains invalid characters" data-success=""></span>
            </div>

            <div id="price5" class="input-field col s12 m2"  class="validate" style="display: none">
                <input id="priceLevel5" step="any" type="number" value="<%= items.priceLevel5 %>">
                <label class="active" for="priceLevel5">{Literal}Price Level 5{/Literal}</label>
                <span class="helper-text" data-error="This field contains invalid characters" data-success=""></span>
            </div>

            <div id="costId" class="input-field col s12 m2"  class="validate" style="display: none">
                <input id="cost" type="number" value="<%= items.cost %>">
                <label class="active" for="cost">{Literal}Cost{/Literal}</label>
                <span class="helper-text" data-error="This field contains invalid characters" data-success=""></span>
            </div>
        </div>

        <div class="row form-no-margin">
            <div id="allowDiscount1" class="input-field col s12 m3" style="margin-top:25px; display: none">
                <label>
                    <input type="checkbox" class="allowDiscount filled-in" data-type="items.allowDiscount"<%= items.allowDiscount ? 'checked': '' %>>
                    <span>{Literal}Allow Discount{/Literal}</span>
                </label>
            </div>

            <div id="isStock1" class="input-field col s12 m3" style="margin-top:25px; display: none">
                <label>
                    <input type="checkbox" class="isStock filled-in" data-type="items.isStock"<%= items.isStock ? 'checked': '' %>>
                    <span>{Literal}Track Stock{/Literal}</span>
                </label>
            </div>

            <div id="inactive1" class="input-field col s12 m3" style="margin-top:25px; display: none">
                <label>
                    <input type="checkbox" class="inactive filled-in" data-type="items.inactive"<%= items.inactive ? 'checked': '' %>>
                    <span>{Literal}Inactive{/Literal}</span>
                </label>
            </div>
        </div>

        <div class="row form-no-margin">
            <div id="scale1" class="input-field col s12 m3" style="margin-top:25px; display: none">
                <label>
                    <input type="checkbox" class="scale filled-in" data-type="items.scale"<%= items.scale ? 'checked': '' %>>
                    <span>{Literal}Weightable Item{/Literal}</span>
                </label>
            </div>
            <div id="useTare1" class="input-field col s12 m3" style="margin-top:25px; display: none">
                <label>
                    <input type="checkbox" class="useTare filled-in" data-type="items.useTare"<%= items.useTare ? 'checked': '' %>>
                    <span>{Literal}Use Tare{/Literal}</span>
                </label>
            </div>


            <div id="noPartialQuantity1" class="input-field col s12 m3" style="margin-top:25px; display: none" >
                <label>
                    <input type="checkbox" class="noPartialQuantity filled-in" data-type="items.noPartialQuantity"<%= items.noPartialQuantity ? 'checked': '' %>>
                    <span>{Literal}No Partial Quantity{/Literal}</span>
                </label>
            </div>

            <div id="serialized1" class="input-field col s12 m3" style="margin-top:25px; display: none" >
                <label>
                    <input type="checkbox" class="serialized filled-in" data-type="items.serialized"<%= items.serialized ? 'checked': '' %>>
                    <span>{Literal}Has Serial{/Literal} #</span>
                </label>
            </div>
        </div>
        <% if (!App.serverInfo.hasVatTax) {%>
            <div class="row form-no-margin">
                <div id="taxable2" class="input-field col s12 m3" style="margin-top:25px; display: none" >
                    <label>
                        <input type="checkbox" class="taxable filled-in" data-type="items.taxable"<%= items.taxable ? 'checked': '' %>>
                        <span>{Literal}Taxable{/Literal}</span>
                    </label>
                </div>
            </div>
        <% } %>

        <br>
    </form>

    <script>
        function availableShow(value) {
            var available = document.getElementById("available1");
            if (value == "WARN") {
                if (available.style.display === "none") {
                    available.style.display = "block";
                }
            }
            else {
                available.style.display = "none";
            }

            if(value == 'NONE')
                document.getElementById('available2').style.display = 'none';
            else
                document.getElementById('available2').style.display = 'block';
        }
    </script>
</div>

<div id="item-type-form-modal" class="modal modal-fixed-footer item-type-form-modal" style="min-height: 25%; min-width: 50%; z-index: 100000;">
    <div class="modal-content">
        <h4>{Literal}Create New Item Type{/Literal}</h4> 
        <div class="row">
            <div class="col s12 m6 offset-m3" style="padding-top: 25px">
                <div class="input-field">
                    <input id="itemTypeName" type="text">
                    <label class="active" for="itemTypeName">{Literal}New Item Type Name{/Literal}: </label>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="waves-effect waves-light green btn-flat save-item-type-button left">{Literal}Save{/Literal}</a>
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat cancel-item-type-button left">{Literal}Cancel{/Literal}</a>
    </div>
</div>

<div id="item-category-form-modal" class="modal modal-fixed-footer item-category-form-modal" style="min-height: 25%; min-width: 50%; z-index: 100000;">
    <div class="modal-content">
        <h4>{Literal}Create New Item Category{/Literal}</h4> 
        <div class="row">
            <div class="col s12 m6 offset-m3" style="padding-top: 25px">
                <div class="input-field">
                    <input id="itemCategoryName" type="text">
                    <label class="active" for="itemCategoryName">{Literal}New Item Category Name{/Literal}: </label>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="waves-effect waves-light green btn-flat save-item-category-button left">{Literal}Save{/Literal}</a>
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat cancel-item-category-button left">{Literal}Cancel{/Literal}</a>
    </div>
</div>

<div id="item-sales-account-form-modal" class="modal modal-fixed-footer item-sales-account-form-modal" style="min-height: 25%; min-width: 50%; z-index: 100000;">
    <div class="modal-content">
        <h4>{Literal}Create New Item Sales Account{/Literal}</h4> 
        <div class="row">
            <div class="col s12 m6 offset-m3" style="padding-top: 25px">
                <div class="input-field">
                    <input id="itemSalesAccountNew" type="text">
                    <label class="active" for="itemSalesAccountNew">{Literal}New Item Sales Account{/Literal}: </label>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="waves-effect waves-light green btn-flat save-item-sales-account-button left">{Literal}Save{/Literal}</a>
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat cancel-item-sales-account-button left">{Literal}Cancel{/Literal}</a>
    </div>
</div>

<div class="modal-footer">
    <% if(isCreateMode) {%>
    <a href="javascript:void(0)" class="waves-effect waves-green btn green left save-add-button" style="margin-right: 5px;">{Literal}Save & Add Another{/Literal}</a>
    <% } %>
    <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>
    <input id="advanced" type="checkbox" class="toggle-button hide">
    <label style="color:white !important" for="advanced" class="ap-blue waves-effect waves-light right btn-flat toggle-button">{Literal}Advanced Item Setup{/Literal}</label>
</div>