<form class="form-horizontal" role=form>
    <h2>Recipe Detail</h2>

    <div class="form-group">
        <label for="txtName" class="col-md-2 control-label">Name</label>

        <div class="col-md-4">
            <input type="text" id="txtName" class="form-control" ng-model="recipe.Name"/>
        </div>
        <div class="col-md-2">
            <input type="text" class="form-control" ng-model="recipe.Quantity" placeholder="Quantity"/>
        </div>
        <div class="col-md-2">
            <div class="input-group">
                <input class="form-control" id="txtDate" type="text" datepicker-popup="dd-MMM-yyyy" placeholder="Date"
                       ng-model="recipe.Date"/>
                <span class="input-group-btn">
                    <button class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </div>
        </div>
        <div class="col-md-2">
            <p class="form-control-static">{{costPrice | currency}} / {{costPrice * 100 / recipe.SalePrice | number:2 }}%</p>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-2">
            <label class="checkbox-inline control-label pull-right">
                <input type="checkbox" ng-model="recipe.IsSemi"> Is Semi?
            </label>
        </div>
        <div class="col-md-2" ng-show="recipe.IsSemi">
            <input type="text" class="form-control" ng-model="recipe.Units" placeholder="Units"/>
        </div>
        <div class="col-md-2" ng-show="recipe.IsSemi">
            <input type="text" class="form-control" ng-model="recipe.Fraction" placeholder="Fraction"/>
        </div>
        <div class="col-md-2" ng-show="recipe.IsSemi">
            <input type="text" class="form-control" ng-model="recipe.FractionUnits" placeholder="Fraction Units"/>
        </div>
        <div class="col-md-2" ng-hide="recipe.IsSemi">
            <div class="input-group">
                <span class="input-group-addon">₹</span>
                <input type="text" id="txtPrice" class="form-control" ng-model="recipe.SalePrice"
                       placeholder="Sale Price"/>
            </div>
        </div>
        <div class="col-md-4" ng-hide="recipe.IsSemi">
            <select id="ddlType" class="form-control" ng-model="recipe.ProductGroup.ProductGroupID"
                    ng-options="l.ProductGroupID as l.Name for l in productGroups"> </select>
        </div>
    </div>
    <div class="form-group">
        <label for="txtAccount" class="col-md-2 control-label">Ingredient</label>

        <div class="col-md-5">
            <input type="text" id="txtProduct" class="form-control" ng-model="product"
                   typeahead="product as product.Name for product in products($viewValue)"
                   typeahead-editable="false" on-return="add()"/>
        </div>
        <div class="col-md-2">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Qty" ng-model="quantity" on-return="add()"/>
                <span class="input-group-addon">{{product.FractionUnits}}</span>
            </div>
        </div>
        <div class="col-md-3">
            <div class="input-group">
                <span class="input-group-addon">₹</span>
                <input type="text" class="form-control" placeholder="Price" ng-model="product.Price" on-return="add()"/>
                <span class="input-group-addon">/{{product.Units}}</span>
                <span class="input-group-btn">
                    <button class="btn btn-info" ng-click="add()">Add <i
                            class="glyphicon glyphicon-plus-sign"></i>
                    </button>
                </span>
            </div>
        </div>
        <table id="gvGrid" class="table table-condensed table-striped">
            <thead>
            <tr>
                <th>Ingredient</th>
                <th>Unit</th>
                <th class="text-right">Quantity</th>
                <th class="text-right">Rate</th>
                <th class="text-right">Amount</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in recipe.RecipeItems">
                <td>{{item.Product.Name}}</td>
                <td>{{item.Product.FractionUnits}}</td>
                <td class="text-right">{{item.Quantity | number:2}}</td>
                <td class="text-right">{{item.Price / (item.Product.Fraction * item.Product.ProductYield) | currency}}</td>
                <td class="text-right">{{item.Quantity * (item.Price / (item.Product.Fraction * item.Product.ProductYield)) | currency}}</td>
                <td>
                    <button type="button" class="close" ng-click="removeItem(item)">×</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <button class="btn btn-primary" ng-click="save()">Save</button>
                <button class="btn btn-danger" ng-show="recipe.RecipeID" ng-click="confirm()">Delete</button>
            </div>
        </div>
</form>
