<div class="page-header">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="<%= root_path %>">Home</a></li>
    <li class="breadcrumb-item"><a href="<%= settings_menu_item_groups_path %>">Menu Item Groups</a></li>
    <li class="breadcrumb-item active">Edit</li>
    <span class="float-right">
      <%= link_to t('.back', :default => t("views.btn.back")), settings_menu_item_groups_path %>
    </span>
  </ol>
</div>
<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
    <%= simple_form_for ([:settings,@settings_menu_item_group]), :url => settings_menu_item_group_path do |f| %>
	  <%= f.error_notification %>
	  <div class="form-inputs p-l-15">
	   <%= f.input :name, :label => "Group Name" ,input_html: {required: true }%>
      <%= f.label :lookup_type, label: 'Menu Category', :class => "control-label string optional bmd-label-static" %>
      <%= f.collection_select :lookup_type, @menu_category, :id, :name, {}, {:class =>"form-control"} %>
       <%= f.label :value, label: 'Menu Items', :class => "control-label string optional bmd-label-static" %>
      <%= f.grouped_collection_select :value, @menu_category, :menu_items, :name, :item_code, :name, {}, {:class =>"form-control", :multiple=> true} %>
	  </div>

	  <div class="form-actions p-l-15">
       <%= f.submit "Submit",:class => 'btn btn-primary btn-lg waves-effect' %>
	  </div>
	<% end %>
  </div>
 <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
    <div class="card">
      <div class="body">
        <h5><i class="material-icons md-18">view_headline <%= t("views.right_panel.header.page_detail") %></i></h5>
        <p>
        1) <%= t("views.right_panel.detail.lookup") + " " + t("views.right_panel.detail.type_txt") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.lookup_txt") %> <br>
        2) <%= t("views.right_panel.detail.name") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.name_txt2") %> <br>
        3) <%= t("views.right_panel.detail.value") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.value_txt") %> <br>
        </p>
        <h5><i class="material-icons md-18">list <%= t("views.right_panel.header.button_lists") %></i> </h5>
        <p>
        1) <%= t("views.right_panel.button.submit") %> - <%= t("views.right_panel.detail.submit_btn_txt") %> <%= t("views.right_panel.detail.lookup_txt") %> <br>
        </p>
        <h5><i class="material-icons md-18">list <%= t("views.right_panel.header.link_lists") %></i> </h5>
        <p>
          1) <%= t("views.right_panel.button.home") %> - <%= t("views.right_panel.detail.home_txt") %> <br>
          2) <%= t("views.right_panel.button.back") %> - <%= t("views.right_panel.detail.back_txt") %> <%= t("views.right_panel.detail.lookup_txt") %> <br>
        </p>
      </div>
    </div>
  </div>
</div>
<script>
jQuery(function() {
  $( document ).ready(function() {
  menu_items = $("#lookup_value").html();
  menu_category = $('#lookup_lookup_type :selected').text();
  options = $(menu_items).filter('optgroup[label="' + menu_category + '"]').html();
  $('#lookup_value').html(options)
    $('#lookup_lookup_type').change(function() {
      menu_category = $('#lookup_lookup_type :selected').text();
      options = $(menu_items).filter('optgroup[label="' + menu_category + '"]').html();
      if (options != null)
       $('#lookup_value').html(options);
      else
       $('#lookup_value').empty();
    });
  });
});
 </script>
