@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/calendar/controller/calendareventController.js')}}"></script>
<div  ng-app="calendarApp">
    <div ng-controller="CalendarCtrl">
            <div class="col s12">
                <div class="card">
                    <h1 class="page-title">Calendar Events</h1>
                </div>
            </div> 
        <div class="col s12">
            <form  class="row card custom-form">
                <div class="input-field col s2">
                    <label>From</label> 
                    <input type="date" class="datepicker" value="" ng-model="dtpstart" ng-change="searchforEvents()">
                </div>                
                <div class="input-field col s2">
                    <label >Till</label> 
                    <input type="date" class="datepicker" value="" ng-model="dtpend" ng-change="searchforEvents()">
                </div>
                <div class="input-field col s2 right">    
                    <a href="#!" class='dropdown-button' ng-click="printEvents()"><i class="fa fa-print"></i></a>
                </div>
            </form>
            
            <!--Pagination starts here-->
                <ul class="pagination" ng-if="1 < pages.length || !autoHide">
                    <li  ng-disabled="pagingData.current_page == 1">
                        <a href="" ng-click="pagingData.current_page == 1 || setCurrenteventPage(1)">&laquo;</a>
                    </li>
                    <li  ng-disabled="pagingData.current_page == 1 ">
                        <a href="" ng-click="pagingData.current_page == 1 || setCurrenteventPage(pagingData.current_page-1)">&lsaquo;</a>
                    </li>
                    <li ng-repeat="pageNumber in pages track by  $index" ng-class="{ active :pagingData.current_page == pageNumber, disabled : pageNumber == '...' }">
                        <a href="" ng-click="setCurrenteventPage(pageNumber)">@{{ pageNumber }}</a>
                    </li>

                    <li  ng-disabled="pagingData.current_page == pagingData.last_page">
                        <a href="" ng-click="pagingData.current_page == pagingData.last_page || setCurrenteventPage(pagingData.current_page + 1)">&rsaquo;</a>
                    </li>
                    <li  ng-disabled="pagingData.current_page == pagingData.last_page">
                        <a href="" ng-click="pagingData.current_page == pagingData.last_page ||setCurrenteventPage(pagingData.last_page)">&raquo;</a>
                    </li>
                </ul>
            <!--Pagination ends here-->
            
            <!--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="events.length == 0">
                        <div class="no-data">   
                            <i class="no-data-img"></i>
                            <p>No results found</p>
                        </div>
                    </div>
                    <div ng-hide="events.length == 0">
                        <table class="highlight">
                            <thead>
                                <tr>
                                    <th>Subject</th>
                                    <th>Description</th>
                                    <th>Starting date</th>
                                    <th>Ending date</th>
                                    <th>Delete</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr  ng-repeat="event in events.data|  filter:searchEvent" ng-init="EventPagingInit()">
                                    <td>@{{event.subject}}</td>
                                    <td>@{{event.description}}</td>
                                    <td>@{{event.startingdate}}</td>
                                    <td>@{{event.endingdate}}</td>
                                    <td><a href="" ng-click="showDeleteModalEvent(event.id,$index)"><i class="fa fa-trash-o fa-fw"></i> Delete</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </div> 
                </div>
                <!--search display ends here.-->
                <!-- Modal Structure for deletion pop-up-->
                <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="deleteEvent()" 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>
                <!-- Ends -->
                
            </div>
        </div>
    </div>
</div>
<!--page layout ends here.-->
@stop