@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/leavereportController.js')}}"></script>
<div  ng-app="employeeApp">
    <div ng-controller="leavesCtrl">
        <div class="col s12">
            <div class="card minheight">
                <h1 class="page-title">Leaves report</h1>
                 <a href="#!" ng-click="GoBack()" class="waves-effect page-button"><i class="material-icons left">arrow_back</i>Back</a>
                <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 labeltop">From</label>
                                    <input type="date" class="datepicker" value="" ng-model="dtpstart" ng-change="searchLeavesReport()">
                                </div>
                                <div class="input-field col s2">
                                    <label class="labelfont labeltop" >Till</label>
                                    <input type="date" class="datepicker" value="" ng-model="dtpend" ng-change="searchLeavesReport()">
                                </div>
                                <div class="input-field col s2">
                                    <select class="browser-default" id="drpStatus" ng-model="drpstatus" ng-change="searchLeavesReport()" data-select>
                                        <option value="all" selected="selected">All</option>
                                        <option value="PENDING">Pending</option>
                                        <option value="APPROVED">Approved</option>
                                        <option value="REJECTED">Rejected</option>
                                    </select>
                                </div>
                                <div>
                                <div class="input-field col s2 right">
                                  <div class="printbutton">
                                    <a href="#!" class='dropdown-button' ng-click="printLeaves()"><i class="fa fa-print"></i></a>
                                    </div>
                                </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col s12">
            
            <!--The search result displayed here.-->
            <div class="row" ng-init="showResult == 'false'" ng-show="showResult == 'true'" ng-model="showResult">
                <div class="col m8 card" style="min-height: 322px">
                    <div ng-show="leaves.length == 0">
                        <div class="no-data">
                            <i class="no-data-img"></i>
                            <p>No results found</p>
                        </div>
                    </div>
                    <div ng-hide="leaves.length == 0">
                        <table class="highlight">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Reason</th>
                                    <th>From</th>
                                    <th>To</th>
                                    <th>No. of days</th>
                                    <th>Status</th>
                                    <th>Type</th>
                                    <th>Applied on</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr  ng-repeat="leave in leaves|  filter:searchLeave" >
                                    <td>@{{leave.name}}</td>
                                    <td>@{{leave.reson}}</td>
                                    <td>@{{leave.fromdate}}</td>
                                    <td>@{{leave.todate}}</td>
                                    <td>@{{leave.numofdays}}</td>
                                    <td>@{{leave.approveBit}}</td>
                                    <td>@{{leave.leavename}}</td>
                                    <td>@{{leave.updated_at}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!--search display ends here.-->
                <!--graph starts here.-->
                <div class="col m4 card" style="min-height: 322px">
                    <div ng-show="leaves.length == 0">
                        <div class="no-data">
                            <i class="no-data-img"></i>
                            <p>No Statistical data found</p>
                        </div>
                    </div>
                    <div class="widget-content" ng-hide="leaves.length == 0">
                        <div class="doughnut-wrap">
                            <canvas id="myChart" width="100" height="100" style="width: 200px;"></canvas>
                            <div class="center-legend legend">
                                <h4>@{{leaves.length}}</h4>
                                <p>Total Datas</p>
                            </div>
                        </div>
                        <ul class="legend-wrap">
                            <li class="col s4">
                                <div class="legend">
                                    <h5>@{{approved}}</h5>
                                    <p style="color: green">Approved</p>
                                </div>
                            </li>
                            <li class="col s4">
                                <div class="legend">
                                    <h5>@{{rejected}}</h5>
                                    <p style="color: red">Rejected</p>
                                </div>
                            </li>
                            <li class="col s4">
                                <div class="legend">
                                    <h5>@{{pending}}</h5>
                                    <p style="color: blue">Pending</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--graphs end here.-->
            </div>
        </div>
    </div>
</div>
<!--page layout ends here.-->
@stop