@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Raporlar' => '/root/reports',
            'İK İşe Alım Raporları' => '/root/reports/hr/ise-alim',
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app flex gap-4">

        <div class="p-2 w-full min-w-44 max-w-44">
            <div class="flex flex-col items-center fixed left-0 top-1/2 -translate-y-1/2">
                <button data-section="reject"
                    class="bg-gray-500 w-full text-white px-6 py-4 border border-theme_black shadow text-sm">
                    Reddedilenler Grafiği
                </button>
                <button data-section="meet"
                    class="bg-theme_secondary_black w-full text-white px-6 py-4 border border-theme_black shadow text-sm">
                    Randevu Grafiği
                </button>
                <button data-section="personel"
                    class="bg-theme_secondary_black w-full text-white px-6 py-4 border border-theme_black shadow text-sm">
                    Personel Grafiği
                </button>
                <button data-section="preRegister"
                    class="bg-theme_secondary_black w-full text-white px-6 py-4 border border-theme_black shadow text-sm">
                    Ön Kayıt Grafiği
                </button>
                <button data-section="externalReg"
                    class="bg-theme_secondary_black w-full text-white px-6 py-4 border border-theme_black shadow text-sm">
                    Dış Kayıt Grafiği
                </button>
                <button data-section="posNeg"
                    class="bg-theme_secondary_black w-full text-white px-6 py-4 border border-theme_black shadow text-sm">
                    Randevu Grafiği
                </button>
                <button data-section="personelReg"
                    class="bg-theme_secondary_black w-full text-white px-6 py-4 border border-theme_black shadow text-sm">
                    Kayıt Grafiği
                </button>
                <button data-section="reports"
                    class="bg-theme_secondary_black w-full text-white px-6 py-4 border border-theme_black shadow text-sm">
                    Raporlar
                </button>
            </div>
        </div>

        <div class="w-full 3xl:mt-20">
            <div id="reports" class="hidden flex-col justify-center items-center gap-y-6 chart">
                <div class="flex flex-col gap-y-4 max-w-7xl w-full">
                    <div>
                        <p class="text-gray-50 text-lg font-medium capitalize">Operasyonculara atanan personeller (Rapor)
                        </p>
                    </div>
                    <div class="flex gap-4">
                        <button class="button-3" onclick="chooseReportDate('personels','daily')">
                            <i class="fa-solid fa-table"></i>
                            Günlük
                        </button>
                        <button class="button-3" onclick="chooseReportDate('personels','weekly')">
                            <i class="fa-solid fa-table"></i>
                            Haftalık
                        </button>
                        <button class="button-3" onclick="chooseReportDate('personels','monthly')">
                            <i class="fa-solid fa-table"></i>
                            Aylık
                        </button>
                        <button class="button-3" onclick="chooseReportDate('personels','yearly')">
                            <i class="fa-solid fa-table"></i>
                            Yıllık
                        </button>
                    </div>
                </div>

                <div class="flex flex-col gap-y-4 max-w-7xl w-full">
                    <div>
                        <p class="text-gray-50 text-lg font-medium capitalize">Zimmetlenen Eşyalar (Rapor)</p>
                    </div>
                    <div class="flex gap-4">
                        <button class="button-3" onclick="chooseReportDate('debits','daily')">
                            <i class="fa-solid fa-table"></i>
                            Günlük
                        </button>
                        <button class="button-3" onclick="chooseReportDate('debits','weekly')">
                            <i class="fa-solid fa-table"></i>
                            Haftalık
                        </button>
                        <button class="button-3" onclick="chooseReportDate('debits','monthly')">
                            <i class="fa-solid fa-table"></i>
                            Aylık
                        </button>
                        <button class="button-3" onclick="chooseReportDate('debits','yearly')">
                            <i class="fa-solid fa-table"></i>
                            Yıllık
                        </button>
                    </div>
                </div>
            </div>

            <div id="meet" class="hidden justify-center chart">
                <div class="max-w-6xl 3xl:max-w-7xl w-full">
                    <div>
                        <div class="flex justify-between items-center">
                            <div>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="setTimeFrame('meetingChart','day', processedMeetingData)"
                                    value="day">Günlük</button>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="setTimeFrame('meetingChart','week', processedMeetingData)"
                                    value="week">Haftalık</button>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="setTimeFrame('meetingChart','month', processedMeetingData)"
                                    value="month">Aylık</button>
                            </div>
                            <div>
                                <input
                                    class="bg-theme_black border-theme_secondary_black rounded-md text-white/90 py-1.5 md:w-56"
                                    type="month" class="monthFilterInput" data-chart="meetingChart"
                                    onchange="filterChart('meetingChart',this)">
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="resetChart('meetingChart')">Temizle</button>
                            </div>
                        </div>
                        <canvas id="meetingChart"></canvas>
                    </div>
                </div>
            </div>

            <div id="personel" class="hidden justify-center chart">
                <div class="max-w-6xl 3xl:max-w-7xl w-full">
                    <div>
                        <div class="flex justify-between items-center">
                            <div>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="setTimeFrame('personelChart', 'day', processedPersonelData)"
                                    value="day">Günlük</button>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="setTimeFrame('personelChart', 'week', processedPersonelData)"
                                    value="week">Haftalık</button>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="setTimeFrame('personelChart', 'month', processedPersonelData)"
                                    value="month">Aylık</button>
                            </div>
                            <div>
                                <input
                                    class="bg-theme_black border-theme_secondary_black rounded-md text-white/90 py-1.5 md:w-56"
                                    type="month" class="monthFilterInput" data-chart="personelChart"
                                    onchange="filterChart('personelChart',this)">
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="resetChart('personelChart')">Temizle</button>
                            </div>
                        </div>
                        <canvas id="personelChart"></canvas>
                    </div>
                </div>
            </div>

            <div id="reject" class="flex justify-center chart">
                <div class="max-w-6xl 3xl:max-w-7xl w-full">
                    <div>
                        <div class="flex justify-between items-center">
                            <div>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="setTimeFrame('rejectedPersonelChart', 'day', processedRejectedPersonelData)"
                                    value="day">Günlük</button>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="setTimeFrame('rejectedPersonelChart', 'week', processedRejectedPersonelData)"
                                    value="week">Haftalık</button>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="setTimeFrame('rejectedPersonelChart', 'month', processedRejectedPersonelData)"
                                    value="month">Aylık</button>
                            </div>
                            <div>
                                <input
                                    class="bg-theme_black border-theme_secondary_black rounded-md text-white/90 py-1.5 md:w-56"
                                    type="month" class="monthFilterInput" data-chart="rejectedPersonelChart"
                                    onchange="filterChart('rejectedPersonelChart',this)">
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="resetChart('rejectedPersonelChart')">Temizle</button>
                            </div>
                        </div>
                        <canvas class="h-full" id="rejectedPersonelChart"></canvas>
                    </div>
                </div>
            </div>

            <div id="preRegister" class="hidden justify-center chart">
                <div class="max-w-6xl 3xl:max-w-7xl w-full">
                    <div>
                        <div class="flex justify-between items-center">
                            <div>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="setTimeFrameSecond('PreRegistrationChart', 'day', processedExternal, processedNormal)"
                                    value="day">Günlük</button>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="setTimeFrameSecond('PreRegistrationChart', 'week', processedExternal, processedNormal)"
                                    value="week">Haftalık</button>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="setTimeFrameSecond('PreRegistrationChart', 'month', processedExternal, processedNormal)"
                                    value="month">Aylık</button>
                            </div>
                            <div>
                                <input
                                    class="bg-theme_black border-theme_secondary_black rounded-md text-white/90 py-1.5 md:w-56"
                                    type="month" class="monthFilterInput" data-chart="PreRegistrationChart"
                                    onchange="filterChart('PreRegistrationChart',this)">
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="resetChart('PreRegistrationChart')">Temizle</button>
                            </div>
                        </div>
                        <canvas id="PreRegistrationChart"></canvas>
                    </div>
                </div>
            </div>

            <div id="externalReg" class="hidden justify-center chart">
                <div class="max-w-6xl 3xl:max-w-7xl w-full">
                    <div>
                        <div class="flex justify-between items-center">
                            <div>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="setTimeFrame('externalRegChart', 'day', processedExternalRegData)"
                                    value="day">Günlük</button>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="setTimeFrame('externalRegChart', 'week', processedExternalRegData)"
                                    value="week">Haftalık</button>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="setTimeFrame('externalRegChart', 'month', processedExternalRegData)"
                                    value="month">Aylık</button>
                            </div>
                            <div>
                                <input
                                    class="bg-theme_black border-theme_secondary_black rounded-md text-white/90 py-1.5 md:w-56"
                                    type="month" class="monthFilterInput" data-chart="externalRegChart"
                                    onchange="filterChart('externalRegChart',this)">
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="resetChart('externalRegChart')">Temizle</button>
                            </div>
                        </div>
                        <canvas id="externalRegChart"></canvas>
                    </div>
                </div>
            </div>

            <div id="posNeg" class="hidden justify-center chart">
                <div class="max-w-xl 3xl:max-w-2xl w-full">
                    <div>
                        <canvas id="posOrNegMeetChart"></canvas>
                    </div>
                </div>
            </div>

            <div id="personelReg" class="hidden justify-center chart">
                <div class="max-w-6xl 3xl:max-w-7xl w-full">
                    <div>
                        <div class="flex justify-between items-center">
                            <div>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="onGroupingChange('datadaily')" value="day">Günlük</button>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="onGroupingChange('datamonthly')" value="week">Aylık</button>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="onGroupingChange('datayearly')" value="month">Yıllık</button>
                            </div>
                            <div>
                                <select
                                    class="bg-theme_black border-theme_secondary_black rounded-md text-white/90 py-1.5 md:w-56"
                                    type="year" onchange="changeVariableDate(this.value)">
                                    <option value="2023">2023</option>
                                    <option selected value="2024">2024</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="max-w-xl 3xl:max-w-2xl w-full mx-auto">
                        <canvas id="personelRegistration"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <select name="" id="ikSelect" class="input-2">
                @foreach ($hrUsers as $hrUser)
                    <option value="{{ $hrUser->id }}">{{ $hrUser->full_name }}</option>
                @endforeach
            </select>
        </div>
    </div>
    @if ($errors->any())
        @include('components.error-modal-second')
    @endif
    @if (session('error'))
        @include('components.error-modal')
    @endif
    @if (session('success'))
        @include('components.success-modal')
    @endif
    @include('components.root.reportPopup')
@endsection
@section('javascript')
    <script>
        var charts = {};
        let posOrNegChart;
        var processedMeetingData;
        var processedPersonelData;
        var processedRejectedPersonelData;
        var processedExternalRegData;

        var processedExternal;
        var processedNormal;

        let selectedGrouping = "datayearly";
        let groupedData;
        let currentDate;
        let variableDate;

        $(document).ready(function() {

            // Ortak veri işleme fonksiyonu
            function processData(data) {
                processedData = {
                    day: [],
                    week: [],
                    month: []
                };

                data.forEach(item => {
                    var itemDate = moment(item.created_at);
                    var formattedDate = itemDate.format('YYYY-MM-DD');
                    var formattedMonth = itemDate.format('YYYY-MM');

                    // Gün
                    var existingDay = processedData.day.find(data => data.x === formattedDate);
                    if (existingDay) {
                        existingDay.y++;
                    } else {
                        processedData.day.push({
                            x: formattedDate,
                            y: 1
                        });
                    }

                    // Hafta
                    var startOfWeek = moment(itemDate).startOf('week').format('YYYY-MM-DD');
                    var existingWeek = processedData.week.find(data => data.x === startOfWeek);
                    if (existingWeek) {
                        existingWeek.y++;
                    } else {
                        processedData.week.push({
                            x: startOfWeek,
                            y: 1
                        });
                    }

                    // Ay
                    var existingMonth = processedData.month.find(data => data.x === formattedMonth);
                    if (existingMonth) {
                        existingMonth.y++;
                    } else {
                        processedData.month.push({
                            x: formattedMonth,
                            y: 1
                        });
                    }
                });

                return processedData;
            }

            function createChart(chartData, type, chartId, chartLabel, chartTitle) {
                return new Chart(chartId, {
                    type: 'line',
                    data: {
                        datasets: [{
                            label: chartLabel,
                            data: chartData,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            title: {
                                display: true,
                                text: chartTitle,
                                padding: {
                                    top: 10,
                                    bottom: 30
                                },
                                font: {
                                    weight: 'bold',
                                    size: '32px',
                                },
                                color: '#fff'
                            }
                        },
                        locale: "tr",
                        scales: {
                            x: {
                                min: '2024-01-01',
                                max: '2024-12-31',
                                type: 'time',
                                time: {
                                    unit: 'day',
                                }
                            },
                            y: {
                                beginAtZero: true
                            },
                        },
                    }
                });
            }

            function createChartSecond(chartData, chartData2, type, chartId, chartLabel, chartLabel2, chartTitle) {
                return new Chart(chartId, {
                    type: 'line',
                    data: {
                        datasets: [{
                            label: chartLabel,
                            data: chartData,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)'
                            ],
                            borderWidth: 1
                        }, {
                            label: chartLabel2,
                            data: chartData2,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            title: {
                                display: true,
                                text: chartTitle,
                                padding: {
                                    top: 10,
                                    bottom: 30
                                },
                                font: {
                                    weight: 'bold',
                                    size: '32px',
                                },
                                color: '#fff'
                            }
                        },
                        locale: "tr",
                        scales: {
                            x: {
                                min: '2024-01-01',
                                max: '2024-12-31',
                                type: 'time',
                                time: {
                                    unit: 'day',
                                }
                            },
                            y: {
                                beginAtZero: true
                            },
                        },
                    }
                });
            }


            $('#ikSelect').change(function() {
                var val = $(this).val();
                updateAllChartsByHr(val);
            });

            $(document).ready(function() {
                $('#ikSelect').trigger('change');
            });

            function updateAllChartsByHr(param) {

                $.ajax({
                    type: "GET",
                    url: "/root/get/reports/hr/ise-alim?hrID=" + param,
                    success: function(response) {
                        console.log(response);
                        if (posOrNegChart) {
                            posOrNegChart.destroy();
                        }

                        posOrNegChart = new Chart("posOrNegMeetChart", {
                            type: 'pie',
                            data: {
                                labels: ['Olumlu Randevu', 'Olumsuz Randevu'],
                                datasets: [{
                                    data: [response.positiveMeetingsnew.length, response
                                        .rejected_meetings.length
                                    ]
                                }, ]
                            },
                            options: {
                                plugins: {
                                    title: {
                                        display: true,
                                        text: "Olumlu - Olumsuz Randevular",
                                        padding: {
                                            top: 10,
                                            bottom: 30
                                        },
                                        font: {
                                            weight: 'bold',
                                            size: '32px',
                                        },
                                        color: '#fff'
                                    }
                                }
                            }
                        });

                        var meetingData = response.meetings;
                        var personelData = response.ise_alim_personels;
                        var rejectedPersonelData = response.rejected_personels;
                        var externalRegData = response.externalRegisters;

                        // Veri işleme işlemlerini fonksiyonlar içinde yap
                        processedMeetingData = processData(meetingData);
                        processedPersonelData = processData(personelData);
                        processedRejectedPersonelData = processData(rejectedPersonelData);
                        processedExternalRegData = processData(externalRegData);

                        if (charts.meetingChart) {
                            charts.meetingChart.destroy();
                        }

                        // Grafikleri oluştur
                        charts.meetingChart = createChart(processedMeetingData.day,
                            "bar",
                            "meetingChart",
                            "Randevu",
                            "Randevu Grafiği");

                        if (charts.personelChart) {
                            charts.personelChart.destroy();
                        }

                        charts.personelChart = createChart(processedPersonelData.day,
                            "bar",
                            "personelChart",
                            "Personel",
                            "Personel Grafiği");

                        if (charts.rejectedPersonelChart) {
                            charts.rejectedPersonelChart.destroy();
                        }

                        charts.rejectedPersonelChart = createChart(processedRejectedPersonelData.day,
                            "bar",
                            "rejectedPersonelChart",
                            "Reddedilen Personel",
                            "Reddedilen Personel Grafiği");

                        if (charts.externalRegChart) {
                            charts.externalRegChart.destroy();
                        }

                        charts.externalRegChart = createChart(processedExternalRegData.day,
                            "bar",
                            "externalRegChart",
                            "Kayıt",
                            "Dışarıdan Gelen Kayıt Grafiği");
                    }
                })

                $.ajax({
                    type: "GET",
                    url: "/root/export/uncompleted-users?hrID=" + param,
                    success: function(response) {
                        var completedUsers = response.completedUsers;
                        var personelFilesCompleted = response.personelFilesCompleted;
                        var personelUsersCompleted = response.personelUsersCompleted;
                        var uncompletedUsers = response.uncompletedUsers;

                        // Verinizin olduğu diziyi data değişkenine atayın
                        const data = [completedUsers, personelFilesCompleted, personelUsersCompleted,
                            uncompletedUsers
                        ];
                        groupedData = groupByCreatedAt(data);
                        console.log(groupedData);
                        // Grafiği oluştur
                        updateChart();
                    }
                });

                $.ajax({
                    type: "GET",
                    url: "/root/export/pre-registiration?hrID=" + param,
                    success: function(response) {
                        console.log(response);
                        var external = response.external;
                        var normal = response.normal;

                        if (charts.PreRegistrationChart) {
                            charts.PreRegistrationChart.destroy();
                        }

                        processedExternal = processData(external);
                        processedNormal = processData(normal);

                        charts.PreRegistrationChart = createChartSecond(
                            processedExternal.day,
                            processedNormal.day,
                            "bar",
                            "PreRegistrationChart",
                            "Dışardan Gelen",
                            "Ön Kayıt",
                            "Ön Kayıt Grafiği");

                    }
                });
            }

        });

        // Verileri aylık, günlük ve yıllık olarak gruplama fonksiyonu
        function groupByCreatedAt(data, variableDate) {
            const datamonthly = [
                [],
                [],
                [],
                []
            ];
            const datadaily = [
                [],
                [],
                [],
                []
            ];
            const datayearly = [
                [],
                [],
                [],
                []
            ];

            if (variableDate) {
                currentDate = new Date();
                currentDate.setFullYear(variableDate);
            } else {
                currentDate = new Date();
            }

            data[0].forEach(item => {
                const createdDate = new Date(item.created_at);

                if (
                    createdDate.getFullYear() === currentDate.getFullYear() &&
                    createdDate.getMonth() === currentDate.getMonth() &&
                    createdDate.getDate() === currentDate.getDate()
                ) {
                    datadaily[0].push(item);
                }
                if (
                    createdDate.getFullYear() === currentDate.getFullYear() &&
                    createdDate.getMonth() === currentDate.getMonth()
                ) {
                    datamonthly[0].push(item);
                }
                if (
                    createdDate.getFullYear() === currentDate.getFullYear()
                ) {
                    datayearly[0].push(item);
                }
            });

            data[1].forEach(item => {
                const createdDate = new Date(item.created_at);

                if (
                    createdDate.getFullYear() === currentDate.getFullYear() &&
                    createdDate.getMonth() === currentDate.getMonth() &&
                    createdDate.getDate() === currentDate.getDate()
                ) {
                    datadaily[1].push(item);
                }
                if (
                    createdDate.getFullYear() === currentDate.getFullYear() &&
                    createdDate.getMonth() === currentDate.getMonth()
                ) {
                    datamonthly[1].push(item);
                }
                if (
                    createdDate.getFullYear() === currentDate.getFullYear()
                ) {
                    datayearly[1].push(item);
                }
            })
            data[2].forEach(item => {
                const createdDate = new Date(item.created_at);

                if (
                    createdDate.getFullYear() === currentDate.getFullYear() &&
                    createdDate.getMonth() === currentDate.getMonth() &&
                    createdDate.getDate() === currentDate.getDate()
                ) {
                    datadaily[2].push(item);
                }
                if (
                    createdDate.getFullYear() === currentDate.getFullYear() &&
                    createdDate.getMonth() === currentDate.getMonth()
                ) {
                    datamonthly[2].push(item);
                }
                if (
                    createdDate.getFullYear() === currentDate.getFullYear()
                ) {
                    datayearly[2].push(item);
                }
            })
            data[3].forEach(item => {
                const createdDate = new Date(item.created_at);

                if (
                    createdDate.getFullYear() === currentDate.getFullYear() &&
                    createdDate.getMonth() === currentDate.getMonth() &&
                    createdDate.getDate() === currentDate.getDate()
                ) {
                    datadaily[3].push(item);
                }
                if (
                    createdDate.getFullYear() === currentDate.getFullYear() &&
                    createdDate.getMonth() === currentDate.getMonth()
                ) {
                    datamonthly[3].push(item);
                }
                if (
                    createdDate.getFullYear() === currentDate.getFullYear()
                ) {
                    datayearly[3].push(item);
                }
            })


            return {
                datamonthly,
                datadaily,
                datayearly
            };
        }

        // Grafiği güncelleyen fonksiyon
        function updateChart() {
            const completedUsers = groupedData[selectedGrouping][0].length;
            const personelFilesCompleted = groupedData[selectedGrouping][1].length;
            const personelUsersCompleted = groupedData[selectedGrouping][2].length;
            const uncompletedUsers = groupedData[selectedGrouping][3].length;


            const chartData = {
                labels: ['Kayıt Tamamlanmış', 'Personel Dosyaları Yüklenmiş', 'Personel Bilgileri Yüklenmiş',
                    'Kayıt Tamamlanmamış'
                ],
                datasets: [{
                    data: [completedUsers, personelFilesCompleted, personelUsersCompleted, uncompletedUsers],
                }]
            };

            // Eğer chart varsa, var olanı güncelle
            if (window.myChart) {
                window.myChart.data = chartData;
                window.myChart.update();
            } else { // Eğer chart yoksa, yeni bir chart oluştur
                const ctx = document.getElementById('personelRegistration').getContext('2d');
                const config = {
                    type: 'pie',
                    data: chartData,
                    options: {
                        plugins: {
                            title: {
                                display: true,
                                text: "Personel Kayıt Grafiği",
                                padding: {
                                    top: 10,
                                    bottom: 30
                                },
                                font: {
                                    weight: 'bold',
                                    size: '32px',
                                },
                                color: '#fff'
                            }
                        }
                    }
                };
                window.myChart = new Chart(ctx, config);
            }
        }

        function onGroupingChange(newGrouping) {
            selectedGrouping = newGrouping;
            updateChart();
        }

        function changeVariableDate(year) {
            $.ajax({
                type: "GET",
                url: "/root/export/uncompleted-users",
                success: function(response) {
                    var completedUsers = response.completedUsers;
                    var personelFilesCompleted = response.personelFilesCompleted;
                    var personelUsersCompleted = response.personelUsersCompleted;
                    var uncompletedUsers = response.uncompletedUsers;

                    // Verinizin olduğu diziyi data değişkenine atayın
                    const data = [completedUsers, personelFilesCompleted, personelUsersCompleted,
                        uncompletedUsers
                    ];

                    variableDate = year;
                    groupedData = groupByCreatedAt(data, variableDate);
                    // Grafiği oluştur
                    updateChart();
                }
            });
        }

        function setTimeFrame(chartId, period, processedData) {
            var chart = charts[chartId];

            if (period == 'day') {
                chart.options.scales.x.time.unit = period;
                chart.data.datasets[0].data = processedData.day;
            }
            if (period == 'week') {
                chart.options.scales.x.time.unit = period;
                chart.data.datasets[0].data = processedData.week;
            }
            if (period == 'month') {
                chart.options.scales.x.time.unit = period;
                chart.data.datasets[0].data = processedData.month;
            }
            chart.update();
        }

        function setTimeFrameSecond(chartId, period, processedData, processedDataSecond) {
            var chart = charts[chartId];

            if (period == 'day') {
                chart.options.scales.x.time.unit = period;
                chart.data.datasets[0].data = processedData.day;
                chart.data.datasets[1].data = processedDataSecond.day;
            }
            if (period == 'week') {
                chart.options.scales.x.time.unit = period;
                chart.data.datasets[0].data = processedData.week;
                chart.data.datasets[1].data = processedDataSecond.week;
            }
            if (period == 'month') {
                chart.options.scales.x.time.unit = period;
                chart.data.datasets[0].data = processedData.month;
                chart.data.datasets[1].data = processedDataSecond.month;
            }
            chart.update();
        }

        function filterChart(chartId, date) {
            var chart = charts[chartId];
            var year = date.value.substring(0, 4);
            var month = date.value.substring(5, 7);

            var lastDay = (y, m) => {
                return new Date(y, m, 0).getDate()
            };

            var startDate = `${date.value}-01`;
            var endDate = `${date.value}-${lastDay(year, month)}`;

            chart.options.scales.x.min = startDate;
            chart.options.scales.x.max = endDate;
            chart.update();
        }

        function resetChart(chartId) {
            var chart = charts[chartId];
            var startDate = moment().startOf('year').format('YYYY-MM-DD');
            var endDate = moment().endOf('year').format('YYYY-MM-DD');

            chart.options.scales.x.min = startDate;
            chart.options.scales.x.max = endDate;
            chart.update();

            $('[data-chart="' + chartId + '"]').val('');
        }

        function chooseReportDate(report, date) {
            $('.inputs').empty();

            let months = ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül',
                'Ekim', 'Kasım', 'Aralık'
            ];
            let currentYear = new Date().getFullYear();
            let currentMonth = new Date().getMonth() + 1;

            let yearOptions = '';
            for (let year = 2023; year <= currentYear; year++) {
                yearOptions += `<option value="${year}">${year}</option>`;
            }

            let personId = $('#ikSelect').val();
            let personInput = `<input type="hidden" name="hrID" value="${personId}">`;

            if (report == 'personels') {
                if (date == 'daily') {
                    $('.inputs').append(`
                    <form name="period" method="POST" action="{{ route('root.exportHrOperations', ['period' => 'daily']) }}" class="flex flex-col gap-4">
                        @csrf
                        ${personInput}
                        <input class="bg-theme_black border-theme_secondary_black rounded-md text-white/90 py-1.5 w-full"
                            type="date" name="day">
                        <div class="flex justify-end">
                            <button class="button-3 px-6">
                                <i class="fa-solid fa-download"></i>
                                İndir
                            </button>
                        </div>
                    </form>
                `)
                } else if (date == 'weekly') {
                    $('.inputs').append(`
                    <form name="period" method="POST" action="{{ route('root.exportHrOperations', ['period' => 'weekly']) }}"
                        class="flex flex-col gap-4">
                        @csrf
                        ${personInput}
                        <select class="bg-theme_black border-theme_secondary_black rounded-md text-white/90 py-1.5 w-full" name="year">
                            <option selected disabled>Yıl seçiniz</option>
                            ${yearOptions}
                        </select>
                        <select class="bg-theme_black border-theme_secondary_black rounded-md text-white/90 py-1.5 w-full" name="month">
                            <option selected disabled>Ay seçiniz</option>
                            ${months.map((month, index) => `<option value="${index + 1}" ${index + 1 === currentMonth ? 'selected' : ''}>${month}</option>`).join('')}
                        </select>
                        <select class="bg-theme_black border-theme_secondary_black rounded-md text-white/90 py-1.5 w-full" name="week">
                            <option selected disabled>Hafta seçiniz</option>
                            <option value="1">1.Hafta</option>
                            <option value="2">2.Hafta</option>
                            <option value="3">3.Hafta</option>
                            <option value="4">4.Hafta</option>
                            <option value="5">5.Hafta</option>
                        </select>
                        <div class="flex justify-end">
                            <button class="button-3 px-6">
                                <i class="fa-solid fa-download"></i>
                                İndir
                            </button>
                        </div>
                    </form>
                `)
                } else if (date == 'monthly') {
                    $('.inputs').append(`
                    <form name="period" method="POST" action="{{ route('root.exportHrOperations', ['period' => 'monthly']) }}"
                        class="flex flex-col gap-4">
                        @csrf
                        ${personInput}
                        <select class="bg-theme_black border-theme_secondary_black rounded-md text-white/90 py-1.5 w-full" name="year">
                            <option selected disabled>Yıl seçiniz</option>
                            ${yearOptions}
                        </select>
                        <select class="bg-theme_black border-theme_secondary_black rounded-md text-white/90 py-1.5 w-full" name="month">
                            <option selected disabled>Ay seçiniz</option>
                            ${months.map((month, index) => `<option value="${index + 1}" ${index + 1 === currentMonth ? 'selected' : ''}>${month}</option>`).join('')}
                        </select>
                        <div class="flex justify-end">
                            <button class="button-3 px-6">
                                <i class="fa-solid fa-download"></i>
                                İndir
                            </button>
                        </div>
                    </form>
                `)
                } else if (date == 'yearly') {
                    $('.inputs').append(`
                    <form method="POST" action="{{ route('root.exportHrOperations', ['period' => 'yearly']) }}"
                        class="flex flex-col gap-4">
                        @csrf
                        ${personInput}
                        <select class="bg-theme_black border-theme_secondary_black rounded-md text-white/90 py-1.5 w-full" name="year">
                            <option selected disabled>Yıl seçiniz</option>
                            ${yearOptions}
                        </select>
                        <div class="flex justify-end">
                            <button class="button-3 px-6">
                                <i class="fa-solid fa-download"></i>
                                İndir
                            </button>
                        </div>
                    </form>
                `)
                }
            } else if (report == 'debits') {
                if (date == 'daily') {
                    $('.inputs').append(`
                        <form method="POST" action="{{ route('root.exportHrDebitUsers', ['period' => 'daily']) }}" class="flex flex-col gap-4">
                            @csrf
                            ${personInput}
                            <div class="flex gap-2">
                                <label for="person" class="text-gray-300">
                                    Kişi bazlı rapor
                                    <input type="radio" name="report_type" value="person">
                                </label>
                                <label for="product" class="text-gray-300">
                                    Ürün bazlı rapor
                                    <input type="radio" name="report_type" value="product">
                                </label>
                            </div>
                            <input class="bg-theme_black border-theme_secondary_black rounded-md text-white/90 py-1.5 w-full"
                                type="date" name="day">
                            <div class="flex justify-end">
                                <button class="button-3 px-6">
                                    <i class="fa-solid fa-download"></i>
                                    İndir
                                </button>
                            </div>
                        </form>
                    `)
                } else if (date == 'weekly') {
                    $('.inputs').append(`
                        <form method="POST" action="{{ route('root.exportHrDebitUsers', ['period' => 'weekly']) }}"
                            class="flex flex-col gap-4">
                            @csrf
                            ${personInput}
                            <div class="flex gap-2">
                                <label for="person" class="text-gray-300">
                                    Kişi bazlı rapor
                                    <input type="radio" name="report_type" value="person">
                                </label>
                                <label for="product" class="text-gray-300">
                                    Ürün bazlı rapor
                                    <input type="radio" name="report_type" value="product">
                                </label>
                            </div>
                            <select class="bg-theme_black border-theme_secondary_black rounded-md text-white/90 py-1.5 w-full"
                                name="year">
                                <option selected disabled>Yıl seçiniz</option>
                                ${yearOptions}
                            </select>
                            <select class="bg-theme_black border-theme_secondary_black rounded-md text-white/90 py-1.5 w-full"
                                name="month">
                                <option selected disabled>Ay seçiniz</option>
                                ${months.map((month, index) => `<option value="${index + 1}" ${index + 1 === currentMonth ? 'selected' : ''}>${month}</option>`).join('')}
                            </select>
                            <select class="bg-theme_black border-theme_secondary_black rounded-md text-white/90 py-1.5 w-full"
                                name="week">
                                <option selected disabled>Hafta seçiniz</option>
                                <option value="1">1.Hafta</option>
                                <option value="2">2.Hafta</option>
                                <option value="3">3.Hafta</option>
                                <option value="4">4.Hafta</option>
                                <option value="5">5.Hafta</option>
                            </select>
                            <div class="flex justify-end">
                                <button class="button-3 px-6">
                                    <i class="fa-solid fa-download"></i>
                                    İndir
                                </button>
                            </div>
                        </form>
                    `)
                } else if (date == 'monthly') {
                    $('.inputs').append(`
                    <form name="period" method="POST" action="{{ route('root.exportHrDebitUsers', ['period' => 'monthly']) }}"
                        class="flex flex-col gap-4">
                        @csrf
                        ${personInput}
                        <div class="flex gap-2">
                            <label for="person" class="text-gray-300">
                                Kişi bazlı rapor
                                <input type="radio" name="report_type" value="person">
                            </label>
                            <label for="product" class="text-gray-300">
                                Ürün bazlı rapor
                                <input type="radio" name="report_type" value="product">
                            </label>
                        </div>
                        <select class="bg-theme_black border-theme_secondary_black rounded-md text-white/90 py-1.5 w-full" name="year">
                            <option selected disabled>Yıl seçiniz</option>
                            ${yearOptions}
                        </select>
                        <select class="bg-theme_black border-theme_secondary_black rounded-md text-white/90 py-1.5 w-full" name="month">
                            <option selected disabled>Ay seçiniz</option>
                            ${months.map((month, index) => `<option value="${index + 1}" ${index + 1 === currentMonth ? 'selected' : ''}>${month}</option>`).join('')}
                        </select>
                        <div class="flex justify-end">
                            <button class="button-3 px-6">
                                <i class="fa-solid fa-download"></i>
                                İndir
                            </button>
                        </div>
                    </form>
                `)
                } else if (date == 'yearly') {
                    $('.inputs').append(`
                    <form method="POST" action="{{ route('root.exportHrDebitUsers', ['period' => 'yearly']) }}"
                        class="flex flex-col gap-4">
                        @csrf
                        ${personInput}
                        <div class="flex gap-2">
                            <label for="person" class="text-gray-300">
                                Kişi bazlı rapor
                                <input type="radio" name="report_type" value="person">
                            </label>
                            <label for="product" class="text-gray-300">
                                Ürün bazlı rapor
                                <input type="radio" name="report_type" value="product">
                            </label>
                        </div>
                        <select class="bg-theme_black border-theme_secondary_black rounded-md text-white/90 py-1.5 w-full" name="year">
                            <option selected disabled>Yıl seçiniz</option>
                            ${yearOptions}
                        </select>
                        <div class="flex justify-end">
                            <button class="button-3 px-6">
                                <i class="fa-solid fa-download"></i>
                                İndir
                            </button>
                        </div>
                    </form>
                `)
                }
            }

            $('.reportPopup').show();
        }

        $('.closePopup').click(function() {
            $('.reportPopup').hide();
        });

        $('[data-section]').click(function() {
            $('[data-section]').addClass('bg-theme_secondary_black').removeClass('bg-gray-500');
            $(this).removeClass('bg-theme_secondary_black').addClass('bg-gray-500');

            var target = $(this).data('section');

            // Tüm grafik bölümlerini gizle
            $('.chart').addClass('hidden').removeClass('flex');

            // Tıklanan grafiği göster
            $('#' + target).removeClass('hidden').addClass('flex');
        });
    </script>
@endsection