<form method="post" autocomplete="off" class="form-horizontal">
    <legend>Product Ledger</legend>
    <div class="control-group">
        <label for="txtStartDate" class="control-label">Date</label>

        <div class="controls">
            <datepicker id="txtStartDate" model="info.StartDate" ng-model="info.StartDate"></datepicker>
            <datepicker id="txtFinishDate" model="info.FinishDate" ng-model="info.FinishDate"></datepicker>
        </div>
    </div>
    <div class="control-group">
        <label for="txtProduct" class="control-label">Ledger</label>

        <div class="controls">
            <input type="text" ng-autocomplete id="txtProduct" resource="Product" label="Name" model="info.Product"
                   value="{{info.Product.Name}}"/>
            <button class="btn btn-info" ng-click="show()">Show <i class="icon-eye-open 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>Date</th>
                    <th>Particulars</th>
                    <th>Type</th>
                    <th>Narration</th>
                    <th class="right">Debit Q</th>
                    <th class="right">Debit A</th>
                    <th class="right">Credit Q</th>
                    <th class="right">Credit A</th>
                    <th class="right">Running Q</th>
                    <th class="right">Running A</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="item in info.Body">
                    <td>{{item.Date}}</td>
                    <td><a href="{{item.Url}}">{{item.Name}}</a></td>
                    <td>{{item.Type}}</td>
                    <td>{{item.Narration}}</td>
                    <td class="right">{{item.DebitQ}}</td>
                    <td class="right">{{item.DebitA}}</td>
                    <td class="right">{{item.CreditQ}}</td>
                    <td class="right">{{item.CreditA}}</td>
                    <td class="right">{{item.RunningQ}}</td>
                    <td class="right">{{item.RunningA}}</td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td>{{info.Footer.Date}}</td>
                    <td>{{info.Footer.Name}}</td>
                    <td>{{info.Footer.Type}}</td>
                    <td>{{info.Footer.Narration}}</td>
                    <td class="right">{{info.Footer.DebitQ}}</td>
                    <td class="right">{{info.Footer.DebitA}}</td>
                    <td class="right">{{info.Footer.CreditQ}}</td>
                    <td class="right">{{info.Footer.CreditA}}</td>
                    <td class="right">{{info.Footer.RunningQ}}</td>
                    <td class="right">{{info.Footer.RunningA}}</td>
                </tr>
                </tfoot>
            </table>
        </div>
        <button class="btn btn-info" ng-click="downloadTable()">Download <i class="icon-download-alt icon-white"></i></button>
    </div>
</form>
