@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Raporlar' => '/root/reports',
            'Muhasebe Raporları' => '/root/reports/accounting',
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app flex">

        <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="stocks"
                    class="bg-gray-500 w-full text-white px-6 py-4 border border-theme_black shadow text-sm">
                    Stok Grafiği
                </button>
                <button data-section="acc"
                    class="bg-theme_secondary_black w-full text-white px-6 py-4 border border-theme_black shadow text-sm">
                    Maliyet Grafiği
                </button>
            </div>
        </div>

        <div class="w-full">
            <div class="flex justify-center chart" id="stocks">
                <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="stocksChart"></canvas>
                    </div>
                </div>
            </div>

            <div class="hidden justify-center chart" id="acc">
                <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('accChart','day', processedAcc)" value="day">Günlük</button>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="setTimeFrame('accChart','week', processedAcc)" value="week">Haftalık</button>
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="setTimeFrame('accChart','month', processedAcc)" 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="accChart"
                                    onchange="filterChart('accChart',this)">
                                <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md"
                                    onclick="resetChart('accChart')">Temizle</button>
                            </div>
                        </div>
                        <canvas id="accChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection
@section('javascript')
    <script>
        var charts = {};

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

        let decrases = [];
        let incrases = [];

        $(document).ready(function() {

            $.ajax({
                type: "GET",
                url: "/root/get/reports/accounting",
                success: function(response) {
                    // Her bir raporu işleyin
                    response.forEach(item => {
                        // Eğer 'decrases' dizisi doluysa, 'decrases' dizisine ekle
                        if (item.stocks.decrases.length > 0) {
                            decrases.push(item.stocks.decrases);
                        }
                        // Eğer 'incrases' dizisi doluysa, 'incrases' dizisine ekle
                        if (item.stocks.incrases.length > 0) {
                            incrases.push(item.stocks.incrases);
                        }
                    });

                    var data = [decrases, incrases];
                    // Verinizin olduğu diziyi data değişkenine atayın
                    groupedData = groupData(data);

                    // Grafiği oluştur
                    updateChart();
                }
            });

        });

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

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

            data[0].forEach(item => {

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

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

            return {
                datamonthly,
                datadaily,
                datayearly
            };
        }

        // Grafiği güncelleyen fonksiyon
        function updateChart() {
            const decrases = groupedData[selectedGrouping][0].length;
            const incrases = groupedData[selectedGrouping][1].length;

            const chartData = {
                labels: ['Azalan Stok', 'Artan Stok'],
                datasets: [{
                    data: [decrases, incrases],
                }]
            };

            // 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('stocksChart').getContext('2d');
                const config = {
                    type: 'pie',
                    data: chartData,
                    options: {
                        plugins: {
                            title: {
                                display: true,
                                text: "Stok 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) {
            decrases = []; // decrases dizisini sıfırla
            incrases = []; // incrases dizisini sıfırla
            $.ajax({
                type: "GET",
                url: "/root/get/reports/accounting",
                success: function(response) {
                    // Her bir raporu işleyin
                    response.forEach(item => {
                        // Eğer 'decrases' dizisi doluysa, 'decrases' dizisine ekle
                        if (item.stocks.decrases.length > 0) {
                            decrases.push(item.stocks.decrases);
                        }
                        // Eğer 'incrases' dizisi doluysa, 'incrases' dizisine ekle
                        if (item.stocks.incrases.length > 0) {
                            incrases.push(item.stocks.incrases);
                        }
                    });

                    var data = [decrases, incrases];
                    // Verinizin olduğu diziyi data değişkenine atayın
                    groupedData = groupData(data);
                    console.log(groupedData);
                    // Grafiği oluştur
                    updateChart();
                }
            });
        }

        var processedAcc;

        $(document).ready(function() {
            var csrfToken = $('meta[name="csrf-token"]').attr('content');
            $.ajax({
                type: "post",
                url: "/root/export/expenses",
                data: {
                    _token: csrfToken
                },
                success: function(response) {
                    processedAcc = processData(response.accountgings)

                    charts.accChart = createChart(processedAcc.day,
                        "bar",
                        "accChart",
                        "Maliyet",
                        "Maliyet Grafiği");
                }
            });
        });

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

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

                // Gün
                const existingDay = processedData.day.find(data => data.x === formattedDate);
                if (existingDay) {
                    existingDay.y += parseFloat(item.shift_cost) + parseFloat(item.working_time_cost);
                } else {
                    processedData.day.push({
                        x: formattedDate,
                        y: parseFloat(item.shift_cost) + parseFloat(item.working_time_cost)
                    });
                }

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

                // Ay
                const existingMonth = processedData.month.find(data => data.x === formattedMonth);
                if (existingMonth) {
                    existingMonth.y += parseFloat(item.shift_cost) + parseFloat(item.working_time_cost);
                } else {
                    processedData.month.push({
                        x: formattedMonth,
                        y: parseFloat(item.shift_cost) + parseFloat(item.working_time_cost)
                    });
                }
            });

            return processedData;
        }

        function createChart(chartData, type, chartId, chartLabel, chartTitle) {
            return new Chart(chartId, {
                type: 'bar',
                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: {
                    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 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 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('');
        }

        $('[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