- content_for :page_title do
  %h1.page-title Bulk Order Management
  %a.with-tip{ 'data-powertip' => "Use this page to alter product quantities across multiple orders. Products may also be removed from orders entirely, if required." } What's this?

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

=admin_inject_spree_api_key

%div{ ng: { app: 'ofn.admin', controller: 'AdminOrderMgmtCtrl', init: 'initialise()' } }
  %div{ 'ng-show' => '!spree_api_key_ok' }
    {{ api_error_msg }}
  .filters{ :class => "sixteen columns alpha" }
    .date_filter{ :class => "two columns alpha" }
      %label{ :for => 'start_date_filter' }Start Date
      %br
      %input{ :class => "two columns alpha", :type => "text", :id => 'start_date_filter', 'ng-model' => 'startDate', 'datepicker' => "startDate", 'ofn-confirm-model-change' => "startDate" }
    .date_filter{ :class => "two columns" }
      %label{ :for => 'end_date_filter' }End Date
      %br
      %input{ :class => "two columns alpha", :type => "text", :id => 'end_date_filter', 'ng-model' => 'endDate', 'datepicker' => "endDate", 'ofn-confirm-model-change' => "endDate" }
    .one.column  
    .filter_select{ :class => "three columns" }
      %label{ :for => 'supplier_filter' }Producer
      %br
      %select{ :class => "three columns alpha", :id => 'supplier_filter', 'ofn-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' }Hub
      %br
      %select{ :class => "three columns alpha", :id => 'distributor_filter', 'ofn-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' }Order Cycle
      %br
      %select{ :class => "three columns alpha", :id => 'order_cycle_filter', 'ofn-select2-min-search' => 5, 'ng-model' => 'orderCycleFilter', 'ng-options' => 'oc.id as oc.name for oc in orderCycles'}
    .filter_clear{ :class => "two columns omega" }
      %label{ :for => 'clear_all_filters' }
      %br
      %input.fullwidth{ :type => 'button', :id => 'clear_all_filters', :value => "Clear All", 'ng-click' => "resetSelectFilters()" }
  %hr{ :class => "sixteen columns alpha", 'ng-show' => 'unitsVariantSelected()' }
  %div#group_buy_calculation{ :class => "sixteen columns alpha", 'ng-show' => 'unitsVariantSelected()' }
    %div.shared_resource{ :class => "four columns alpha" }
      %span{ :class => 'three columns alpha' }
        %input{ type: 'checkbox', :id => 'shared_resource', 'ng-model' => 'sharedResource'}
        Shared Resource?
    %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.unit_text }}
    %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 Group Buy Unit Size
        %span.two.columns {{ formattedValueWithUnitName( selectedUnitsProduct.group_buy_unit_size, selectedUnitsProduct, selectedUnitsVariant ) }}
      .one.column  
      .two.columns
        %span.two.columns Total Quantity Ordered
        %span.two.columns {{ formattedValueWithUnitName( sumUnitValues(), selectedUnitsProduct, selectedUnitsVariant ) }}
      .one.column  
      .two.columns
        %span.two.columns Max Quantity Ordered
        %span.two.columns {{ formattedValueWithUnitName( sumMaxUnitValues(), selectedUnitsProduct, selectedUnitsVariant ) }}
      .one.column  
      .two.columns
        %span.two.columns Current Fulfilled Units
        %span.two.columns {{ fulfilled(sumUnitValues()) }}
      .one.column  
      .two.columns
        %span.two.columns Max Fulfilled Units
        %span.two.columns {{ fulfilled(sumMaxUnitValues()) }}
      .one.column.omega  
    %div{ :class => "eight columns alpha", 'ng-hide' => 'allUnitValuesPresent()' }
      %span{ :class => "eight columns alpha", style: 'color:red' }
        WARNING: Some variants do not have a unit value
  %hr{ :class => "sixteen columns alpha", :style => "margin-bottom: 15px" }
  %div{ 'ng-hide' => 'loading || lineItems.length == 0' }
    .controls{ :class => "sixteen columns alpha", :style => "margin-bottom: 15px;" }
      %div{ :class => "three columns alpha" }
        %input{ :class => "fullwidth", :type => "text", :id => 'quick_search', 'ng-model' => 'quickSearch', :placeholder => 'Quick Search' }
      %div{ :class => "three columns" }
        %div.ofn_drop_down{ 'ng-controller' => "DropDownCtrl", :id => "bulk_actions_dropdown", 'ofn-drop-down' => true }
          %span{ :class => 'icon-check' }   Actions
          %span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
          %div.menu{ 'ng-show' => "expanded" }
            %div.menu_item{ :class => "three columns alpha", 'ng-repeat' => "action in bulkActions", 'ng-click' => "selectedBulkAction.callback(filteredLineItems)", 'ofn-close-on-click' => true }
              %span{ :class => 'three columns omega' } {{action.name }}
      %div{ :class => "seven columns" }  
      %div{ :class => "three columns omega" }
        %div.ofn_drop_down{ 'ng-controller' => "DropDownCtrl", :id => "columns_dropdown", 'ofn-drop-down' => true, :style => 'float:right;' }
          %span{ :class => 'icon-reorder' }   Columns
          %span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
          %div.menu{ 'ng-show' => "expanded" }
            %div.menu_item{ :class => "three columns alpha", 'ng-repeat' => "column in columns",  'ofn-toggle-column' => true }
              %span{ :class => 'one column alpha', :style => 'text-align: center'} {{ column.visible && "✓" || !column.visible && " " }}
              %span{ :class => 'two columns omega' } {{column.name }}
  %div.sixteen.columns.alpha#loading{ 'ng-if' => 'loading' }
    %img.spinner{ src: "/assets/loading.gif" }
    %h1 LOADING ORDERS
  %div{ :class => "sixteen columns alpha", 'ng-show' => '!loading && filteredLineItems.length == 0'}
    %h1#no_results No orders found.
  %div{ 'ng-hide' => 'loading || filteredLineItems.length == 0' }
    %table.index#listing_orders.bulk{ :class => "sixteen columns alpha" }
      %thead
        %tr
          %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" } Order No.
          %th.full_name{ 'ng-show' => 'columns.full_name.visible' }
            %a{ :href => '', 'ng-click' => "predicate = 'order.full_name'; reverse = !reverse" } Name
          %th.email{ 'ng-show' => 'columns.email.visible' }
            %a{ :href => '', 'ng-click' => "predicate = 'order.email'; reverse = !reverse" } Email
          %th.phone{ 'ng-show' => 'columns.phone.visible' }
            %a{ :href => '', 'ng-click' => "predicate = 'order.phone'; reverse = !reverse" } Phone
          %th.date{ 'ng-show' => 'columns.order_date.visible' }
            %a{ :href => '', 'ng-click' => "predicate = 'order.completed_at'; reverse = !reverse" } Order Date
          %th.producer{ 'ng-show' => 'columns.producer.visible' }
            %a{ :href => '', 'ng-click' => "predicate = 'supplier.name'; reverse = !reverse" } Producer
          %th.order_cycle{ 'ng-show' => 'columns.order_cycle.visible' }
            %a{ :href => '', 'ng-click' => "predicate = 'order.order_cycle.name'; reverse = !reverse" } Order Cycle
          %th.hub{ 'ng-show' => 'columns.hub.visible' }
            %a{ :href => '', 'ng-click' => "predicate = 'order.distributor.name'; reverse = !reverse" } Hub
          %th.variant{ 'ng-show' => 'columns.variant.visible' }
            %a{ :href => '', 'ng-click' => "predicate = 'units_variant.unit_text'; reverse = !reverse" } Product: Unit
          %th.quantity{ 'ng-show' => 'columns.quantity.visible' } Quantity
          %th.max{ 'ng-show' => 'columns.max.visible' } Max
          %th.actions
          %th.actions
            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' }
          %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.unit_text }}
          %td.quantity{ 'ng-show' => 'columns.quantity.visible' }
            %input{ :type => 'number', :name => 'quantity', 'ng-model' => "line_item.quantity", 'ofn-line-item-upd-attr' => "quantity" }
          %td.max{ 'ng-show' => 'columns.max.visible' } {{ line_item.max_quantity }}
          %td.actions
            %a{ :class => "edit-order icon-edit no-text", 'ofn-confirm-link-path' => "/admin/orders/{{line_item.order.number}}/edit" }
          %td.actions
            %a{ 'ng-click' => "deleteLineItem(line_item)", :class => "delete-line-item icon-trash no-text" }
    %input{ :type => "button", 'value' => 'Update', 'ng-click' => 'pendingChanges.submitAll()' }