@canany(['hr_manager_hq', 'sickness'])

    @extends('adminlte::page')

    @section('title', config('adminlte.title') . ' | Sickness Data')

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>Sickness Data</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.index') }}">Admin</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.sickness.index') }}">Sickness</a></li>
                    <li class="breadcrumb-item active">Data</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')
    <style>
        .table {
            max-width: 100%;
            overflow-x: auto;
        }

        /* Prevent the table from overlapping the design on mobile devices */
        @media (max-width: 768px) {
            .table {
                position: relative;
                top: 0;
                left: 0;
            }
        }
    </style>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <div class="container">

                        <div class="row mb-2">
                            <div class="col-12 p-4">
                                <a href={{ route('admin.sickness.index') }} class="btn btn-secondary"><i
                                        class="fas fa-arrow-left"></i> Back</a>
                            </div>
                        </div>

                        <hr class="bg-secondary">

                        <form id="filter-form">
                            @csrf
                            <div class="row bg-secondary rounded p-2 h2">
                                Sickness Charts tools
                            </div>
                            <div class="row p-2">
                                <div class="col-sm-6">
                                    Type of data:
                                    <select class="custom-select" name="type" id="type">
                                        <option value="" selected>Select tools</option>
                                        <option value="sick_workingdays">Sick days taken by day of working day</option>
                                        <option value="sick_category">Sick data by category</option>
                                        <option value="sick_employee">Sick summary of a employee</option>
                                    </select>
                                </div>
                                <div class="col-sm-6">
                                    Type of chart: <select class="custom-select" name="chartType" id=chartType>
                                        <option value="" selected>Select Chart Type</option>
                                        <option value="bar">Bar</option>
                                        <option value="doughnut">Doughnut</option>
                                        <option value="pie">Pie</option>
                                        <option value="polarArea">Polar area</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-12">
                                    <div id="sick_workingdays" class="" style="display: none;">
                                        <div class="row bg-secondary rounded h4 p-2">
                                            <div class="col-sm-12">
                                                Sick days taken by day of working day
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-2 mt-auto mb-auto">
                                                <input type="radio" id="workstartend" name="workdate" value="startend"
                                                    checked>
                                                <label for="workstartend">Start - End</label> <br />
                                                <input type="radio" id="workyearly" name="workdate" value="year">
                                                <label for="workyearly">Annual</label>
                                            </div>
                                            <div class="col-sm-10">
                                                <div id="block_workingstartend" class="col-sm-10" style="display: block;">
                                                    <div class="row">
                                                        <div class="col-sm-6">
                                                            Start: <input type="date" id="workstart" class="form-control"
                                                                name="start">
                                                        </div>
                                                        <div class="col-sm-6">
                                                            End: <input type="date" id="workend" class="form-control"
                                                                name="end">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div id="block_workingyearly" class="col-sm-6" style="display:none;">
                                                    Year: <select class="custom-select" name="workyear" id="workyear">
                                                        @php
                                                            $currentYear = date('Y');
                                                        @endphp
                                                        @for ($year = $currentYear; $year >= 1950; $year--)
                                                            <option value="{{ $year }}"
                                                                {{ $year == $currentYear ? 'selected' : '' }}>
                                                                {{ $year }}</option>
                                                        @endfor
                                                    </select>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    <div id="sick_category" class="" style="display: none;">
                                        <div class="row bg-secondary rounded h4 p-2">
                                            <div class="col-sm-12">
                                                Sick by the category
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-2 mt-auto mb-auto">
                                                <input type="radio" id="catstartend" name="catdate" value="startend"
                                                    checked>
                                                <label for="catstartend">Start - End</label> <br />
                                                <input type="radio" id="catyearly" name="catdate" value="year">
                                                <label for="catyearly">Annual</label>
                                            </div>
                                            <div class="col-sm-10">
                                                <div id="block_catstartend" class="col-sm-10" style="display: block;">
                                                    <div class="row">
                                                        <div class="col-sm-6">
                                                            Start: <input type="date" id="catstart"
                                                                class="form-control" name="start">
                                                        </div>
                                                        <div class="col-sm-6">
                                                            End: <input type="date" id="catend"
                                                                class="form-control" name="end">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div id="block_catyearly" class="col-sm-6" style="display:none;">
                                                    Year: <select class="custom-select" name="catyear" id="catyear">
                                                        @php
                                                            $currentYear = date('Y');
                                                        @endphp
                                                        @for ($year = $currentYear; $year >= 1950; $year--)
                                                            <option value="{{ $year }}"
                                                                {{ $year == $currentYear ? 'selected' : '' }}>
                                                                {{ $year }}</option>
                                                        @endfor
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="sick_employee" class="" style="display: none;">
                                        <div class="row bg-secondary rounded h4 p-2">
                                            <div class="col-sm-12">
                                                Sick summary of a employee
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-2 mt-auto mb-auto">
                                                <input type="radio" id="empstartend" name="empdate" value="startend"
                                                    checked>
                                                <label for="empstartend">Start - End</label> <br />
                                                <input type="radio" id="empyearly" name="empdate" value="year">
                                                <label for="empyearly">Annual</label>
                                            </div>
                                            <div class="col-sm-10">
                                                <div id="block_empstartend" class="col-sm-10" style="display: block;">
                                                    <div class="row">
                                                        <div class="col-sm-4">
                                                            Start: <input type="date" id="empstart"
                                                                class="form-control" name="start">
                                                        </div>
                                                        <div class="col-sm-4">
                                                            End: <input type="date" id="empend"
                                                                class="form-control" name="end">
                                                        </div>
                                                        <div class="col-sm-4">
                                                            Employee:
                                                            <select class="custom-select" id="empid"
                                                                name="empSickId">
                                                                <option value="" selected>Please select Employee
                                                                </option>
                                                                @foreach ($users as $employee)
                                                                    <option value="{{ $employee->id }}">
                                                                        {{ $employee->name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div id="block_empyearly" class="" style="display:none;">
                                                    <div class="row">
                                                        <div class="col-sm-6">
                                                            Year: <select class="custom-select" name="empYear"
                                                                id="empyear">
                                                                @php
                                                                    $currentYear = date('Y');
                                                                @endphp
                                                                @for ($year = $currentYear; $year >= 1950; $year--)
                                                                    <option value="{{ $year }}"
                                                                        {{ $year == $currentYear ? 'selected' : '' }}>
                                                                        {{ $year }}</option>
                                                                @endfor
                                                            </select>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            Employee:
                                                            <select class="custom-select" id="empid"
                                                                name="empYearId">
                                                                <option value="" selected>Please select Employee
                                                                </option>
                                                                @foreach ($users as $employee)
                                                                    <option value="{{ $employee->id }}">
                                                                        {{ $employee->name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" id="submit_block" style="display: none;">
                                        <div class="col-sm-3 p-2 mt-3">
                                            <button type="button" class="btn btn-secondary mr-3 border-0"
                                                onClick="clearChart()">Clear
                                                Filter</button>
                                            <button type="submit" class="btn btn-info">Apply Filter</button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </form>



                        <div id="headerdisplay" class="row bg-secondary rounded p-2" style="display:none;">

                        </div>
                        <div id="chartdisplay" class="align-middle"
                            style="position: relative; width: 100%; height:600px; display: none;">
                            <canvas id="offWorkDaysChart"></canvas>
                        </div>

                        <script src="{{ asset('vendor/chart.js/Chart.min.js') }}"></script>

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

                        <script>
                            //Declare the variable outside the event handler
                            var chart;
                            var selectValue;
                            var WorkselectedValue;
                            var CatselectedValue;
                            var EmpselectedValue;

                            //Reset Filter
                            function clearChart() {
                                // Check if the chart object already exists
                                chart.destroy();
                                $('#headerdisplay').css('display', 'none');
                                $('#chartdisplay').css('display', 'none');
                            }



                            //AJAX function
                            $(document).ready(function() {

                                //Select Type of Data
                                $('#type').change(function() {
                                    selectValue = $(this).val();

                                    if (selectValue == "") {
                                        $('#sick_workingdays').css('display', 'none');
                                        $('#sick_category').css('display', 'none');
                                        $('#sick_employee').css('display', 'none');
                                        $('#submit_block').css('display', 'none');
                                    } else if (selectValue == "sick_workingdays") {
                                        $('#sick_workingdays').css('display', 'block');
                                        $('#sick_category').css('display', 'none');
                                        $('#sick_employee').css('display', 'none');
                                        $('#submit_block').css('display', 'block');
                                    } else if (selectValue == "sick_category") {
                                        $('#sick_workingdays').css('display', 'none');
                                        $('#sick_category').css('display', 'block');
                                        $('#sick_employee').css('display', 'none');
                                        $('#submit_block').css('display', 'block');
                                    } else if (selectValue == "sick_employee") {
                                        $('#sick_workingdays').css('display', 'none');
                                        $('#sick_category').css('display', 'none');
                                        $('#sick_employee').css('display', 'block');
                                        $('#submit_block').css('display', 'block');
                                    }
                                });
                                //end Type of Data

                                //Working radio select for start to end/yearly
                                $('input[type="radio"][name="workdate"]').change(function() {
                                    WorkselectedValue = $(this).val();

                                    if (WorkselectedValue === "startend") {
                                        // Show the working days div and hide the annual div
                                        $('#block_workingstartend').show();
                                        $('#block_workingyearly').hide();
                                    } else if (WorkselectedValue === "year") {
                                        // Show the annual div and hide the working days div
                                        $('#block_workingyearly').show();
                                        $('#block_workingstartend').hide();
                                    }
                                });

                                // Trigger the change event initially to set the initial state
                                $('input[type="radio"][name="workdate"]:checked').trigger('change');
                                //end working radio for start to end/yearly

                                //Category radio select for start to end/yearly
                                $('input[type="radio"][name="catdate"]').change(function() {
                                    CatselectedValue = $(this).val();

                                    if (CatselectedValue === "startend") {
                                        // Show the working days div and hide the annual div
                                        $('#block_catstartend').show();
                                        $('#block_catyearly').hide();
                                    } else if (CatselectedValue === "year") {
                                        // Show the annual div and hide the working days div
                                        $('#block_catyearly').show();
                                        $('#block_catstartend').hide();
                                    }
                                });

                                // Trigger the change event initially to set the initial state
                                $('input[type="radio"][name="catdate"]:checked').trigger('change');
                                //end Categpru radio for start to end/yearly

                                //Employee radio select for start to end/yearly
                                $('input[type="radio"][name="empdate"]').change(function() {
                                    EmpselectedValue = $(this).val();

                                    if (EmpselectedValue === "startend") {
                                        // Show the working days div and hide the annual div
                                        $('#block_empstartend').show();
                                        $('#block_empyearly').hide();
                                    } else if (EmpselectedValue === "year") {
                                        // Show the annual div and hide the working days div
                                        $('#block_empyearly').show();
                                        $('#block_empstartend').hide();
                                    }
                                });

                                // Trigger the change event initially to set the initial state
                                $('input[type="radio"][name="empdate"]:checked').trigger('change');
                                //end Categpru radio for start to end/yearly

                                //working days AJAX function
                                $('#filter-form').submit(function(e) {
                                    e.preventDefault();



                                    //gather ALL Globally!
                                    var type = $('#type').val();
                                    var selectedChartType = $('#chartType').val();
                                    //gather workings Days
                                    var workstart = $('#workstart').val();
                                    var workend = $('#workend').val();
                                    var workyear = $('#workyear').val();
                                    var workdate = WorkselectedValue;
                                    //gather category
                                    var catstart = $('#catstart').val();
                                    var catend = $('#catend').val();
                                    var catyear = $('#catyear').val();
                                    var catdate = CatselectedValue;

                                    //gather employee
                                    var empid = $('#empid').val();
                                    var empstart = $('#empstart').val();
                                    var empend = $('#empend').val();
                                    var empyear = $('#empyear').val();
                                    var empdate = EmpselectedValue;

                                    $.ajax({
                                        type: 'POST',
                                        url: '{{ route('admin.sickness.filterData') }}',
                                        data: {
                                            _token: "{{ csrf_token() }}",
                                            type: type,
                                            selectedChartType: selectedChartType,
                                            workstart: workstart,
                                            workend: workend,
                                            workyear: workyear,
                                            catstart: catstart,
                                            catend: catend,
                                            catyear: catyear,
                                            empid: empid,
                                            empstart: empstart,
                                            empend: empend,
                                            empyear: empyear,
                                            workdate: workdate,
                                            catdate: catdate,
                                            empdate: empdate,
                                        },
                                        success: function(data) {

                                            if (type == "sick_workingdays" && workdate == "startend") {
                                                var filteredData = data.filteredData;
                                                var daysOffWorkCount = [0, 0, 0, 0, 0];

                                                // ... Calculate daysOffWorkCount as before
                                                console.log(filteredData);
                                                console.log(type + " & " + workdate);
                                                filteredData.forEach(function(entry) {
                                                    $('#headerdisplay').css('display', 'block');
                                                    $('#chartdisplay').css('display', 'block');
                                                    var startDate = moment(workstart).format('DD/MM/YYYY');
                                                    var endDate = moment(workend).format('DD/MM/YYYY');
                                                    $('#headerdisplay').html(
                                                        "Sick days taken by day of working day for start date: " +
                                                        startDate + " end date: " + endDate);
                                                    //working days
                                                    console.log(entry.start);
                                                    var startDate = new Date(entry.start);
                                                    var endDate = entry.end ? new Date(entry.end) :
                                                        startDate;
                                                    var currentDate = startDate;

                                                    while (currentDate <= endDate) {
                                                        var dayOfWeek = currentDate.getDay();

                                                        // Check if it's a working day (Monday to Friday)
                                                        if (dayOfWeek >= 1 && dayOfWeek <= 5) {
                                                            // Increment the count for the corresponding day of the week
                                                            daysOffWorkCount[dayOfWeek - 1]++;
                                                        }

                                                        // Move to the next day
                                                        currentDate.setDate(currentDate.getDate() + 1);
                                                    }

                                                });

                                                // Check if a chart already exists and destroy it
                                                if (chart) {
                                                    chart.destroy();
                                                }

                                                // Calculate the total number of days off work
                                                var totalDaysOff = daysOffWorkCount.reduce(function(total, count) {
                                                    return total + count;
                                                }, 0);

                                                // Calculate the percentage of days off work for each day of the week
                                                var percentages = daysOffWorkCount.map(function(count) {
                                                    return ((count / totalDaysOff) * 100).toFixed(1);
                                                });

                                                var chartData = {
                                                    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday',
                                                        'Friday'
                                                    ],
                                                    datasets: [{
                                                        data: percentages,
                                                        backgroundColor: ['#264475', '#6AA1D3',
                                                            '#A6A27A', '#F4AF43', '#f49a18'
                                                        ],
                                                    }],
                                                };

                                                // Get the selected chart type from the dropdown
                                                //var selectedChartType = $('#chartType').val();

                                                // Render the chart based on the selected type
                                                var chartCanvas = document.getElementById('offWorkDaysChart');
                                                chart = new Chart(chartCanvas, {
                                                    type: selectedChartType, // Use the selected chart type
                                                    data: chartData,
                                                });

                                            } else if (type == "sick_workingdays" && workdate == "year") {
                                                var filteredData = data.filteredData;
                                                var daysOffWorkCount = [0, 0, 0, 0, 0];

                                                // ... Calculate daysOffWorkCount as before
                                                console.log(filteredData);
                                                console.log(type + " & " + workdate);
                                                filteredData.forEach(function(entry) {
                                                    $('#headerdisplay').css('display', 'block');
                                                    $('#chartdisplay').css('display', 'block');
                                                    $('#headerdisplay').html(
                                                        "Sick days taken by day of working day for year: " +
                                                        workyear);
                                                    console.log(entry.start);
                                                    var startDate = new Date(entry.start);
                                                    var endDate = entry.end ? new Date(entry.end) :
                                                        startDate;
                                                    var currentDate = startDate;


                                                    while (currentDate <= endDate) {
                                                        //do you just want to see percentages on the pie or something like 54(12%)
                                                        var dayOfWeek = currentDate.getDay();

                                                        // Check if it's a working day (Monday to Friday)
                                                        if (dayOfWeek >= 1 && dayOfWeek <= 5) {
                                                            // Increment the count for the corresponding day of the week
                                                            daysOffWorkCount[dayOfWeek - 1]++;


                                                        }

                                                        // Move to the next day
                                                        currentDate.setDate(currentDate.getDate() + 1);
                                                    }

                                                });

                                                // Check if a chart already exists and destroy it
                                                if (chart) {
                                                    chart.destroy();
                                                }

                                                // Calculate the total number of days off work
                                                var totalDaysOff = daysOffWorkCount.reduce(function(total, count) {
                                                    return total + count;
                                                }, 0);

                                                // Calculate the percentage of days off work for each day of the week
                                                // does this work out the percentages for the pie
                                                var percentages = daysOffWorkCount.map(function(count) {
                                                    return ((count / totalDaysOff) * 100).toFixed(1);
                                                });

                                                var chartData = {
                                                    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday',
                                                        'Friday'
                                                    ],
                                                    datasets: [{
                                                        data: percentages,
                                                        backgroundColor: ['#264475', '#6AA1D3',
                                                            '#A6A27A', '#F4AF43', '#f49a18'
                                                        ],
                                                    }],
                                                };

                                                // Render the chart based on the selected type
                                                var chartCanvas = document.getElementById('offWorkDaysChart');
                                                chart = new Chart(chartCanvas, {
                                                    type: selectedChartType, // Use the selected chart type
                                                    data: chartData,
                                                });
                                            }
                                        }
                                    });
                                });
                                //end working days function

                                //end Document.Read
                            });
                        </script>

                    </div>

                </div>
            </div>
        </div>
    </div>
@stop

@section('footer')
    &nbsp;
@stop

@endcan