<form class="form-horizontal" role=form>
    <h2 class="ribbon-header">Issue Edit / New</h2>

    <table id="gvSmall" class="table table-condensed table-bordered table-striped">
        <thead>
        <tr>
            <th>Amount</th>
            <th>Load</th>
        </tr>
        </thead>
        <tr ng-repeat="item in smallGrid">
            <td>{{item.Amount | currency}}</td>
            <td>
                <a class="btn btn-info" href="/Issue/{{item.VoucherID}}">Load <i
                        class="glyphicon glyphicon-eye-open"></i></a>
            </td>
        </tr>
    </table>
    <div class="form-group">
        <label for="txtDate" class="col-md-2 control-label">Date</label>

        <div class="col-md-2">
            <div class="input-group">
                <input class="form-control" id="txtDate" type="text" datepicker-popup="dd-MMM-yyyy"
                       ng-model="voucher.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-3" ng-repeat="journal in voucher.Journals | journalDebit:-1">
            <select id="ddlSourceCostCenter" class="form-control" ng-model="journal.CostCenter.CostCenterID"
                    ng-options="l.CostCenterID as l.Name for l in cost_centers"> </select>
        </div>
        <div class="col-md-5" ng-repeat="journal in voucher.Journals | journalDebit:1">
            <div class="input-group">
                <select id="ddlDestinationCostCenter" class="form-control" ng-model="journal.CostCenter.CostCenterID"
                        ng-options="l.CostCenterID as l.Name for l in cost_centers"> </select>
                <span class="input-group-addon">₹</span>
                <input type="text" class="form-control" placeholder="Amount" value="{{journal.Amount | number:2}}"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="txtBatch" class="col-md-2 control-label">Product</label>

        <div class="col-md-5">
            <input type="text" id="txtBatch" class="form-control" ng-model="batch"
                   typeahead="batch as batch.Name for batch in batches($viewValue)"
                   typeahead-editable="false"/>
        </div>
        <div class="col-md-5">
            <div class="input-group">
                <input type="text" id="txtQuantity" class="form-control" autocomplete="off" placeholder="Quantity"
                       ng-model="quantity" on-return="add()"/>
                    <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>
    </div>
    <table id="gvGrid" class="table table-condensed table-bordered table-striped">
        <thead>
        <tr>
            <th>Product</th>
            <th>Batch</th>
            <th>Quantity</th>
            <th>Rate</th>
            <th>Amount</th>
            <th>Delete</th>
        </tr>
        </thead>
        <tbody id="tbodyMain">
        <tr ng-repeat="inventory in voucher.Inventories">
            <td>{{inventory.Product.Name}}</td>
            <td>{{inventory.Batch.Name}}</td>
            <td class="text-right">{{inventory.Quantity | number:2}}</td>
            <td class="text-right">{{inventory.Rate | currency}}</td>
            <td class="text-right">{{inventory.Amount | currency}}</td>
            <td>
                <div class="btn-group">
                    <a class="btn btn-danger" ng-click="removeInventory(inventory)"><i
                            class="glyphicon glyphicon-trash"></i> Delete</a>
                    <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"><span
                            class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a ng-click="modal(inventory)"><i class="glyphicon glyphicon-pencil"></i> Edit</a></li>
                    </ul>
                </div>
            </td>
        </tr>
        </tbody>
        <tfoot id="tfootMain">
        </tfoot>
    </table>
    <div class="form-group">
        <label for="txtNarration" class="col-md-2 control-label">Narration</label>

        <div class="col-md-10">
            <textarea rows="3" id="txtNarration" class="form-control" ng-model="voucher.Narration"></textarea>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <button class="btn btn-primary" tan-click="save()"
                    ng-disabled="preventAlteration(voucher)">{{voucher.VoucherID | save_button}}
            </button>
            <button class="btn btn-danger" ng-click="resetVoucher()" ng-hide="!voucher.VoucherID">
                New Entry
            </button>
            <button class="btn btn-danger" ng-hide="!voucher.VoucherID" ng-disabled="preventAlteration(voucher)"
                    tan-click="confirm()">Delete
            </button>
        </div>
    </div>
    <div class="col-md-offset-2 col-md-10">
        <small>Created on {{voucher.CreationDate | localTime}} and Last Edited on {{voucher.LastEditDate | localTime}}
            by {{voucher.User.Name}}.
        </small>
    </div>
</form>