extends ./grid
block vars
    - var script = "planningAcrossLocations"
block left
    event(params="deliveries")
    div(class="events-dir-alt", data-title="Events", data-ng-model="eventModel", data-columns="eventModelCol")
block right
    // event(params="events")
block middle
    div(id="planning-across-location")
        div(class="inner")
            div(class="inset")
                div(class="accordion-container")
                    div(class="accordion accordion-dir", ng-repeat="uom in uoms")
                        div(class="accordion-header")
                            h3(style="text-transform:uppercase;") {{ (uom == "undefined") ? "&nbsp" : uom }}
                        div(class="accordion-section")
                            div(class="highchart-dir",
                                data-options="{{charts[uom]}}",
                                data-series="charts[uom].series")
                // end .accordion-container

                div(class="demand-time-dir",
                    data-ng-model="time",
                    data-step="4")
                // end .demand-time-dir

                div
                    h3(class="pull-left") #{__('Planning')}
                    div(class="pull-right")
                        form(class="form-search")
                            input(id="input-search", class="input-medium search-query", data-ng-model="searchText", type="text", placeholder="#{__("Search...")}")
                div(class="clear")
                table(id="table-location-forecast", class="table scrollFix table-striped")
                    thead
                        tr
                            th#colCodeLocation(data-ng-click="topPredicate = 'code'; topReverse=!topReverse") #{__('location')}
                            th#colStarting(data-ng-click="topPredicate = 'starting'; topReverse=!topReverse") #{__('starting level')}
                            th#colDemand(data-ng-click="topPredicate = 'demand'; topReverse=!topReverse") #{__('demand')}
                            th#colDeliveries(data-ng-click="topPredicate = 'deliveries'; topReverse=!topReverse") #{__('deliveries')}
                            th#colEnding(data-ng-click="topPredicate = 'ending'; topReverse=!topReverse") #{__('ending level')}
                    tbody
                        tr(data-ng-show="!filteredPlanningLocations.length")
                            td  
                            td  
                            td  
                            td  
                            td  
                        tr(data-ng-show="filteredPlanningLocations.length", data-ng-repeat="location in filteredPlanningLocations | orderBy : topPredicate : topReverse")
                            td(title="{{location.code}}: {{location.location}}", ng-click="gotoMaterialDetail(location.code)") {{ location.location }}
                            td {{ location.starting | number : 2 || 0}}
                            td {{ location.demand | number: 2 || 0}}
                            td {{ location.deliveries | number: 2 || 0}}
                            td {{ location.ending | number: 2 || 0}}
                // end table
                h3 #{__('demand breakdown')}
                table(id="demand-breakdown", class="table scrollFix table-striped")
                    thead
                        tr
                            th#colLocation(ng-click="predicate = 'nameLocation'; reverse=!reverse") #{__('location')}
                            th#colPredicted(ng-click="predicate = 'device'; reverse=!reverse") #{__('confirmed')}
                            th#colDevice(ng-click="predicate = 'device'; reverse=!reverse") #{__('will call')}
                            th#colDeliveries(ng-click="predicate = 'device'; reverse=!reverse") #{__('weather permitting')}
                    tbody
                        tr(data-ng-show="!filteredLocations.length")
                            td
                            td
                            td
                            td
                        tr(ng:repeat="location in filteredLocations")
                            td: {{ location.location }}
                            td: {{ location.confirmed }}
                            td: {{ location.willcall }}
                            td: {{ location.weatherPermitting }}
                // end table
                div(class="demand-date-dir",
                    data-ng-model="time.date",
                    data-step="1")
                // end .demand-date-dir