<div class="container">
    <div class="table-wrapper">
        <div class="table-title">
            <div class="row">
                <div class="col-sm-6">
                    <h2><b>Leave Form</b></h2>
                    <div class="col-sm-6 pull-left">
                        <tr>
                            <input type="text" ng-model="search" ng-change="filter()" placeholder="Search" class="form-control" />
                        </tr>
                    </div>
                </div>
                <div class="col-sm-6">
                    <input id="addLeaveForm" class="btn btn-success" type="submit" name="addTS" value="Add Leave Form" data-toggle="modal" ng-click="showAddLeaveFormFunction()"/>
                    <div class="col-sm-4 pull-right">
                        <label>PageSize:</label>
                        <select ng-value="leaveFormPerPage" ng-model="leaveFormPerPage" class="form-control">
                            <option>3</option>
                            <option>5</option>
                            <option>50</option>
                            <option>100</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="addDivLF" style="display: none">
                    <h2><b>Add Leave Form</b></h2>
                    <table class="table table-striped table-hover">
                        <tr>
                            <td><label>Title</label></td>
                            <td>
                                <input type="text" maxlength="300" ng-model="lfdto.title" style="width: 100%;"/>
                            </td>
                        </tr>
                        <tr>
                            <td><label>Content</label></td>
                            <td>
                                <input type="text" maxlength="10000" ng-model="lfdto.content" style="width: 100%;"/>
                            </td>
                        </tr>
                        <tr>
                            <td><label>Employee Id</label></td>
                            <td>
                                <input type="text" maxlength="10" value="" ng-model="lfdto.employeeId"/>
                            </td>
                        </tr>

                        <tr>
                            <td><label>Leave Type Id</label></td>
                            <td>
<!--                                <input type="text" maxlength="10" value="" ng-model="lfdto.leaveTypeId" style="width: 100%;"/>-->
                                <select ng-model="lfdto.leaveTypeId">
                                    <option  value="">Select Leave Type</option>
                                    <option  ng-repeat="lf in leaveTypeList" value="{{lf.id}}">{{lf.name}}</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td >
                                <input type="submit" name="submit" class="btn-primary" data-toggle="modal" value="Confirm" ng-click="save();"/>
                                <input type="submit" name="clear" class="btn-danger" data-toggle="modal" value="Clear" ng-click="lfdto = null"/>
                            </td>
                        </tr>
                    </table>
                </div>
                <div id="updateDivLF" style="display: none">
                    <h2><b>Edit Leave Form</b></h2>
                    <table class="table table-striped table-hover">
                        <tr>
                            <td><label>Title</label></td>
                            <td>
                                <input type="text" maxlength="300" ng-model="lfdto.title" style="width: 100%;"/>
                            </td>
                        </tr>
                        <tr>
                            <td><label>Content</label></td>
                            <td>
                                <input type="text" maxlength="10000" ng-model="lfdto.content" style="width: 100%;"/>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td >
                                <input type="submit" class="btn-primary" data-toggle="modal" name="submit" value="Confirm" ng-click="update();"/>
<!--                                <input type="submit" class="btn-danger" data-toggle="modal" name="clear" value="Clear" ng-click="lfdto = null"/>-->
                                <input type="submit" class="btn-dark" data-toggle="modal" name="close" value="Close" onclick="document.getElementById('updateDivLF').style.display = 'none'"/>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="row">
                    <div class="col-md-12" ng-show="filterLeaveForm > 0">
                        <table class="table table-striped table-hover">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Title</th>
                                <th>Content</th>
                                <th>Employee</th>
                                <th>Leave Type</th>
                                <th>Create At</th>
                                <th>Status</th>
                                <th colspan="3"></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="lff" ng-repeat="lf in searched = (leaveFormList | filter:search | orderBy : base :reverse) | beginningLeaveForm:(currentPage-1)*leaveFormPerPage | limitTo:leaveFormPerPage">
                                <td>{{$index + 1}}</td>
                                <td>{{lf.title}}</td>
                                <td>{{lf.content}}</td>
                                <td>{{lf.employee.lastName}}</td>
                                <td>{{lf.leaveType.name}}</td>
                                <td>{{lf.updatedAt}}</td>
                                <td id="checkStatus">{{lf.status}}</td>

                                <td><a ui-sref="leaveFormDetail({id: lf.id})" data-toggle="modal"><i class="fa fa-eye" data-toggle="tooltip" title="View"></i></a></td>
                                <td><a ui-sref="leaveForm" ng-click="getLf(lf);" onclick="document.getElementById('updateDivLF').style.display = 'block'" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a></td>
                                <td><a ui-sref="leaveForm" ng-click="delete(lf);" class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a></td>
                                <!--                            <td><a ui-sref="leaveForm" ng-click="updateStatus(lf)" data-toggle="modal"><i id="approved" class="fa fa-check" data-toggle="tooltip" title="Approved"></i></a></td>-->
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-12" ng-show="filterLeaveForm == 0">
                        <div class="col-md-12">
                            <h4>No records found..</h4>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="col-md-6 pull-left">
                            <h5>Showing {{ searched.length }} of {{ entireLeaveForm}} entries</h5>
                        </div>
                        <div class="col-md-6" ng-show="filterLeaveForm > 0">
                            <div pagination="" page="currentPage" on-select-page="pagePosition(page)" boundary-links="true" total-items="filterLeaveForm" items-per-page="leaveFormPerPage" class="pagination-small pull-right" previous-text="&laquo;" next-text="&raquo;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>