<form class="form-horizontal" role=form>
    <h2>Reconciliation</h2>

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

        <div class="col-md-5">
            <div class="input-group">
                <input class="form-control" id="txtStartDate" type="text" datepicker-popup="dd-MMM-yyyy"
                       ng-model="info.StartDate"/>
                <span class="input-group-btn">
                    <button class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </div>
        </div>
        <div class="col-md-5">
            <div class="input-group">
                <input type="text" id="txtFinishDate" class="form-control" datepicker-popup="dd-MMM-yyyy"
                       ng-model="info.FinishDate"/>
                <span class="input-group-btn">
                    <button class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="txtLedger" class="col-md-2 control-label">Ledger</label>

        <div class="col-md-10">
            <div class="input-group">
                <input type="text" id="txtLedger" class="form-control" ng-model="info.Account"
                       typeahead="account as account.Name for account in accounts($viewValue)"
                       typeahead-editable="false" on-return="show()" typeahead-min-length="0"/>
                    <span class="input-group-btn">
                        <button class="btn btn-info" ng-click="show()">Show <i class="glyphicon glyphicon-eye-open"></i>
                        </button>
                    </span>
            </div>
        </div>
    </div>
    <table id="gvGrid" class="table table-condensed table-bordered table-striped">
        <thead>
        <tr>
            <th>Date</th>
            <th>Particulars</th>
            <th>Debit</th>
            <th>Credit</th>
            <th>Running</th>
            <th>Reconcile Date</th>
        </tr>
        </thead>
        <tbody ng-repeat="item in info.Body">
        <tr ng-class="{warning:item.IsReconciled}">
            <td class="no-wrap">{{item.Date}}</td>
            <td><a href="{{item.Url}}">{{item.Name}}</a></td>
            <td class="text-right no-wrap">{{item.Debit | currency | clr}}</td>
            <td class="text-right no-wrap">{{item.Credit | currency | clr}}</td>
            <td class="text-right no-wrap">{{item.Running | accounting}}</td>
            <td class="col-md-3">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox" ng-model="item.IsReconciled">
                    </span>
                    <input type="text" class="form-control" datepicker-popup="dd-MMM-yyyy"
                           ng-model="item.ReconcileDate"/>
                    <span class="input-group-btn">
                        <button class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="6"ng-class="{warning:item.IsReconciled}">
                <blockquote>
                    <p>{{item.Narration}}</p>
                    <small>{{item.Type}}</small>
                </blockquote>
            </td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td class="no-wrap">{{info.Footer.Date}}</td>
            <td>{{info.Footer.Name}}</td>
            <td class="text-right no-wrap">{{info.Footer.Debit | currency}}</td>
            <td class="text-right no-wrap">{{info.Footer.Credit | currency}}</td>
            <td class="text-right no-wrap">{{info.Footer.Running | accounting}}</td>
            <td></td>
        </tr>
        </tfoot>
    </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-info" ng-click="downloadTable()">Download <i
                    class="glyphicon glyphicon-download-alt"></i></button>
        </div>
    </div>
</form>
