@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Raporlar' => '/root/reports',
            'Operasyon Raporları' => '/root/reports/operation',
        ],
    ]) !!}
@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="activePassive"
                    class="bg-gray-500 w-full text-white px-6 py-4 border border-theme_black shadow text-sm">
                    Aktif - Pasif Personel
                </button>
                <button data-section="approveWait"
                    class="bg-theme_secondary_black w-full text-white px-6 py-4 border border-theme_black shadow text-sm">
                    Talep Onay Grafiği
                </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-4 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">Talep Detayları (Rapor)</p>
                    </div>
                    <div class="flex gap-4">
                        <button class="button-3" onclick="chooseReportDate('requests','daily')">
                            <i class="fa-solid fa-table"></i>
                            Günlük
                        </button>
                        <button class="button-3" onclick="chooseReportDate('requests','weekly')">
                            <i class="fa-solid fa-table"></i>
                            Haftalık
                        </button>
                        <button class="button-3" onclick="chooseReportDate('requests','monthly')">
                            <i class="fa-solid fa-table"></i>
                            Aylık
                        </button>
                        {{-- <button class="button-3" onclick="chooseReportDate('requests','yearly')">
                            <i class="fa-solid fa-table"></i>
                            Yıllık
                        </button> --}}
                    </div>
                </div>
            </div>
            <div id="activePassive" class="flex justify-center chart">
                <div class="max-w-xl 3xl:max-w-2xl w-full mx-auto">
                    <div>
                        <canvas id="personels"></canvas>
                    </div>
                </div>
            </div>
            <div id="approveWait" class="hidden justify-center chart">
                <div class="max-w-xl 3xl:max-w-2xl w-full mx-auto">
                    <div class="mb-4">
                        <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md" onclick="changeTime('daily')"
                            value="day">Günlük Talepler</button>
                        <button class="bg-red-700 text-white/90 px-4 py-1.5 rounded-md" onclick="changeTime('monthly')"
                            value="month">Aylık Talepler</button>
                    </div>
                    <div>
                        <canvas id="demands"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <select name="" id="operationSelect" class="input-2">
                @foreach ($operationUsers as $operationUser)
                    <option value="{{ $operationUser->id }}">{{ $operationUser->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>
        let personelsChart;
        let demandsChart;

        var approvedDailyTickets = [];
        var approvedMonthlyTickets = [];
        var waitingDailyTickets = [];
        var waitingMonthlyTickets = [];

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

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

        function updateCharts(param) {
            $.ajax({
                type: "GET",
                url: "/root/get/reports/operation?opId=" + param,
                success: function(response) {
                    var active = response.personels.active.length;
                    var passive = response.personels.passive.length;
                    var dayOff = response.personels.dayOff.length;

                    if (personelsChart) {
                        personelsChart.destroy();
                    }

                    personelsChart = new Chart("personels", {
                        type: 'pie',
                        data: {
                            labels: ['Aktif Personel', 'Pasif Personel', 'İzinli Personel'],
                            datasets: [{
                                data: [
                                    active,
                                    passive,
                                    dayOff
                                ]
                            }]
                        },
                        options: {
                            plugins: {
                                title: {
                                    display: true,
                                    text: "Aktif - Pasif - İzinli Personel Grafiği",
                                    padding: {
                                        top: 10,
                                        bottom: 30
                                    },
                                    font: {
                                        weight: 'bold',
                                        size: '32px'
                                    },
                                    color: '#fff'
                                }
                            }
                        }
                    });

                    if (demandsChart) {
                        demandsChart.destroy();
                    }

                    approvedDailyTickets = [];
                    approvedMonthlyTickets = [];
                    waitingDailyTickets = [];
                    waitingMonthlyTickets = [];

                    response.demands.approvedDemands.forEach(demand => {
                        var ticketType = demand.tickets.ticket_type;
                        if (ticketType === "0") {
                            approvedDailyTickets.push(demand);
                        } else if (ticketType === "1") {
                            approvedMonthlyTickets.push(demand);
                        }
                    });
                    response.demands.waitingApprovalDemands.forEach(demand => {
                        var ticketType = demand.tickets.ticket_type;
                        if (ticketType === "0") {
                            waitingDailyTickets.push(demand);
                        } else if (ticketType === "1") {
                            waitingMonthlyTickets.push(demand);
                        }
                    });

                    demandsChart = new Chart("demands", {
                        type: 'pie',
                        data: {
                            labels: ['Onaylanmış Talepler', 'Onay Bekleyen Talepler'],
                            datasets: [{
                                data: [
                                    approvedDailyTickets.length,
                                    waitingDailyTickets.length
                                ]
                            }]
                        },
                        options: {
                            plugins: {
                                title: {
                                    display: true,
                                    text: "Onaylanmış - Onay Bekleyen Talepler Grafiği",
                                    padding: {
                                        top: 10,
                                        bottom: 30
                                    },
                                    font: {
                                        weight: 'bold',
                                        size: '32px'
                                    },
                                    color: '#fff'
                                }
                            }
                        }
                    });
                }
            });
        }

        function changeTime(param) {
            if (param === 'daily') {
                demandsChart.data.datasets[0].data = [
                    approvedDailyTickets.length,
                    waitingDailyTickets.length
                ];
            } else if (param === 'monthly') {
                demandsChart.data.datasets[0].data = [
                    approvedMonthlyTickets.length,
                    waitingMonthlyTickets.length
                ];
            }
            demandsChart.update();
        }

        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 = $('#operationSelect').val();
            let personInput = `<input type="hidden" name="operation_user_id" value="${personId}">`;

            if (report == 'requests') {
                if (date == 'daily') {
                    $('.inputs').append(`
                    <form name="period" method="POST" action="{{ route('root.exportOperationDemands', ['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.exportOperationDemands', ['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.exportOperationDemands', ['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.exportOperationDemands', ['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>
                `)
                }
            }

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