@extends('hr::layouts.master')
@section('content')
<!--calling css and js here.-->
<link rel="stylesheet" href="{{asset('/css/calendar/fullcalendar.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('/css/hr/reset.css')}}"  media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="{{asset('/css/hr/custom.css')}}"  media="screen,projection"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="{{asset('js/hr/moment.js')}}"></script>
<script src="{{asset('js/hr/Chart.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/hr/fullcalendar.min.js')}}"></script>
<!--call ends here.-->
<!--page layout start here.-->
<script src="{{ asset('/js/hr/controller/empModules.js')}}"></script>
<script src="{{ asset('/js/hr/controller/timesheetreportController.js')}}"></script>
<div  ng-app="timesheetApp" ng-controller="timesheetreportCtrl" >
    <input type="hidden" id='data-projects' value="{{$projects or '[]'}}"/>
    <input type="hidden" id='data-departments' value="{{$departments or '[]'}}"/>
    <input type="hidden" id='data-employees' value="{{$employees or '[]'}}"/>
    <input type="hidden" id='data-internalproject' value="{{$internalprojects or '[]'}}"/>
    <input type="hidden" id='data-externalproject' value="{{$externalprojects or '[]'}}"/>    
    <input type="hidden" id='data-unitproject' value="{{$unitwiseproject or '[]'}}"/>
    <input type="hidden" id='data-hourproject' value="{{$hourwiseproject or '[]'}}"/>
    <div  ng-app="timesheetApp" ng-controller="timesheetreportCtrl" >
        <div class="col s12">
            <div class="card minheight">
                <h1 class="page-title">Timesheet Report
                <div class="">
                    <span class="right"><a href="#" class='dropdown-button button-style-sheet' data-activates='dropdown' data-beloworigin="true"> <i class="drag-handle"></i></a></span>
                    <ul id='dropdown' class='dropdown-content'>
                    </ul>
                    <a href="#!" ng-click="GoBack()" class="waves-effect page-button backbutton-timesheet"><i class="material-icons left">arrow_back</i>Back</a>
                </div>
                </h1>
                <div class="row">
                    <div class="col s12">
                        <div class="bordr-color filter">
                            <h1>Filter </h1>
                            
                            <form  class="row custom-form" >
                                <div class="input-field col s2">
                                    <label class="labelfont">From</label>
                                    <input type="date"  class="datepicker" value="" ng-model="timestart"  >
                                </div>
                                <div class="input-field col s2">
                                    <label  class="labelfont">Till</label>
                                    <input type="date" class="datepicker" value="" ng-model="timeend" >
                                </div>
                                <div class="input-field col s2">
                                    <select class="browser-default" id="timestatus" ng-model="timestatus"  data-select >
                                        <option value="all" selected="selected">All</option>
                                        <option value="Project">Project</option>
                                        <option value="Department">Department</option>
                                        <option value="Employee">Employee</option>
                                        <option value="Internalproject">Internal Projects</option>
                                        <option value="Externalproject">External Projects</option>
                                    </select>
                                </div>
                                
                                <div class="input-field col s2" ng-show="timestatus == 'Project'">
                                    <select id="sctproject" class="validate"  name="sctproject"  ng-model="sctproject" data-select required>
                                        <option value="">choose your option</option>
                                        <option ng-repeat="project in projects" value="@{{project.id}}">@{{project.name}}</option>
                                    </select>
                                </div>
                                <div class="input-field col s2" ng-show="timestatus == 'Internalproject'">
                                    <select id="sctinternal" class="validate"  name="sctinternal"  ng-model="sctproject" data-select required>
                                        <option value="">choose your option</option>
                                        <option ng-repeat="internal in internalproject" value="@{{internal.id}}">@{{internal.name}}</option>
                                    </select>
                                </div>
                                <div class="input-field col s2" ng-show="timestatus == 'Externalproject'">
                                    <select id="sctexternal" class="validate"  name="sctexternal"  ng-model="sctproject" data-select required>
                                        <option value="">choose your option</option>
                                        <option ng-repeat="external in externalproject" value="@{{external.id}}">@{{external.name}}</option>
                                    </select>
                                </div>
                                <div class="input-field col s2" ng-show="timestatus == 'Department'">
                                    <select id="sctproject" class="validate"  name="sctdepartment"  ng-model="sctproject" data-select required>
                                        <option value="">choose your option</option>
                                        <option ng-repeat="dept in departments" value="@{{dept.id}}">@{{dept.name}}</option>
                                    </select>
                                </div>
                                <div class="input-field col s2" ng-show="timestatus == 'Employee'">
                                    <select id="sctemployee" class="validate"  name="sctemployee"  ng-model="sctproject" data-select required>
                                        <option value="">choose your option</option>
                                        <option ng-repeat="employee in employees" value="@{{employee.id}}">@{{employee.name}}</option>
                                    </select>
                                </div>
                                <div class="input-field col s2">
                                    <a  ng-click="searchtimesheetReport()" class="waves-effect waves-light btn">Generate Report</a>
                                </div>
                                <div class="input-field col s2 right">
                                    <a href="#!" class='dropdown-button printbutton' ng-click="printTimesheetReport()"><i class="fa fa-print"></i></a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col s12">
            <!--The search result displayed here.-->
            <div class="row" ng-init="showResults == 'false'" ng-show="showResults == 'true'" ng-model="showResults">
                <div class="col m12 card" style="min-height: 322px">
                    <div ng-show="timesheetreport.length == 0">
                        <div class="no-data">
                            <i class="no-data-img"></i>
                            <p>No results found</p>
                        </div>
                    </div>
                    <div ng-hide="timesheetreport.length == 0">
                        <table class="highlight">
                            <thead>
                                <tr>
                                    <th>Project Name</th>
                                    <th>Task</th>
                                    <th>Date</th>
                                    <th>billableTimeInHour</th>
                                    <th>nonbillableTimeInHour</th>
                                    <th>notes</th>
                                    <th>employee Name</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr  ng-repeat="timesheet in timesheetreport track by $index" >
                                    <td>@{{timesheet.projectname}}</td>
                                    <td>@{{timesheet.taskname}}</td>
                                    <td>@{{timesheet.date}}</td>
                                    <td>@{{timesheet.billableTimeInHour}}</td>
                                    <td>@{{timesheet.nonbillableTimeInHour}}</td>
                                    <td>@{{timesheet.notes}}</td>
                                    <td>@{{timesheet.name}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!--search display ends here.-->
        </div>
    </div>

@stop