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

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

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

= admin_inject_column_preferences module: 'admin.lineItems'

%div{ ng: { controller: 'LineItemsCtrl' } }
  %save-bar{ dirty: "bulk_order_form.$dirty", persist: "false" }
    %input.red{ type: "button", value: "Save Changes", ng: { click: "submit()", disabled: "!bulk_order_form.$dirty" } }

  .filters{ :class => "sixteen columns alpha" }
    .date_filter{ :class => "two columns alpha" }
      %label{ :for => 'start_date_filter' }
        = t("admin.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("admin.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("admin.producer")
      %br
      %input#supplier_filter.ofn-select2.fullwidth{ type: 'number', 'min-search' => 5, data: 'suppliers', blank: "{ id: 0, name: '#{t(:all)}' }", ng: { model: 'supplierFilter' } }
    .filter_select{ :class => "three columns" }
      %label{ :for => 'distributor_filter' }
        = t("admin.shop")
      %br
      %input#distributor_filter.ofn-select2.fullwidth{ type: 'number', 'min-search' => 5, data: 'distributors', blank: "{ id: 0, name: '#{t(:all)}' }", ng: { model: 'distributorFilter' } }
    .filter_select{ :class => "three columns" }
      %label{ :for => 'order_cycle_filter' }
        = t("admin.order_cycle")
      %br
      %input#order_cycle_filter.ofn-select2.fullwidth{ type: 'number', 'min-search' => 5, data: 'orderCycles', blank: "{ id: 0, name: '#{t(:all)}' }", on: { selecting: "confirmRefresh" }, ng: { model: 'orderCycleFilter', change: 'refreshData()' } }
    .filter_clear{ :class => "two columns omega" }
      %label{ :for => 'clear_all_filters' }
      %br
      %input.red.fullwidth{ :type => 'button', :id => 'clear_all_filters', :value => t('admin.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()', cloak: true } }
    %div.shared_resource{ :class => "four columns alpha" }
      %span{ :class => 'three columns alpha' }
        %input{ type: 'checkbox', :id => 'shared_resource', 'ng-model' => 'sharedResource'}
        = t("admin.orders.bulk_management.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;' }= t('admin.clear')
    %hr
    .row
      .one.column.alpha  
      .two.columns
        %span.two.columns
          = t("admin.orders.bulk_management.group_buy_unit_size")
        %span.two.columns {{ formattedValueWithUnitName( selectedUnitsProduct.group_buy_unit_size, selectedUnitsProduct, selectedUnitsVariant ) }}
      .one.column  
      .two.columns
        %span.two.columns
          = t("admin.orders.bulk_management.total_qtt_ordered")
        %span.two.columns {{ formattedValueWithUnitName( sumUnitValues(), selectedUnitsProduct, selectedUnitsVariant ) }}
      .one.column  
      .two.columns
        %span.two.columns
          = t("admin.orders.bulk_management.max_qtt_ordered")
        %span.two.columns {{ formattedValueWithUnitName( sumMaxUnitValues(), selectedUnitsProduct, selectedUnitsVariant ) }}
      .one.column  
      .two.columns
        %span.two.columns
          = t("admin.orders.bulk_management.current_fulfilled_units")
        %span.two.columns {{ fulfilled(sumUnitValues()) }}
      .one.column  
      .two.columns
        %span.two.columns
          = t("admin.orders.bulk_management.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("admin.orders.bulk_management.variants_without_unit_value")

  %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  
    %columns-dropdown{ action: "#{controller_name}_#{action_name}" }

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

  %div{ class: "sixteen columns alpha", ng: { show: '!RequestMonitor.loading && filteredLineItems.length == 0', cloak: true } }
    %h1#no_results
      = t("admin.orders.bulk_management.no_results")

  .margin-bottom-50{ ng: { hide: 'RequestMonitor.loading || filteredLineItems.length == 0', cloak: true } }
    %form{ name: 'bulk_order_form' }
      %table.index#listing_orders.bulk{ :class => "sixteen columns alpha", ng: { show: "initialized" } }
        %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' => "sorting.toggle('order.number')" }
                = t("admin.orders.bulk_management.order_no")
            %th.full_name{ 'ng-show' => 'columns.full_name.visible' }
              %a{ :href => '', 'ng-click' => "sorting.toggle('order.full_name')" }
                = t("admin.name")
            %th.email{ 'ng-show' => 'columns.email.visible' }
              %a{ :href => '', 'ng-click' => "sorting.toggle('order.email')" }
                = t("admin.email")
            %th.phone{ 'ng-show' => 'columns.phone.visible' }
              %a{ :href => '', 'ng-click' => "sorting.toggle('order.phone')" }
                = t("admin.phone")
            %th.date{ 'ng-show' => 'columns.order_date.visible' }
              %a{ :href => '', 'ng-click' => "sorting.toggle('order.completed_at')" }
                = t("admin.orders.bulk_management.order_date")
            %th.producer{ 'ng-show' => 'columns.producer.visible' }
              %a{ :href => '', 'ng-click' => "sorting.toggle('supplier.name')" }
                = t("admin.producer")
            %th.order_cycle{ 'ng-show' => 'columns.order_cycle.visible' }
              %a{ :href => '', 'ng-click' => "sorting.toggle('order.order_cycle.name')" }
                = t("admin.order_cycle")
            %th.hub{ 'ng-show' => 'columns.hub.visible' }
              %a{ :href => '', 'ng-click' => "sorting.toggle('order.distributor.name')" }
                = t("admin.shop")
            %th.variant{ 'ng-show' => 'columns.variant.visible' }
              %a{ :href => '', 'ng-click' => "sorting.toggle('units_variant.full_name')" }
                = t("admin.orders.bulk_management.product_unit")
            %th.quantity{ 'ng-show' => 'columns.quantity.visible' }
              = t("admin.quantity")
            %th.max{ 'ng-show' => 'columns.max.visible' }
              = t("admin.orders.bulk_management.max")
            %th.final_weight_volume{ 'ng-show' => 'columns.final_weight_volume.visible' }
              = t("admin.orders.bulk_management.weight_volume")
            %th.price{ 'ng-show' => 'columns.price.visible' }
              = t("admin.price (#{currency_symbol})")
            %th.actions
            %th.actions
              = t("admin.orders.bulk_management.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:sorting.predicate:sorting.reverse )", 'class-even' => "'even'", 'class-odd' => "'odd'", attr: { 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{ ng: { 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" }