<div id="flex-groups-form-modal" class="modal modal-fixed-footer" style="max-height: 100%" <%= (App.rtl ? 'style="direction:rtl"' : '') %>></div>
    <div class="modal-content">
        <div id="flex-groups-form-content">
            <form id="flexGroupDateTimes">
                <div style="padding-bottom: 50px">
                    <h4>{Literal}Flex Group Item Details{/Literal}</h4>
                </div>
                <div class="ap-card-title-text" style="color: white">
                        {Literal}Page 1 of 2{/Literal}
                </div>
                <a class="arrow-nav-right btn-floating btn-medium waves-effect waves-light white company-info-arrow-button2"><i class="large material-icons icon-blue">keyboard_arrow_right</i></a>
                <div>
                    <div class="row">
                        <div class="col s12 m6" style="display:none;">
                            <div class="input-field">
                                <input id="id" type="text" value="<%= flexGroups.id %>" >
                            </div>
                        </div>

                        <div class="col s12 m6">
                            <div class="input-field" >
                                <input type="text" id="name" class="autocomplete2" value="<%= flexGroups.itemDescription %>">
                                <label class="active" for="name">{Literal}Intital Item{/Literal}</label>  
                            </div>
                        </div>
                    </div>
                </div>
                <% 
                    if(newGroup) {
                        flexGroups.startDate = new Date().toISOString().replace('T',' ');
                        flexGroups.endDate = new Date().toISOString().replace('T',' ');
                    }
                    var startDate = moment(flexGroups.startDate).format("hh:mm A");
                    var endDate = moment(flexGroups.endDate).format("hh:mm A");
                %>

                <div class="row">
                    <div class="input-field col s12 m3">
                        <input class="datepicker" id="startDay" type="text" value="<%= flexGroups.startDate.substring(11, 0).trim() %>">
                        <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" id="endDay" type="text" value="<%= flexGroups.endDate.substring(11, 0).trim() %>">
                        <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">
                    <div class="dayCheckboxes col s12 m12">
                        <div class="input-field inline input-field-checkbox">
                            <label>
                                <input id="monday" type="checkbox" class="filled-in" data-type="flexGroups.monday"<%= flexGroups.monday ? 'checked': '' %>>
                                <span>{Literal}MON{/Literal}</span>
                            </label>
                        </div>
                        <div class="input-field inline input-field-checkbox">
                            <label>
                                <input id="tuesday" type="checkbox" class="filled-in" data-type="flexGroups.tuesday"<%= flexGroups.tuesday ? 'checked': '' %>>
                                <span>{Literal}TUE{/Literal}</span>
                            </label>
                        </div>
                        <div class="input-field inline input-field-checkbox">
                            <label>
                                <input id="wednesday" type="checkbox" class="filled-in" data-type="flexGroups.wednesday"<%= flexGroups.wednesday ? 'checked': '' %>>
                                <span>{Literal}WED{/Literal}</span>
                            </label>
                        </div>
                        <div class="input-field inline input-field-checkbox">
                            <label>
                                <input id="thursday" type="checkbox" class="filled-in" data-type="flexGroups.thursday"<%= flexGroups.thursday ? 'checked': '' %>>
                                <span>{Literal}THU{/Literal}</span>
                            </label>
                        </div>
                        <div class="input-field inline input-field-checkbox">
                            <label>
                                <input id="friday" type="checkbox" class="filled-in" data-type="flexGroups.friday"<%= flexGroups.friday ? 'checked': '' %>>
                                <span>{Literal}FRI{/Literal}</span>
                            </label>
                        </div>
                        <div class="input-field inline input-field-checkbox">
                            <label>
                                <input id="saturday" type="checkbox" class="filled-in" data-type="flexGroups.saturday"<%= flexGroups.saturday ? 'checked': '' %>>
                                <span>{Literal}SAT{/Literal}</span>
                            </label>
                        </div>
                        <div class="input-field inline input-field-checkbox">
                            <label>
                                <input id ="sunday" type="checkbox" class="filled-in" data-type="flexGroups.sunday"<%= flexGroups.sunday ? 'checked': '' %>>
                                <span>{Literal}SUN{/Literal}</span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="timePickers">
                        <div class="timePick">
                            <div class="input-field col s12 m3">
                                <input class="timepicker" id="startTime" type="text" value="<%= startDate %>">
                                <label class="active" for="startTime">{Literal}Start Time{/Literal}</label>
                            </div>
        
                            <div class="input-field col s12 m3">
                                <input class="timepicker" id="endTime" type="text" value="<%= endDate %>">
                                <label class="active" for="endTime">{Literal}End Time{/Literal}</label>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <form id="flexItemsTables" style="display: none;">
                <div style="padding-bottom: 50px">
                    <h4>{Literal}Flex Group Item Details{/Literal}</h4>
                </div>
                <a class="arrow-nav-left btn-floating btn-medium waves-effect waves-light white customer-info-button"><i class="large material-icons icon-blue">keyboard_arrow_left</i></a> 
                <div class="ap-card-title-text" style="color: white">
                    {Literal}Page 2 of 2{/Literal}
                </div>
                <div class="row">
                    <div class="col s12 m1">
                        <p>
                            <label>
                            <input id="byItem" class="with-gap" name="searchBy" type="radio" checked />
                            <span>Item</span>
                            </label>
                        </p>
                        <p>
                            <label>
                            <input id="byType" class="with-gap" name="searchBy" type="radio" />
                            <span>Type</span>
                            </label>
                        </p>
                                                    
                    </div>
                    <div class="row col s12 m11">
                        <div id="item-div" class="col s12 m4">
                            <div class="input-field" >
                                <input type="text" id="itemSearch" class="autocomplete">
                                <label for="itemSearch"><i class="material-icons left">filter_list</i>{Literal}Search Item{/Literal}</label>  
                            </div>
                        </div>
                        <div id="type-div" class="col s12 m4" style="display: none">
                            <div class="input-field" >
                                <input type="text" id="selectedType" value=" ">
                                <label class="active" for="selectedType">{Literal}Select Type{/Literal}</label>  
                            </div>
                        </div>
                        <div class="col s12 m3">
                            <div class="input-field">
                                <label class="active" for="sub-group-dropdown">{Literal}Sub Group Number{/Literal}</label>
                                <select id="sub-group-dropdown" required>
                                    <option value="1" selected>1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                </select>
                            </div>
                        </div>
                        <div class="col s12 m2">
                            <div class="input-field">
                                <input id="addedCost" type="number" max="999999.00" value="0">
                                <label class="active" for="addedCost">{Literal}Additional Cost{/Literal}</label>
                            </div>
                        </div>
                        <div class="col s12 m2" style="padding-top: 15px;">
                            <button class="waves-effect waves-light ap-blue btn select-item">{Literal}Add{/Literal}</button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col s12 m12" style="max-height: 400px; overflow: auto">
                            <table class="table highlight" id="itemTable">
                                <thead>
                                    <tr>
                                        <th>Item/Type</th>
                                        <th>{Literal}Description{/Literal}</th>
                                        <th>{Literal}Added Price{/Literal}</th>
                                        <th>{Literal}Sub Group{/Literal}</th>
                                        <th></th>
                                    </tr>
                                </thead>

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

<div class="modal-footer">
    <a href="#delete-flex-group-modal" class="waves-effect waves-light btn-flat red-text right modal-trigger delete-button">{Literal}Delete{/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>
</div>
    

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