extends ./grid

block vars
    - var script = "planningAtLocation"
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-at-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") #{__("forecast")}
                    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 table-data")
                    thead
                        tr
                            th#colCodeMat(data-ng-click="topPredicate = 'code'; topReverse=!topReverse")
                                div.left
                                    span.text.underline #{__('material')}
                            th#colStarting(data-ng-click="topPredicate = 'starting'; topReverse=!topReverse")
                                div.right
                                    span.text.underline #{__('starting level')}
                            th#colDemand(data-ng-click="topPredicate = 'demand'; topReverse=!topReverse")
                                div.right
                                    span.text.underline #{__('demand')}
                            th#colDeliveries(data-ng-click="topPredicate = 'deliveries'; topReverse=!topReverse")
                                div.right
                                    span.text.underline #{__('deliveries')}
                            th#colEnding(data-ng-click="topPredicate = 'ending'; topReverse=!topReverse")
                                div.right
                                    span.text.underline #{__('ending level')}
                    tbody
                        tr(data-ng-show="!materialsPlanning.length")
                            td  
                            td  
                            td  
                            td  
                            td  
                        tr(data-ng-show="materialsPlanning.length", data-ng-repeat="material in materialsPlanning | orderBy : topPredicate : topReverse")
                            td(title="{{material.code}}: {{material.materialDesc}}", ng-click="gotoMaterialDetail(material.code)") {{ getMaterialName(material) }}
                            td {{ material.starting | number : 2 || 0}}
                            td {{ material.demand | number : 2 || 0}}
                            td {{ material.deliveries | number : 2 || 0}}
                            td {{ material.ending | number : 2 || 0}}
                // end #table-location-forecast
                h3 #{__("demand breakdown")}
                table(id="table-location-demand", class="table scrollFix table-striped table-data")
                    thead
                        tr
                            th#colMaterial(ng-click="bottomPredicate = 'name'; bottomReverse=!bottomReverse")
                                div.left
                                    span.text.underline #{__('material')}
                            th#colOnHand(ng-click="bottomPredicate = 'confirmed'; bottomReverse=!bottomReverse")
                                div.right
                                    span.text.underline #{__('confirmed')}
                            th#colOnHand(ng-click="bottomPredicate = 'willCall'; bottomReverse=!bottomReverse")
                                div.right
                                    span.text.underline #{__('will call')}
                            th#colOnHand(ng-click="bottomPredicate = 'weatherPermitting'; bottomReverse=!bottomReverse")
                                div.right
                                    span.text.underline #{__('weather permitting')}
                    tbody
                        tr(data-ng-show="!materials.length")
                            td
                            td
                            td
                            td
                        tr(data-ng-show="materials.length", data-ng-repeat="material in materials | orderBy : bottomPredicate : bottomReverse")
                            td(title="{{material.desc || ''}}", data-ng-click="gotoMaterialDetail(material.code)") {{ material.name }}
                            td {{ material.confirmed }}
                            td {{ material.willCall }}
                            td {{ material.weatherPermitting }}
                // end #table-location-demand
                div(class="demand-date-dir",
                    data-ng-model="time.date",
                    data-step="1")
                // end .demand-date-dir