<form method="post" autocomplete="off" class="form-horizontal">
    <legend>Credit Esi / Pf</legend>
    <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">
        <label for="txtEmployee" class="control-label">Employee</label>

        <div class="controls">
            <input type="text" ng-autocomplete id="txtEmployee" resource="Employee" label="Name" model="employee"
                   value="{{info.Employee.Name}}"/>
            <input type="text" class="span2" autocomplete="off" placeholder="Gross Salary" ng-model="grossSalary"/>
            <input type="text" class="span2" autocomplete="off" placeholder="Days Worked" ng-model="daysWorked"/>
            <button class="btn btn-info" ng-click="add()">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>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="icon-trash icon-white"></i> Delete
                        </button>
                    </td>
                </tr>
                </tbody>
                <tfoot id="tfootMain">
                </tfoot>
            </table>
        </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-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-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>
