<% breadcrumb_add t("views.right_panel.header.menu_item_instances"), settings_menu_category_simple_menu_item_path(@category, @item), settings_menu_category_simple_menu_item_path(@category, @item),
  t("views.btn.#{action_name}") %>
<br>
<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
    <div class="card">
      <div class="body">
        <%= simple_form_for([:settings,@item, @settings_menu_item_instances]) do |f| %>
        <% if(flash["instance_code_error"]) %>
          <div class="alert alert-danger">Please review the problems below:</div>
        <% end %>

        <div class="col-md- panel">
          <div class="form-group p-l-15">
            <%= f.input :item_instance_code ,:input_html=>{:class=>""},:required=>true  %>

            <% flash.each do |test, msg| %>
              <% str="[\"#{msg['item_instance_code']}\"]"
                 str.gsub!('["', '')
                 str.gsub!('"]', '')
              %>
              <span class="help-block"><%= str %></span>
            <% end %>

            <%= f.input :item_instance_name %>
            <%= f.input :price %>

            <% @item.item_attributes.each do |type, value| %>
              <%= f.input :attributes, :label => type, :collection =>  value.map {|v| [v['name'], v['id']]}, :include_blank => false, :input_html => {:class => "form-control item_sets #{type}"} %>
            <% end %>
            <%= f.input :item_attributes, :as => :hidden, :input_html => { :value => '', :id => "attr_type" } %>

            <%= f.input :is_on_promotion %>
            <%= f.input :promotion_price %>

            <%= f.input :is_available %>
            <%= f.input :is_default %>

            <%= f.input :item_sets, :collection => @item_sets, :input_html => { :multiple => true },  :class => "form-control item_sets" %>
            </div>
          </div>

          <div class="form-actions p-l-15">
             <%= f.submit "Submit",:class => 'btn btn-primary btn-lg waves-effect' %>
          </div>
        <% end %>
        </div>
      </div>
    </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.item_instance_code") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.code_txt") %> <%= t("views.right_panel.detail.for") %> <%= t("views.right_panel.detail.menu_item_instance_txt") %><br>
        2) <%= t("views.right_panel.detail.item_instance_name") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.menu_item_instance_txt") %> <%= t("views.right_panel.detail.name_txt2") %><br>
        3) <%= t("views.right_panel.detail.price") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.price_txt") %> <%= t("views.right_panel.detail.for") %> <%= t("views.right_panel.detail.menu_item_instance_txt") %><br>
        4) <%= t("views.right_panel.detail.item_attributes") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.item_attributes_txt") %> <%= t("views.right_panel.detail.for") %> <%= t("views.right_panel.detail.menu_item_instance_txt") %><br>
        5) <%= t("views.right_panel.detail.is_on_promotion") %> - <%= t("views.right_panel.detail.checkbox") %> <%= t("views.right_panel.detail.for") %> <%= t("views.right_panel.detail.promotion_txt") %><br>
        6) <%= t("views.right_panel.detail.promotion_price") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.promotion_txt") %> <%= t("views.right_panel.detail.price_txt") %> <%= t("views.right_panel.detail.for") %> <%= t("views.right_panel.detail.menu_item_instance_txt") %><br>
        7) <%= t("views.right_panel.detail.is_available") %> - <%= t("views.right_panel.detail.checkbox") %> <%= t("views.right_panel.detail.for") %> <%= t("views.right_panel.detail.status_txt") %><br>
        8) <%= t("views.right_panel.detail.is_default") %> - <%= t("views.right_panel.detail.checkbox") %> <%= t("views.right_panel.detail.for") %> <%= t("views.right_panel.detail.default_txt") %><br>
        9) <%= t("views.right_panel.detail.item_set") %> - <%= t("views.right_panel.detail.multi_select_txt") %> <%= t("views.right_panel.detail.for") %> <%= t("views.right_panel.detail.item_set_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.menu_item_instance_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.menu_item_txt") %> <br>
        </p>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function(){
    attr_type = <%= raw @item.item_attributes.to_json %>;
    attr_id = [];
    if (window.location.pathname.includes('edit')){
      item_attributes = <%= raw @menu_item_instance.item_attributes.to_json %>
      $.each(item_attributes, function (key, value){
    		  $.each(attr_type, function(k, v) {
    				$('.' + k + ' > option').each(function(){
    					if ($(this).val() == value ) {
    						$(this).prop("selected",true)
    					}
    				})
    			});
    	});
    };
    set_option(attr_type);
    $('.item_sets').change(function() {
      attr_id = [];
      set_option(attr_type);
    });

    function set_option(attr_type){
      $.each(attr_type, function(k, v) {
        option = $('.' + k + ' option:selected').val();
        console.log(option);
        attr_id.push(option);
      });
      $('#attr_type').val(JSON.stringify(attr_id));
    };
  })
</script>
