{{View::make('layout.header')}}





<style>

.fc-right .fc-state:hover{

     background-color:#fff !important;

    

}

.fc-right .fc-button{

     padding: 0.438rem 0.5rem !important;

     background:transparent;

   

    height: 100%;

}

.fc-right .fc-state-active {

    

    z-index: 1 !important;

}

.fc-next-button, .fc-prev-button{

    background: transparent !important;

}

.fc-month-button, .fc-agendaWeek-button{

border-top-right-radius: 0 !important;

    border-bottom-right-radius: 0 !important;

    }

    .fc-agendaWeek-button, .fc-agendaDay-button{

        border-top-left-radius: 0 !important;

    border-bottom-left-radius: 0 !important;



    }

.fc-icon-left-single-arrow:after, .fc-icon-right-single-arrow:after {

    top:-10% !important;

}

.fc-icon-left-single-arrow:after{

    font-size: 135% !important;

    font-weight: inherit !important;

    content: "\e900" !important;

}

.fc-icon-right-single-arrow:after {

    font-size: 135% !important;

    font-weight: inherit !important;

    content: "\e901" !important;

}

.fc-state-default {

    box-shadow: none !important;

}

.fc-content .fc-title{

    color:#fff;

    font-size: 9px;

    white-space: break-spaces !important;

}



.fc-right .fc-button-group{

    width: 60% !important;

    float: right !important;

}

@media only screen and (min-width: 768px) {

.fc-left, .fc-right{

    width:50% !important;

}

.app-calendar .fc-popover { left:50% !important;  top : 30% !important;}

}

@media only screen and (max-width: 768px) {

.fc-left, .fc-right{

    width:100% !important;

}

.app-calendar .fc-popover { left:20% !important;  top : 40% !important;}

}



</style>

 <style>

    /* Style the tab */

    .tab {

        overflow: hidden;

        background-color: #ffffff;

    }

    /* Style the buttons inside the tab */

    .tab button {

        background-color: inherit;

        float: left;

        border: none;

        outline: none;

        cursor: pointer;

        padding: 6px 6px;

        transition: 0.3s;

        font-size: 11px;  border: 1px solid #ccc;

    }

    /* Change background color of buttons on hover */

    .tab button:hover {

        background-color: #ddd;

    }

    /* Create an active/current tablink class */

    .tab button.active {

        background-color: #ccc;

    }

    /* Style the tab content */

    .tabcontent {

        display: none;

        padding: 6px 12px;  

        border-top: none;

    }

</style>

    <!-- BEGIN: Content-->

    <div class="app-content content ">

        <div class="content-overlay"></div>

        <div class="header-navbar-shadow"></div>

        <div class="content-wrapper">

            <div class="content-header row">

                <div class="content-header-left col-md-9 col-12 mb-2">

                    <div class="row breadcrumbs-top">

                        <div class="col-12">

                            <div class="breadcrumb-wrapper">

                                <ol class="breadcrumb">

                                    <li class="breadcrumb-item">HR

                                    </li>

                                    <li class="breadcrumb-item active"><a href="#">Apply on Behalf</a>

                                    </li>

                                </ol>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <div class="content-body">

                <!-- Dashboard Ecommerce Starts -->

                <section id="multiple-column-form">

                    

                <div class="row">

                <div class="col-12 col-md-4">

                    <div class="card">

                      <div class="card-header">

                        <h4 class="card-title">Apply Leave</h4>

                      </div>

                      <div class="col-md-12">

                        @if (\Session::has('statusMsg'))

                        

                        <div class="alert alert-success alert-dismissible" style="margin-top:18px;">

                            <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>

                            <strong>Success!</strong> {{ Session::get('statusMsg') }}

                        </div>

                        

                        @endif

                    </div>

                      <div class="card-body" style="padding-top:0px;">

                      <form id="all-filter">

                                        

                      @csrf

                      <input type="hidden" name="year" id="year" class="form-control"  style="" value="{{ date('Y') }}" placeholder="">

                                               

                         <input type="text" name="name" id="name" class="form-control"  style="padding-left: 10px;" autocomplete="off" value="" placeholder="Staff Name / Staff No.">

                              </form>               

                          <form  id="all-filter11" method="post" enctype="multipart/form-data">

                               <input type="hidden" name="year" id="year" class="form-control"  style="" value="{{ date('Y') }}" placeholder="">

                                <input type="hidden" name="pagename" value="hr_apply_on_behalf"/>

                          <div class="row">

                                <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">

                                <input type="hidden" name="user_id" value="{{Auth::id()}}">

                                <div class="col-md-12 col-12">

                                    <div class="form-group">

                                        <label class="form-label" for="payment-date">Replacement Leave Pending :</label>

                                        

                                        <input type="text" name="rlpending" id="rlpending" class="form-control"  style="padding-left: 10px;" autocomplete="off" value="" readonly >

                                    </div>

                                </div>

                                <div class="col-md-12 col-12">

                                    <div class="form-group">

                                        <label class="form-label" for="payment-date">Employee  :</label>

                                        <select class="form-control" id="employee" name="username" onchange="ajaxsearch11()">

                                        </select>

                                        @if ($errors->has('username'))<em class="required" style="font-size: 14px; font-style: italic;color: #dc3545!important;">{!!$errors->first('username')!!}</em>@endif

                                    </div>

                                </div>

                                <div class="col-md-12 col-12">

                                    <div class="form-group">

                                        <label class="form-label" for="payment-date">Leave Type  :</label>

                                        <select disabled class="form-control" id="leave_type" onChange="leave_type_change('hidden_div', this)"  name="leave_type">

                                            <!--@foreach($leaveTypes as $type)-->

                                            <!--    @if($type->is_show==1)-->

                                            <!--        @if($type->type != "Emergency")-->

                                            <!--            @if($type->type == "Maternity")-->

                                            <!--                @if($upaydetails->sex==0)-->

                                            <!--                    <option value="{{ $type->type }}:{{ $type->upload }}:{{ $type->compulsory }}">{{ $type->name }}</option>-->

                                            <!--                @endif-->

                                            <!--            @elseif($type->type == "Paternity")-->

                                            <!--                @if($upaydetails->sex==1 && ($upaydetails->marital_status=="Married" || $upaydetails->marital_status== 1))-->

                                            <!--                    <option value="{{ $type->type }}:{{ $type->upload }}:{{ $type->compulsory }}">{{ $type->name }}</option>-->

                                            <!--                @endif-->

                                            <!--            @elseif($type->type == "Marriage")-->

                                            <!--                @if($upaydetails->marital_status!="Married" || $upaydetails->marital_status!= 1)-->

                                            <!--                    <option value="{{ $type->type }}:{{ $type->upload }}:{{ $type->compulsory }}">{{ $type->name }}</option>-->

                                            <!--                @endif-->

                                            <!--            @else-->

                                            <!--                <option value="{{ $type->type }}:{{ $type->upload }}:{{ $type->compulsory }}">{{ $type->name }}</option>-->

                                            <!--            @endif-->

                                            <!--        @endif-->

                                            <!--    @endif-->

                                            <!--@endforeach-->

                                            @foreach ($leaveTypes as $type)

                                                @if ($type->is_show == 1)

                                                    @if ($type->type != 'Emergency')

                                                        @if ($type->type == 'Maternity' && $upaydetails->sex == 0)

                                                            <option id="lt_{{ $type->id }}"

                                                                value="{{ $type->type }}:{{ $type->upload }}:{{ $type->compulsory }}">

                                                                {{ $type->name }}

                                                            </option>

                                                        @elseif (

                                                            $type->type == 'Paternity' &&

                                                                $upaydetails->sex == 1 &&

                                                                ($upaydetails->marital_status == 'Married' || $upaydetails->marital_status == 1))

                                                            <option id="lt_{{ $type->id }}"

                                                                value="{{ $type->type }}:{{ $type->upload }}:{{ $type->compulsory }}">

                                                                {{ $type->name }}

                                                            </option>

                                                        @elseif (($type->type == 'Marriage' && $upaydetails->marital_status != 'Married') || $upaydetails->marital_status != 1)

                                                            <option id="lt_{{ $type->id }}"

                                                                value="{{ $type->type }}:{{ $type->upload }}:{{ $type->compulsory }}">

                                                                {{ $type->name }}

                                                            </option>

                                                        @else

                                                            <option id="lt_{{ $type->id }}"

                                                                value="{{ $type->type }}:{{ $type->upload }}:{{ $type->compulsory }}">

                                                                {{ $type->name }}

                                                            </option>

                                                        @endif

                                                    @endif

                                                @endif

                                            @endforeach

                                        </select>

                                        @foreach($leaveTypes as $htype)

                                            <input type="hidden" name="hourly_{{$htype->type}}" id="hourly_{{$htype->type}}" value="{{ $htype->hourly_allow }}">

                                        @endforeach  

                                        @if ($errors->has('leave_type'))<em class="required" style="font-size: 14px; font-style: italic;color: #dc3545!important;">{!!$errors->first('leave_type')!!}</em>@endif

                                    </div>

                                </div>

                                <div class="col-md-12 col-12">    

                                    <div class="form-group">

                                        <label class="form-label" for="payment-note"> @if(Helper::settingInfo('hourlyLeave',$company_id) ?? 0 ==1) Hourly / @endif @if($halfdayallow->value ?? 0 ==1) Half Day / @endif Full Day  : </label>

                                        <div class="demo-inline-spacing">

                                            @if(Helper::settingInfo('hourlyLeave',$company_id) ?? 0 ==1)

                                            <div class="form-check form-check-inline">

                                                <input class="form-check-input" type="radio" onclick="hourlySlot()" name="hof" id="inlineRadio3" value="2" />

                                                <label class="form-check-label" for="inlineRadio3">Hourly</label>

                                            </div>

                                            @endif

                                            @if($halfdayallow->value ?? 0 ==1)

                                            <div class="form-check form-check-inline">

                                                <input class="form-check-input" type="radio" onclick="hideenddate()" name="hof" id="inlineRadio1" value="1" />

                                                <label class="form-check-label" for="inlineRadio1">Half Day</label>

                                            </div>

                                            @endif

                                            <div class="form-check form-check-inline">

                                                <input class="form-check-input" type="radio" onclick="showenddate()" name="hof" id="inlineRadio2" value="0" checked/>

                                                <label class="form-check-label" for="inlineRadio2">Full Day</label>

                                            </div>

                                        </div>

                                        @if ($errors->has('hof'))<em class="required" style="font-size: 14px; font-style: italic;color: #dc3545!important;">{!!$errors->first('hof')!!}</em>@endif

                                    </div>

                                </div>

                                <div class="col-md-12 col-12">

                                    <div class="form-group" id="half_day_type" style="display:none;">

                                        <label>Half Day Type</label>

                                        <select name="half_day_type" class="form-control">

                                            <option value="first">First Half</option>

                                            <option value="second">Second Half</option>

                                        </select>

                                        @if ($errors->has('half_day_type'))<em class="required" style="font-size: 14px; font-style: italic;color: #dc3545!important;">{!!$errors->first('half_day_type')!!}</em>@endif

                                    </div> 

                                </div> 

                                <div class="col-md-12 col-12">  

                                    <div class="form-group">

                                        <label>Leave start Date</label>

                                        <input type="date" name="leave_start_date" class="form-control flatpickr-basic" placeholder="DD-MM-YYYY" autocomplete="off" id="start-date1">

                                        @if ($errors->has('leave_start_date'))<em class="required" style="font-size: 14px; font-style: italic;color: #dc3545!important;">{!!$errors->first('leave_start_date')!!}</em>@endif

                                    </div>

                                </div>    

                                <div class="col-md-12 col-12">    

                                    <div id="end_date">

                                        <label>Leave End Date</label>

                                        <div class="form-group">

                                            <input type="date" name="leave_end_date" class="form-control flatpickr-basic" placeholder="DD-MM-YYYY" autocomplete="off" id="end-date1" onchange="calculatedays();" > 

                                        </div>

                                        @if ($errors->has('leave_end_date'))<em class="required" style="font-size: 14px; font-style: italic;color: #dc3545!important;">{!!$errors->first('leave_end_date')!!}</em>@endif

                                    </div>

                                </div> 

                                <div class="col-md-12 col-12 row" id="timeSlot" style="padding-bottom: 10px;display: none;">

                                    <div class="col-md-6">

                                         <label>From</label>

                                         <select class="form-control" id="time_from"  name="time_from" >

                                             <option></option>                                                 

                                         </select>

                                    </div>



                                    <div class="col-md-6">

                                        <label>Hours</label>

                                         <select class="form-control" id="time_for"  name="time_for" >

                                             <option></option>                                                 

                                         </select>

                                    </div>

                                </div>

                            

                            

                                <div class="col-md-12 col-12 row" id="openHours" style="display: none;padding-bottom: 10px;">

                                    <div class="col-md-12">

                                        <div class="tab">

                                            <button style="display:none;" class="tablinks" id="Allday_" onclick="openHours(event, 'Allday')">All day</button>

                                        <button class="tablinks" onclick="openHours(event, 'AM');hourslot('AM');">AM</button>

                                        <button class="tablinks" onclick="openHours(event, 'PM');hourslot('PM');">PM</button>

                                        <button class="tablinks active" onclick="openHours(event, 'Hours');hourslot();">Hours</button>

                                        </div>

                                        <div id="Allday" class="tabcontent">  

                                        </div>

                                        <div id="AM" class="tabcontent">

                                        </div>

                                        <div id="PM" class="tabcontent"> 

                                        </div>

                                        <div id="Hours" class="tabcontent"> 

                                        </div>

                                    </div>

                                </div>

                               

                                <div class="col-md-12 col-12" id="hidden_div" style="display: none;">

                                        <span id="filespan">

                                            <label>Add Slip File</label>

                                           

                                              <div>

                                                <input type="file" name="slip_file" id="slip_file" value="" accept=".jpeg, .png, .pdf"/>

                                              </div>

                                            </li>

                                        </span>



                                </div>

                                <div class="col-md-12 col-12">   

                                    <div class="form-group">

                                        <label>Reason</label>

                                        <textarea class="form-control" name="reason" id="reason" placeholder="Type here" ></textarea>

                                        @if ($errors->has('reason'))<em class="required" style="font-size: 14px; font-style: italic;color: #dc3545!important;">{!!$errors->first('reason')!!}</em>@endif

                                    </div>

                                </div>

                                <div class="col-md-12 col-12">  

                                    <div class="form-group TotalLeaveDays">

                                        <label>Total Leave Days</label>

                                        <input type="text" name="no_of_day" id="no_of_day" onclick="calculatedays()"  class="form-control"  autocomplete="off" readonly>

                                    </div>

                                    <div class="form-group TotalLeaveHours" style="display: none;">

                                        <label>Total Leave Hours</label>

                                        <input value="" type="text" name="no_of_hours" id="no_of_hours" onclick="calculatedays()"  class="form-control"  autocomplete="off" readonly>

                                    </div>

                                    <!--<div class="form-group">-->

                                    <!--    <label>Number of days</label>-->

                                    <!--    <input type="text" name="no_of_day" id="no_of_day" class="form-control"  autocomplete="off" readonly>-->

                                    <!--</div>-->

                                </div>    

                                <div class="col-md-12 col-12">   

                                    <div class="form-group">

                                        <label>Type</label>

                                        <div class="" id="approval_setting_html">

                                            

                                        </div>

                                        @if ($errors->has('status'))<em class="required" style="font-size: 14px; font-style: italic;color: #dc3545!important;">{!!$errors->first('status')!!}</em>@endif

                                    </div>

                                </div>

                                @if($relieveallow->value ?? 0 ==1)

                                <div class="col-md-12 col-12">  

                                    <div class="form-group">

                                        <label>Relieve</label>

                                        <select class="form-control" name="relieve" id="relieve">

                                            <option value="">Select Relieve</option>

                                            @foreach($relieves as $relieve)

                                            <option value="{{$relieve->username}}">{{$relieve->name}}</option>

                                            @endforeach

                                        </select>

                                        @if ($errors->has('relieve'))<em class="required" style="font-size: 14px; font-style: italic;color: #dc3545!important;">{!!$errors->first('relieve')!!}</em>@endif

                                    </div>

                                </div>

                                @endif

                                <div class="col-md-12 col-12">

                                    <div id="msg"></div>

                                </div>

                                <div class="col-md-12 col-12">

                                    <div class="form-group d-flex flex-wrap mb-0">

                                        <button type="button" onclick="apply_Leave()" class="btn btn-primary mr-1" id="apply" style="width: 30%;">Apply</button>

                                        <button type="button" onclick="clear_form('#leave')" class="btn btn-outline-secondary" data-dismiss="modal" style="width: 30%;">Cancel</button>

                                    </div>

                                </div>

                          </div>

                          </form>

                      </div>

                    </div>

                  </div>

                  <div class="app-calendar col-12 col-md-8">

                    <div class="card">

                      <div class="card-header">

                        <h4 class="card-title">Leave</h4>

                      </div>

                      <div class="card-body" style="padding:0px; ">

                          <div class="row" style="margin:0px;">

                            <div class="position-relative">

                                <div class="card shadow-none border-0 mb-0 rounded-0">

                                    <div class="card-body " style="padding-top:0px;">

                                        <div id="calendar"></div>

                                    </div>

                                </div>

                            </div>

                          </div>

                      </div>

                    </div>

                  </div>

                </div>

              </section>

            </div>

        </div>

    </div>

    <!-- END: Content-->

    {{View::make('layout.footer')}}



    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>

     <script type="text/javascript">

     

     $("#name").prop('disabled', true);

     $("#employee").prop('disabled', true);

     

         $("#time_for").change(function(){

            calculatedays();

        }); 

        hourslot();

        perhours();

        

        function perhours(){

            var k;

            var html='';  

            for(k=1;k<=8;k++){

             html+='<option value="'+k+':00">'+k+'</option>';  

             

            }

            $("#time_for").html(html); 

        }  

    

        function hourslot(type=''){

             var html=''; 

             if(type=='AM'){ 

             html+=amslot();

             }else if(type=='PM'){

             html+=pmslot();

             }else{

             html+=amslot(); 

             html+=pmslot();  

             }

             $("#time_from").html(html); 

        }    

        function pmslot(){

            var k;

            var html='';  

            for(k=1;k<=12;k++){

                if(k==12){

                    var pm = 'AM';

                }else{

                    var pm = 'PM';

                }

             html+='<option value="'+k+' '+pm+'">'+k+':00 '+pm+'</option>';

             html+='<option value="'+k+':30 '+pm+'">'+k+':30 '+pm+'</option>';

            }

            return html;

        } 

        function amslot(){

            var k;

            var html='';  

            for(k=1;k<=12;k++){

                if(k==12){

                    var am = 'PM';

                }else{

                    var am = 'AM';

                }

             html+='<option value="'+k+' '+am+'">'+k+':00 '+am+'</option>';

             html+='<option value="'+k+':30 '+am+'">'+k+':30 '+am+'</option>';

            }

            return html; 

        } 

        function openHours(evt, cityName) {

            if(cityName!='Allday'){

               $("#timeSlot").show();

            }else{

                $("#timeSlot").hide();

            }    

            perhours();

            evt.preventDefault();

            var i, tabcontent, tablinks;

            tabcontent = document.getElementsByClassName("tabcontent");

            for (i = 0; i < tabcontent.length; i++) {

                tabcontent[i].style.display = "none";

            }

            tablinks = document.getElementsByClassName("tablinks");

            for (i = 0; i < tablinks.length; i++) {

                tablinks[i].className = tablinks[i].className.replace(" active", "");

            }

            document.getElementById(cityName).style.display = "block";

            evt.currentTarget.className += " active";

        }

        function hourlySlot(){

           $('#end_date').hide();

           $('#half_day_type').hide();  

           $('#timeSlot').show();

           $('#openHours').show();

           $('.TotalLeaveDays').hide();

           $('.TotalLeaveHours').show(); 

           calculatedays();

        }

        

    </script>

    <script>

    

        function showenddate() {

            document.getElementById('end_date').style.display='block';

            document.getElementById('half_day_type').style.display='none';

            // $('#start-dates').val('');

            // $('#end-dates').val('');

            $('#no_of_day').val('');

            $('#end_date').show(); 

            $('#timeSlot').hide();

            $('#openHours').hide();

            $('.TotalLeaveDays').show();

            $('.TotalLeaveHours').hide(); 

            $('#no_of_hours').val('');

            calculatedays();

        }

    

        function hideenddate() {

            document.getElementById('end_date').style.display='none';

            document.getElementById('half_day_type').style.display='block';        

             $('#no_of_day').val('');

             $('#timeSlot').hide();

             $('#openHours').hide();

             $('#no_of_hours').val('');

             $('.TotalLeaveDays').show();

             $('.TotalLeaveHours').hide(); 

            calculatedays();

        }

    

       

        

        

      $("#start-date1").change( function() {

            calculatedays();

            $('#end-date1').flatpickr({

                minDate: $("#start-date1").val(),

                altInput: true,

                altFormat: "d-m-Y",

                dateFormat: "Y-m-d",

            });

        });



    var currentMonth = (new Date).getMonth();







    var today = new Date();



    var dd = today.getDate();



    var mm = today.getMonth()+1;



    var yyyy = today.getFullYear();



    var pastemp = 0;



    var pastleavepermission = '';



    var max_noof_pastleave = 0;



    var nextStepAllowed = 1;

    var currentYear = (new Date).getFullYear();

    var rlpendingVal = '';

    var calender ;

    if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = dd+'-'+mm+'-'+yyyy;

    max_no_of_pastleave();

    function max_no_of_pastleave(){

        $.ajax({

                url:'{{route('getmaxpastleave')}}',

                type:'get',

                success:function(data){

                    max_noof_pastleave = data.max_past_leave;

                    getEmp();

                },

                error:function(w){

                }

        });	

    }

    function getEmp(){

        $.ajax({

                url:'{{route('getAllUsersForHR')}}',

                type:'get',

                success:function(resObj){

                    var html = "";

                    html += '<option value="">Click to choose one</option>;';

                    for(var i = 0; i < resObj.length; i++){

                        html += '<option value="'+resObj[i].username+'">'+resObj[i].name+'</option>';

                    }

                    $("#employee").html(html);

                    nextStepAllowed = 1;

                    getreplacemntlv();

                },

                error:function(w){

                }

        });

    }



    function getreplacemntlv(){

        $.ajax({

                url:'{{route('getYearlyrlEntitleList')}}',

                type:'get',

                data:{

                    year: currentYear,

                    start:0,

                    username: $("#employee").val(),

                },

                success:function(resObj){

                    // console.log(resObj);

                    rlpendingVal = resObj.leave_count;

                    $("#rlpending").val(resObj[0].balance);

                    

                    getPermission();

                    $("#name").prop('disabled', false);

                    $("#employee").prop('disabled', false);

                },

                error:function(w){

                }

        });	

    }





    function getPermission(){

       

        $.ajax({

            type:'get',

            url:'{{ route('getPermissionGroupOfEmployee')}}',

            success:function(data) {

                var resObj=data[0];

                if(resObj.approval == 3 || resObj.approval == 5){

                    pastemp = 1;

                }

                pastleavepermission= resObj.approval;

                

                var _approve_html = '<div class="form-check form-check-inline"><input type="radio" id="inlineRadio1" name="status" value="1" class="form-check-input approve"  checked />   <label class="form-check-label" for="inlineRadio1">Approve</label></div> '; 

                var _recommend_html = '<div class="form-check form-check-inline"><input class="form-check-input recommended"  type="radio" id="inlineRadio2" name="status" value="3"  /><label class="form-check-label" for="inlineRadio2">Recommend</label></div> ';

                if(resObj.approval == 2){

                    $("#approval_setting_html").html(_recommend_html);

                    $(".recommended").prop('checked', true);

                }else{

                    $("#approval_setting_html").html(_approve_html+_recommend_html);

                    $(".approve").prop('checked', true);



                }

            }

        });

    }



    function getblockdays(username){



        var url = "controller/blockdays.php";



        $.post( url, {



                action: "getBlockAllDayslistByUserId",

                username:username,



            },

            function(data){



                var resObj = jQuery.parseJSON(data);

                for(var i = 0; i < resObj.length; i++){

                    /* holidayarray[holidayarray.length]['title']=""; 

                    holidayarray[holidayarray.length]['start']=resObj[i].date; 

                    holidayarray[holidayarray.length]['end']=resObj[i].date; 

                    holidayarray[holidayarray.length]['color']="#FF8CD8"; 

                    holidayarray[holidayarray.length]['textColor']="#FF8CD8";  */

                    holidayarray[holidayarray.length] = new Holiday12(" ", resObj[i].date, resObj[i].date, '#FF8CD8', '#FF8CD8');

                }

                

            }	



        );	



        }

        

        

         

      $(document).ready(function() {

           
        console.log(null);
        console.log('test-test');

          $("#leave_type").change();

            calender = $('#calendar').fullCalendar({

                height: 780,

                initialView: 'dayGridMonth',

                initialView: 'listMonth',

                dragScroll: true,

                left:   'title',

            dayMaxEvents: 1,

            

            eventResizableFromStart: true,

            customButtons: {

            sidebarToggle: {

                text: 'Sidebar'

            }

            },

            header: {

            left: 'prev,next, title',

            right: 'month,agendaWeek,agendaDay,listMonth'

        },

            initialDate: new Date(),

            navLinks: true,

            eventClassNames: function ({ event: calendarEvent }) {

     

    },

    dateClick: function (info) {

      var date = moment(info.date).format('YYYY-MM-DD');

      resetValues();

      sidebar.modal('show');

      addEventBtn.removeClass('d-none');

      updateEventBtn.addClass('d-none');

      btnDeleteEvent.addClass('d-none');

      startDate.val(date);

      endDate.val(date);

    },

    eventClick: function (info) {

      eventClick(info);

    },

    datesSet: function () {

      modifyToggler();

    },

    viewDidMount: function () {

      modifyToggler();

    },

  

                eventLimit: false,

               

                events: null,

           

                eventRender: function (event, element) {

                    element.css("background", event.color);

                    element.css("color", event.text_color);

                    element.css("font-size", '12PX');



                },

            });

      

        });

    var processTimeout='';

    $(document).on('keyup blur', '#name', function(){

        clearInterval(processTimeout);

        processTimeout = setTimeout(() => {

            ajaxsearch();

        }, 500);

        //ajaxsearch();

        var name = $('#name').val();

           

             $.ajax({

                    url: "getAllUsersForHR",

                    method: "get",

                    data: { filtername: name },

                    success: function (data) {

                        if(data){

                            $("#employee").empty();

                            $.each(data,function(key,value){

                                $("#employee").append('<option value="'+value.username+'">'+value.name+'</option>');

                            });

                            getreplacemntlv();

                            leaveType();

                            $("#leave_type").prop('disabled', false);

           

                        }else{

                            $("#employee").empty();

                            $("#leave_type").prop('disabled', true);

                        }

                    }

                    



                });

           

    });



//   function leaveType(){

//         var username = $('#employee').val();

//         $.ajax({

//             type:'GET',

//             url: '{{route('leaveType')}}',

//             data: { username: username },

//             success:function (data){

//                 // console.log(data);

//                 if(data){

//                 $("#leave_type").empty();

//                 $.each(data,function(key,value){

//                     $("#leave_type").append('<option value="'+value.type+':'+value.upload+':'+value.compulsory+'">'+value.name+'</option>');

//                 });

//                 }

//             }

//         });

//     }





    var previousData = @json($leaveTypes);



    function leaveType() {

        var username = $('#employee').val();

        $.ajax({

            type: 'GET',

            url: '{{ route('leaveType') }}',

            data: {

                username: username

            },

            success: function(data) {

                // compares old and new options and does not replace the options again and again due to multiple requests

                if (JSON.stringify(data) !== JSON.stringify(previousData)) {



                    // Find added items

                    let addedItems = data.filter(item => !previousData.some(prevItem => prevItem.type ===

                        item.type));



                    // Find removed items

                    let removedItems = previousData.filter(prevItem => !data.some(item => item.type ===

                        prevItem.type));



                    previousData = data;



                    // Remove options for removed items 



                    //lt_{{ $type->id }}

                    removedItems.forEach(function(removedItem) {

                        console.log($("#leave_type option[id='lt_" + removedItem.id + "']"));

                        $("#leave_type option[id='lt_" + removedItem.id + "']").remove();

                    });



                    // Add options for added items

                    addedItems.forEach(function(addedItem) {

                        $("#leave_type").append('<option id="lt_' + addedItem.id + '" value="' +

                            addedItem.type + ':' + addedItem.upload + ':' + addedItem

                            .compulsory + '">' + addedItem.name + '</option>');

                    });



                    // Enable the #leave_type select element

                    $("#leave_type").prop('disabled', false);

                }

            }

        });

    }



    function ajaxsearch(){

        $("#overlay").show();

        $.ajax({

            type:'POST',

            url:'{{ route('calender.filter12')}}',

            data:$("#all-filter").serialize(),

            success:function(data) {

                  $('#calendar').fullCalendar('removeEvents');

                  $('#calendar').fullCalendar('addEventSource',data);

            

                data.map(function(item) {

                    $('#calendar').fullCalendar('addEventSource',item);

	

                });

                leaveType();

           

            }

        });

    }



    

 function ajaxsearch11(){

        $("#overlay").show();

        var employee11 = $('#employee').val();

        $.ajax({

            type:'POST',

            url:'{{ route('calender.filter12')}}',

            data:$("#all-filter11").serialize(),

            success:function(data) {

                document.getElementById("name").value = employee11;

                  $('#calendar').fullCalendar('removeEvents');

                  $('#calendar').fullCalendar('addEventSource',data);

            

                data.map(function(item) {

                    $('#calendar').fullCalendar('addEventSource',item);

	

                });

                leaveType();

                $("#leave_type").prop('disabled', false)

            }

        });

    }





  

$('body').on('click', 'button.fc-prev-button', function() {

    var moment = $('#calendar').fullCalendar('getDate');

   // alert(moment._d.getFullYear());

    $("#year").val(moment._d.getFullYear());

    ajaxsearch11();

   

});

$('body').on('click', 'button.fc-next-button', function() {

    var moment = $('#calendar').fullCalendar('getDate');

   // alert(moment._d.getFullYear());

    $("#year").val(moment._d.getFullYear());

    ajaxsearch11();

   

});

    </script>

     <script src="{{asset('app-assets/js/scripts/pages/app-calendar.js')}}"></script>

    <style>

    /* .fc .fc-toolbar .fc-prev-button .fc-icon, .fc .fc-toolbar .fc-next-button .fc-icon{

        display:none;

    } */

    /* .fc .fc-button-group{

        display:none;

    } */

    </style>

    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script type="text/javascript">

        // function showenddate() {

        //     document.getElementById('end_date1').style.display='block';

        //     document.getElementById('half_day_type').style.display='none';

        //     $('#start-date1').val('');

        //     $('#end-date1').val('');

        //     $('#no_of_day').val('');

        //     daysBetween();

        // }

        // function hideenddate() {

        //     document.getElementById('end_date1').style.display='none';

        //     document.getElementById('half_day_type').style.display='block';

        //     $('#start-date1').val('');

        //     $('#end-date1').val('');

        //     $('#no_of_day').val('');

        //     daysBetween();

        // }



        $(document).ready(function() {

            var holidays = null;

            $("#calendar tr tbody td").map(function (index, elem) {

                $.each(holidays, function(key, value) {

                     if($(elem).data('date') == value.date)

                     {

                        $(elem).find('.fc-daygrid-day-events').css('background', '#2088F2');

                        $(elem).find('.fc-daygrid-day-events').css('color', 'black');

                        $(elem).find('.fc-daygrid-day-events').css('text-align', 'center');

                        $(elem).find('.fc-daygrid-day-events').html(value.description);

                     }



                }); 

               

            });

        });



   



    function daysBetween() {



        var statDate = $('#start-date1').val();

        var endDate = $('#end-date1').val();

        const date1 = new Date(statDate);

        const date2 = new Date(endDate);



        const oneDay = 1000 * 60 * 60 * 24;





        const diffInTime = date2.getTime() - date1.getTime();

        const diffInDaysb=0;

        if(statDate == "" && endDate == "" && $("input[name='hof']:checked").val() == 0)

        {

            diffInDays = 0;

        }

        if(statDate !== "" && endDate == "" && $("input[name='hof']:checked").val() == 0)

        {

            diffInDays = 0;

        }

        if(statDate == endDate && $("input[name='hof']:checked").val() == 0)

        {

            diffInDays = 1;

        }

        if(statDate != endDate && $("input[name='hof']:checked").val() == 0)

        {

            diffInDays = Math.round(diffInTime / oneDay) + 1;

        }

        // console.log(statDate != endDate , $("input[name='hof']").val() == 0, $("input[name='hof']:checked").val());

        if($("input[name='hof']:checked").val() == 1)

        {

            diffInDays = 0.5;

        }



        $('#no_of_days').val(diffInDays);

    }

    

    

    leaveTypeChange();

    function leaveTypeChange(){

        var leave_type = $('#leave_type').val();

        var ltype = leave_type.split(":");

        var hourly_allow = $("#hourly_"+ltype[0]).val();

        if(hourly_allow==1){

            $("#inlineRadio3").prop('disabled', false)

             $("#inlineRadio1").prop('disabled', false);

            $("#inlineRadio2").prop('disabled', false);

            $("#inlineRadio2").prop("checked", true);

            showenddate();

        }else{

            showenddate();

            $("#inlineRadio1").prop('disabled', false);

            $("#inlineRadio2").prop('disabled', false);

            $("#inlineRadio3").prop('disabled', true);

            $("#inlineRadio2").prop("checked", true);  

        }

    }

        

    function leave_type_change(divId, element){

        // leaveTypeChange();

        var str =element.value;

        var myArr = str.split(":");

        document.getElementById(divId).style.display = myArr[1] == 1? 'block' : 'none';

    }

   

    // function showenddate() {

    //     document.getElementById('end_date').style.display='block';

    //     document.getElementById('half_day_type').style.display='none';

    //     $('#start-dates').val('');

    //     $('#end-dates').val('');

    //     $('#no_of_day').val('');

    //     calculatedays();

    // }



    // function hideenddate() {

    //     document.getElementById('end_date').style.display='none';

    //     document.getElementById('half_day_type').style.display='block';

    //     $('#start-dates').val('');

    //     $('#end-dates').val('');

    //     $('#no_of_day').val('');

    //     calculatedays();

    // }



    // function calculatedays(){



                

    //     var endDate = $("#end-date1").val();

    //     if($('input[name="hof"]:checked').val() == 0 && $("#leave_type").val() == "" && $("#end-date1").val() == "" && $("#start-date1").val() == "" ){

    //         return;

    //     }

    //     if($('input[name="hof"]:checked').val() == 1){

    //         endDate = $("#start-date1").val();

    //     }



    //     var sdat1 = $("#start-date1").val();

    //     var sdat=sdat1.split("-").reverse().join("-");



    //     var edat = endDate.split("-").reverse().join("-");



    //     var diff = Math.abs(today - sdat);







    //     var t3 = edat;



    //     var t2 = sdat ;



    //     var t1 = today;

    //     var one_day=1000*60*60*24; 



    //     var x=t1.split("-");     



    //     var y=t2.split("-");

    //     var z=t3.split("-");







    //     var date1=new Date(x[2],(x[1]-1),x[0]);



    //     var date2=new Date(y[2],(y[1]-1),y[0]);



    //     var date3=new Date(z[2],(z[1]-1),z[0]);



    //     var month1=x[1]-1;



    //     var month2=y[1]-1;



    //     var month3=z[1]-1;



    //     _Diff = Math.ceil((date2.getTime()-date1.getTime())/(one_day)); 



    //     _Diff1 = Math.ceil((date3.getTime()-date1.getTime())/(one_day));



    //     _Diff2 = Math.ceil((date3.getTime()-date2.getTime())/(one_day)) + 1;



    //     _Diff_before = Math.ceil((date1.getTime()-date2.getTime())/(one_day)); 

    //     var btnm = "";

    //     $.ajax({

    //         type:'get',

    //         url:'{{ route('getPermissionGroupOfEmployee')}}',

            

    //         success:function(data) {

    //             var resObj = data[0];

    //             var html;	

    //             eleave_permission = resObj.eleave;

    //             if(resObj.eleave == 2 || resObj.eleave == 4 || resObj.eleave == 3){

    //                 btnm = 1;

    //             }

                

    //             if(btnm == 1){

    //                 if(eleave_permission==2 || eleave_permission==3){

                

    //                     if(_Diff < 0){

    //                         //console.log(eleave_permission);

    //                         if(_Diff_before > max_noof_pastleave){

    //                             $("#no_of_day").val('0');

    //                             $('#apply').attr('disabled','disabled');

    //                             showError("Can't apply past days");

    //                             return;

    //                         }else{

    //                             $('#apply').removeAttr('disabled');

    //                             countappleav();

    //                         }

    //                     }else{

    //                         $('#apply').removeAttr('disabled');

    //                         countappleav();

    //                     }

    //                 }else{

    //                     $('#apply').removeAttr('disabled');

    //                     countappleav();

    //                 }

    //             }

    //             else{	



    //                 if(_Diff < 0)

    //                 {

    //                     $("#no_of_day").val('0');

    //                     $('#apply').attr('disabled','disabled');

    //                     showError("Can't apply past days");

    //                     return;

    //                 }

    //                 else{

    //                     $('#apply').removeAttr('disabled');

    //                     countappleav();

    //                 }



    //             }

    //         }

    //     });



            



    //     }

    

    function calculatedays()

    {

        var endDate = $("#end-date1").val();

        if($('input[name="hof"]:checked').val() == 0 && $("#leave_type").val() == "" && $("#end-date1").val() == "" && $("#start-date1").val() == "" ){

            return;

        }

        if($('input[name="hof"]:checked').val() == 1){

            endDate = $("#start-date1").val();

        }

        if($('input[name="hof"]:checked').val() == 2){

            var data = {

                'username':  $("#employee").val(),

                'type':  $("#leave_type").val(),

                'start_date':  $("#start-date1").val(),

                'end_date': $("#start-date1").val(),

                'time_from': $("#time_from").val(),

                'time_for': $("#time_for").val(),

                'hourly': 1,

                'no_of_hours': $("#no_of_hours").val(),

                '_token' : "{{ csrf_token() }}",

            }

        }

        else{

            var data = {

                'username':  $("#employee").val(),

                'type':  $("#leave_type").val(),

                'start_date':  $("#start-date1").val(),

                'end_date': endDate,
                'half_day_type': $('select[name="half_day_type"]').val(),

                "is_half_day": $('input[name="hof"]:checked').val(),

                '_token' : "{{ csrf_token() }}",

                'action': "getLeaveDaysCount"

            }

        }

        $.ajax({

            type: "POST",

            url: "{{ route('remainingDays11') }}",

            data: data,

            before: function (response) {

                //console.log(response);

                // console.log(response);

            },

            success: function (response) {

                 console.log(response.no_leave_days);

                //$("#no-of-days").val(response.no_leave_days);

                if($("input[name='hof']:checked").val() == 1){

                    if(response.no_leave_days!=0){

                        $totlleaveday=0.5;

                    }

                    else{

                        $totlleaveday=response.no_leave_days;

                    }

                    

                }

                if($("input[name='hof']:checked").val() == 0){

                    $totlleaveday=response.no_leave_days;

                }

                if($("input[name='hof']:checked").val() == 2){

                     $("#no_of_hours").val(response.no_leave_days);

                }else{

                    $("#no_of_day").val($totlleaveday);

                }

                $("#msg").empty();

                if(response.no_leave_days==0){

                $("#msg").append('<p style="color:red;">Applied dates no valid</p>');

                document.getElementById("apply").disabled = true;

                }

                if(response.no_leave_days>0){

                 document.getElementById("apply").disabled = false;

                   

                }

                // console.log(response);

            },

            error: function (response) {

                // console.log(response);

                // console.log(response);

            }

        });



    }



        function countappleav(){



        var rad = $('input[name=hof]:checked').val();



        if(rad == 1){



            $.ajax({

                type: "POST",

                url: "{{ route('remainingDays') }}",

                data: {

                    _token: '<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function csrf_token() in /home/ecoleave/public_html/backup/v6/resources/views/hr/apply-on-behalf.blade.php:2476
Stack trace:
#0 {main}
  thrown in <b>/home/ecoleave/public_html/backup/v6/resources/views/hr/apply-on-behalf.blade.php</b> on line <b>2476</b><br />