<form class="form-horizontal" role=form>
    <h2>Credit Esi / Pf</h2>

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

        <div class="col-md-4">
            <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>
    <div class="form-group">
        <label for="txtEmployee" class="col-md-2 control-label">Employee</label>

        <div class="col-md-5">
            <input type="text" id="txtEmployee" class="form-control" ng-model="employee"
                   typeahead="employee as employee.Name for employee in employees($viewValue)"
                   typeahead-editable="false"/>
        </div>
        <div class="col-md-2">
            <input type="text" class="form-control" placeholder="Gross Salary" ng-model="grossSalary"/>
        </div>
        <div class="col-md-2">
            <input type="text" class="form-control" placeholder="Days Worked" ng-model="daysWorked" on-return="add()"/>
        </div>
        <div class="col-md-1">
            <button class="btn btn-info" ng-click="add()">Add <i class="glyphicon glyphicon-plus-sign"></i>
            </button>
        </div>
    </div>
    <table class="table table-condensed table-bordered table-striped">
        <thead>
        <tr>
            <th>Name</th>
            <th>Designation</th>
            <th>Department</th>
            <th>Gross Salary</th>
            <th>Days Worked</th>
            <th>Esi EE</th>
            <th>Pf EE</th>
            <th>Esi ER</th>
            <th>Pf ER</th>
            <th>Delete</th>
        </tr>
        </thead>
        <tbody id="tbodyMain">
        <tr ng-repeat="deduction in voucher.SalaryDeductions">
            <td>{{deduction.Journal.Ledger.Name}}</td>
            <td>{{deduction.Journal.Ledger.Designation}}</td>
            <td>{{deduction.Journal.Ledger.CostCenter.Name}}</td>
            <td>{{deduction.GrossSalary}}</td>
            <td>{{deduction.DaysWorked}}</td>
            <td>{{deduction.EsiEmployee}}</td>
            <td>{{deduction.PfEmployee}}</td>
            <td>{{deduction.EsiEmployer}}</td>
            <td>{{deduction.PfEmployer}}</td>
            <td>
                <button class="btn btn-danger" ng-click="remove(deduction)"><i
                        class="glyphicon glyphicon-trash"></i> Delete
                </button>
            </td>
        </tr>
        </tbody>
        <tfoot id="tfootMain">
        </tfoot>
    </table>
    <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-inverse" ng-click="post()" ng-hide="!voucher.VoucherID"
                ng-disabled="voucher.Posted || !perms['Post Vouchers']">{{voucher.Posted | posted}}
        </button>
        <button class="btn btn-danger" ng-hide="!voucher.VoucherID" ng-disabled="preventAlteration(voucher)"
                ng-click="confirm()"> Delete
        </button>
    </div>
    <div class="row">
        Created on {{voucher.CreationDate | localTime}} and Last Edited on {{voucher.LastEditDate | localTime}} by
        {{voucher.User.Name}}. Posted by {{voucher.Poster}}
    </div>
</form>
