@include('components/uheader')
@include('components/usidebar')

<!--  Begin CONTENT AREA  -->
<style>
    .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>Work From Home</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 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 class="row layout-top-spacing">
            <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 applyLeaves-col">
                <div class="card">
                    <div class="card-header  border-0">
                        <h6 class="card-title">Apply Work From Home</h6>
                    </div>
                    <form class="applyLeaveForm" enctype="multipart/form-data" method="post" action="/apply_workfromhome">
                        {{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>
                                @if($errors->has('phone_no'))
                                    @foreach($errors->get('phone_no') as $error)
                                        {{$error}}
                                    @endforeach
                                @endif
                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                    <div class="form-group">
                                        <label for="leaveDates">Select WFH Type</label>
                                        <select class="form-control custom-select" name="WFH_type" id="WFH_type">
                                            @if(isset($wfh_balance))
                                            @if(old('WFH_type') == 'Select WFH Type')
                                            <option value="Select WFH Type">Select WFH Type</option>
                                            <option value="Casual WFH">Casual WFH</option>
                                            <option value="Sick WFH">Sick WFH</option>

                                            @elseif(old('WFH_type') == 'Casual WFH')
                                            <option value="Select WFH Type">Select WFH Type</option>
                                            <option selected value="Casual WFH">Casual WFH</option>
                                            <option value="Sick WFH">Sick WFH</option>

                                            @elseif(old('WFH_type') == 'Sick WFH')
                                            <option value="Select WFH Type">Select WFH Type</option>
                                            <option value="Casual WFH">Casual WFH</option>
                                            <option selected value="Sick WFH">Sick WFH</option>
                                            @else
                                            <option value="Select WFH Type">Select WFH Type</option>
                                            <option value="Casual WFH">Casual WFH</option>
                                            <option value="Sick WFH">Sick WFH</option>
                                            @endif
                                            @else
                                            <option selected disabled>WFH balance not added</option>
                                            @endif
                                        </select>
                                        <span class="text-danger">

                                        @if($errors->has('WFH_type'))
                                            @foreach($errors->get('WFH_type') as $error)
                                            {{$error}}
                                            @endforeach
                                        @endif
                                    </span>
                                    </div>
                                </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>
                                        <span class="text-danger">

                                         @if($errors->has('session'))
                                            @foreach($errors->get('session') 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">
                                        <label for="startDate">Start Date</label>
                                        <div class="date-field-with-icon">
                                        <input type="text" onkeypress="return false;" onchange="getDays()" class="form-control datepicker" name="start_date" id="startDate" value="{{old('start_date')}}" placeholder="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">
                                        <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" id="endDate" value="{{old('end_date')}}" onkeypress="return false;" 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" id="upload_doc">
                                    </div>
                                    <span class="text-danger" id="doc_error">
                                       
                                    </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" id="reasons"
                                            style="resize: none;"
                                            placeholder="Enter Leave Reason">{{ old('reason')}}</textarea>
                                            <span class="text-danger">
                                                @if($errors->has('reason'))
                                                    @foreach($errors->get('reason') as $error)
                                                    {{$error}}
                                                    @endforeach
                                                @endif
                                            </span>
                                    </div>
                                </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 row col-xl-12 col-lg-6 col-md-6 col-12">
                                    <div class="col-6 pr-0">
                                        <a href="/employee_dashboard" class="btn btn-outline-primary col-12" type="reset">Close</a>
                                    </div>
                                    <div class="col-6 pr-0">
                                        <button class="btn btn-primary col-12" type="submit" id="wfh_submit">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 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 leavesOverviewChart-col">
                <div class="card">
                    <div class="card-header  border-0">
                        <h4 class="card-title">WFH Overview</h4>
                    </div>
                    <div class="card-body">
                        <div class="widget-chart">
                        <div id="chartdiv"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    @if(session('leave_error'))
        <script type="text/javascript">
        swal.fire({
            title: '@php echo session("leave_error")@endphp',
            type: 'warning',
            padding: '2em'
        })
        </script>
    @endif
    @if(session('error') || session('done'))
    <style>
    .approve_popup {
        width: 450px;
        background: #fff;
        box-shadow: 0 3px 10px 0 #999;
        border-radius: 6px;
        position: absolute;
        top: 15%;
        left: 10%;
        z-index: 2;
        display: block;
    }

    .approve_popup .title {
        font-size: 18px;
        border-bottom: 1px dashed #e0e6ed;
    }

    .layout-px-spacing {
        filter: blur(2px);
    }

    .hover:hover {
        cursor: pointer;
    }
    </style>
    <div class="approve_popup approve_modal" id="approve_modal">
        <form action="/apply_WFH" method="post" enctype="multipart/form-data">
            {{csrf_field()}}
            @if(session('error'))
            <center><img src="{{asset('design/img/error.png')}}" class="mt-4" height="150px" width="150px"
                    alt="error_img"> </center>
            @else
            <center><img src="{{asset('design/img/right.jpeg')}}" class="mt-4" height="150px" width="150px"
                    alt="error_img"></center>
            @endif
            <div class="p-3 text-center">
                <span class="text-black mt-3">
                    @if(session('error'))
                    {!!session('error')!!}
                   
                    <input type="hidden" value="{{Session::get('[WFH_data][emp_name]')}}" name="emp_name">
                    <input type="hidden" value="{{Session::get('[WFH_data][session]')}}" name="session">
                    <input type="hidden" value="{{Session::get('[WFH_data][days]')}}" name="days">
                    <input type="hidden" value="{{Session::get('[WFH_data][email]')}}" name="emp_email">
                    <input type="hidden" value="{{Session::get('[WFH_data][ph_no]')}}" name="phone_no">
                    <input type="hidden" value="{{Session::get('[WFH_data][reason]')}}" name="reason">
                    <input type="hidden" value="{{Session::get('[WFH_data][start_date]')}}" name="start_date">
                    <input type="hidden" value="{{Session::get('[WFH_data][end_date]')}}" name="end_date">
                    <input type="hidden" value="{{Session::get('[WFH_data][emp_id]')}}" name="e_id">
                    <input type="hidden" value="{{Session::get('[WFH_data][WFH_type]')}}" name="WFH_type">
                    <input type="hidden" value="{{Session::get('[WFH_data][document]')}}" name="document">
                    @endif
                    @if(session('done'))
                    {!!session('done')!!}
                    @endif
                </span>
            </div>
            <div class="float-right mb-3">
                <button class="btn btn-success mr-3" type="submit">Okay</button>
                <button class="btn btn-primary mr-4 hide_popup" type="button">Close</button>
            </div>
        </form>
    </div>
    @endif

    @if(session('complete'))
    <style>
    .approve_popup {
        width: 450px;
        background: #fff;
        box-shadow: 0 3px 10px 0 #999;
        border-radius: 6px;
        position: absolute;
        left: 5%;
        top: 20%;
        z-index: 2;
        display: block;

    }

    .approve_popup .title {
        font-size: 18px;
        border-bottom: 1px dashed #e0e6ed;
    }

    .sidebar-wrapper,
    .viewAll {
        filter: blur(2px);
    }

    .layout-px-spacing {
        filter: blur(2px);
    }

    .hover:hover {
        cursor: pointer;
    }

    .hover {
        font-size: 25px;
    }
    </style>
    <div class="approve_popup" id="complete_modal">
        <span class="float-right hover pr-4 pt-2" id="hidden_popup">&times;</span>
        <center>

            <img class="pt-4 pl-5" height="200px" width="200px" src="{{asset('design/img/right.jpeg')}}">

            <div class="title p-3">
                <strong class="text-black">
                    @if(session('complete'))
                    {!!session('complete')!!}
                    @endif
                </strong>
            </div>
        </center>
    </div>
    @endif
    @include('components/ufooter')

<!-- Chart code -->
    <script>
        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}: {value}');
            series.labels.template.set('text', '{category}: {value}');

            series.labels.template.setAll({
              textType: "circular",
              centerX: 0,
              centerY: 0
            });

            @php
                if(isset($wfh_balance->leave_balance)){
                    $datas =  $wfh_balance->leave_balance;
                    $leave_names =  $wfh_balance->leave_type;
                }else{
                    $datas =  0;
                    $leave_names =  'wfh';

                }
            @endphp

            var value = "@php print_r($datas); @endphp";
            var leave_name = "@php print_r($leave_names); @endphp";
            var array = value.split(',');
            var name_array = leave_name.split(',');
            var newarray = [];
            for(var i=0; i<array.length; i++){
                var data = {'value':array[i], 'category':name_array[i]};
                newarray.push(data);
            }
            console.log(newarray);
            series.data.setAll(newarray);

            series.data.setAll(newarray);

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

            legend.data.setAll(series.dataItems);

            series.appear(1000, 100);

        }); // end am5.ready()
    </script>
    <script>

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

            var holly = [];
            var holly_name = [];

            @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;
    $(".hide_popup").on('click', function() {
        $('.layout-px-spacing').css("filter", "blur(0px)");

        $('#approve_modal').hide();
    });

    $("#hidden_popup").on('click', function() {
        $('.layout-px-spacing').css("filter", "blur(0px)");
        $('.sidebar-wrapper').css("filter", "blur(0px)");
        $('.viewAll').css("filter", "blur(0px)");

        $('#complete_modal').hide();
    });

    $("#wfh_submit").on('click',function(event){
        var ttl_day = $("#set_day").val();
        if(ttl_day >= 3){
            if(("#WFH_type").val() == "Sick WFH"){
                var doc = $("#upload_doc").val();
                if(doc == ''){
                    event.preventDefault();
                    $("#doc_error").text("This field is required*");
                }
            }

        }
    })

    $(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 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]];
                    }
                },
                onChangeMonthYear: function() {
                    setTimeout(function() {
                        changeDisableDateColor();
                    });
                },
                changeMonth: true,
                changeYear: true,
                dateFormat : "dd/mm/yy",
                onSelect: function(dateText) {
                    getDays();
                    //getslots(dateText, selected_consultant);
                }
            });
        
            $('.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 = $("#WFH_type").val();
        var day = $("#set_day").val();

        if (leave_type == "Sick WFH") {
          
            if (day >= 3) {
                $("#document").css('display', 'block');
            } else {
                $("#document").css('display', 'none');
            }
        } else {
            $("#document").css('display', 'none');
        }
    });
    $(function() {
        $('.leave-calendar').pignoseCalendar();
    });

    function getDays() {
         var leave_type = $("#WFH_type").val();
                              
        var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        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)));
        
            if (day >= 0) {
                var session = $("#session").val();
                if (session == 'First Half' || session == 'Second Half') {
                    if (day == 0) {
                        $("#days").text(day + 0.5);
                        $("#set_day").val(day + 1);
                    } else {
                        for(var i = 0; i < day; i++){
                            dt2.setDate(dt2.getDate() + 1);
                            var dayName = days[dt2.getDay()];

                            check_date = new Date(dt2);
                            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;

                          
                         // check selected date includes sat or sun
                                if(dayName == "Saturday" || dayName == "Sunday"){
                                    day--;
                                }
                        }

                        $("#days").text(day / 2 + 0.5);
                        $("#set_day").val(day + 1);
                    }
                } else {
                      for(var i = 0; i < day; i++){
                            dt2.setDate(dt2.getDate() + 1);
                            var dayName = days[dt2.getDay()];

                            check_date = new Date(dt2);
                            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--;
                                   
                            }
                         // check selected date includes sat or sun
                                if(dayName == "Saturday" || dayName == "Sunday"){
                                    day--;
                                }
                        }

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

            } else {

                $("#days").text(0);
                $("#set_day").val(0);
            }

            var day = $("#set_day").val();
            if (leave_type == "Sick WFH") {
               
                if (day >= 3) {
                    $("#document").css('display', 'block');
                } else {
                    $("#document").css('display', 'none');
                }
            } else {
                $("#document").css('display', 'none');
            }
        }
       
    }
    // getDays();


    window.onload = function() {
        @php
        if(isset($wfh_balance->leave_balance)){

            $datas =  $wfh_balance->leave_balance;
        }else{
            $datas =  0;
        }
        @endphp

    }
    //PIE CHART FOR LEAVE MANAGMENT
    var options = {

        series: [@php echo $datas @endphp],

        chart: {
            height: 300,
            type: 'donut',
        },
        dataLabels: {
            enabled: false
        },

        legend: {
            position: 'bottom',
            show: true,
        },
        stroke: {
            show: true,
            width: 0
        },
        plotOptions: {
            pie: {
                donut: {
                    size: '85%',
                    background: 'transparent',
                    labels: {
                        show: true,
                        name: {
                            show: true,
                            fontSize: '29px',
                            color: '#6c6f9a',
                            offsetY: -10
                        },
                        value: {
                            show: true,
                            fontSize: '26px',
                            color: undefined,
                            offsetY: 16,
                        },
                        total: {
                            show: false,
                            showAlways: false,
                            label: 'Final Score',
                            fontSize: '22px',
                            fontWeight: 600,
                            color: '#373d3f',
                            // formatter: function (w) {
                            //   return w.globals.seriesTotals.reduce((a, b) => {
                            //  return a + b
                            //   }, 0)
                            // }
                        }

                    }
                }
            }
        },
        responsive: [{
            breakpoint: 480,
            options: {
                legend: {
                    show: false,
                }
            }
        }],
        labels: ['WFH Balance'],
        colors: ['#3366ff', '#f7284a', '#fe7f00', '#01c353'],
    };

    var chart = new ApexCharts(document.querySelector("#wfh_performance"), options);
    chart.render();

    var counter = 0;
    setInterval(function() {
        counter++;

        if (counter === 2) {
            $('body').find('.custome-event').each(function() {
                $(this).parent().addClass('custome-event');
            });
        }
    }, 5000);
    </script>