@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Raporlar' => '/root/reports',
            'İK Bordro Raporları' => '/root/reports/hr/bordro',
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app flex gap-4 pb-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="personel"
                    class="bg-gray-500 w-full text-white px-6 py-4 border border-theme_black shadow text-sm">
                    Personel Grafiğı
                </button>
                <button data-section="report"
                    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">

            <div id="report" class="hidden flex-col justify-center items-center gap-y-6 chart">

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

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

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

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

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

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

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

            </div>

            <div id="personel" 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="setTimeFrameSecond('personelChart', 'day', processedDataArray)"
                                    value="day">Günlük</button>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="setTimeFrameSecond('personelChart', 'week', processedDataArray)"
                                    value="week">Haftalık</button>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="setTimeFrameSecond('personelChart', 'month', processedDataArray)"
                                    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>
        <div>
            <select name="" id="personSelect" 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 = {};
        var processedDataArray = [];

        var processedWaitingData;
        var processedExitedData;
        var processedBlackListData;
        var processedApprovedData;

        $('#personSelect').change(function() {
            var val = $(this).val();
            updateCharts(val);
        });

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

        function createChartSecond(chartDataArray, type, chartId, labels, chartTitle, backgroundColors,
            borderColors) {
            var datasets = chartDataArray.map(function(data, index) {
                return {
                    label: labels[index],
                    data: data,
                    backgroundColor: backgroundColors[index],
                    borderColor: borderColors[index],
                    borderWidth: 1
                };
            });

            return new Chart(chartId, {
                type: 'line',
                data: {
                    datasets: datasets
                },
                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
                        },
                    },
                }
            });
        }

        // 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 updateCharts(param) {
            $.ajax({
                type: "GET",
                url: "/root/get/reports/hr/bordro?hrID=" + param,
                success: function(response) {
                    console.log(response);
                    var waitingPersonels = response.waiting_sgk_entry;
                    var exitedPersonels = response.exited_personels;
                    var blacklistPersonels = response.blackList_pesonels;
                    var approvedPersonels = response.approved_sgk_entry;

                    // Veri işleme işlemlerini fonksiyonlar içinde yap
                    processedWaitingData = processData(waitingPersonels);
                    processedExitedData = processData(exitedPersonels);
                    processedBlackListData = processData(blacklistPersonels);
                    processedApprovedData = processData(approvedPersonels);

                    processedDataArray = [processedWaitingData, processedExitedData,
                        processedBlackListData, processedApprovedData
                    ];

                    var labels = ['Bekleyen', 'Çıkan', 'Kara liste', 'Onaylanmış'];
                    var backgroundColors = [
                        ['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)'
                        ],
                        ['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)'
                        ],
                        [
                            '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)'
                        ],
                        [
                            '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)'
                        ],
                    ];
                    var borderColors = [
                        ['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)'
                        ],
                        ['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)'
                        ],
                        [
                            '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)'
                        ],
                        [
                            '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)'
                        ],
                    ];

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

                    // Grafikleri oluştur
                    charts.personelChart = createChartSecond(
                        [processedWaitingData.day, processedExitedData.day, processedBlackListData
                            .day, processedApprovedData.day
                        ],
                        "bar",
                        "personelChart",
                        labels,
                        "Personel Grafiği",
                        backgroundColors,
                        borderColors
                    );
                }
            });
        }

        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, processedDataArray) {
            var chart = charts[chartId];

            chart.options.scales.x.time.unit = period;

            processedDataArray.forEach((processedData, index) => {
                if (period === 'day') {
                    chart.data.datasets[index].data = processedData.day;
                }
                if (period === 'week') {
                    chart.data.datasets[index].data = processedData.week;
                }
                if (period === 'month') {
                    chart.data.datasets[index].data = processedData.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 = $('#personSelect').val();
            let personInput = `<input type="hidden" name="hrID" value="${personId}">`;

            if (report == 'sgkEntry') {
                if (date == 'daily') {
                    $('.inputs').append(`
                    <form name="period" method="POST" action="{{ route('root.exportHrWaitingSgkEntryPersonels', ['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.exportHrWaitingSgkEntryPersonels', ['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.exportHrWaitingSgkEntryPersonels', ['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">
                                ${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.exportHrWaitingSgkEntryPersonels', ['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 == 'waitExit') {
                if (date == 'daily') {
                    $('.inputs').append(`
                    <form name="period" method="POST" action="{{ route('root.exportHrWaitingExitPersonels', ['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.exportHrWaitingExitPersonels', ['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.exportHrWaitingExitPersonels', ['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">
                                ${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.exportHrWaitingExitPersonels', ['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 == 'exited') {
                if (date == 'daily') {
                    $('.inputs').append(`
                    <form name="period" method="POST" action="{{ route('root.exportHrExitedPersonels', ['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.exportHrExitedPersonels', ['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.exportHrExitedPersonels', ['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">
                                ${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.exportHrExitedPersonels', ['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 == 'blackList') {
                if (date == 'daily') {
                    $('.inputs').append(`
                    <form name="period" method="POST" action="{{ route('root.exportHrBlacklistPersonels', ['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.exportHrBlacklistPersonels', ['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.exportHrBlacklistPersonels', ['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">
                                ${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.exportHrBlacklistPersonels', ['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 == 'sgkReports') {
                if (date == 'daily') {
                    $('.inputs').append(`
                    <form name="period" method="POST" action="{{ route('root.sgkReports', ['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.sgkReports', ['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.sgkReports', ['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">
                                ${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.sgkReports', ['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 == 'executionsReports') {
                if (date == 'daily') {
                    $('.inputs').append(`
                    <form name="period" method="POST" action="{{ route('root.executionsReports', ['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.executionsReports', ['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.executionsReports', ['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">
                                ${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.executionsReports', ['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 == 'exportHrAccountings') {
                var departments = @json($departments);
                if (date == 'daily') {
                    $('.inputs').append(`
                    <form name="period" method="POST" action="{{ route('root.exportHrAccountings', ['period' => 'daily']) }}" 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="department">
                        <option selected disabled>Departman seçiniz</option>
                        ${departments.map(department => `<option value="${department.id}">${department.name}</option>`).join('')}
                    </select>
                        <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.exportHrAccountings', ['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="department">
                        <option selected disabled>Departman seçiniz</option>
                        ${departments.map(department => `<option value="${department.id}">${department.name}</option>`).join('')}
                    </select>
                        <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.exportHrAccountings', ['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="department">
                        <option selected disabled>Departman seçiniz</option>
                        ${departments.map(department => `<option value="${department.id}">${department.name}</option>`).join('')}
                    </select>
                            <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">
                                ${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.exportHrAccountings', ['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="department">
                        <option selected disabled>Departman seçiniz</option>
                        ${departments.map(department => `<option value="${department.id}">${department.name}</option>`).join('')}
                    </select>
                        <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