@extends('hr::layouts.calender')
@section('content')
<link href="{{ asset('/css/calendar/calendar-custom.css')}}" rel="stylesheet">
<link href="{{ asset('/css/calendar/calendarDemo.css')}}" rel="stylesheet">
<link href="{{ asset('/css/calendar/fullcalendar.css')}}" rel="stylesheet">
<script src="{{ asset('/js/hr/controller/empModules.js')}}"></script> 
<script src="{{ asset('/js/calendar/ui-bootstrap-tpls-0.13.0.js')}}"></script> 
<script src="{{ asset('/js/calendar/moment.js')}}"></script> 
<script src="{{ asset('/js/calendar/fullcalendar.js')}}"></script> 
<script src="{{ asset('/js/calendar/gcal.js')}}"></script> 
<script src="{{ asset('/js/calendar/calendar.js')}}"></script> 
<script src="{{ asset('/js/calendar/controller/calendarController.js')}}"></script> 
<script src="{{ asset('/js/select2.full.js')}}"></script>
<script src="{{ asset('/js/select2.js')}}"></script>
<script src="{{asset('/js/validation.js')}}"></script>
<div ng-app="calendarApp" ng-controller="CalendarCtrl">
    <div class="col s12">
        <div class="card">
            <h1 class="page-title">Calender
            </h1>
            <a href="#!" ng-click="GoBack()" class="waves-effect page-button"><i class="material-icons left">arrow_back</i>Back</a>
        </div>
    </div>
    <input type="hidden" id='data-calendarevents' value="{{$calendardetails or '[]'}}"/>
    <div class="col s8 left">
    <a class="modal-trigger waves-effect waves-light btn event-popup hide" href="#modal1">Modal</a>
    <!-- Modal Structure -->
    <div id="modal1"  data-modalfire class="modal modal-fixed-footer modal-fixed-header">
        <div class="modal-header">
            <h5>Event</h5>
        </div>
        <div class="modal-content">                                
            <div class="form-content">
                <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" 
                                       ng-model="event_subject"  class="validate" placeholder="Subject" data-vtype="name" required="required">
                                <span class="error-msg"> </span>
                            </div>
                            <div class="input-field mandatory col s12">
                                <p>Description</p>                            
                                <textarea name="event_desc" ng-model="event_desc" placeholder="Description" data-vtype="text" required="required"></textarea>                                                     
                                <span class="error-msg"> </span>
                            </div> 
                        </div>
                        <div class="row">                            
                            <div class="input-field mandatory col s6">
                                <p>Start Time </p>
                                <div class="input-field col s6">
                                    <input id="event_date" placeholder="Start date" type="date" class="datepicker validate"  ng-model="current_event.start_date" name="event_date" data-vtype="date" required="required">
                                    <span class="error-msg"> </span>
                                </div>
                                <div class="input-field col s6">
                                    <input id="event_time" placeholder="Start Time" type="time"   ng-model="current_event.start_time" name="event_time">
                                </div>  
                            </div>
                            <div class="input-field col s6"  ng-hide="checkallday" >
                                <p>Duration</p>
                                <input id="calendareventduration" type="time"  ng-model="current_event.duration" name="calendareventduration">
                            </div>
                            
                            <div class="input-field col s6"  ng-show="checkallday">
                                <p>End Time</p>
                                <input id="calendareventendDate" type="date" class="datepicker validate"  ng-model="current_event.end_time" name="calendareventendDate">                            
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s6">
                                <input id="checkallday" type="checkbox" name="checkallday" value="TRUE"  ng-model="checkallday" >                                
                                <label for="checkallday">All Day</label>
                            </div>
                         
                            <div class="row">
                                <div class="input-field mandatory col s5">
                                    <p>Event Type</p>                           
                                    <select id="event_type" name="event_type" ng-model="event_type" data-select>
                                        <option value="">Select</option>
                                        <option ng-repeat="eventtype in eventtypes.data" value="@{{eventtype.id}}">@{{eventtype.eventtype}}</option>
                                    </select>
                                </div>
                                <div class="input-field col s1"><br><br>
                                    <a href="#modal_createeventsc" ng-click="clearEvent()"><i class="fa fa-plus"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="row">                            
                            <div class="input-field col s6">
                                <!--<h1>gender</h1>--> <span >Notification Type</span><br>
                                <input name="eventnottype" type="radio" id="email" value="email" ng-model="eventnottype"/>
                                <label for="email">EMAIL</label>
                                <input name="eventnottype" type="radio" id="sms" value="sms" ng-model="eventnottype"/>
                                <label for="sms">SMS</label>
                                <input name="eventnottype" type="radio" id="both" value="both"  ng-model="eventnottype"/>
                                <label for="both">BOTH</label>
                            </div>
                            <div class="input-field col s6">                               
                                <input id="recurrent" type="checkbox"  value="TRUE" name="recurrent"  ng-model="recurrent" >                                
                                <label for="recurrent">Recurrent</label>                            
                            </div>
                           
                        </div>                    
                        <div class="row" ng-show="recurrent">                            
                            <div class="input-field col s6">
                                <p>Repeat Every</p>
                                <input placeholder="Reapeat Every" id="Repeatation" type="text" name="Repeatation" class="validate" data-ng-model="current_event.repeatation">
                            </div>
                            <div class="input-field col s6">
                                <p>Day/Weak/Month/Year</p>
                                <select class="browser-default" id="repeatationfactor" name="repeatationfactor" ng-model="repeatationfactor" data-select>
                                    <option value="" >Select</option>
                                    <option value="DAY(s)">DAYS</option>
                                    <option value="WEAK(s)">WEAKS</option>
                                    <option value="MONTH(s)">MONTHS</option>
                                    <option value="YEAR(s)">YEARS</option>
                                </select>
                            </div>                           
                        </div>
                        <div class="row">
                            <div class="input-field col s6">
                                <p>Privacy</p>
                                <select class="browser-default" id="privacy" name="privacy" ng-model="privacy" data-select>
                                    <option value="" >Select</option>
                                    <option value="Everyone">Everyone</option>
                                    <option value="Only me">Only me</option>
                                </select>
                            </div>
                            <div class="input-field col s6">
                                <p>Show time as</p>
                                <select class="browser-default" id="showtimeas" name="showtimeas" ng-model="showtimeas" data-select>
                                    <option value="" >Select</option>
                                    <option value="BUSY">BUSY</option>
                                    <option value="FREE">FREE</option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s6">
                                <p>Tags</p>
                                <select id="calendarevent_tag" name="calendarevent_tag[]" ng-model="calendarevent_tag" multiple="multiple">
                                    <option ng-repeat="tag in tags.data" value="@{{tag.tag}}">@{{tag.tag}}</option>
                                </select>
                            </div>
                            <div class="row">
                                <div class="input-field col s5">
                                    <p>Clients</p>
                                     <!--<select multiple="multiple" name="drpteam[]" id="chipAuto" ng-model="chipAuto" data-select>-->
                                    <select  id="clients" name="clients[]" ng-model="clients" multiple="multiple">
                                        <option ng-repeat="client in participants" value="@{{client.id}}">@{{client.name}}</option>
                                    </select>
                                </div>
                                <div class="input-field col s1">
                                    <a href="#modal_createclientsc" ng-click="clearClients()"><i class="fa fa-plus">add client</i></a>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" value="@{{eventId}}" id="calendareventId" name='calendareventId' />
                    </form>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
            <a href="javascript:void(0)" class="modal-action  waves-effect waves-green btn-flat waves-light btn" data-ng-click="eventSave($event)">Save</a>
        </div>
    </div>
    <!--Modal ENds-->
    <div class="card calendar-cardheight">
    <div class="row">
        <div class="col s4 m8 l12">
    
    <div role="main">
        <div class="container calendar-container">
            <section id="directives-calendar">
                <div class="well">
                    <div class="row-fluid">
                        <div class="span4">
                        </div>
                        <div class="span8">
                            <tabset>
                                <tab select="renderCalendar('myCalendar1');">         
                                    <div class="calendar" ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar"></div>
                                </tab>
                            </tabset>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    </div>
    </div>
    </div>
    <input type="hidden" id='data-upcomingemployeeevent' value="{{$upcomingemployeeEvents or '[]'}}"/>
    <input type="hidden" id='data-eventtypes' value="{{$eventtypes or '[]'}}"/>
    <input type="hidden" id='data-tags' value="{{$tags or '[]'}}"/>
    <input type="hidden" id="data-participants" value="{{$participants or '[]'}}">   
    <input type="hidden"  id="data-clients" value="{{$clients or []}}" >
    <input type="hidden"  id="data-jobpositions" value="{{$jobpositions or []}}" >
    <input type="hidden"  id="data-salutations" value="{{$salutations or []}}" >
    <input type="hidden" id='data-upcomingevent' value="{{$upcomingEvents or '[]'}}"/>
    </div>
    
    <!--code for displaying upcoming events-->
    <div class="col s4 card right row+ widget">
        <div class="list-title">
            <h6 class="col s5"><a href="{{ url('hr/calendarevent')}}">Upcoming Events</a></h6>           
        </div>
        <ul class="item-list upcoming-events" upcoming-events="upcomingEvents()">
            <li class="item avatar" ng-repeat="event in upcomiongEvents.data">
                <i class="fa fa-user circle" aria-hidden="true"></i>
                <span class="title">@{{event.subject}}</span><br>@{{event.startingdate}}
                <a href="#!" class="secondary-content right" ng-click="showcalenderEvent(event.id)"><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>
    <!--code for display upcoming events ends here.-->
    
    <!-- Modal Structure for creating event-->
    <div id="modal_createeventsc" class="modal fade-in-right modal-fixed-footer" data-modalfire>
        <div class="modal-content">
            <h4>Create Event Type</h4>                
            <div class="row">
                <form class="col s12" id="frmeventtype">
                    <div class="row">
                        <div class="input-field col s12">
                            <p for="txteventtype">Event</p>
                            <input id="txteventtype" class="validate" type="text" name="txteventtype" ng-model="txteventtype" data-vtype="text" required="required">  
                            <span class="error-msg"></span>
                            <!--label for="txteventtype" data-error="Event is mandatory and should contain only alphabets."></label-->
                        </div>
                        <div class="input-field col s12">
                            <p for="txtnote">Note</p>
                            <input id="txtnote" class="validate" type="text" name="txtnote" ng-model="txtnote" required>                                
                            
                        </div>
                        <input type="hidden" value="" id="eventtypeId" name='eventtypeId' ng-model="eventtypeId"/>
                    </div>
                </form>
            </div>
        </div>
        <div class="modal-footer">    
            <a href="#!" ng-click="saveeventtype($event)" class="waves-effect waves-light btn">Create</a>
            <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
        </div>
    </div>
    <!-- Modal Structure for event ends here-->

    <!-- Modal Structure for creating client-->
    <div id="modal_createclientsc" class="modal fade-in-right modal-fixed-footer" data-modalfire>
        <div class="modal-content">
            <h4>Create Client Type</h4>                
            <div class="row">
                <form class="col s12" id="frmclientsc">
                    <div class="row">
                        <div class="input-field col s12">
                            <input id="radiocompanyornot" type="radio" name="radiocompanyornot" value="COMPANY" ng-model="radiocompanyornot" ng-click="rCclear()">
                            <label for="radiocompanyornot">Company</label>
                            <input id="radiocompanyorno" type="radio" name="radiocompanyornot"  value="INDIVIDUAL" ng-model="radiocompanyornot" ng-click="rIclear()" >
                            <label for="radiocompanyorno">Individual</label>
                        </div>
                        <div class="input-field col s12">
                            <p for ="txtname">Name</p>
                            <input id="txtname" class="validate" type="text" name="txtname" data-vtype="name" ng-model="txtname" required>                                
                            <span class="error-msg"></span>
                            <label for="txtname"></label>
                        </div>
                        <div class="input-field col s12">
                            <p for ="txtaddress">Address</p>
                            <input id="txtaddress" class="validate" type="text" data-vtype="text" name="txtaddress" ng-model="txtaddress" required>                                
                             <span class="error-msg"></span>
                            <label for="txtaddress"></label>
                        </div>
                        <div class="input-field col s12">
                            <input id="txttin" type="text" name="txttin" ng-model="txttin" required>                                
                            <label for="txttin">Tin</label>
                        </div>
                        <div class="input-field col s12">
                            <input id="txtwebsite" type="url" name="txtwebsite" ng-model="txtwebsite" required>                                
                            <label for="txtwebsite">Web site</label>
                        </div>
                        <div class="input-field col s12" ng-show="radiocompanyornot == 'INDIVIDUAL'" >
                            <select id="sctjob" name="sctjob" ng-model="sctjob" data-select>
                                <option ng-repeat="jobposition in jobpositions.data" value="@{{jobposition.id}}">@{{jobposition.position}}</option>
                            </select>
                            <label for="txttin">Job Position</label>
                        </div>
                        <div class="input-field col s12">
                            <p for ="txtphone">Phone</p>
                            <input id="txtphone" type="text" data-vtype="telephone" name="txtphone" ng-model="txtphone" required>                                
                            <span class="error-msg"></span>
                            <label for="txtphone"></label>
                        </div>
                        <div class="input-field col s12">
                            <p for ="txtemail">Email</p>
                            <input id="txtemail" class="validate" data-vtype="email" type="email" name="txtemail" ng-model="txtemail" required>                                
                            <span class="error-msg"></span>
                            <label for="txtemail" data-error="enter a valid email formate."></label>
                        </div>
                        <div class="input-field col s12">
                            <input id="txtfax" type="text" name="txtfax" ng-model="txtfax" required>                                
                            <label for="txtfax">Fax</label>
                        </div>
                        <div class="input-field col s12"  ng-show="radiocompanyornot == 'INDIVIDUAL'" >
                            <select id="sctsalutation" name="sctsalutation" ng-model="sctsalutation" data-select>
                                <option ng-repeat="salutation in salutations.data" value="@{{salutation.id}}">@{{salutation.name}}</option>
                            </select>                               
                            <label for="txttin">Salutation</label>

                        </div>
                        <div class="input-field col s12">
                            <input id="txtlanguage" type="text" name="txtlanguage" ng-model="txtlanguage" required>                                
                            <label for="txtlanguage">Language</label>
                        </div>
                        <div class="input-field col s12" ng-show="radiocompanyornot == 'COMPANY'">
                            <input id="txtcontactname" type="text" name="txtcontactname" ng-model="txtcontactname" required>                                
                            <label for="txtcontactname">Contact Person Name</label>
                        </div>
                        <div class="input-field col s12">
                            <input id="txttitle" type="text" name="txttitle" ng-model="txttitle" required>                                
                            <label for="txttitle">Title</label>
                        </div>
                        <div class="input-field col s12">
                            <p for="txtpersonemail">Person Email</p>
                            <input id="txtpersonemail"  type="email" name="txtpersonemail" ng-model="txtpersonemail" required>                                
                            <label for="txtpersonemail"></label>
                        </div>
                        <div class="input-field col s12">
                            <p for="txtpersoncontact">Contact Person</p>
                            <input id="txtpersoncontact" type="text" data-vtype="name" name="txtpersoncontact" ng-model="txtpersoncontact" required>                                
                            <span class="error-msg"></span>
                            <label for="txtpersoncontact"></label>
                        </div>

                        <div class="input-field col s12">
                            <input id="txtnotes" type="text" name="txtnotes" ng-model="txtnotes" required>                                
                            <label for="txtnotes">Notes</label>
                        </div>
                        <div class="input-field col s12">
                            <input id="chkcustomer" type="checkbox" name="chkcustomer"  ng-model="chkcustomer">                                
                            <label for="chkcustomer">Is customer</label>
                        </div>
                        <div class="input-field col s12">
                            <input id="chkvendor" type="checkbox" name="chkvendor"  ng-model="chkvendor" >                              
                            <label for="chkvendor">Is Vendor</label>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="modal-footer">    
            <a href="#!" ng-click="saveclientsc($event)" class="waves-effect waves-light btn">Create</a>
            <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
        </div>
    </div>
    <!-- Modal Structure for client ends here-->

    
    <!-- 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="frmCalendareventssc">
                    <div class="row">
                        <div class="input-field mandatory col s12">
                            <p>Subject</p>
                            <input id="name" name="event_subject" type="text" 
                                   ng-model="event_subject"  class="validate" placeholder="Subject" required>
                            <label for="event_subject" data-error="Name is mandatory and should contain only alphabets."></label>
                        </div>
                        <div class="input-field mandatory col s6">
                            <p>Description</p>                            
                            <textarea name="event_desc" ng-model="event_desc" placeholder="Description"></textarea>                                                     
                        </div>                    
                        <div class="input-field mandatory col s6">
                            <p>Date</p>                            
                            <input id="event_date" name="event_date" 
                                   type="text" ng-model="event_date"  class="validate" placeholder="Event Date" required readonly>                            
                        </div> 
                    </div>
                    <div class="input-field mandatory col s6">
                        <p>Event Type</p>                           
                        <select id="event_typesc" name="event_typesc" ng-model="event_typesc" data-select>
                            <option value="">Select</option>
                            <option ng-repeat="eventtype in eventtypess" value="@{{eventtype.id}}">@{{eventtype.eventtype}}</option>
                        </select>
                    </div> 
                    <input type="hidden" value="" id="calendareventId" name='calendareventId' ng-model="calendareventId"/>
                    
                    <input type="hidden" id="flag" name="flage">
                </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="editclaenderevent(flage)" class="waves-effect waves-light btn">Edit Event</a>
        </div>
    </div>
<!-- Modal for event ends Here -->
    

</div>
<script src="{{ asset('/js/calendar/calendarMain.js')}}"></script> 
@stop