<h2 class="ribbon-header">Issue Edit / New</h2>
<form method="post" autocomplete="off" class="form-horizontal">
    <div class="control-group">
        <label for="gvSmall" class="control-label"></label>

        <div class="controls">
            <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}}</td>
                    <td>
                        <a class="btn btn-info" href="/Issue/{{item.VoucherID}}">Load <i
                                class="icon-eye-open icon-white"></i></a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="control-group">
        <label for="txtDate" class="control-label">Date</label>

        <div class="controls">
            <datepicker id="txtDate" model="voucher.Date" ng-model="voucher.Date"></datepicker>
        </div>
    </div>

    <div class="control-group">
        <div class="control-group" ng-repeat="journal in voucher.Journals | journalDebit:-1">

            <label for="ddlSourceCostCenter" class="control-label">From</label>

            <div class="controls">
                <select id="ddlSourceCostCenter" class="select-box" ng-model="journal.CostCenter.CostCenterID"
                        ng-options="l.CostCenterID as l.Name for l in cost_centers"> </select>

            </div>
        </div>
    </div>
    <div class="control-group">
        <div class="control-group" ng-repeat="journal in voucher.Journals | journalDebit:1">

            <label for="ddlSourceCostCenter" class="control-label">From</label>

            <div class="controls">
                <select id="ddlDestinationCostCenter" class="select-box" ng-model="journal.CostCenter.CostCenterID"
                        ng-options="l.CostCenterID as l.Name for l in cost_centers"> </select>

                <div class=" input-prepend">
                    <span class="add-on">₹</span>
                    <input type="text" id="txtAmount" class="span2" autocomplete="off"
                           placeholder="Amount" ng-model="journal.Amount"/>
                </div>
            </div>
        </div>
    </div>
    <div class=" control-group" id="add">
        <label for="txtBatch" class="control-label">Product</label>

        <div class="controls">
            <input type="text" ng-autocomplete id="txtBatch" resource="Batch" label="Name" model="batch" value="{{batch.Name}}"/>
            <input type="text" id="txtQuantity" class="span2" autocomplete="off" placeholder="Quantity"
                   ng-model="quantity"/>
            <button class="btn btn-info" ng-click="addInventory()">Add <i class="icon-plus-sign icon-white"></i>
            </button>
        </div>
    </div>
    <div class="control-group">
        <label for="gvGrid" class="control-label"></label>

        <div class="controls">
            <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>{{inventory.Quantity}}</td>
                    <td>{{inventory.Rate}}</td>
                    <td>{{inventory.Amount}}</td>
                    <td>
                        <div class="btn-group">
                            <a class="btn btn-danger" ng-click="removeInventory(inventory)"><i
                                    class="icon-trash icon-white"></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-confirm url="/partial/issue-modal.html" before="toggleEdit(inventory)"
                                       on-action="toggleEdit(inventory, true)" on-cancel="toggleEdit(inventory, false)"><i
                                        class="icon-pencil"></i> Edit</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
                </tbody>
                <tfoot id="tfootMain">
                </tfoot>
            </table>
        </div>
    </div>
    <div class="control-group">
        <label for="txtNarration" class="control-label">Narration</label>

        <div class="controls">
            <textarea rows="3" id="txtNarration" class="input-block-level" ng-model="voucher.Narration"></textarea>
        </div>
    </div>
    <div class="form-actions">
        <button class="btn btn-primary" ng-click="save()"
                ng-disabled="preventAlteration(voucher)">{{voucher.VoucherID | save_button}}
        </button>
        <button class="btn btn-danger" ng-click="resetVoucher(voucher.VoucherID)" ng-hide="!voucher.VoucherID">
            New Entry
        </button>
        <button class="btn btn-danger" ng-hide="!voucher.VoucherID" ng-disabled="preventAlteration(voucher)"
                ng-confirm title="Delete Voucher" action-text="Are you sure? This cannot be undone."
                action-button-text="Delete" action-function="delete()"> Delete
        </button>
    </div>
    <div class="row-fluid">
        Created on {{voucher.CreationDate}} and Last Edited on {{voucher.LastEditDate}} by {{voucher.User.Name}}. Posted
        by {{voucher.Poster}}
    </div>
</form>