<%= render partial: 'spree/admin/shared/error_messages', locals: { target: @product } %>

<% content_for :page_title do %>
  <%= link_to Spree.t(:products), spree.admin_products_url %> /
  <%= Spree.t(:new_product) %>
<% end %>

<%= form_for [:admin, @product], html: { multipart: true } do |f| %>
  <fieldset data-hook="new_product">
    <%= f.field_container :name, class: ['form-group'] do %>
      <%= f.label :name, Spree.t(:name) %> <span class="required">*</span>
      <%= f.text_field :name, class: 'form-control title', required: :required %>
      <%= f.error_message_on :name %>
    <% end %>

    <div data-hook="new_product_attrs" class="row">
      <% unless @product.has_variants? %>
        <div data-hook="new_product_sku" class="col-12 col-md-4">
          <%= f.field_container :sku, class: ['form-group'] do %>
            <%= f.label :sku, Spree.t(:sku) %>
            <%= f.text_field :sku, size: 16, class: 'form-control' %>
            <%= f.error_message_on :sku %>
          <% end %>
        </div>
      <% end %>

      <div data-hook="new_product_prototype" class="col-12 col-md-4">
        <%= f.field_container :prototype, class: ['form-group'] do %>
          <%= f.label :prototype_id, Spree.t(:prototype) %>
          <%= f.collection_select :prototype_id, Spree::Prototype.all, :id, :name, {include_blank: true}, {class: 'select2'} %>
        <% end %>
      </div>

      <div data-hook="new_product_price" class="col-12 col-md-4">
        <%= f.field_container :price, class: ['form-group'] do %>
          <%= f.label :price, Spree.t(:master_price) %> <span class="required">*</span>
          <%= f.text_field :price, value: number_to_currency(@product.price, unit: ''), class: 'form-control', required: :required %>
          <%= f.error_message_on :price %>
        <% end %>
      </div>

      <div data-hook="new_product_available_on" class="col-12 col-md-4">
        <%= f.field_container :available_on, class: ['form-group'] do %>
          <%= f.label :available_on, Spree.t(:available_on) %>
          <%= f.error_message_on :available_on %>
          <%= f.text_field :available_on, class: 'datepicker form-control' %>
        <% end %>
      </div>

      <div data-hook="new_product_shipping_category" class="col-12 col-md-4">
        <%= f.field_container :shipping_category, class: ['form-group'] do %>
          <%= f.label :shipping_category_id, Spree.t(:shipping_categories) %><span class="required">*</span>
          <%= f.collection_select(:shipping_category_id, @shipping_categories, :id, :name, { include_blank: Spree.t('match_choices.none') }, { class: 'select2', required: :required }) %>
          <%= f.error_message_on :shipping_category_id %>
        <% end %>
      </div>

    </div>

    <div data-hook="product-from-prototype" id="product-from-prototype">
      <%= render template: 'spree/admin/prototypes/show' if @prototype %>
    </div>

    <%= render partial: 'spree/admin/shared/new_resource_links' %>

  </fieldset>
<% end %>

<script type="text/javascript">
//<![CDATA[
  (function($){
    var base_url = "<%= spree.admin_prototypes_url %>";
    var prototype_select = $('#product_prototype_id');
    prototype_select.change(function() {
      var id = prototype_select.val();
      if (id.length) {
        var url = new Uri(base_url);
        url.setPath(url.path() + '/' + id);
        $('#product-from-prototype').load(url.toString());
      } else {
        $('#product-from-prototype').empty();
      }
    })
    if (prototype_select.html() == "") {
      prototype_select.change();
    }
  })(jQuery);
//]]>
</script>