@extends('layouts.main')
@section('page_css')
<style>

#schedule-table .dataTables_scrollFoot .dataTables_scrollFootInner .dataTable tfoot tr td {
    height: 200px;
    display: inline-block;
    overflow-y: auto;
}
#body-shift ul {
    max-height: 200px;
    overflow-y: auto;
}
#body-shift ul li {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 32%;
    font-size: 14px !important;
}
#body-shift ul li label {
    display: inline-block;
}

#schedule-table .dataTables_scrollFoot .dataTables_scrollFootInner .dataTable tfoot {
    margin-top: 30px;
    display: block;
}

/* custom scroll starts */

#schedule-table .dataTables_scrollFoot .dataTables_scrollFootInner .dataTable tfoot tr td::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#schedule-table .dataTables_scrollFoot .dataTables_scrollFootInner .dataTable tfoot tr td::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#schedule-table .dataTables_scrollFoot .dataTables_scrollFootInner .dataTable tfoot tr td::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

#schedule-table .dataTables_scrollFoot .dataTables_scrollFootInner .dataTable tfoot tr td::-webkit-scrollbar-thumb:hover
{
	background-color: rgba(85, 85, 85, 0.9);
}

/* custom scroll end */

.dataTables_wrapper .dataTable th, .dataTables_wrapper .dataTable td{
    padding:9px;
}
li.list-inline-item {
    width: 24%;
    vertical-align: top;
}
i.fa-circle {
    filter: drop-shadow(0px 0px 3px #aaa);
}
.same-line {
    display: inline-flex;
}
.same-line__edit{
    display: grid;
}
div.dataTables_wrapper div.dataTables_filter select{
    margin-left: 0.5em;
    display: inline-block;
    width: auto;
}
#datatable_wrapper > .row > .col-sm-12.col-md-6:first-child {
    display: none;
}
#datatable_wrapper > .row > .col-sm-12.col-md-6:last-child {
    max-width: 100%;
    flex: 0 0 100%;
}
div.dataTables_wrapper div.dataTables_filter {
    text-align: center;
    display: flex;
    flex-direction: row-reverse;
}
#filter__careerpath {
    width: 200px;
}

.schedule_block tfoot tr td p {
    margin-bottom: 0;
}

.dataTables_wrapper .dataTable.schedule_block td {
    font-size: 12px;
}

</style>
@endsection
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="flaticon-event-calendar-symbol text-primary"></i>
            </span>
            <h3 class="card-label">Scheduling for <span class="text-warning">{{ isset($schedule->name) ? $schedule->name : ''}}</span>                
                <a class="btn btn-text-success btn-icon-success font-weight-bold mr-3 published" {{(!empty($check_schedule) && $check_schedule->active == 1) ? 'style=display:inline-block;' : 'style=display:none;' }}> <i class="fas fa-check-circle icon-lg"></i> {{$check_schedule->schedule_text}}</a>
                <a class="btn btn-text-danger btn-icon-danger font-weight-bold mr-3 not-published" {{(!empty($check_schedule) && $check_schedule->active == 0) ? 'style=display:inline-block;' : 'style=display:none;' }}> <i class="fas fa-times-circle icon-lg"></i> {{$check_schedule->schedule_text}}</a>
            </h3>
        </div>
        
        <div class="card-toolbar">            
            <!--begin::Button-->
            <a  href="javascript:;" onclick="openModalAndShow('{{ route('schedule.schedulelist.modal',[$team->id]) }}')" class="btn btn-warning font-weight-bolder btn-sm">
            <i class="flaticon-calendar-with-a-clock-time-tools"></i> Change Week</a>
            <!--end::Button-->
        </div>
        
    </div>
   
    <div class="card-body">
        <div id="schedule-table">
        @include('schedule.partials.schedule_list', array('profiles'=>$profiles,'mondayDate'=>$mondayDate,'tuesdayDate'=>$tuesdayDate,'wedDate'=>$wedDate,'thursDate'=>$thursDate,'friDate'=>$friDate,'saturdayDate'=>$saturdayDate,'sundayDate'=>$sundayDate,'schedule'=>$schedule,'team'=>$team,'shifts'=>$shifts))
        </div>
    </div>    
    
    <div class="card-body">

        <div class="card card-custom card-fit card-border">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="flaticon-time text-primary"></i>
                    </span>
                    <h3 class="card-label">Shifts Legend</h3>
                    <span class="switch switch-sm switch-icon">
                        <label>
                         <input type="checkbox" checked="checked" name="select" id="shift-career"/>
                         <span></span>
                        </label>
                    </span>
                    <a href="javascript:;" class="btn btn-light-warning font-weight-bold mr-2 shift-btn" data-team="{{ $team->id }}" data-schedule="{{ $schedule->id }}" onclick="sendShiftNotification(this)">
                        <i class="flaticon-alert"></i>Shift Notification</a>
                </div>
                
                @if ((!empty($loggedUserDetails['team_trainer_id']) && $loggedUserDetails['team_trainer_id'] > 0 && $loggedUserDetails['role'] != 0) || $loggedUserDetails['role'] == 2)
                <div class="card-toolbar shift-btn">
                    <a href="javascript:;" class="btn btn-light-info font-weight-bold mr-2" data-team="{{ $team->id }}" data-schedule="{{ $schedule->id }}" onclick="sendScheduleNotification(this)">
                        <i class="flaticon-alert"></i>New Schedule Notification</a>
                    <a href="javascript:;" class="btn btn-sm btn-primary font-weight-bold" onclick="openModalAndShow('{{ route('schedule.duplicate.modal',[$team->id]) }}')">
                    <i class="flaticon-file-2"></i>Duplicate Schedule</a>                    
                
                    <a {{((!empty($check_schedule) && $check_schedule->active == 0)) ? 'style=display:block;' : 'style=display:none;' }} href="javascript:;" class="btn btn-sm btn-primary font-weight-bold ml-2 publish-btn" data-team="{{ $team->id }}" data-schedule="{{ $schedule->id }}" onclick="activeSchedule(this)">
                        <i class="flaticon-file-2"></i>{{$check_schedule->button_text}}</a>
                    
                </div>
                @endif
            </div>
            <div class="card-body pt-2" id="body-shift">
                <ul>
                    @foreach ($shifts as $shift)
                        <li class="font-size-h6 checkbox-inline">
                            <label class="checkbox checkbox-rounded checkbox-success">
                                <input type="checkbox" name="notificaiton_shift_id" value="{{$shift->id}}" class="notificaiton-shift-id"/>
                                <span></span>
                            </label>
                            <span class="btn btn-icon btn-xs mr-2 mb-2" style="background-color: {{$shift->color}}"></span>{{ucwords($shift->name)}}  (<span class="text-success">{{$shift->start}}</span>)
                            
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>

        <div class="card card-custom card-fit card-border">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="flaticon-time text-primary"></i>
                    </span>
                    <h3 class="card-label">Career Path Legend</h3>
                    <span class="switch switch-sm switch-icon">
                        <label>
                         <input type="checkbox" name="select" id="switch-career"/>
                         <span></span>
                        </label>
                    </span>
                </div>
            </div>
            <div class="card-body pt-2" id="body-career" style="display: none;">
                <ul class="list-inline">
                    @foreach ($careerPath as $career)
                    <li class="list-inline-item mb-3">                    
                        <i class="fas fa-circle mr-2" style="color: {{$career->color}}"></i>
                        <span class="">{{$career->name}}  </span>
                    </li>
                    @endforeach
                  </ul>
            </div>
        </div>
       
    </div>
</div>
<!--end::Card-->

@endsection
@section('sub_header')
<div class="subheader py-2 subheader-transparent" id="kt_subheader">
    <div class="container d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
        <!--begin::Info-->
        <div class="d-flex align-items-center flex-wrap mr-1">
            <!--begin::Page Heading-->
            <div class="d-flex align-items-baseline flex-wrap mr-5">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold my-1 mr-5">Schedule for <span class="text-info">{{$team->team_name}}</span></h5>
                <!--end::Page Title-->
                <!--begin::Breadcrumb-->
                <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                    <li class="breadcrumb-item text-muted">
                        <a href="" class="text-muted">List</a>
                    </li>
                </ul>
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page Heading-->
            @if (!empty($loggedUserDetails['team_trainer_id']) && $loggedUserDetails['team_trainer_id'] > 0 && $loggedUserDetails['role'] != 0)
            <div class="d-flex align-items-baseline flex-wrap mr-5">
                @foreach($teams as $team)
                    <a href="{{route('schedule.lists',[$team->id])}}" class="btn btn-hover-bg-primary text-white mr-2 font-weight-bolder btn-sm" style="background-color:{{$team->color}}">{{$team->team_name}}</a>
                @endforeach
            </div>
            @endif
        </div>
        
        <div class="d-flex align-items-center">
            @if ($loggedUserDetails['guard'] == 'user')
            <!--begin::Actions-->
            <a href="javascript:;" onclick="openModalAndShow('{{ route('schedule.team.modal') }}')" class="btn btn-light-info font-weight-bolder btn-sm"><i class="flaticon-network"></i> Change Team</a>
            <!--end::Actions-->
            @endif
            
        </div>
        
    </div>
</div>
<div class="subheader py-2 subheader-transparent" id="kt_subheader">
    <div class="container d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
        <div class="d-flex align-items-center flex-wrap mr-1">
            <div class="d-flex align-items-baseline flex-wrap mr-5">
                <a href="{{request()->fullUrlWithQuery(['schedule_id' => $previousWeek])}}" class="btn btn-link-primary font-weight-bold"><i class="ki ki-arrow-back icon-sm" ></i> Previous Week</a>
            </div>            
        </div>        
        <div class="d-flex align-items-center">
            <a href="{{request()->fullUrlWithQuery(['schedule_id' => $nextWeek])}}" class="btn btn-link-primary font-weight-bold">Next Week <i class="ki ki-arrow-next icon-sm" ></i></a>
        </div>
    </div>
</div>
@endsection
@section('theam_css')
<link href="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />

@endsection
@section('page_css')
<style>
    .same-line{display: flex; align-items: center;}
    .same-line button{margin-left: 5px;}
    .dataTable td{padding: 13px 5px !important; }
    .dataTables_scrollHead, .dataTables_scrollBody {
        box-shadow: 0px 2px 7px #ccc;
    }
</style>

@endsection
@section('js_file')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
<script src="{{ $common->getTheamUrl('assets/js/pages/crud/datatables/extensions/scroller.js') }}"></script>
@endsection
@section('page_js')

    <script>
        var ajax_datatable_list = null;
        var tableName = $('#datatable');
        var buttonElement = '';        
        $(document).ready(function(){
            let careerPath = {!! json_encode($careerPath->toArray()) !!}
            initializeDatatable(); 
            filterDropdown(careerPath);

            @if(Session::has('success'))
                toastr.success("{{Session::get('success')}}");
            @endif 
            @if(Session::has('error'))
                toastr.error("{{Session::get('error')}}");
            @endif 
            $('body').tooltip({selector: '[data-toggle="tooltip"]'});
            $('[data-toggle="popover"]').popover()

            $(document).on('submit', '#schedule-select-form', function(e){
                e.preventDefault();
                var scheduleId = $('#schedule_id').val();
                if(scheduleId!=''){
                  window.location = $(this).attr('action')+'/?schedule_id='+scheduleId;
                }else{
                  $('#schedule_id').addClass('is-invalid');
                  $('#schedule_id').closest('.form-group').find('.invalid-feedback').html('Please select Team!')
                }
            });

            $('body').on('change','.save_shift', saveShiftHandler);
            
            $(document).on('submit', '#schedule-note-form', function(e){
                e.preventDefault();
                var _that=$(this);
                var button=$(this).find('[type="submit"]');
                var loadingHtml=`<i class="fa fa-spinner fa-spin" aria-hidden="true"></i> Processing`;
                var buttonHtml=$(button).html();
                $(button).prop('disabled', true).html(loadingHtml)

                $(".invalid-feedback").html('');
                $(".is-invalid").removeClass('is-invalid')
                $.ajax({
                  url : $(this).attr('action'),
                  type : 'post',
                  dataType : "json",
                  data : $(this).serialize(),
                  success: function(response) {
                    $(button).html(buttonHtml);
                    if(response.status){
                      if (response.message) {
                        toastr.success(response.message);
                        if(response.is_admin_note){
                            buttonElement.closest('td').find('i.fa-circle').remove()
                            buttonElement.closest('td').children('div.same-line').children('div.same-line__edit').append('<i class="fas fa-circle text-danger icon-xs ml-2" data-toggle="tooltip" title="'+response.admin_notes+'"></i>');                            
                        }else{
                            buttonElement.closest('td').find('i.fa-circle').remove()
                        }
                        
                      }
                                           
                    } else {
                      $(button).prop('disabled', false)
                      if (response.message) {
                        toastr.error(response.message);
                      }
                      if(response.errors){
                        Object.keys(response.errors).forEach(element_name => {
                                    var errors = response.errors[element_name];
                                    var inp=$(_that).find('[name="'+element_name+'"]')
                                    $(inp).addClass('is-invalid')
                                    $(inp).closest('.form-group').find('.invalid-feedback').html(errors[0])
                        });
                      }
                    }
              
                  },
                  error: function(response) {
                    $(button).prop('disabled', false).html(buttonHtml);
                    if (response.message) {
                      toastr.error(response.message);
                    }
                  },
                  complete: function(response) {
                      $('#southwind_modal').modal('hide');
                  }
                });
            });
            
            $('input.notificaiton-shift-id').on('change', function() {
                $('input.notificaiton-shift-id').not(this).prop('checked', false);  
            });

            $('body').on('click','.edit-timeoff', editTimeOffHandler);

            $('body').on('click','.edit-note-btn',function(){
                buttonElement =$(this);
            });

            $('#switch-career').on('change', function (event, state) {                
                if($("#switch-career").is(':checked')) {
                    $('#body-career').slideDown(300);
                } else {
                    $('#body-career').slideUp(300);
                }
            });
            $('#shift-career').on('change', function (event, state) {                
                if($("#shift-career").is(':checked')) {
                    $('#body-shift').slideDown(300);
                    $('.shift-btn').show();
                } else {
                    $('#body-shift').slideUp(300);
                    $('.shift-btn').hide();
                }
            });

            $('body').on('change','#filter__name',function(){
                let filterValue = $(this).val();
                if(filterValue==''){
                    ajax_datatable_list.order( [ 1, 'asc' ] ).draw();
                }else{
                    filterValue = filterValue.split("-");
                    ajax_datatable_list.order( [ filterValue[0], filterValue[1] ] ).draw();
                }
            });

            $('body').on('change','#filter__careerpath',function(){
                let filterValue = $(this).val();
                if(filterValue==''){
                    ajax_datatable_list.column(3).search('').draw();
                }else{
                    ajax_datatable_list.column(3).search(filterValue).draw();
                }
            });
            
        })
        function initializeDatatable() {
            if (ajax_datatable_list) {
                ajax_datatable_list.destroy();
            }

            ajax_datatable_list = tableName.DataTable({                
                'scrollX': true,
                'scrollY': '700px',
                'scrollCollapse': true,   
                'paging': false,
                'lengthChange': false,
                'searching': true,
                "aaSorting": [[1,'asc']],
                'pageLength' : datatablePageLength,
                'columns': [
                    { data: 'Names' }, /* index = 0 */
                    { data: 'LN' }, /* index = 1 */
                    { data: 'FN' }, /* index = 2 */
                    { data: 'CareerPath' }, /* index = 3 */
                    { data: 'Monday' }, /* index = 4 */
                    { data: 'Tuesday' }, /* index = 5 */
                    { data: 'Wednesday' }, /* index = 6 */
                    { data: 'Thursday' }, /* index = 7 */
                    { data: 'Friday' }, /* index = 8 */
                    { data: 'Saturday' }, /* index = 9 */
                    { data: 'Sunday' }, /* index = 10 */
                    { data: 'Total Shifts' }, /* index = 11 */
                ],
                'columnDefs': [ {
                    'targets': [4,5,6,7,8,9,10,11], /* column index */
                    'orderable': false, /* true or false */
                }]
            });
            
            return ajax_datatable_list;
        }

        //ajax_datatable_list.order( [ 1, 'dsc' ] ).draw();

        function saveShiftHandler() {
            var profileId = $(this).attr('data-pid');
            var scheduleId = $(this).attr('data-sid');
            var teamId = $(this).attr('data-tid');
            var day = $(this).attr('data-day');
            var shiftId = $(this).val();
            var $this = $(this);
            var option = $('option:selected', $this).attr('data-color');
            let pageScrollPos = $('.dataTables_scrollBody').scrollTop(); 
            let bgColor = $(this).find(':selected').attr('data-color'); 

            let totalShift = parseInt($(this).closest('tr').find('td:last').text());
            let tdIndex = $(this).closest('td').index();
            let trLastIndex = ajax_datatable_list.row('tr:last').index(); 
            
            $.ajax({
                    url: "{{route('schedule.save.shift')}}",
                    type: 'get',
                    dataType: 'json',
                    data: {profileId:profileId,scheduleId:scheduleId,teamId:teamId,day:day,shiftId:shiftId},
                    success: function (response) {
                        if(response.status){
                            toastr.success('Shift save successfuly');
                            if(response.show){
                                if(shiftId != ''){
                                    if(response.count){ totalShift += 1; }
                                    if(response.countOFF){ totalShift -= 1; }
                                    $this.closest('td').css('background-color',bgColor);
                                    $this.next('.same-line__edit').children('.edit-note-btn').show();
                                }else{
                                    if(!response.countOFF){totalShift -= 1;}
                                    $this.closest('td').css('background-color','transparent');
                                    $this.next('.same-line__edit').children('.edit-note-btn').hide();
                                    $this.next('.same-line__edit').children('.fa-circle.text-danger').hide();
                                }
                                if(totalShift > 0){
                                    $this.closest('tr').find('td:last').css('background-color','yellow');
                                }else{
                                    $this.closest('tr').find('td:last').css('background-color','transparent');
                                }
                                $this.closest('tr').find('td:last').html('<div style="text-align:center; ">'+totalShift+'</div>');
                                let color = `transparent`;
                                if(totalShift==5){
                                    color="green";
                                }else if(totalShift<5 && totalShift>=1){
                                    color="yellow";
                                }else if(totalShift>5){
                                    color="red";
                                }
                                $this.closest('tr').find('td:last').css('background-color',color);
                                //ajax_datatable_list.cell(trLastIndex,tdIndex).data(response.html);
                                //$('.dataTables_scrollFootInner tfoot td:eq('+tdIndex+')').html(response.html);
                                $('.dataTables_scrollFootInner tfoot tr#shiftTr td:eq('+tdIndex+')').html(response.html);
                                $('.dataTables_scrollFootInner tfoot tr#carrerTr td:eq('+tdIndex+')').html(response.Careerhtml);
                            }else{
                                //$this.next().hide();                                 
                                //$this.parent().parent().css('background-color','');
                            }
                            //window.location.reload(true)

                            if(response.check_schedule > 0){
                                $('.publish-btn').show();
                                $('.not-published').show();
                                $('.published').hide();
                                if(response.check_schedule_publlished > 0){
                                    $('.not-published').html('<i class="fas fa-times-circle icon-lg"></i> You have unpublished changes that need to be Published');
                                    $('.publish-btn').html('<i class="flaticon-file-2"></i> Re-Publish Schedule');
                                }
                            }else{
                                $('.publish-btn').hide();
                                $('.not-published').hide();
                                $('.published').show();
                                if(response.check_schedule_publlished > 0){
                                    $('.published').html('<i class="fas fa-times-circle icon-lg"></i> Schedule is Published');                                    
                                }
                            }
                            
                        }else{
                            toastr.error('Not Saved!, Try after some time.'); 
                        }
                    },
                    error: function (response) {
                        toastr.error("An error occurred");                                
                    },                    
                });

        
            }

        function activeSchedule(obj){
            var schedule_id = $(obj).attr('data-schedule');
            var teamId = $(obj).attr('data-team');
   

            $.ajax({
                    url: "{{route('schedule.duplicate.active')}}",
                    type: 'get',
                    dataType: 'json',
                    data: {schedule_id:schedule_id,team_id:teamId},
                    success: function (response) {
                        if(response.status){
                            toastr.success('Schedule activated successfuly');
                           
                        }else{
                            toastr.error('Not Saved!, Try after some time.'); 
                        }

                        if(response.check_schedule > 0){
                            $('.publish-btn').show();
                            $('.not-published').show();
                            $('.published').hide();                            
                        }else{
                            $('.publish-btn').hide();
                            $('.not-published').hide();
                            $('.published').show();
                            $('.published').html('<i class="fas fa-times-circle icon-lg"></i> Schedule is Published'); 
                        }
                    },
                    error: function (response) {
                        toastr.error("An error occurred");                                
                    },                    
                });
        }
        function sendScheduleNotification(obj){
            var schedule_id = $(obj).attr('data-schedule');
            var teamId = $(obj).attr('data-team');
            $.ajax({
                    url: "{{route('schedule.notification')}}",
                    type: 'get',
                    dataType: 'json',
                    data: {schedule_id:schedule_id,team_id:teamId},
                    success: function (response) {
                        if(response.status){
                            toastr.success('Notification sent successfuly');
                        }else{
                            toastr.error('Not Saved!, Try after some time.'); 
                        }
                    },
                    error: function (response) {
                        toastr.error("An error occurred");                                
                    },                    
                });
        }

        function sendShiftNotification(obj){
            let schedule_id = $(obj).attr('data-schedule');
            let teamId = $(obj).attr('data-team');
            let shiftId = $('input[name="notificaiton_shift_id"]:checked').val();;
            if(!shiftId){
                toastr.error("No Shift was selected.");  
            }else{
                $.ajax({
                    url: "{{route('schedule.notification.shift')}}",
                    type: 'post',
                    dataType: 'json',
                    data: {schedule_id:schedule_id,team_id:teamId, shift_id:shiftId},
                    success: function (response) {
                        if(response.status){
                            toastr.success('Shift Notification Sent!');
                           
                        }else{
                            toastr.error(' Try after some time.'); 
                        }
                    },
                    error: function (response) {
                        toastr.error("An error occurred");                                
                    },                    
                });
            }
        }

        function filterDropdown(careerPaths){
            let nameFilterHtml = '<label class="ml-2">Name:' +
                '<select class="form-control form-control-sm" id="filter__name">'+
                    '<option value="">Select</option>'+                    
                    '<option value="1-asc">Last Name ascending</option>'+
                    '<option value="1-desc">Last Name descending</option>'+
                    '<option value="2-asc">First Name ascending</option>'+
                    '<option value="2-desc">First Name descending</option>'+
                '</select>' + 
                '</label>';
            let careerPathFilterHtml = '<label class="mx-2">Position:' +
            '<select class="form-control form-control-sm" id="filter__careerpath">'+
                '<option value="">All</option>';
            $.each(careerPaths, function (key, careerPath) {
                careerPathFilterHtml +="<option value='"+careerPath['id']+"'>"+careerPath['name']+"</option>";
                });
            careerPathFilterHtml +=  '</select>' + 
            '</label>'  ;

            $(careerPathFilterHtml + nameFilterHtml).appendTo(".dataTables_filter");
        }

        function editTimeOffHandler(){
            var $this = $(this);
            var timeOffId = $(this).attr('data-id');
            $.ajax({
                url: "{{route('schedule.timeoff.details')}}",
                type: 'get',
                dataType: 'json',
                data: {timeOffId:timeOffId},                    
                success: function (response) {
                    if(response.status){
                        if(response.timeOff.status === 0){ 
                            Swal.fire({
                                icon: "warning",
                                title: `<p class="font-size-h5 text-warning">Time off request Pending!</p>`, 
                                html: `Time off request is pending. <br> <i>Timeoff Reason</i> : <b>${response.timeOff.req_message}</b>`,
                                confirmButtonText: `Approve`,
                                showCancelButton: true,
                                cancelButtonText: `Reject`,
                                customClass: {
                                    confirmButton: "btn btn-success",
                                    cancelButton: "btn btn-danger"
                                }
                            }).then(function(result) {
                                if (result.value) {
                                    timeOffStatusHandler($this, timeOffId, 1,`You want to Approve this Timeoff ?`,'Yes, Approve')
                                }else if (result.dismiss === "cancel") {
                                    timeOffStatusHandler($this, timeOffId, -1,`You want to Reject this Timeoff ?`,'Yes, Reject')
                                }
                            });                           

                        }else if(response.timeOff.status === 1){
                            Swal.fire({
                                icon: "success",
                                title: `<p class="font-size-h5 text-success">Time off request Approved!</p>`, 
                                html: `Time off request is approved. <br> <i>Timeoff Reason</i> : <b>${response.timeOff.req_message}</b>`,
                                confirmButtonText: `Keep this`,
                                closeOnConfirm: true,
                                showCancelButton: true,
                                cancelButtonText: `Reject Approval`,
                                customClass: {
                                    confirmButton: "btn btn-primary",
                                    cancelButton: "btn btn-danger"
                                }
                            }).then(function(result) {
                                if (result.dismiss === "cancel") {
                                    timeOffStatusHandler($this, timeOffId, -1,`You want to Reject this approval ?`,'Yes')
                                }
                            });
                        }else if(response.timeOff.status === -1){
                            Swal.fire({
                                icon: "error",
                                title: `<p class="font-size-h5 text-danger">Time off request Rejected!</p>`, 
                                html: `Time off request is rejected. <br> <i>Timeoff Reason</i> : <b>${response.timeOff.req_message}</b>`,
                                confirmButtonText: `Approved it`,
                                showCancelButton: true,
                                cancelButtonText: `Keep this`,
                                customClass: {
                                    confirmButton: "btn btn-success",
                                    cancelButton: "btn btn-primary"
                                }
                            }).then(function(result) {
                                if (result.value) {
                                    timeOffStatusHandler($this, timeOffId, 1,`You want to Approve this rejection ?`,'Yes, Approve')
                                }
                            });;
                        }
                    }else{
                        toastr.error(response.message); 
                    }
                },
                error: function (response) {
                    toastr.error("An error occurred");                                
                }               
            });
        }

        function timeOffStatusHandler($this, timeOffId, statusValue, text, confirmButtonText) {
            let url =  getWebUrl('schedule/timeoff-change-status?timeOffId='+timeOffId+'&statusValue='+statusValue)                     
            Swal.fire({
                title: "Are you sure?",
                text: text,
                icon: "question",
                showCancelButton: true,
                confirmButtonText: confirmButtonText,
                showLoaderOnConfirm: true,
                input: (statusValue == 1) ? 'select' : '',
                inputOptions: {
                    Holiday: 'Holiday',
                    PTO: 'PTO',
                    Bereavement: 'Bereavement',
                    SickPay : 'SickPay'
                },
                customClass: {
                    input: 'form-control',  
                },
                preConfirm: (value) => { 
                    url =  getWebUrl('schedule/timeoff-change-status?timeOffId='+timeOffId+'&statusValue='+statusValue+'&typeOfTimeOff='+value)  
                    return fetch(url)
                    .then(response => {                        
                        return response.json()
                    })
                    .catch(error => {
                        Swal.showValidationMessage(
                        `Request failed: ${error}`
                        )
                    })
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).then(function(result) {
                if (result.isConfirmed) {
                    if(result.value.status){
                        Swal.fire(
                            result.value.title,
                            result.value.message,
                            result.value.swal
                        )
                        if(statusValue === 1){
                            $this.removeClass('btn-danger').removeClass('btn-info').addClass('btn-success')
                            $this.parent().prev().prop('disabled', true)  
                            $this.attr('data-original-title', 'Timeoff Request Approved!')
                        }else if(statusValue === -1){
                            $this.removeClass('btn-success').removeClass('btn-info').addClass('btn-danger')
                            $this.parent().prev().prop('disabled', false)
                            $this.attr('data-original-title', 'Timeoff Request Rejected!')
                        }
                    }else{
                        toastr.error(result.value.message); 
                    }
                }               
                
            });
        }
        
    </script>
@endsection