@extends('web.layouts.app')

@push('styles')
    <style>
        .main-chat-container {
            background-color: transparent;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .main-chat-container::-webkit-scrollbar-track {-webkit-box-shadow:inset 0 0 8px rgba(0,0,0,0.2);background-color:#F5F5F5}
        .main-chat-container::-webkit-scrollbar {width:8px;background-color:#F5F5F5}
        .main-chat-container::-webkit-scrollbar-thumb {background-color:#b8b8b8}
    </style>
@endpush

@section('content')
    <div class="main-chat-container w-100 ml-md-5 overflow-y-scroll">
        <div class="p-3 pt-0 mb-0">
            @if (env('APP_PROJECT') != 'Rouaa')
                @include('web.analytics.menu')
            @endif
            <div class="row">
                <div class="col-md-6">
                    <div class="card cardChart">
                        <div class="card-header">
                            <h4 class="card-title">@lang('user.num_of_conversations_per_status')</h4>
                        </div>
                        <div class="card-body">
                            <canvas id="myDonutChart2" style="width:100%;max-width:700px"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card cardChart">
                        <div class="card-header">
                            <h4 class="card-title">@lang('user.num_of_conversations_per_month')</h4>
                        </div>
                        <div class="card-body">
                            <canvas id="myChart4" style="width:100%;max-width:700px"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card cardChart">
                        <div class="card-header">
                            <h4 class="card-title">@lang('user.num_of_conversations_per_category')</h4>
                        </div>
                        <div class="card-body">
                            <canvas id="myChart5" style="width:100%;max-width:700px"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="tab-form-pane main-chat-note fade show active" id="pills-note" role="tabpanel"
        aria-labelledby="pills-note-tab">
        <div class="px-4 ">
            <div class="note-sidebar">
                <div class="note-title">
                    <h4>@lang('user.note')</h4>
                </div>
                <div class="note-content">
                    <p>@lang('notes.analytics_for_messages_note')</p>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            const ctxDonut2 = document.getElementById('myDonutChart2');
            const data2 = {
                labels: ["{{ __('user.new') }}", "{{ __('user.assigned') }}", "{{ __('user.closed') }}"],
                datasets: [{
                    label: 'Messages',
                    data: [{{ implode(',', $chartData['conversations_statuses']) }}],
                    backgroundColor: [
                        'rgb(255, 205, 86)', // Orange for new
                        '#1ac9e6', // Blue for assigned
                        'rgb(255, 99, 132)' // Red for Closed
                    ],
                    borderWidth: 0
                }]
            };

            new Chart(ctxDonut2, {
                type: 'doughnut',
                data: data2,
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                        },
                        title: {
                            display: true,
                            text: 'Message Distribution'
                        }
                    }
                }
            });
            
            const ctx4 = document.getElementById('myChart4');
            new Chart(ctx4, {
                type: 'bar',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    datasets: [{
                        label: "{{ __('user.conversations_number') }}",
                        data: [{{ implode(',', $chartData['conversations_monthly']) }}],
                        backgroundColor: [
                            "#ea5545", 
                            "#f46a9b", 
                            "#ef9b20", 
                            "#7eb0d5", 
                            "#ede15b", 
                            "#fdcce5",
                            "#87bc45", 
                            "#27aeef", 
                            "#b33dc6",
                            "#edbf33",
                            "#beb9db",
                            "#bdcf32"
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    legend: {
                        display: false
                    },
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display:false
                            }
                        }]
                    }
                }
            });

            const ctx5 = document.getElementById('myChart5');
            new Chart(ctx5, {
                type: 'bar',
                data: {
                    labels: ['Utility', 'Marketing', 'Authentication'],
                    datasets: [{
                        label: "{{ __('user.conversations_number') }}",
                        data: [{{ implode(',', $chartData['conversations_categories']) }}],
                        backgroundColor: [
                            "#b33dc6",
                            "#27aeef",
                            "#ef9b20"
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    legend: {
                        display: false
                    },
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display:false
                            }
                        }],
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
        });
    </script>
@endpush