@extends('tenant.layouts.client')

{{-- Tilte Section --}}
@section('title', 'Analytics')

{{-- Style Section --}}
@section('style')
    <style>

    </style>
@endsection

@section('filter')
    <a href="{{route('client.analytics.index')}}">
        <img id='none-voice'  src="{{asset('img/analysis.png')}}" alt="mdo" width="22" height="22">
    </a>

@endsection


@section('content')
    {{-- @dd($array) --}}
    <livewire:tenant.supervisor.chat-bot-stats.index />

@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        let pieChartOneContainer = document.querySelector('.pie-1-container');
        let pieChartTwoContainer = document.querySelector('.pie-2-container');

        const ctx1 = document.getElementById('pie-1');
        const ctx2 = document.getElementById('pie-2');
        const ctx3 = document.getElementById('bar');

        // if both agent and bot values are zeros, write a text instead of the pie chart
        ({{ $engagement['chatBotCount'] }} == 0 && {{ $engagement['liveAgentCount'] }} == 0) ? pieChartOneContainer.innerHTML = 'No Data Available': false;
        ({{ $conversation['sent'] }} == 0 && {{ $conversation['received'] }} == 0) ? pieChartTwoContainer.innerHTML = 'No Data Available': false;

        // if all pie chart data are zeros, make margin bottom underneath
        ({{ $engagement['chatBotCount'] }} == 0 && {{ $engagement['liveAgentCount'] }} == 0 && {{ $conversation['sent'] }} == 0 && {{ $conversation['received'] }} == 0) ?
        pieChartOneContainer.style.marginBottom = '4rem': false;

        // pie 1
        const pieOneChart = new Chart(ctx1, {
            type: 'pie',
            data: {
                labels: ['Live Agent', 'Chatbot'],
                datasets: [{
                    // label: '# of Votes',
                    data: [{{ $engagement['liveAgentCount'] }}, {{ $engagement['chatBotCount'] }}],
                    borderWidth: 1,
                    backgroundColor: [
                        '#00a34e',
                        '#bccf32'
                    ],
                }]
            },
            options: {
                plugins: {
                    title: {
                        display: true,
                        text: 'Engagement'
                    },
                    legend: {
                        position: 'right'
                    }
                },
                responsive: true,
                scales: {
                    x: [{
                        gridLines: {
                            color: "rgba(0, 0, 0, 0)",
                        }
                    }],
                    y: [{
                        gridLines: {
                            color: "rgba(0, 0, 0, 0)",
                        }
                    }]
                }
            }
        });



        // ----------------------------------------------------------------
        // pie 2
        const pieTwoChart = new Chart(ctx2, {
            type: 'pie',
            data: {
                labels: ['Sent', 'Received'],
                datasets: [{
                    // label: '# of Votes',
                    data: [{{ $conversation['sent'] }}, {{ $conversation['received'] }}],
                    borderWidth: 1,
                    backgroundColor: [
                        '#00a34e',
                        '#bccf32'
                    ],
                }]
            },
            options: {
                plugins: {
                    title: {
                        display: true,
                        text: 'Conversation'
                    },
                    legend: {
                        position: 'right'
                    }
                },
                responsive: true,
                scales: {
                    x: [{
                        gridLines: {
                            color: "rgba(0, 0, 0, 0)",
                        }
                    }],
                    y: [{
                        gridLines: {
                            color: "rgba(0, 0, 0, 0)",
                        }
                    }]
                }
            }
        });

        // ----------------------------------------------------------------
        // bar chart
        const barChart = new Chart(ctx3, {
            type: 'bar',
            data: {

                labels: {!! json_encode(array_keys($matches)) !!},
                datasets: [{
                    label: '',

                    data: {!! json_encode(array_values($matches)) !!},
                    borderWidth: 1,
                    backgroundColor: [
                        '#00a34e'
                    ],
                }]
            },
            options: {
                plugins: {
                    legend: false
                },
                responsive: true,
                scales: {
                    x: {
                        grid: {
                            display: false
                        },
                    },
                }
            }
        });
    </script>
    <script>
        // updating bar chart data
        window.addEventListener('updateBarChart', (event) => {
            barChart.data.labels = Object.keys(event.detail.barData);
            barChart.data.datasets[0].data = Object.values(event.detail.barData)
            barChart.update();
        });

        // updating first pie chart data
        window.addEventListener('updateFirstPieChart', (event) => {
            pieOneChart.data.datasets[0].data = [event.detail.liveAgent, event.detail.chatBot];
            pieOneChart.update();
        });

        // updating second pie chart data
        window.addEventListener('updateSecondPieChart', (event) => {
            pieTwoChart.data.datasets[0].data = [event.detail.sent, event.detail.received];
            pieTwoChart.update();
        });
    </script>
@endsection