<script>
    function showAddTimeSheetFunction() {
        var x = document.getElementById("addDivTS");
        var n = document.getElementById("addTimeSheet");
        if (x.style.display === "none") {
            x.style.display = "block";
            n.value = "Close";
        } else {
            x.style.display = "none";
            n.value = "Add TimeSheet";
        }
    }
</script>
<div class="container">
    <div class="table-wrapper">
        <div class="table-title">
            <div class="row">
                <div class="col-sm-6">
                    <h2><b>TimeSheet</b></h2>
                    <label>
                        Search: <input type="text" ng-model="search" placeholder="Search" style="color: black; margin: 10px"/>
                    </label>
                </div>
                <div class="col-sm-6">
                    <input id="addTimeSheet" class="btn btn-success" data-toggle="modal" type="submit" name="addTS" value="Add TimeSheet" onclick="showAddTimeSheetFunction()"/>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="addDivTS" style="display: none">
                    <h2><b>Add TimeSheet</b></h2>
                    <table class="table table-striped table-hover">

                        <tr>
                            <td><label>Title</label></td>
                            <td>
                                <input type="text" maxlength="300" ng-model="tsdto.title" style="width: 100%;"/>
                            </td>
                        </tr>
                        <tr>
                            <td><label>Content</label></td>
                            <td>
                                <input type="text" maxlength="10000" ng-model="tsdto.content" style="width: 100%;"/>
                            </td>
                        </tr>
                        <tr>
                            <td><label>Note</label></td>
                            <td>
                                <input type="text" maxlength="10000" ng-model="tsdto.note" style="width: 100%;"/>
                            </td>
                        </tr>
                        <tr>
                            <td><label>Employee Project Id</label></td>
<!--                            <td>-->
<!--                                <input type="text" maxlength="10" value="" ng-model="tsdto.eprojectId" style="width: 100%;"/>-->
<!--                            </td>-->
                            <td>
                                <select ng-model="tsdto.eprojectId">
                                    <option  value="">Select Project</option>
                                    <option  ng-repeat="ep in eProjectList" value="{{ep.id}}">{{ep.project.name}}</option>
                                </select>
                            </td>
                        </tr>

                        <tr>
                            <td><label>Employee Id</label></td>
                            <td>
                                <input type="text" maxlength="10" value="" ng-model="tsdto.employeeId"/>
                            </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-dark" data-toggle="modal" value="Clear" ng-click="tsdto = null"/>
                            </td>
                        </tr>
                    </table>
                </div>
                <div id="updateDivTS" style="display: none">
                    <h2><b>Edit TimeSheet</b></h2>
                    <table class="table table-striped table-hover">

                        <tr>
                            <td><label>Title</label></td>
                            <td>
                                <input type="text" maxlength="300" ng-model="tsdto.title" style="width: 100%;"/>
                            </td>
                        </tr>
                        <tr>
                            <td><label>Content</label></td>
                            <td>
                                <input type="text" maxlength="10000" ng-model="tsdto.content" style="width: 100%;"/>
                            </td>
                        </tr>
                        <tr>
                            <td><label>Note</label></td>
                            <td>
                                <input type="text" maxlength="10000" ng-model="tsdto.note" 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-primary" data-toggle="modal" name="clear" value="Clear" ng-click="tsdto = null"/>-->
                                <input type="submit" class="btn-dark" data-toggle="modal" name="close" value="Close" onclick="document.getElementById('updateDivTS').style.display = 'none'"/>
                            </td>
                        </tr>
                    </table>
                </div>
                <div>
                    <table class="table table-striped table-hover">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>Title</th>
                            <th>Content</th>
                            <th>Note</th>
                            <th>Employee</th>
                            <th>Create at</th>
                            <th colspan="3"></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="tss" ng-repeat="ts in myTimeSheets | limitTo:numLimit:start | filter: search">
                            <td>{{$index + 1}}</td>
                            <td>{{ts.title}}</td>
                            <td>{{ts.content}}</td>
                            <td>{{ts.note}}</td>
                            <td>{{ts.eproject.project.name}}</td>
                            <td>{{ts.updatedAt}}</td>

                            <td><a ui-sref="timeSheetDetail({id: ts.id})"data-toggle="modal"><i class="fa fa-eye" data-toggle="tooltip" title="View"></i></a></td>
                            <td><a ui-sref="timeSheet" ng-click="getTs(ts);" onclick="document.getElementById('updateDivTS').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="timeSheet" ng-click="delete(ts);"class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a></td>
                        </tr>
<!--                        <tr>-->
<!--                            <h6><code>rotate</code> defaulted to <code>true</code> and <code>force-ellipses</code> set to <code>true</code>:</h6>-->
<!--                            <ul uib-pagination total-items="getAllTimesheet()" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-link-number="true" ng-change ="pageChangedIndex()" items-per-page = "timesheetPerPage"  ></ul>-->
<!--                        </tr>-->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>