@extends('hr::layouts.master')
@section('content')
<script type="text/javascript" src="{{asset('js/dashboard.js')}}"></script>
<script src="{{ asset('/js/hr/controller/empModules.js')}}"></script>
<script src="{{ asset('/js/hr/controller/dashboardController.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/hr/fullcalendar.min.js')}}"></script>
<script src="{{asset('/js/validation.js')}}"></script><!--end hr dashbord js-->
<div  ng-app="dashboardApp" ng-controller="dashCtrl" ng-init="Calender_Events()">
    <!--    <div ">-->
    <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 dropdown-card-width'>
                        <li><a href="{{ url('hr/global')}}">Global Settings</a></li>
                         <li class="divider"></li>
                         <li><a href="{{ url('application/client')}}">Client</a></li>
                    </ul>
                </div>
                <!--code ends here.-->
            </h1>
        </div>
    </div> 
    <div class="col s12 m6 l4">
        <input type="hidden" id='data-dash' value="{{$dash or '[]'}}"/>
        <input type="hidden" id='data-departments' value="{{$departments or '[]'}}"/>  
        <input type="hidden" id='data-jobpositions' value="{{$jobpositions or '[]'}}"/>
        <input type="hidden" id='data-projects' value="{{$projects or '[]'}}"/>
        <input type="hidden" id='data-eventtypes' value="{{$eventtypes or '[]'}}"/>
        <input type="hidden" id='data-calendarevents' value="{{$calendarevents or '[]'}}"/>
        <input type="hidden" id='data-task' value="{{$task or '[]'}}"/>
        <input type="hidden" id='data-clients' value="{{$clients or '[]'}}"/>
        <input type="hidden" id='data-todayevent' value="{{$todaysEvents or '[]'}}"/>
        <input type="hidden" id='data-leavestatitics' value="{{$leavestatitics or '[]'}}"/>
        <input type="hidden" id='data-employee' value="{{$employee or '[]'}}"/>
        <input type="hidden" id='data-parents' value="{{$parentdepartments or '[]'}}"/>
        <input type="hidden" id='data-leads' value="{{$leads or '[]'}}"/>
        <div class="card">
            <div class="row">
                <div class="col s12 widget">
                    <div class="widget-header">
                        <a href="{{url('hr/employee')}}" ><h3 class="left"> <i class="drag-handle"></i>Employees</h3></a>
                        <div class="right">
                            <a href="#modal_quickcreateemp" ng-click="clearempformFields()" ><i class="fa fa-plus"></i> Employees</a>

                            <a href="#modal_createdepartment" ng-click="clearDepartmentFormFields()" ><i class="fa fa-plus"></i> Department</a>

                        </div>
                    </div>
                    <div ng-show="dashdatas.totalemp == 0 && dashdatas.totaldepartment == 0 && dashdatas.totalbadges == 0 && dashdatas.badgedemp == 0 ">
                                <div class="no-data">   
                                    <i class="no-data-img"></i>
                                    <p>No Data Found</p>
                                </div>
                            </div>
                    <div class="widget-content" ng-hide="dashdatas.totalemp == 0 && dashdatas.totaldepartment == 0 && dashdatas.totalbadges == 0 && dashdatas.badgedemp == 0 ">
                        <div class="doughnut-wrap">
                            <canvas id="myChart" width="100" height="100" style="width: 200px;"></canvas> 
                            <div class="center-legend legend">
                                <h4>@{{dashdatas.totalemp}}</h4>
                                <p>Employees</p>
                            </div>
                        </div>
                        <ul class="legend-wrap">
                            <li class="col s4">
                                <div class="legend">
                                    <h5>@{{dashdatas.totaldepartment}}</h5>
                                    <p>Departments</p>
                                </div>
                            </li>
                            <li class="col s4">
                                <div class="legend">
                                    <h5>@{{dashdatas.totalbadges}}</h5>
                                    <p>Badges</p>
                                </div>
                            </li>
                            <li class="col s4">
                                <div class="legend">
                                    <h5>@{{dashdatas.badgedemp}}</h5>
                                    <p>Badged Employees</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>                        
            </div>
        </div>  
        <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="" ng-click="LeaveDetails()"><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">
                        <a  href="{{url('hr/project')}}"><h3 class="col s7 left"><i class="drag-handle"></i>Projects & Timesheets</h3></a>
                        <div class="col s5 right">
                            <div class="col s10">
                                <select ng-change="projectdateFilter()" ng-model="interval" ng-init="interval = 1">
                                    <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>
                            <a href="#modal_quickcreateproject" ng-click="clearprojectformFields()" ><i class="fa fa-plus"></i> Projects</a>
                        </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 Projects</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>Projects Completed</p>
                                    <a href="#" ng-click="projectDetails('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>Projects in started</p>
                                    <a href="" ng-click="projectDetails('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>Projects on going</p>
                                    <a href="#" ng-click="projectDetails('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>Projects not Started</p>
                                    <a href="#" ng-click="projectDetails('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>
                </div>
                <ul class="item-list" over-due-scroll-tasks="overDueScrollTasks()">
                    <li class="item avatar" ng-repeat="tasks in task.data| orderBy : 'startdate'">
                        <i class="fa fa-user circle" aria-hidden="true"></i>
                        <span class="title">@{{tasks.taskname}}</span>
                        <span class="date">@{{tasks.startdate}}</span>
                        <span class="date-rem">@{{onholdDate(tasks.startdate)}}</span>                        
                        <a href="#!" class="secondary-content" ng-show="tasks.status == 'onhold'">
                            <i class="fa fa-pause orange-right" style="color:brown "></i>
                        </a>
                        <a href="#!" class="secondary-content" ng-show="tasks.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 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')}}"><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 todaysevent.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 Create department -->
<!-- Modal Structure -->
<div id="modal_createdepartment" class="modal fade-in-right  modal-fixed-footer" data-modalfire>
    <div class="modal-content">

        <h4>Add Department</h4>                
        <div class="row">
            <form class="custom-form col s12" id="frmDepartment">
                <div class="row">
                    <div class="input-field mandatory col s12">
                        <p>Name</p>
                        <input id="txtname" ng-class="initialclass" type="text" name="txtname" ng-model="txtname" placeholder="Department name"  data-vtype="name" required="required">                              
                       <span class="error-msg"></span>
                    </div>                      
                    <div class="input-field col s6">
                        <p>Select manager</p>
                        <div class="input-field col s12">
                            <select id="txtmanager" name="txtmanager" ng-model="txtmanager" data-select required>
                                <option ng-repeat="lead in leads.data" value="@{{lead.id}}">@{{lead.name}}</option>
                            </select>
                            <label for="txtmanager">Manager</label>
                        </div>
                    </div>
                    <div class="input-field  col s6">
                        <p>Select parent department,if any</p>
                        <div class="input-field col s12">
                            <select id="txtparent" name="txtparent" ng-model="txtparent" data-select>
                                <option value=""></option>
                                <option ng-repeat="parent in parentdepartments.data" value="@{{parent.id}}">@{{parent.name}}</option>
                            </select>
                            <label for="txtparent">Parent department</label>
                        </div>
                    </div>


                    <div class="input-field mandatory col s6">
                        <p>Contact</p>
                        <input id="txtcontact" ng-class="initialclass" type="text" name="txtcontact" ng-model="txtcontact" placeholder="Contact" data-vtype="telephone" required="required">                                
                       <!-- <label for="txtcontact" data-error="Enter a valid contact number."></label>-->
                        <span class="error-msg"></span> 
                    </div>
                    <div class="input-field mandatory col s6">
                        <p>Email</p>
                        <input id="email" ng-class="initialclass" type="email" name="txtemail" ng-model="txtemail" placeholder="Email" data-vtype="email" required="required" >                                
                        <!--label for="txtemail" data-error="Enter a valid email id."></label-->
                         <span class="error-msg"></span> 
                    </div>


                    <div class="input-field col s12">
                        <p>Fax</p>
                        <input id="txtfax" ng-class="initialclass" type="text" name="txtfax" ng-model="txtfax" placeholder="Fax" required="required">                                
                       <!-- <label for="txtfax" data-error="Fax is mandatory and should contain only alphabets."></label>-->
                        <span class="error-msg"></span> 
                    </div>

                    <input type="hidden" value="" id="departmentId" name='departmentId' ng-model="departmentId"/>
                </div>
            </form>
        </div>
    </div>
    <div class="modal-footer">    
        <a href="#!" ng-click="saveDepartment($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 -->
<!--</div>-->
<!-- Modal Create employee -->
<!-- Modal Structure -->
<div id="modal_quickcreateemp" class="modal fade-in-right modal-fixed-footer" data-modalfire>
    <div class="modal-content">

        <h4>Add Employee</h4>                
        <div class="row">
            <form class=" custom-form col s12" id="formemployee">
                <div class="row">
                    <div class="input-field mandatory col s12">
                        <p>Name</p>
                        <input id="name" name="empname" type="text"  ng-model="empname"  ng-class="initialclass" placeholder="Employee name"  data-vtype="name" required="required">
                        <span class="error-msg"></span>   
                    </div>

                    <div class="input-field mandatory col s6">
                        <p>Select Jobposition</p>
                        <div class="input-field col s12">
                            <select id="txtjobposition" name="jobsearch" ng-model="txtjobposition" data-select required="required" data-vtype="number">
                                <option value=""></option>
                                <option ng-repeat="jobposition in jobpositions.data" value="@{{jobposition.id}}">@{{jobposition.position}}</option>
                            </select>
                            <span class="error-msg"></span>  

                        </div>   

                    </div> 

                    <div class="input-field mandatory col s6">
                        <p>Select Department</p>
                        <div class="input-field col s12">
                            <select id="searchdepartment" name="searchdepartment" ng-model="searchdepartment" data-select>
                                <option value=""></option>
                                <option ng-repeat="department in parentdepartments.data" value="@{{department.id}}">@{{department.name}}</option>
                            </select>

                        </div> 
                    </div> 
                    <div class="input-field  col s12">
                        <div class="input-field mandatory col s6">
                            <input id="contact"name="empcontact" type="tel" class="validate" placeholder="Contact" data-vtype="telephone" ng-model="empcontact" required>
                            <span class="error-msg"></span>
                        </div> 
                        <div class="input-field mandatory col s6">
                            <input type="email" id="email" name="empemail"class="validate" placeholder="email" required ng-model="empemail" data-vtype="email">
                            <span class="error-msg"></span>
                        </div>
                    </div>
                     <div class="input-field  col s12">


                        <div class="input-field col s6">
                            <!--<h1>gender</h1>--> <span >Gender</span><br>
                            <input name="empgender" type="radio" id="male" value="MALE" ng-model="empgender"/>
                            <label for="male">M</label>
                            <input name="empgender" type="radio" id="female" value="FEMALE" ng-model="empgender"/>
                            <label for="female">F</label>
                            <input name="empgender" type="radio" id="others" value="OTHERS"ng-model="empgender"/>
                            <label for="others">O</label>
                            <!--<label for="empname" data-error="Marital status is mandatory."></label>-->
                            <span class="error-msg"></span>
                        </div>
                        <div class="input-field mandatory col s6">
                            <p>Marital status</p>
                            <select class="browser-default" name="martialstatus" ng-model="martialstatus">
                                <option value="" disabled selected>Martial Status</option>
                                <option value="Single">Single</option>
                                <option value="Married">Married</option>
                            </select>
                             <span class="error-msg"></span>
                            <label for="martialstatus" data-error="Marital status is mandatory."></label>
                        </div>
                    </div>
                      <div class="input-field mandatory col s6">
                                    <input type="email" data-vtype="email" required placeholder="work Email" id="workemail" name="workemail" ng-model="workemail">
                                    <span class="error-msg"></span>
                                </div>
                    <div class="input-field mandatory col s6">
                        <input type="text" ng-model="empcodes"class="validate" placeholder="Employee code" id="empcode"name="empcode" required data-vtype="text">
                        <span class="error-msg"></span>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="modal-footer">    
        <a href="#!" ng-click="saveemployee($event)" class="waves-effect waves-light btn">Save</a>
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
    </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 -->
<!--model for creating project starts here.-->
<div id="modal_quickcreateproject" class="modal fade-in-right modal-fixed-footer" data-modalfire>
    <div class="modal-content">
        <h4>Add Project</h4>                
        <div class="row">
            <form class=" custom-form col s12" id="frmproject" >
                <div class="row">
                    <div class="row">
                    <div class="input-field mandatory col s4">
                        <p>Name</p>
                        <input id="txtprojname" ng-class="initialclass" type="text" name="txtname" ng-model="txtname" data-vtype="name" required="required"> 
                        <span class="error-msg"></span> 
                        <!--label for="txtname" data-error="Name is mandatory and should contain only alphabets."></label-->
                    </div>
                    <div class="input-field mandatory col s4">
                        <p>Department</p>
                        <select id="sctdepartment" class="validate"  name="sctdepartment" ng-model="sctdepartment" data-select required>
                            <option value="">choose your option</option>
                            <option ng-repeat="department in parentdepartments.data" value="@{{department.id}}">@{{department.name}}</option>
                        </select>
                        <!--<label for="sctdepartment" data-error="Department is mandatory."></label>-->
                    </div>
                    <div class="input-field mandatory col s4">
                        <p>Lead</p>
                        <select id="sctlead" class="validate"  name="sctlead" ng-model="sctlead" data-select required>
                            <option value="">choose your option</option>
                            <option ng-repeat="lead in leads.data" value="@{{lead.id}}">@{{lead.name}}</option>
                        </select>
                    </div>
                    </div>
                    <div class="row">
                    <div class="input-field mandatory col s4">
                        <p>Start Date</p>
                        <input id="dtpdate" type="date" name="dtpdate" ng-model="dtpdate" class="datepicker" data-vtype="date" required>                                
                       <span class="error-msg"></span> 
                        <!--<label for="dtpdate" data-error="Start date is mandatory."></label>-->
                    </div>
                    <div class="input-field mandatory col s4">
                        <p>Expected End Date</p>
                        <input id="dtpexpecteddate" type="date" name="dtpexpecteddate" ng-model="dtpexpecteddate" class="datepicker" data-vtype="date" required>                                
                       <span class="error-msg"></span> 
                        <!--<label for="dtpexpecteddate" data-error="Expected end date is mandatory."></label>-->
                    </div>
                    <div class="input-field mandatory col s4">
                        <p>End Date</p>
                        <input id="dtpenddate" type="date" name="dtpenddate" ng-model="dtpenddate"class="datepicker" data-vtype="date" required>                                
                        <span class="error-msg"></span> 
                        <!--<label for="dtpenddate" data-error="End date is mandatory."></label>-->
                    </div>
                    </div>
                   
                    <div class="input-field mandatory col s6">
                        <p>Status</p>
                        <select id="sctstatus" class="validate" name="sctstatus" ng-model="sctstatus" data-select>
                            <option value="">choose your option</option>
                            <option value="notstarted">Not Started</option>
                            <option value="started">Started</option>
                            <option value="ongoing">On Going</option>
                            <option value="completed">Finished</option>
                            <option value="reinforce">Reinforce</option>
                            <option value="onhold">On Hold</option> 
                        </select>                                
                        <!--<label for="sctstatus" data-error="Status is mandatory."></label>-->
                    </div>
                    <div class="input-field mandatory col s6">
                        <p>Priority</p>
                        <select id="sctpriority" class="validate" name="sctpriority" ng-model="sctpriority" data-select>
                            <option value="">choose your option</option>
                            <option value="low">Low</option>
                            <option value="medium">Medium</option>
                            <option value="high">High</option>
                        </select>                                
                        <!--<label for="sctpriority" data-error="Priority is mandatory and should contain only alphabets."></label>-->
                    </div>
                     <div class="input-field mandatory col s6">
                        <p>Note</p>
                        <input id="txtnote" class="validate" type="text" name="txtnote" ng-model="txtnote" data-vtype="text" required>                                
                        <span class="error-msg"></span> 
                        <!--<label for="txtnote" data-error="Note is mandatory and should contain only alphabets."></label>-->
                    </div>
                    <div class="input-field mandatory col s6">
                        <p>Description</p>
                        <input id="txtdescription" class="validate" type="text" name="txtdescription" ng-model="txtdescription" data-vtype="text"  required>                                
                        <span class="error-msg"></span> 
                        <!--<label for="txtdescription" data-error="Description is mandatory and should contain only alphabets."></label>-->
                    </div>
                    <div class="input-field mandatory col s6">
                        <input id="radiointernal" type="radio" name="rdointernal" value='1' ng-model="rdointernal" >
                        <label for="radiointernal">Internal</label>
                        <input id="radioexternal" type="radio" name="rdointernal"  value="2" ng-model="rdointernal" >
                        <label for="radioexternal">External</label>
                        <!--<label for="rdointernal" data-error="You need choose one."></label>-->
                    </div>
                    <div class="input-field mandatory col s6" ng-show="rdointernal == 2">
                        <p>Client</p>
                        <select id="sctclient" class="validate"  name="sctclient" ng-model="txtclient" data-select required>
                            <option value="">choose your option</option>
                            <option ng-repeat="client in clients.data" value="@{{client.id}}">@{{client.personcontact}}</option>
                        </select>
                        <!--<label for="sctclient" data-error="Client is mandatory."></label>-->
                    </div>
                    <div class="input-field mandatory col s12">
                        <input id="radioHr" type="radio" name="rdohourorunit" value='1' ng-model="rdohourorunit" >
                        <label for="radioHr">Hour</label>
                        <input id="radioUt" type="radio" name="rdohourorunit"  value="2" ng-model="rdohourorunit" >
                        <label for="radioUt">Unit</label>
                        <!--<label for="rdohourorunit" data-error="You need choose one."></label>-->
                    </div>


                    <input type="hidden" value="" id="projectId" name='projectId' ng-model="projectId"/>

                </div>

            </form>
        </div>
    </div>
    <div class="modal-footer">    
        <a href="#!" ng-click="saveproject($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>
<!--model for creating projects end here.-->
</div>
<!-- Modal Trigger -->



<!--<a class="waves-effect waves-light btn" href="{{url('application/global')}}">Global Settings</a>-->

@stop