- content_for :app_wrapper_attrs do
  = "ng-app='admin.lineItems'"

- content_for :page_title do
  %h1.page-title
    = t "bom_page_title"
  %a{ 'ofn-with-tip' => t("bom_tip") }
    = t "admin.whats_this"

= render :partial => 'spree/admin/shared/order_sub_menu'

%div{ ng: { controller: 'LineItemsCtrl' } }
  %save-bar{ save: "submit()", form: "bulk_order_form" }
  .filters{ :class => "sixteen columns alpha" }
    .date_filter{ :class => "two columns alpha" }
      %label{ :for => 'start_date_filter' }
        = t "start_date"
      %br
      %input{ :class => "two columns alpha", :type => "text", :id => 'start_date_filter', 'ng-model' => 'startDate', 'datepicker' => "startDate", 'confirm-change' => "confirmRefresh()", 'ng-change' => 'refreshData()' }
    .date_filter{ :class => "two columns" }
      %label{ :for => 'end_date_filter' }
        = t "end_date"
      %br
      %input{ :class => "two columns alpha", :type => "text", :id => 'end_date_filter', 'ng-model' => 'endDate', 'datepicker' => "endDate", 'confirm-change' => "confirmRefresh()", 'ng-change' => 'refreshData()' }
    .one.column  
    .filter_select{ :class => "three columns" }
      %label{ :for => 'supplier_filter' }
        = t "producer"
      %br
      %select{ :class => "three columns alpha", :id => 'supplier_filter', 'select2-min-search' => 5, 'ng-model' => 'supplierFilter', 'ng-options' => 's.id as s.name for s in suppliers' }
    .filter_select{ :class => "three columns" }
      %label{ :for => 'distributor_filter' }
        = t "bom_hub"
      %br
      %select{ :class => "three columns alpha", :id => 'distributor_filter', 'select2-min-search' => 5, 'ng-model' => 'distributorFilter', 'ng-options' => 'd.id as d.name for d in distributors'}
    .filter_select{ :class => "three columns" }
      %label{ :for => 'order_cycle_filter' }
        = t "order_cycle"
      %br
      %select{ :class => "three columns alpha", :id => 'order_cycle_filter', 'select2-min-search' => 5, 'ng-model' => 'orderCycleFilter', 'ng-options' => 'oc.id as oc.name for oc in orderCycles', 'confirm-change' => "confirmRefresh()", 'ng-change' => 'refreshData()'}
    .filter_clear{ :class => "two columns omega" }
      %label{ :for => 'clear_all_filters' }
      %br
      %input.red.fullwidth{ :type => 'button', :id => 'clear_all_filters', :value => "Clear All", 'ng-click' => "resetSelectFilters()" }

  %hr.divider.sixteen.columns.alpha.omega{ ng: { show: 'unitsVariantSelected()' } }

  %div.sixteen.columns.alpha.omega#group_buy_calculation{ ng: { show: 'unitsVariantSelected()' } }
    %div.shared_resource{ :class => "four columns alpha" }
      %span{ :class => 'three columns alpha' }
        %input{ type: 'checkbox', :id => 'shared_resource', 'ng-model' => 'sharedResource'}
        = t "bom_shared"
    %div{ :class => "eight columns" }
      %h6{ :class => "eight columns alpha", 'ng-show' => 'sharedResource', style: 'text-align: center;' } {{ selectedUnitsProduct.name + ": ALL" }}
      %h6{ :class => "eight columns alpha", 'ng-hide' => 'sharedResource', style: 'text-align: center;' } {{ selectedUnitsVariant.full_name }}
    %div{ :class => "four columns omega" }
      %h6{ :class => "four columns alpha", :style => 'text-align: right;' }
        %a{ :href => '#', 'ng-click' => 'selectedUnitsVariant = {};selectedUnitsProduct = {};sharedResource=false;' } Clear
    %hr
    .row
      .one.column.alpha  
      .two.columns
        %span.two.columns
          = t "group_buy_unit_size"
        %span.two.columns {{ formattedValueWithUnitName( selectedUnitsProduct.group_buy_unit_size, selectedUnitsProduct, selectedUnitsVariant ) }}
      .one.column  
      .two.columns
        %span.two.columns
          = t "total_qtt_ordered"
        %span.two.columns {{ formattedValueWithUnitName( sumUnitValues(), selectedUnitsProduct, selectedUnitsVariant ) }}
      .one.column  
      .two.columns
        %span.two.columns
          = t "max_qtt_ordered"
        %span.two.columns {{ formattedValueWithUnitName( sumMaxUnitValues(), selectedUnitsProduct, selectedUnitsVariant ) }}
      .one.column  
      .two.columns
        %span.two.columns
          = t "current_fulfilled_units"
        %span.two.columns {{ fulfilled(sumUnitValues()) }}
      .one.column  
      .two.columns
        %span.two.columns
          = t "max_fulfilled_units"
        %span.two.columns {{ fulfilled(sumMaxUnitValues()) }}
      .one.column.omega  
    %div{ :class => "eight columns alpha", 'ng-hide' => 'allFinalWeightVolumesPresent()' }
      %span{ :class => "eight columns alpha", style: 'color:red' }
        = t "bulk_management_warning"

  %hr.divider.sixteen.columns.alpha.omega

  .controls.sixteen.columns.alpha.omega{ ng: { hide: 'RequestMonitor.loading || lineItems.length == 0' } }
    %div.three.columns.alpha
      %input.fullwidth{ :type => "text", :id => 'quick_search', 'ng-model' => 'quickSearch', :placeholder => 'Quick Search' }
    = render 'admin/shared/bulk_actions_dropdown'
    %div.seven.columns  
    = render 'admin/shared/columns_dropdown'

  %div.sixteen.columns.alpha#loading{ 'ng-if' => 'RequestMonitor.loading' }
    %img.spinner{ src: "/assets/spinning-circles.svg" }
    %h1
      =t "bom_loading"

  %div{ :class => "sixteen columns alpha", 'ng-show' => '!RequestMonitor.loading && filteredLineItems.length == 0'}
    %h1#no_results
      = t "bom_no_results"

  .margin-bottom-50{ 'ng-hide' => 'RequestMonitor.loading || filteredLineItems.length == 0' }
    %form{ name: 'bulk_order_form' }
      %table.index#listing_orders.bulk{ :class => "sixteen columns alpha" }
        %thead
          %tr{ ng: { controller: "ColumnsCtrl" } }
            %th.bulk
              %input{ :type => "checkbox", :name => 'toggle_bulk', 'ng-click' => 'toggleAllCheckboxes()', 'ng-checked' => "allBoxesChecked()" }
            %th.order_no{ 'ng-show' => 'columns.order_no.visible' }
              %a{ :href => '', 'ng-click' => "predicate = 'order.number'; reverse = !reverse" }
                = t "order_no"
            %th.full_name{ 'ng-show' => 'columns.full_name.visible' }
              %a{ :href => '', 'ng-click' => "predicate = 'order.full_name'; reverse = !reverse" }
                = t "name"
            %th.email{ 'ng-show' => 'columns.email.visible' }
              %a{ :href => '', 'ng-click' => "predicate = 'order.email'; reverse = !reverse" }
                = t "email"
            %th.phone{ 'ng-show' => 'columns.phone.visible' }
              %a{ :href => '', 'ng-click' => "predicate = 'order.phone'; reverse = !reverse" }
                = t "phone"
            %th.date{ 'ng-show' => 'columns.order_date.visible' }
              %a{ :href => '', 'ng-click' => "predicate = 'order.completed_at'; reverse = !reverse" }
                =t "bom_date"
            %th.producer{ 'ng-show' => 'columns.producer.visible' }
              %a{ :href => '', 'ng-click' => "predicate = 'supplier.name'; reverse = !reverse" }
                = t "producer"
            %th.order_cycle{ 'ng-show' => 'columns.order_cycle.visible' }
              %a{ :href => '', 'ng-click' => "predicate = 'order.order_cycle.name'; reverse = !reverse" }
                = t "bom_cycle"
            %th.hub{ 'ng-show' => 'columns.hub.visible' }
              %a{ :href => '', 'ng-click' => "predicate = 'order.distributor.name'; reverse = !reverse" }
                = t "bom_hub"
            %th.variant{ 'ng-show' => 'columns.variant.visible' }
              %a{ :href => '', 'ng-click' => "predicate = 'units_variant.full_name'; reverse = !reverse" }
                = t "bom_variant"
            %th.quantity{ 'ng-show' => 'columns.quantity.visible' }
              = t "products_quantity"
            %th.max{ 'ng-show' => 'columns.max.visible' }
              = t "shop_variant_quantity_max"
            %th.final_weight_volume{ 'ng-show' => 'columns.final_weight_volume.visible' }
              = t "weight_volume"
            %th.price{ 'ng-show' => 'columns.price.visible' }
              = t "products_price"
            %th.actions
            %th.actions
              = t "ask"
              %input{ :type => 'checkbox', 'ng-model' => "confirmDelete" }

        %tr.line_item{ 'ng-repeat' => "line_item in filteredLineItems = ( lineItems | filter:quickSearch | selectFilter:supplierFilter:distributorFilter:orderCycleFilter | variantFilter:selectedUnitsProduct:selectedUnitsVariant:sharedResource | orderBy:predicate:reverse )", 'ng-class-even' => "'even'", 'ng-class-odd' => "'odd'", :id => "li_{{line_item.id}}" }
          %td.bulk
            %input{ :type => "checkbox", :name => 'bulk', 'ng-model' => 'line_item.checked', 'ignore-dirty' => true }
          %td.order_no{ 'ng-show' => 'columns.order_no.visible' } {{ line_item.order.number }}
          %td.full_name{ 'ng-show' => 'columns.full_name.visible' } {{ line_item.order.full_name }}
          %td.email{ 'ng-show' => 'columns.email.visible' } {{ line_item.order.email }}
          %td.phone{ 'ng-show' => 'columns.phone.visible' } {{ line_item.order.phone }}
          %td.date{ 'ng-show' => 'columns.order_date.visible' } {{ line_item.order.completed_at }}
          %td.producer{ 'ng-show' => 'columns.producer.visible' } {{ line_item.supplier.name }}
          %td.order_cycle{ 'ng-show' => 'columns.order_cycle.visible' } {{ line_item.order.order_cycle.name }}
          %td.hub{ 'ng-show' => 'columns.hub.visible' } {{ line_item.order.distributor.name }}
          %td.variant{ 'ng-show' => 'columns.variant.visible' }
            %a{ :href => '#', 'ng-click' => "setSelectedUnitsVariant(line_item.units_product,line_item.units_variant)" } {{ line_item.units_variant.full_name }}
          %td.quantity{ 'ng-show' => 'columns.quantity.visible' }
            %input.show-dirty{ :type => 'number', :name => 'quantity', :id => 'quantity', ng: { model:  "line_item.quantity", change: "updateOnQuantity(line_item)", required: "true", class: '{"update-error": line_item.errors.quantity}' }, min: 1, step: 1 }
            %span.error{ ng: { bind: 'line_item.errors.quantity' } }
          %td.max{ 'ng-show' => 'columns.max.visible' } {{ line_item.max_quantity }}
          %td.final_weight_volume{ 'ng-show' => 'columns.final_weight_volume.visible' }
            %input.show-dirty{ :type => 'number', :name => 'final_weight_volume', :id => 'final_weight_volume', ng: { model: "line_item.final_weight_volume", readonly: "unitValueLessThanZero(line_item)", change: "weightAdjustedPrice(line_item)", required: "true", class: '{"update-error": line_item.errors.final_weight_volume}' }, min: 0, 'ng-pattern' => '/[1-9]+/' }
            %span.error{ ng: { bind: 'line_item.errors.final_weight_volume' } }
          %td.price{ 'ng-show' => 'columns.price.visible' }
            %input.show-dirty{ :type => 'text', :name => 'price', :id => 'price', :ng => { value: 'line_item.price * line_item.quantity | currency', readonly: "true", class: '{"update-error": line_item.errors.price}' } }
            %span.error{ ng: { bind: 'line_item.errors.price' } }
          %td.actions
            %a{ href: "/admin/orders/{{line_item.order.number}}/edit", :class => "edit-order icon-edit no-text", 'confirm-link-click' => 'confirmRefresh()' }
          %td.actions
            %a{ 'ng-click' => "deleteLineItem(line_item)", :class => "delete-line-item icon-trash no-text" }