@extends('hr::layouts.employeemaster')
@section('content')


<script src="{{ asset('/js/hr/controller/empModules.js')}}"></script>
<script src="{{ asset('/js/hr/controller/empdashbordController.js')}}"></script>
<!--<script type="text/javascript" src="{{asset('js/dashboard.js')}}"></script>-->
<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"/>
<script src="{{asset('js/hr/moment.js')}}"></script>
<script src="{{asset('js/hr/Chart.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/dashboard.js')}}"></script>
<script type="text/javascript" src="{{asset('js/hr/fullcalendar.min.js')}}"></script>
<script src="{{asset('/js/validation.js')}}"></script>
<input type="hidden" id='data-projects' value="{{$projects or '[]'}}"/>
<input type="hidden" id='data-empdash' value="{{$empdashbord or '[]'}}"/>
<input type="hidden" id="data-task" value="{{$pendingtask or '[]'}}"/>
<input type="hidden" id="data-timesheet" value="{{$timesheets or '[]'}}"/>
    <input type="hidden" id="data-leavedetails" value="{{$leave or '[]'}}"/>
    <input type="hidden" id='data-dash' value="{{$dash or '[]'}}"/>
    <input type="hidden" id='data-task' value="{{$task or '[]'}}"/>
    <input type="hidden" id='data-pendingtask' value="{{$pendingtask or '[]'}}"/>
    <input type="hidden" id='data-employeeEvents' value="{{$todaysEmployeeEvents or '[]'}}"/>
    <input type="hidden" id="data-leavetype" value="{{$leavetype or '[]'}}"/>
    <input type="hidden" id='data-eventtypes' value="{{$eventtypes or '[]'}}"/>
    <input type="hidden" id="data-calenderevents" value="{{$calendarevents or '[]'}}"/>
<div ng-app="empdashbordApp" ng-controller="empdashbord" ng-init="Calender_Events()">
    <div class="col s12">
        <div class="card">
            <h1 class="page-title">Dashboard
            <!--code for dropdown buttons-->
               <!--  <div class="right">    
                    <a href="#" class="dropdown-button " data-activates='dropdownempindex'><i id="gear" class="fa fa-gear" ng-mouseover="mouseOver()" ng-mouseleave="mouseLeave()"></i></a>
                    <ul id='dropdownempindex' class='dropdown-content'>
                        <li><a href="{{ url('hr/profile')}}">Edit Profile</a></li>

                    </ul>
                </div> -->
                <!--code ends here.-->
            </h1>
        </div>
    </div> 
    
    <div class="col s12 m6 l4">
        <div class="card card-height">
            <div class="row widget">
                <div class="col s12 card-panel panel-min-height">
                    <div class="widget-header">
                        <a  href="{{url('hr/empproject')}}"><h3 class="col s7 left"><i class="drag-handle"></i>Project & Timesheets</h3></a>
                        <div class="col s5 right">
                            <div class="col s10">
                                <select ng-change="dateFilter()" ng-model="interval" ng-init="interval = 1" data-select>
                                    <option value="" disabled selected>Select Date</option>
                                    <option value="1">Last 2 months</option>
                                    <option value="2">Last 6 months</option>
                                    <option value="3">Last year</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="widget-content">                                
                        <ul class="legend-wrap pt0 pb0">
                            <li class="col s6">                                        
                                <div class="legend with-icon">
                                    <i class="fa fa-briefcase teal accent-4 circle"></i>
                                    <h5>@{{dashdatas.totalprojects}}</h5>
                                    <p>Total Task</p>
                                </div>
                            </li>
                            <li class="col s6">
                                <div class="legend with-icon">
                                    <i class="fa fa-clock-o teal accent-4 circle"></i>
                                    <h5>@{{dashdatas.totHours}}</h5>
                                    <p>Hours Spend</p>
                                </div>
                            </li>
                        </ul>
                        <ul class="legend-wrap small">
                            <li class="col s6">                                        
                                <div class="legend with-icon with-link">
                                    <i class="fa fa-check  green accent-4 circle"></i>
                                    <h5>@{{dashdatas.completedprojects}}</h5>
                                    <p>Task Completed</p>
                                    <a href="#" ng-click="UserprojectDetails('completed')"> <i class="fa fa-angle-right"></i></a>
                                </div>
                            </li>
                            <li class="col s6">
                                <div class="legend with-icon with-link">
                                    <i class="fa fa-spinner light-blue circle"></i>
                                    <h5>@{{dashdatas.startedprojects}}</h5>
                                    <p>Task in started</p>
                                    <a href="" ng-click="UserprojectDetails('started')"> <i class="fa fa-angle-right"></i></a>
                                </div>
                            </li>
                            <li class="col s6">
                                <div class="legend with-icon with-link">
                                    <i class="fa fa-pause orange accent-3 circle"></i>
                                    <h5>@{{dashdatas.ongoingprojects}}</h5>
                                    <p>Task on going</p>
                                    <a href="#" ng-click="UserprojectDetails('ongoing')"> <i class="fa fa-angle-right"></i></a>
                                </div>
                            </li>
                            <li class="col s6">
                                <div class="legend with-icon with-link">
                                    <i class="fa fa-play red accent-4 circle"></i>
                                    <h5>@{{dashdatas.notstartedprojects}}</h5>
                                    <p>Task not Started</p>
                                    <a href="#" ng-click="UserprojectDetails('notstarted')"> <i class="fa fa-angle-right"></i></a>

                                </div>
                            </li>
                        </ul>
                        <div class="col s12 desc-data center">
                            <div class="col s6">
                                <p>Billable</p>
                                <h5>@{{dashdatas.billabletime}}</h5>
                            </div>
                            <div class="col s6">
                                <p>Non Billable</p>
                                <h5>@{{dashdatas.nonbillabletime}}</h5>
                            </div>
                            <a class="btn-show-more more-button"><i class="fa fa-caret-up" aria-hidden="true"></i></a>
                        </div>
                    </div>
                </div>  

                <div class="list-title" >
                    <h6>Overdue Work Items <span class="square-text">@{{dashdatas.taskCnt}}</span></h6>
<!--                            @{{dashdatas.taskCnt}}-->
                        </span></h6>
                </div>
                <ul class="item-list" over-due-scroll-tasks="overDueScrollTasks()">
                    <li class="item avatar" ng-repeat="pendingtask in pendingtasks| orderBy : 'startdate'">
                        <i class="fa fa-user circle" aria-hidden="true"></i>
                        <span class="title">@{{pendingtask.taskname}}</span>
                        <span class="date">@{{pendingtask.startdate}}</span>
                        <span class="date-rem">@{{onholdDate(pendingtask.startdate)}}</span>                        
                        <a href="#!" class="secondary-content" ng-show="pendingtask.status == 'onhold'">
                            <i class="fa fa-pause orange-right" style="color:brown "></i>
                        </a>
                        <a href="#!" class="secondary-content" ng-show="pendingtask.status == 'notstarted'">
                            <i class="fa fa-play red-right" style="color: red"></i>
                        </a>
                    </li>
                    <li class="item load-spinner" ng-show="scrollTask">
                        <i class="fa fa-spinner fa-pulse fa-fw"></i>
                    </li>                            
                </ul>
            </div>
        </div>
    </div>
    <div class="col s12 m6 l4">
    <div class="card">
            <div class="row">                        
                <div class="col s12 widget">
                    <div class="widget-header text-position">
                        <!--<h3 class="col s6 left"><a href="{{url('hr/leavesmain')}}"><i class="drag-handle"></i>Leaves</a></h3>-->
                        <h3 class="col s6 left "><a href="{{url('hr/employeedashbord/leave')}}"><i class="drag-handle"></i>Leaves</a></h3>
                        <div class="col s6 right">
                            <div class="col s5" >
                               <select ng-change="leavesStatitics()" ng-model="month" value="month">
                                    <option value="" disabled selected>Month</option>
                                    <option value="1">January</option>
                                    <option value="2">February</option>
                                    <option value="3">March</option>
                                    <option value="4">April</option>
                                    <option value="5">May</option>
                                    <option value="6">June</option>
                                    <option value="7">July</option>
                                    <option value="8">August</option>
                                    <option value="9">September</option>
                                    <option value="10">October</option>
                                    <option value="11">November</option>
                                    <option value="12">December</option>
                                </select>
                            </div>
                            <div class="col s6">
                                <select ng-change="leavesStatitics()" ng-model="year" value="year">
                                    <option value="" disabled selected>Year</option>
                                                                    </select>
                            </div>
                        </div>
                    </div>
                    <div ng-show="dashdatas.totalleave == 0">
                                <div class="no-data">   
                                    <i class="no-data-img"></i>
                                    <p>No Data Found</p>
                                </div>
                            </div>
                    <div ng-hide="dashdatas.totalleave==0">
                    <div class="widget-content">
                        <div class="doughnut-wrap">
                            <canvas id="myChart2" width="100" height="100" style="width: 200px;"></canvas> 
                            <div class="center-legend legend">
                                <h4>@{{dashdatas.totalleave}}</h4>
                                <p>Leaves</p>
                            </div>
                        </div>
                        <ul class="legend-wrap small">
                            <li class="col s4">                                        
                                <div class="legend with-icon with-link">
                                    <i class="fa fa-check orange accent-4 circle"></i>
                                    <h5>@{{dashdatas.approvedleaves}}</h5>
                                    <p>Approved</p>
                                    <a href="#"> <i class="fa fa-angle-right"></i></a>
                                </div>
                            </li>
                            <li class="col s4">
                                <div class="legend with-icon with-link">
                                    <i class="fa fa-spinner green circle"></i>
                                    <h5>@{{dashdatas.pendingleaves}}</h5>
                                    <p>Pending</p>
                                    <a href="#"> <i class="fa fa-angle-right"></i></a>
                                </div>
                            </li>
                            <li class="col s4">
                                <div class="legend with-icon with-link">
                                    <i class="fa fa-pause light-blue accent-3 circle"></i>
                                    <h5>@{{dashdatas.rejectedleave}}</h5>
                                    <p>Rejected</p>
                                    <a href="#"> <i class="fa fa-angle-right"></i></a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                </div>
            </div>
        </div>
     </div>
     <div class="col s12 m6 l4">
        <div class="card card-height">
            <div class="row widget">
                <div class="col s12 card-panel panel-min-height">
                    <div class="widget-header text-position">
                        <h3 class="col s4 left"><a href="{{url('hr/calendar/create')}}"><i class="drag-handle"></i>Calender</a></h3>
                        <div class="col s8 right">
                            <div class="col s5">
                                <select ng-init="thisMonth()" value="calenderMonth" ng-model="calenderMonth" ng-change="selectcalenderMonth()">
                                    <option value="" disabled selected>Month</option>
                                    <option value="1">January</option>
                                    <option value="2">February</option>
                                    <option value="3">March</option>
                                    <option value="4">April</option>
                                    <option value="5">May</option>
                                    <option value="6">June</option>
                                    <option value="7">July</option>
                                    <option value="8">August</option>
                                    <option value="9">September</option>
                                    <option value="10">October</option>
                                    <option value="11">November</option>
                                    <option value="12">December</option>
                                </select>
                            </div>
                            <div class="col s6">
                                <select ng-model="calenderYear" value="calenderYear" ng-change="selectcalenderMonth()">
                                    <option value="" disabled selected>Year</option>
                                     
                                </select>
                            </div>
                            <a class="col s1" href="#"><i class="fa fa-plus"></i></a>
                        </div>
                    </div>
                    <div class="widget-content pt0 center">                                
                        <div id="calendar"></div>
                        <a class="btn-show-more"><i class="fa fa-caret-up" aria-hidden="true"></i></a>
                    </div>
                </div>

                <div class="list-title">
                    <h6 class="col s5">Events<span class="square-text">
                            @{{dashdatas.todayeventsCnt}}
                        </span></h6>                  
                    <h6 class="col s7 right-align">
                        Today , @{{ currentDate|date:'yyyy MMMM dd'}}
                    </h6>
                </div>
                <ul class="item-list todays-events" todays-events="todaysEvents()">
                    <li class="item avatar" ng-repeat="event in employeeEvents.data">
                        <i class="fa fa-user circle" aria-hidden="true"></i>
                        <span class="title">
                            @{{event.subject}}
                        </span>
                        <a href="#!" class="secondary-content right"><i class="fa fa-angle-right"></i></a>
                        <a href="#!" ng-click="deleteevent(event.id, $index)"  class="trash-btn right"><i class="fa fa-trash" aria-hidden="true"></i></a>
                    </li>                       
                    <li class="item load-spinner" ng-show="scrollTask">
                        <i class="fa fa-spinner fa-pulse fa-fw"></i>
                    </li> 
                </ul>
                <div id="modal-delete-event" class="modal modal-fixed-footer" data-modalfire>
                    <div class="modal-content">
                        <h4>Do you want delete this item(s) ?</h4>
                    </div>
                    <div class="modal-footer">
                        <a href="#!" ng-click="deleteItemevent()" class="modal-action waves-effect waves-red btn-flat ">Yes</a>
                        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">No</a>
                    </div>
                </div>
            </div> 
        </div>
    </div>
   <!-- Modal for event Starts Here -->
<div id="modal_quickcreateevent" class="modal fade-in-right modal-fixed-footer" data-modalfire>
    <div class="modal-content">
        <h4>Add Events</h4>                
        <div class="row">
            <form class=" custom-form col s12" id="frmCalendarevents">
                <div class="row">
                    <div class="input-field mandatory col s12">
                        <p>Subject</p>
                        <input id="name" name="event_subject" type="text" data-vtype="text" ng-model="event_subject"  placeholder="Subject" required>
                       <span class="error-msg"></span>
                    </div>
                    <div class="input-field mandatory col s6">
                        <p>Description</p>                            
                        <textarea name="event_desc" ng-model="event_desc" placeholder="Description" data-vtype="text" required=""></textarea> 
                         <span class="error-msg"></span>
                    </div>                    
                    <div class="input-field mandatory col s6">
                        <p>Date</p>                            
                        <input id="event_date" name="event_date" 
                               type="text" ng-model="event_date"  placeholder="Event Date" required readonly>
                         
                    </div> 
                </div>
                <div class="input-field mandatory col s6">
                    <p>Event Type</p>                           
                    <select id="event_type" name="event_type" ng-model="event_type" data-select novalidate>
                        <option value="">Select</option>
                        <option ng-repeat="eventtype in eventtypes" value="@{{eventtype.id}}">@{{eventtype.eventtype}}</option>
                    </select>
                </div> 
                <input type="hidden" value="" id="calendareventId" name='calendareventId' ng-model="calendareventId" novalidate/>
            </form>   
        </div>
        
    </div>

    <div class="modal-footer">                
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
        <a href="#!" ng-click="eventSave($event)" class="waves-effect waves-light btn">Save Event</a>
    </div>
</div>
<!-- Modal for event Ends Here -->  

</div>
@stop