@include('components/uheader')
@include('components/usidebar')
<!--  Begin CONTENT AREA  -->
<style>

#chartdiv {
  width: 100%;
  height: 500px;
}
.ui-datepicker-week-end {
  background: #ddd !important;
  pointer-events: none !important;
}
.ui-datepicker-week-end  a{
  background: #ddd !important;
  pointer-events: none !important;
}
</style>
<div id="content" class="main-content">
    <div class="topbar_content mt-3">
        <h2>Employee Leaves</h2>
        <div class="viewAll mr-4">
            <a href="/employee_dashboard" class="viewAllBtn">
                <button class="btn btn-danger mr-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left">
                <line x1="19" y1="12" x2="5" y2="12"></line>
                <polyline points="12 19 5 12 12 5"></polyline>
                </svg> Back</button>
            </a>
        </div>
    </div>
    <div class="layout-px-spacing ">
        <div class="layout-top-spacing">
            <div class="modal-footer"></div>
            <div class="card mb-3">
                <div class="card-body">
                    <div class="box-widget widget-user">
                        <div class="widget-user-image d-sm-flex">
                            <span class="avatar">
                                @if($employee_data->profile_picture == '')
                                    <img width="100px" accept="image/*"  style = "border: 8px solid #ADD8E6;" height="100px" src='{{asset("design/img/profiles/default.svg")}}' class="image">
                                @else
                                    <img width="100px" accept="image/*" style = "border: 8px solid #ADD8E6;" height="100px" src='{{asset("root/documents/$employee_data->id/profile/$employee_data->profile_picture")}}' class="image">
                                @endif
                            </span>
                            <span class="avatar pl-4 pt-2">
                                <div class="p-1">
                                    <h6><b>Name :</b> {{$employee_data->first_name}} {{$employee_data->middle_name}} {{$employee_data->last_name}}</h6>
                                </div>
                                <div class="p-1">
                                    <h6><b>Email : </b>{{$employee_data->official_email}}</h6>
                                </div>
                                <div class="p-1">
                                    <h6><b>Phone No. : </b>{{$employee_data->phone_number}}</h6>
                                </div>
                            </h6>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row layout-top-spacing">
            <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 mb-4 applyLeaves-col">
                <div class="card">
                    <div class="card-header  border-0">
                        <h6 class="card-title">Apply Leaves</h6>
                    </div>
                    <form class="applyLeaveForm" method="post" action="/apply_leave" enctype="multipart/form-data">
                        {{csrf_field()}}
                        <div class="card-body">
                            <div class="row">
                                <input type="hidden" name="e_id" value="{{$employee_data->id}}">
                                <input type="hidden" name="emp_name"
                                    value="{{$employee_data->first_name}} {{$employee_data->last_name}}">
                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                    <div class="form-group">
                                        <label for="leaveDates">Employee Email</label>
                                        <input type="text" class="form-control" name="emp_email" value=" {{$employee_data->official_email}}" readonly>
                                    </div>
                                </div>
                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                    <div class="form-group">
                                        <label for="leaveDates">Phone Number</label>
                                        <input type="text" class="form-control" name="phone_no" value=" {{$employee_data->phone_number}}" readonly>
                                    </div>
                                </div>
                                <span class="text-danger">
                                    @if($errors->has('phone_no'))
                                        @foreach($errors->get('phone_no') as $error)
                                            {{$error}}
                                        @endforeach
                                    @endif
                                </span>
                                <input type="hidden" name="leave_types" id="leave_txt">
                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                    <div class="form-group">
                                        <label for="leavetypes">Leave Types</label>
                                        <select class="form-control custom-select" name="leave_type" id="leaveTypes">
                                            @if(count($leave_balance) > 0)
                                                <option label="Select Leave Type"></option>
                                                @foreach($leave_balance as $leave_list)
                                                    @if(old('leave_type') == $leave_list->leave_type)
                                                        @if($leave_list->leave_type == 'OverTime Leave' && $leave_list->leave_balance == 0)
                                                            @continue
                                                        @else
                                                            <option selected value="{{ucwords($leave_list->leave_type)}}"> {{$leave_list->leave_type}}</option>
                                                        @endif
                                                    @else
                                                        @if($leave_list->leave_type == 'OverTime Leave' && $leave_list->leave_balance == 0)
                                                            @continue
                                                        @else
                                                            <option value="{{ucwords($leave_list->leave_type)}}">{{$leave_list->leave_type}} </option>
                                                        @endif
                                                        
                                                    @endif
                                                @endforeach
                                            @else
                                                <option selected disabled>No any leave allocate</option>
                                            @endif
                                        </select>
                                    </div>
                                    <span class="text-danger">
                                        @if($errors->has('leave_type'))
                                        @foreach($errors->get('leave_type') as $error)
                                        {{$error}}
                                        @endforeach
                                        @endif
                                    </span>
                                </div>

                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                    <div class="form-group">
                                        <label for="leavetypes">Session Types</label>
                                        <select class="form-control custom-select" onchange="getDays()" name="session"
                                            id="session">
                                            @if(old('session') == 'Full Day')
                                                <option value="{{old('session')}}">{{old('session')}}</option>
                                                <option value="First Half">First Half</option>
                                                <option value="Second Half">Second Half</option>
                                            @elseif(old('session') == 'First Half')
                                                <option value="{{old('session')}}">{{old('session')}}</option>
                                                <option value="Full Day">Full Day</option>
                                                <option value="Second Half">Second Half</option>
                                            @elseif(old('session') == 'Second Half')
                                                <option value="{{old('session')}}">{{old('session')}}</option>
                                                <option value="Full Day">Full Day</option>
                                                <option value="First Half">First Half</option>
                                            @else
                                                <option selected label="Select Session Type"></option>
                                                <option value="Full Day">Full Day</option>
                                                <option value="First Half">First Half</option>
                                                <option value="Second Half">Second Half</option>
                                            @endif

                                        </select>
                                    </div>
                                    <span class="text-danger">
                                        @if($errors->has('session'))
                                        @foreach($errors->get('session') as $error)
                                        {{$error}}
                                        @endforeach
                                        @endif
                                    </span>
                                </div>
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                    <div class="form-group weekends-disabled">
                                        <label for="startDate">Start Date</label>
                                        <div class="date-field-with-icon">
                                            <input type="text" placeholder="Start Date" class="form-control datepicker" name="start_date" id="startDate" onchange="getDays()" onkeypress="return false;" value="{{old('start_date')}}" autocomplete="off">
                                            <div class="date-icon">
                                                <img src="https://dev.hrms.developstaging.com/design/img/date-icon.svg" alt="date" />
                                            </div>
                                        </div>
                                        <span class="text-danger">
                                            @if($errors->has('start_date'))
                                            @foreach($errors->get('start_date') as $error)
                                            {{$error}}
                                            @endforeach
                                            @endif
                                        </span>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                    <div class="form-group  weekends-disabled">
                                        <label for="endDate">End Date</label>
                                        <div class="date-field-with-icon">
                                            <input type="text" placeholder="End Date" class="form-control datepicker"
                                                onchange="getDays()" name="end_date" onkeypress="return false;" id="endDate" value="{{old('end_date')}}" autocomplete="off">
                                            <div class="date-icon">
                                                <img src="https://dev.hrms.developstaging.com/design/img/date-icon.svg" alt="date" />
                                            </div>
                                        </div>
                                        <span class="text-danger">
                                            @if($errors->has('end_date'))
                                            @foreach($errors->get('end_date') as $error)
                                            {{$error}}
                                            @endforeach
                                            @endif
                                        </span>
                                    </div>
                                </div>
                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12" id="document" style="display:none;">
                                    <div class="form-group">
                                        <label for="endDate">Upload Document</label>
                                        <input type="file" accept="image/*,pdf/*" class="form-control" name="document">
                                    </div>
                                    <span class="text-danger">
                                        @if($errors->has('document'))
                                        @foreach($errors->get('document') as $error)
                                        {{$error}}
                                        @endforeach
                                        @endif
                                    </span>
                                </div>
                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                    <div class="form-group">
                                        <label for="reasons">Reason:</label>
                                        <textarea name="reason" class="form-control" rows="4" maxlength="300" id="reasons"
                                            style="resize: none;"
                                            placeholder="Enter Leave Reason">{{old('reason')}}</textarea>
                                    </div>
                                    <span class="text-danger">
                                        @if($errors->has('reason'))
                                        @foreach($errors->get('reason') as $error)
                                        {{$error}}
                                        @endforeach
                                        @endif
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="daysBtnGrp">
                                <div class="selectDays">
                                    <label class="mb-0 font-weight-semibold text-dark">Selected Days:</label>
                                    <label class="badge badge-danger badge-pill ms-2" id="days">@if(old('days'))
                                        {{old('days')}} @else 0 @endif </label>
                                    <input type="hidden" id="set_day" name="days" value="{{old('days')}}">
                                </div>
                                <div class="btnGroup col-xl-12 col-lg-8 col-md-6 pr-0 row justify-content-between">
                                    <div class="col-6 pr-0">
                                        <a href="/employee_dashboard" class="btn btn-outline-primary col-12">Close</a>
                                    </div>
                                    <div class="col-6 pr-0">
                                        <button class="btn btn-primary col-12" type="submit" name="leave_apply">Submit</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 mb-4 calendar-col">
                <div class="card">
                    <div class="card-header  border-0">
                        <h4 class="card-title">CALENDER</h4>
                    </div>
                    <div class="card-body">
                        <div id='calendar'></div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 mb-4 leavesOverviewChart-col">
                <div class="card">
                    <div class="card-header  border-0">
                        <h4 class="card-title">Leaves Overview</h4>
                    </div>
                    <div class="card-body">
                    <div class="widget-chart">
                            <div id="chartdiv"></div>                               
                    </div>
                        <!-- <div class="widget-chart">
                            <div class="pieBox">
                                <div id="leave_performance" class="mx-auto pt-5"></div>

                            </div>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
   
    @if(session('done'))
    <script type="text/javascript">
    swal.fire({
        title: "{{ session('done') }}",
        type: 'success',
        padding: '2em'
    })
    </script>
    @elseif(session('edit'))
    <script type="text/javascript">
    swal.fire({
        title: 'Profile Edited Successfully!',
        type: 'success',
        padding: '2em'
    })
    </script>
    @elseif(session('error'))
    <script type="text/javascript">
    swal.fire({
        title: "{{ session('error') }}",
        type: 'error',
        padding: '2em'
    })
    </script>
    @endif
    @include('components/ufooter')
    
<!-- Chart code -->
<script>
    @php
        $data = []; 
        $leave_name = [];
        $leave_day = [];
        foreach($leave_balance as $lb){
            foreach($leave_data as $l){
                if($lb->leave_type == $l->leave_name){
                    array_push($data, $lb->leave_balance);
                    array_push($leave_name, ucwords($lb->leave_type));
                    array_push($leave_day, $l->leave_days);
                }
            }
        }
        $datas = implode(',',$data);
        $leave_names = implode(',',$leave_name);
        $leave_days = implode(',',$leave_day);


        $holidays_dates = [];
        foreach($holiday as $h){
            $holidays_dates[date('m/d/Y',strtotime($h->date))] = $h->holiday_name;
        }@endphp

        var holly = [];

        @php
        foreach($holiday as $h){@endphp
        holly.push('@php echo $h->date @endphp');
       
        @php } @endphp
      
    var holidays_dates = @php echo json_encode($holidays_dates); @endphp;

    var value = "@php print_r($datas); @endphp";
    var leave_name = "@php print_r($leave_names); @endphp";
    var leave_days = "@php print_r($leave_days); @endphp";

    var array = value.split(',');
    var name_array = leave_name.split(',');
    var leave_day = leave_days.split(',');
    am5.ready(function() {

        var root = am5.Root.new("chartdiv");
        root._logo.dispose();
        root.setThemes([
          am5themes_Animated.new(root)
        ]);
        var chart = root.container.children.push(am5percent.PieChart.new(root, {
          layout: root.verticalLayout,
          innerRadius: am5.percent(50)
        }));

        var series = chart.series.push(am5percent.PieSeries.new(root, {
          valueField: "value",
          categoryField: "category",
          legendLabelText : "{category}",
          legendValueText : "{value}",
          alignLabels: false
        }));

        series.slices.template.set('tooltipText', '{category}: {leave} / {value}');
        series.labels.template.set('text', '{category}: {leave} / {value}');
        
        series.labels.template.setAll({
          textType: "circular",
          centerX: 0,
          centerY: 0
        });

        var newarray = [];
        for(var i=0; i<array.length; i++){
            var data = {'value':array[i], 'category':name_array[i], 'leave':leave_day[i]};
            newarray.push(data);
        }
        series.data.setAll(newarray);

        var legend = chart.children.push(am5.Legend.new(root, {
          marginTop: 15,
          marginBottom: 15,
        }));

        legend.data.setAll(series.dataItems);
        series.appear(1000, 100);

    }); // end am5.ready()
    var counter = 0;
    setInterval(function() {
        counter++;

        if (counter === 2) {
            $('body').find('.custome-event').each(function() {
                $(this).parent().addClass('custome-event');
            });
        }
    }, 5000);
    $(document).ready(function() {
        var calendar = $('#calendar').fullCalendar({
            events: "{{url('holiday_get')}}",
            displayEventTime: true,
            selectable: true,
            selectHelper: true
        });

        
        $(function() {
                
            disabledDates = [];

            function available(date) {
                var moth = String(date.getMonth() + 1);
                if (moth.length == 1) {
                    moth = "0" + moth;
                }

                var dat = String(date.getDate());
                if (dat.length == 1) {
                    dat = "0" + dat;
                }
                dmy = moth + "/" + dat + "/" + date.getFullYear();

                if ($.inArray(dmy, availableDates) != -1) {
                    return [true, ""];
                } else if (dmy in holidays_dates) {
                    return [false, "Highlighted", holidays_dates[dmy]];
                } else {
                    return [false, ""];
                }
            }

            //this function gets the dates from holidays_dates and makes array of disabled dates.
            function disabled() {
                for (var date in holidays_dates) {
                    disabledDates.push(date);
                }
            }

            disabled();
            $(".datepicker").datepicker({
                beforeShowDay: function(date) {
                    var day = date.getDay();
                    var formattedDate = $.datepicker.formatDate('mm/dd/yy', date),
                        checkDisable = disabledDates.indexOf(formattedDate) == -1;
                    if (checkDisable == true) {
                        return [checkDisable] ;
                    } else {
                        //add ui-datepicker-unselectable class to the disabled date.
                        return [!checkDisable, 'ui-datepicker-unselectable', holidays_dates[
                            formattedDate != 0 && formattedDate != 6, 'weekends-disabled' ]];
                    }
                },
                onChangeMonthYear: function() {
                    setTimeout(function() {
                        changeDisableDateColor();
                    });
                },
                changeMonth: true,
                changeYear: true,
                dateFormat : "dd/mm/yy",

                onSelect: function(dateText) {
                    var start_date = $('#startDate').datepicker('getDate');
                    var end_date = $('#endDate').datepicker('getDate');
                    
                    var leave_type = $("#leaveTypes").val();
                    console.log(leave_type);
                    console.log(name_array);


                    if (leave_type == 'Maternity Leave') {
                        for(var i = 0; i < name_array.length; i++){
                            if(name_array[i] == 'Maternity Leave'){
                                var number = parseInt(leave_day[i]);
                                var date = $('#startDate').datepicker('getDate');
                                date.setDate(date.getDate() + number);
                                var year = date.getFullYear();
                                var month = (date.getMonth() + 1).toString().padStart(2, "0");
                                var day = date.getDate().toString().padStart(2, "0");
                                var finaldate = year + '-' + month + '-' + day; 
                            }
                        }
                        $("#endDate").attr('readonly', true);
                        $("#endDate").val(moment(finaldate).format("DD/MM/YYYY"));
                        $("#endDate").addClass("hide_cal");
                        getDays();
                    } else if (leave_type == 'Birthday Leave') {

                        for(var i = 0; i < name_array.length; i++){
                            if(name_array[i] == 'Birthday Leave'){
                                var number = parseInt(leave_day[i]);
                                var date = $('#startDate').datepicker('getDate');
                                date.setDate(date.getDate() + number);
                                var year = date.getFullYear();
                                var month = (date.getMonth() + 1).toString().padStart(2, "0");
                                var day = date.getDate().toString().padStart(2, "0");
                                var finaldate = year + '-' + month + '-' + day;
                            }
                        }
                        $("#endDate").attr('readonly', true);
                        $("#endDate").val(moment(finaldate).format("DD/MM/YYYY"));
                        $("#endDate").addClass("hide_cal");
                        getDays();
                    } else if (leave_type == 'Paternity Leave' || leave_type == 'Marriage Leave') {
                        var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
                        var date = $('#startDate').datepicker('getDate');
                        var s_date = $("#startDate").val();
                        var new_date = new Date(s_date);

                        for(var i = 0; i < name_array.length; i++){
                            if(name_array[i] == 'Paternity Leave' || name_array[i] == 'Marriage Leave'){
                                var number = parseInt(leave_day[i]);
                            }
                        }
                        for(var i = 0; i < number; i++){
                            date.setDate(date.getDate() + 1);
                            var dayName = days[date.getDay()];

                            check_date = new Date(date);
                            var year = check_date.getFullYear();
                            var month = (check_date.getMonth() + 1).toString().padStart(2, "0");
                            var day = check_date.getDate().toString().padStart(2, "0");
                            var check_date = year + '-' + month + '-' + day;
                            
                            //check selected dates includes holiday
                            if(holly.includes(check_date)){
                                date.setDate(date.getDate() + 1);
                                
                            }

                            // check selected date includes sat or sun
                            if(dayName == "Saturday" || dayName == "Sunday"){
                                 date.setDate(date.getDate() + 1);
                            }
                        }
                        var year = date.getFullYear();
                        var month = (date.getMonth() + 1).toString().padStart(2, "0");
                        var day = date.getDate().toString().padStart(2, "0");
                        var finaldate = year + '-' + month + '-' + day;

                        $("#endDate").attr('readonly', true);
                        $("#endDate").val(moment(finaldate).format("DD/MM/YYYY"));
                        $("#endDate").addClass("hide_cal");
                        getDays();
                    } else {
                        $("#endDate").attr('readonly', false);
                        $("#endDate").removeClass("hide_cal");
                    }
                        getDays();

                }
            });
        
            $('.datepicker').click(function() {
                changeDisableDateColor();
            });

            //change the css of the disable date.
            function changeDisableDateColor() {
                var unselectableDate = $('.ui-datepicker-unselectable a');

                unselectableDate.css({
                    background: '#ADD8E6',
                    color : 'white',
                    cursor: 'context-menu',
                    border: 0
                });
            }
        });

        var session = $("#session").val();
        var leave_type = $("#leaveTypes").val();
        var day = $("#set_day").val();

        if (leave_type == "Sick Leave") {
            if (day >= 3) {
                $("#document").css('display', 'block');
            } else {
                $("#document").css('display', 'none');
            }
        } else {
            $("#document").css('display', 'none');
        }

    });
    $(function() {
        $('.leave-calendar').pignoseCalendar();
    });

    $("#leaveTypes").on('change', function() {
        $("#startDate").val('');
        $("#endDate").val('');
        $("#endDate").attr('readonly', false);
        $("#endDate").removeClass("hide_cal");
        var leave_type = $(this).val();
        if (leave_type == 'Birthday Leave') {
            $("#session option:nth-child(2)").remove();
        } else {
            var val_1 = $("#session option:nth-child(2)").val();
            if (val_1 != 'Full Day') {
                $("#session option").eq(1).before('<option value="Full Day">Full Day</option>');
            }
        }

        if (leave_type == 'Paternity Leave' || leave_type == 'Maternity Leave' || leave_type ==
            'Marriage Leave') {
            $("#session option").filter('[value="First Half"],[value = "Second Half"]').remove();
            $("#session option:nth-child(4)").remove();

        } else {
            var val_1 = $("#session option:nth-child(3)").val();
            var val_2 = $("#session option:nth-child(4)").val();
            if (leave_type != 'Birthday Leave') {
                if (val_1 != 'First Half') {
                    $("#session option").eq(1).after('<option value="First Half">Fisrt Half</option');
                }

                if (val_2 != 'Second Half') {
                    $("#session option").eq(2).after('<option value="Second Half">Second Half</option>');
                }
            }
        }
    })

    function getDays() {
        var dt1 = $('#endDate').datepicker('getDate');
        var dt2 = $('#startDate').datepicker('getDate');
        var oneDay = 24 * 60 * 60 * 1000;
        var day = 0;
        if (dt1 && dt2) {
            day = Math.round(Math.abs((dt2.getTime() - dt1.getTime()) / (oneDay)));
        }
        $('#set_day').val(day);
        var array = [];
        for (var i = 0; i <= day; i++) {
            var count = i;
            var stop_date = dt2.getDay() + i;
            array.push(stop_date);
        }
        var values = [5, 6, 7, 8];
        var values1 = [5];
        var values2 = [1];
        const multipleExist = values.every(value => {
            return array.includes(value);
        });

        const multipleExist1 = values1.every(value => {
            return array.includes(value);
        });

        const multipleExist2 = values2.every(value => {
            return array.includes(value);
        });

        if (multipleExist1 == true) {
            var leave_type = $("#leaveTypes").val();
            if (leave_type == 'Casual Leave') {
                $("#leave_txt").val('Sandwitch Leave');

            } else {
                $("#leave_txt").val(leave_type);
            }
        }

        if (multipleExist2 == true) {
            var leave_type = $("#leaveTypes").val();
            if (leave_type == 'Casual Leave') {
                $("#leave_txt").val('Sandwitch Leave');
            } else {
                $("#leave_txt").val(leave_type);
            }
        }

        if (multipleExist == true) {
            var leave_type = $("#leaveTypes").val();
            if (leave_type == 'Casual Leave') {
                $("#leave_txt").val('Sandwitch Leave');

            } else {
                $("#leave_txt").val(leave_type);
            }
        }
        var leave_txt = $("#leave_txt").val();

        if (day >= 0) {
            var session = $("#session").val();
            var leave_type = $("#leaveTypes").val();
          
            if (leave_type == "Sick Leave") {
               
                if (day >= 2) {

                    $("#document").css('display', 'block');
                } else {
                    $("#document").css('display', 'none');

                }
            } else {
                $("#document").css('display', 'none');

            }
            if (session == 'First Half' || session == 'Second Half') {
                if (day == 0) {
                    $("#days").text(day + 0.5);
                    $("#set_day").val(day + 1);
                } else {
                    var date = $("#startDate").datepicker('getDate');
                    for(var i = 0; i < day; i++){
                        date.setDate(date.getDate() + 1);
                        check_date = new Date(date);
                        var year = check_date.getFullYear();
                        var month = (check_date.getMonth() + 1).toString().padStart(2, "0");
                        var date_day = check_date.getDate().toString().padStart(2, "0");
                        var check_date = year + '-' + month + '-' + date_day;
                        
                        if(holly.includes(check_date)){
                            day--;
                        }
                    }
                    $("#days").text(day / 2 + 0.5);
                    $("#set_day").val(day + 1);
                }
            } else {
                var date = $("#startDate").datepicker('getDate');
                for(var i = 0; i < day; i++){
                    date.setDate(date.getDate() + 1);
                    check_date = new Date(date);
                    var year = check_date.getFullYear();
                    var month = (check_date.getMonth() + 1).toString().padStart(2, "0");
                    var date_day = check_date.getDate().toString().padStart(2, "0");
                    var check_date = year + '-' + month + '-' + date_day;
                    
                    if(holly.includes(check_date)){
                        day--;
                    }
                }

                $("#days").text(day + 1);
                $("#set_day").val(day + 1);

                if (leave_type == 'Paternity Leave' || leave_type == 'Marriage Leave'){
                    for(var i = 0; i < name_array.length; i++){
                        if(name_array[i] == "Paternity Leave" || name_array[i] == "Marriage Leave"){
                            var number = parseInt(leave_day[i]);
                            $("#days").text(number);
                            $("#set_day").val(number);
                        }
                    }
                }
                if (leave_type == 'Maternity Leave'){
                    for(var i = 0; i < name_array.length; i++){
                        if(name_array[i] == "Maternity Leave"){
                            var number = parseInt(leave_day[i]);
                            $("#days").text(number);
                            $("#set_day").val(number);
                        }
                    }
                }
            }
        } else {
            $("#days").text(0);
            $("#set_day").val(0);
        }
    }
</script>