<div class="modal-header">
    <button type="button" class="close" ng-click="cancel()">&times;</button>
    <h3 class="modal-title">Stock Product Details</h3>
</div>
<form id='stockForm' name='stockForm' ng-submit="save()" class="form-horizontal">
    <div class="modal-body" style="min-height: 300px;">

        <uib-tabset>
            <uib-tab heading="Overview">
                <div class="row">
                    <div class="alert alert-danger" ng-if="errors">
                        <span ng-bind-html="errors"></span>
                    </div>
                    <br>
                    <div class="col-sm-6">
                        <fieldset>
                            <legend>Basic Details</legend>
                            <div class="form-group">
                                <label class="col-sm-3 control-label label-required" for="inputName">Name:</label>
                                <div class="col-sm-9">
                                    <input id="inputName" type="text" name="name" ng-model="product.name" class="form-control" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label" ng-class="{'label-required': product.type == 'stock'}" for="inputCategory">Category:</label>
                                <div class="col-sm-9">
                                    <select id="inputCategory" ng-required="product.type == 'stock'" name="group_id" class="form-control" ng-model="product.group_id" ng-options="o.id as o.name for o in categories">
                                        <option value="">Select a category</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group" ng-show="!quick_mode">
                                <label class="col-sm-3 control-label label-required"  for="inputType">Type:</label>
                                <div class="col-sm-9">
                                    <select id="inputType" name="type" ng-model="product.type" class="form-control" required ng-options="o for o in product_types" ></select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label label-required" for="inputPrice">Price:</label>
                                <div class="col-sm-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><strong>£</strong></span>
                                        <input class="form-control" numbers-only id="inputPrice" type="text" name="price" ng-model="product.price_excluding_vat" required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                    <label class="col-sm-3 control-label label-required">Price include <strong>VAT</strong>: </label>
                                    <div class="col-sm-9">
                                        <label class="radio-inline">
                                            <input type="radio" name="price_vat_included" value="1" ng-model="product.price_vat_included" required> Yes
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="price_vat_included" value="0" ng-model="product.price_vat_included"> No
                                        </label>
                                    </div>
                            </div>
                            {{-- added by nadeem c.16.1.17 new feature - discontinued stock --}}
                             <div class="form-group">
                                    <label class="col-sm-3 control-label">Discontinued: </label>
                                    <div class="col-sm-9">
                                        <label class="radio-inline">
                                            <input type="checkbox" name="price_vat_included" ng-true-value="1" ng-false-value="0" ng-model="product.discontinued">
                                        </label>
                                    </div>
                            </div>
                             <div class="form-group" ng-show="!quick_mode">
                                    <label class="col-sm-3 control-label label-required">Is unlimited:</label>
                                    <div class="col-sm-9">
                                        <label class="radio-inline">
                                            <input type="radio" name="unlimited" value="1" ng-model="product.unlimited" required> Yes
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="unlimited" value="0" ng-disabled="product.type=='service'" ng-model="product.unlimited"> No
                                        </label>
                                    </div>
                            </div>
                            <div class="form-group" ng-show="!quick_mode">
                                <label class="col-sm-3 control-label" for="inputModelNumber">EAN:</label>
                                <div class="col-sm-9">
                                    <div class="input-group">
                                        <input id="inputModelNumber" type="text" name="model_number" class="form-control" ng-model="product.model_number">
                                        <span class="input-group-btn">
                                            <span class="btn btn-default" tooltip="Generate random EAN" ng-click="generateRandomEAN()"><i class="fa fa-random"></i></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group" ng-show="!quick_mode">
                                <label class="col-sm-3 control-label" for="inputModelNumber">Build:</label>
                                <div class="col-sm-9">
                                    <label class="radio-inline">
                                            <input type="radio" name="composite" value="1" ng-model="product.composite" required> Yes
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="composite" value="0" ng-model="product.composite"> No
                                        </label>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <div class="col-sm-6" ng-show="!quick_mode">
                        <fieldset>
                             <legend>Additional Details</legend>
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="inputMargin">Category:</label>
                                <div class="col-sm-9">
                                    <select name="additional_category" ng-model="product.additional_category" class="form-control">
                                        <option value="">Select a category</option>
                                        <option value="parts">Parts</option>
                                        <option value="labor">Labor</option>
                                        <option value="service">Service</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="inputMargin">Purchase Category:</label>
                                <div class="col-sm-9">
                                    <select name="purchase_type" ng-model="product.purchase_type" class="form-control">
                                        <option value="">Select a category</option>
                                        <option value="parts">Parts</option>
                                        <option value="labor">Labor</option>
                                        <option value="service">Service</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group" ng-show="product.type=='stock'">
                                <label class="col-sm-3 control-label" for="inputBuffer">Buffer:</label>
                                <div class="col-sm-9">
                                    <input id="inputBuffer" class="form-control" type="text" name="buffer" numbers-only ng-model="product.buffer" >
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="inputQuantityToOrder">Quantity to Order:</label>
                                <div class="col-sm-9">
                                    <input id="inputQuantityToOrder" class="form-control" numbers-only type="text" name="buffer" ng-model="product.quantity_to_order" >
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="inputPartQuantity">Notes:</label>
                                <div class="col-sm-9">
                                    <textarea rows="5" name="problem" class="form-control" ng-model="product.notes" ></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label label-required" for="inputPartUrgency">Urgency:</label>
                                <div class="col-sm-9">
                                    <select name="type" class="form-control" ng-model="product.severity_id" ng-options="o.id as o.name for o in severities"></select>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </uib-tab>

            <uib-tab heading="Build Components" ng-if="product.composite == '1'">
                <div style="min-height: 400px; padding: 20px;">
                    <div class="alert alert-warning" ng-show="product.id">
                        <strong><i class="fa fa-exclamation-triangle"></i> Attention: </strong>
                        All the changes you will make will propagate to the existing {[{ product.quantity }]} items in stock
                        <span ng-show="product.builds.length > 0 "> and the following builds in progres: <br>
                            <ul>
                                <li ng-repeat="build in product.builds">{[{ build.quantity }]} {[{ build.name }]} in the {[{ build.related_type }]} {[{ build.related_id }]} being done by {[{ build.related.user ? build.related.user.name : 'No One' }]}</li>
                            </ul>
                        </span>
                       .

                    </div>
                    <h4>Configure build components</h4>
                    <div class="form-group">
                        <input class="form-control" type="text" placeholder="Search and add stock" ng-model="part_search" search-clear="true" search-callback="addCompositeItem(ev, data)" autocomplete="off" product-search>
                    </div>
                    <table class="table" style="margin-top: 30px;" ng-show="product.composite_items.length > 0">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th class="centered">Quantity</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="item in product.composite_items">
                                <td ng-bind="::item.name"></td>
                                <td class="centered">
                                    <input type="text" class="input-small" ng-model="item.pivot.quantity">
                                </td>
                                <td>
                                    <a href="#" class="pull-right" ng-click="product.composite_items.splice($index, 1)" data-eat-click>Remove</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                </div>
            </uib-tab>

        </uib-tabset>

    </div>


    <div class="form-actions">
        <span ng-show="product.approval_required == 1" ng-click="approveProduct()" class="btn btn-success" ng-show="product.id" ng-disabled="loading"  ><i ng-if="loading" class="fa fa-spinner fa-spin"></i> Approve</span>
        <button class="btn btn-primary" ng-hide="product.id" ng-disabled="loading" ><i ng-if="loading" class="fa fa-spinner fa-spin"></i> Create</button>
        <button class="btn btn-warning" ng-show="product.id" ng-disabled="loading"  ><i ng-if="loading" class="fa fa-spinner fa-spin"></i> Update</button>

    </div>
</form>