<div class="widget-content">

	<div class="headline">
		<h4>Jobs waiting for parts</h4>
	</div>

	<div class="row">
		<div class="form-inline col-sm-6">
	        <strong class="muted" >Status: </strong>
            <select name="status" class="form-control" ng-model="partsFilters.status" ng-options="o.value as o.text for o in statuses"></select>
        </div>
		<div class="col-sm-6 text-right">
			<div class="input-group">
				<input type="text" class="form-control" placeholder="Search by stock name or related id" ng-model="filters.search" />
				<span class="input-group-addon">
					<i class="fa fa-search"></i>
				</span>
			</div>
		</div>
	</div>

	<p>Once a part has been received, you can then attribute it to the original job. This also allows you to prioritize certain parts to certain tasks.</p>

	<div ng-show="loading"><i class="fa fa-spinner fa-spin"></i> Loading parts, please be patient...</div>

	<table class="table table-condensed table-striped">
		<thead>
			<th>Ordered Date</th>
			<th width="25%">Name</th>
			<th>Assigned to</th>
			<th class="centered">Units</th>
			<th class="centered">Related Type</th>
			<th class="centered">Related Id</th>
			<th class="centered">In Stock</th>
			<th class="centered">Ordered</th>
            <th width="15%"></th>
            <th></th>
		</thead>
        <tbody ng-repeat="part in parts">
            <tr ng-hide="(partsFilters.status == '1' && part.stock.quantity == '0') || (partsFilters.status == '0' && part.stock.quantity > '0')" ng-class="{'yellow-highlight': part.quantity <= part.stock.quantity || part.stock.unlimited }">
                <td>{[{ part.created_at | fromNow }]}</td>
                <td><a ng-href="#/stock?query={[{part.stock.name}]}">{[{ part.stock.name }]}</a></td>
                <td><span ng-show="part.related_type == 'task' ">{[{ getUserName(part.related.assigned_to) }]}</span></td>
                <td class="centered">{[{ part.quantity_on_order }]}</td>
                <td class="centered">{[{ part.related_type}]}</td>
                <td class="centered" ng-bind-html="relatedTo(part)"></td>
                <td class="centered">{[{ part.stock.quantity }]}</td>
                <td class="centered">{[{ part.stock.ordered_quantity }]}</td>
                <td style="text-align:right;">
                    <span ng-init="part.received = part.stock.quantity > part.quantity_on_order ? part.quantity_on_order : part.stock.quantity "></span>
                    <input type="number" ng-model="part.received" style="margin: 4px;" class="form-control" max="{[{ part.quantity_on_order < part.stock.quantity ? part.quantity_on_order : part.stock.quantity }]}">
                </td>
                <td>
                	<span class="btn btn-success" ng-disabled="part.stock.quantity == 0 && part.stock.unlimited == 0" ng-click="assignStockToPart(part, part.received)">
                        <i class="fa-fw fa fa-chain"></i>
                    </span>
                </td>
            </tr>
        </tbody>
	</table>
</div>

<br>
<div class="widget-content">

	<div class="headline">
		<h4>Received Build Components</h4>
	</div>

	<div class="row">
		<div class="form-inline col-sm-6">
	        <strong class="muted" >Status: </strong>
            <select name="status" class="form-control" ng-model="buildsFilters.status" ng-options="o.value as o.text for o in statuses"></select>
        </div>
		<div class="col-sm-6 text-right">
			<div class="input-group">
				<input type="text" class="form-control" placeholder="Search by stock name or related id" ng-model="filters.search" />
				<span class="input-group-addon">
					<i class="fa fa-search"></i>
				</span>
			</div>
		</div>
	</div>

	<div ng-show="loading"><i class="fa fa-spinner fa-spin"></i> Loading components, please be patient...</div>

	<table class="table table-condensed table-striped">
		<thead>
			<th>Ordered Date</th>
			<th width="25%">Name</th>
			<th>Assigned to</th>
			<th class="centered">Units</th>
			<th class="centered">Related Type</th>
			<th class="centered">Related Id</th>
			<th class="centered">In Stock</th>
			<th class="centered">Ordered</th>
            <th width="15%"></th>
            <th></th>
		</thead>
        <tbody ng-repeat="build in builds">
            <tr ng-hide="(buildsFilters.status == '1' && component.quantity == '0') || (buildsFilters.status == '0' && component.quantity > '0')" ng-repeat="component in build.ordered_components" ng-class="{'yellow-highlight': component.pivot.quantity <= component.quantity || component.unlimited }">
                <td>{[{ component.pivot.created_at | fromNow }]}</td>
                <td><a ng-href="#/stock?query={[{component.name}]}">{[{ component.name }]}</a></td>
                <td><span ng-show="build.related_type == 'task' ">{[{ getUserName(build.related.assigned_to) }]}</span></td>
                <td class="centered">{[{ component.pivot.quantity }]}</td>
                <td class="centered">{[{ build.related_type }]}</td>
                <td class="centered" ng-bind-html="relatedTo(build)"></td>
                <td class="centered">{[{ component.quantity }]}</td>
                <td class="centered">{[{ component.ordered_quantity }]}</td>
                <td style="text-align:right;">
                    <span ng-init="component.received = component.quantity > component.pivot.quantity ? component.pivot.quantity : component.quantity "></span>
                    <input type="number" ng-model="component.received" style="margin: 4px;" class="form-control" max="{[{ component.pivot.quantity < component.quantity ? component.pivot.quantity : component.quantity }]}">
                </td>
                <td>
                	<span class="btn btn-success" ng-disabled="component.quantity == 0 && component.unlimited == 0" ng-click="assignStockToComponent(component, component.received)">
                        <i class="fa-fw fa fa-chain"></i>
                    </span>
                </td>
            </tr>
        </tbody>
	</table>
</div>