- content_for :main_ng_app_name do
  = "admin.lineItems"

- content_for :html_title do
  = t("admin.orders.bulk_management.page_title")

- 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'
= admin_inject_available_units

%div{ id: "table-filter", "ng-controller": 'LineItemsCtrl' }
  %fieldset
    %save-bar{ dirty: "bulk_order_form.$dirty", persist: "false" }
      %input.red{ type: "button", value: "Save Changes", "ng-click": "submit()", "ng-disabled": "!bulk_order_form.$dirty" }
    %legend{ align: 'center'}= t(:search)
    %div{ :class => "sixteen columns alpha" }
      .quick_search.three.columns.alpha
        %label{ for: 'quick_filter' }
        %br
        %input.quick-search.fullwidth{ name: "quick_filter", type: 'text', placeholder: t('admin.quick_search'), "ng-keypress": "$event.keyCode === 13 && fetchResults()", "ng-model": 'query' }
      .one.columns
         
      .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', placeholder: "#{t(:all)}", blank: "{ id: '', name: '#{t(:all)}' }", "on-selecting": "confirmRefresh", "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', placeholder: "#{t(:all)}", blank: "{ id: '', name: '#{t(:all)}' }", "on-selecting": "confirmRefresh", "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', placeholder: "#{t(:all)}", blank: "{ id: '', name: '#{t(:all)}' }", "on-selecting": "confirmRefresh", "ng-model": 'orderCycleFilter' }
      .date_filter{class: "three columns"}
        %label
          = t("date_range")
        %br
          %div{ data: { controller: "flatpickr", "flatpickr-mode-value": "range", "flatpickr-default-date": "{{ [startDate, endDate] }}" } }
            %input.datepicker.fullwidth{ class: "datepicker", data: { "flatpickr-target": "instance" } }
            %input{ type: "text", id: 'start_date_filter', 'ng-model': "startDate", data: { "flatpickr-target": "start" }, style: "display: none;" }
            %input{ type: "text", id: 'end_date_filter', 'ng-model': "endDate", data: { "flatpickr-target": "end" }, style: "display: none;" }
      
      .clearfix
      .actions.filter-actions
        %a.button.icon-search{'ng-click' => 'refreshData()'}
          = t(:filter_results)
        %a.button{'ng-click' => 'resetSelectFilters()', "id": "clear_filters_button" }
          =  t(:clear_filters)

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

  .sixteen.columns.alpha.omega#group_buy_calculation{ "ng-show": 'unitsVariantSelected()', "ng-cloak": true }
    .one.columns.alpha
    .shared_resource.four.columns.alpha
      %input{ type: 'checkbox', :id => 'shared_resource', 'ng-model' => 'sharedResource'}
      %span
        = t("admin.orders.bulk_management.shared")
    .eight.columns
      %h6.text-center{ 'ng-show' => 'sharedResource' } 
        {{ selectedUnitsProduct.name + ": " }}
        = t('admin.orders.bulk_management.all')
      %h6.text-center{ 'ng-hide' => 'sharedResource' } {{ selectedUnitsVariant.full_name }}
    .three.columns
      %h6.text-right
        %a{ :href => '#', 'ng-click' => 'resetSelectedUnitsVariant()' }= t('admin.clear')
    %hr
    .row
      .one.columns.alpha
      .three.columns
        .text-center
          = t("admin.orders.bulk_management.group_buy_unit_size")
        .text-center {{ getGroupBySizeFormattedValueWithUnitName(selectedUnitsProduct.group_buy_unit_size , selectedUnitsVariant ) }}
      .three.columns
        .text-center
          = t("admin.orders.bulk_management.total_qtt_ordered")
        .text-center {{ formattedValueWithUnitName( sumUnitValues(), selectedUnitsVariant ) }}
      .three.columns
        .text-center
          = t("admin.orders.bulk_management.max_qtt_ordered")
        .text-center {{ formattedValueWithUnitName( sumMaxUnitValues(), selectedUnitsVariant ) }}
      .three.columns
        .text-center
          = t("admin.orders.bulk_management.current_fulfilled_units")
        .text-center {{ fulfilled(sumUnitValues()) }}
      .three.columns
        .text-center
          = t("admin.orders.bulk_management.max_fulfilled_units")
        .text-center {{ fulfilled(sumMaxUnitValues()) }}
    .row
      %div{'ng-hide' => 'allFinalWeightVolumesPresent()' }
        %span{ style: 'color:red' }
          = t("admin.orders.bulk_management.variants_without_unit_value")

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

  %div{ style: "display: flex; justify-content: flex-start; column-gap: 10px; margin-bottom: 15px", "ng-hide": 'RequestMonitor.loading || line_items.length == 0' }
    -# This -20px is a hack to make the dropdowns align properly
    %div{ style: "margin-right: -20px;" } 
      = render 'admin/shared/bulk_actions_dropdown'
    %div
      %columns-dropdown{ action: "#{controller_name}_#{action_name}" }
    %div{ style: "flex-grow: 1"}
      %div{ style: "float: right;"}
        = render partial: 'admin/shared/angular_per_page_controls', locals: { position: "right", model: "line_items" }
 

  .sixteen.columns.alpha#loading{ 'ng-if' => 'RequestMonitor.loading' }
    = render partial: "components/admin_spinner"
    %h1
      = t("admin.orders.bulk_management.loading")

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

  .margin-bottom-50{ "ng-hide": 'RequestMonitor.loading || filteredLineItems.length == 0', "ng-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_for_sorting')" }
                = 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_utc_iso8601')" }
                = 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')} (#{Spree::Money.currency_symbol})"
            %th.actions

        %tr.line_item{ "ng-repeat": "line_item in filteredLineItems = ( line_items | orderBy:sorting.predicate:sorting.reverse )", "ng-class-even": "'even'", "ng-class-odd": "'odd'", "ng-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_for_sorting }}
          %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', "ng-bind-html": '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', min: 1, step: 1, "ng-model": "line_item.quantity", "ng-change": "updateOnQuantity(line_item)", "ng-required": "true", "ng-class": '{"update-error": line_item.errors.quantity}' }
            %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', step: 'any', name: 'final_weight_volume', id: 'final_weight_volume', min: 0, "ng-pattern": '/[0-9]*[.]?[0-9]+/', "ng-model": "line_item.final_weight_volume", "ng-readonly": "unitValueLessThanZero(line_item)", "ng-change": "weightAdjustedPrice(line_item)", "ng-required": "true", "ng-class": '{"update-error": line_item.errors.final_weight_volume}' }
            %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:""', "ng-readonly": "true", "ng-class": '{"update-error": line_item.errors.price}' }
            %span.error{ "ng-bind": 'line_item.errors.price' }
          %td.actions
            %a{ class: "edit-order icon-edit no-text", "confirm-link-click": 'confirmRefresh()', "ng-href": "/admin/orders/{{line_item.order.number}}/edit" }
          %td.actions
            %a{ 'ng-click' => "deleteLineItem(line_item)", :class => "delete-line-item icon-trash no-text" }

  %div{'ng-show' => "!RequestMonitor.loading && line_items.length > 0" }
    = render partial: 'admin/shared/angular_pagination'

= render 'spree/admin/shared/custom-confirm'