<form class="form-horizontal" role=form id="form" autocomplete="off">
    <h2>Employee Service Charge</h2>

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

        <div class="col-md-10">
            <div class="input-group">
                <input class="form-control" id="txtDate" type="text" datepicker-popup="dd-MMM-yyyy"
                       is-open="dOpen" ng-focus="dOpen = true" 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="txtInfo" class="col-md-2 control-label"></label>

        <div class="col-md-10">
            Total Service Charge: <strong>{{voucher.ServiceCharge | number:2}}</strong>
            Total Points: <strong>{{TotalPoints() | number:2}}</strong>
            Point Value: <strong>{{PointValue() | number:2}}</strong>
        </div>
    </div>
    <table class="table table-condensed table-bordered table-striped">
        <thead>
        <tr>
            <th>Name</th>
            <th>Designation</th>
            <th>Department</th>
            <th>Days Worked</th>
            <th>Service Points</th>
            <th class="text-right">Amount</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="serviceCharge in voucher.ServiceCharges">
            <td>{{serviceCharge.Name}}</td>
            <td>{{serviceCharge.Designation}}</td>
            <td>{{serviceCharge.Department}}</td>
            <td>{{serviceCharge.DaysWorked}}</td>
            <td>
                <div class="input-group">
                <span class="input-group-btn" style="width:auto">
                    <button class="btn btn-danger" ng-click="less(serviceCharge)"><i class="glyphicon glyphicon-minus"></i></button>
                </span>
                    <input type="number" class="form-control" ng-model="serviceCharge.Points" step=".25">
                <span class="input-group-btn" style="width:auto">
                    <button class="btn btn-success" ng-click="more(serviceCharge)"><i class="glyphicon glyphicon-plus"></i></button>
                </span>
                </div>
            </td>
            <td class="text-right">{{employeeAmount(serviceCharge) | number:0}}</td>
        </tr>
        </tbody>
    </table>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <button class="btn btn-primary" tan-click="save()" ng-disabled="preventAlteration(voucher)">
                {{voucher.VoucherID | save_button}}
            </button>
            <button class="btn btn-inverse" tan-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>
    <div class="col-md-offset-2 col-md-10">
        <small>Created on {{voucher.CreationDate | localTime}} and Last Edited on {{voucher.LastEditDate | localTime}}
            by {{voucher.User.Name}}. Posted by {{voucher.Poster}}
        </small>
    </div>
</form>
