@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.messages')</h4>
                        </div>
                        <div class="card-body">
                            <canvas id="myDonutChart" 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_messages_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_messages_per_week_day')</h4>
                        </div>
                        <div class="card-body">
                            <canvas id="myChart3" 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_messages_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_messages_per_day')</h4>
                        </div>
                        <div class="card-body">
                            <canvas id="myChart5" 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_messages_per_hour')</h4>
                        </div>
                        <div class="card-body">
                            <canvas id="myChart2" 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 ctxDonut = document.getElementById('myDonutChart');
            const data = {
                labels: ["{{ __('user.received') }}", "{{ __('user.sent') }}"],
                datasets: [{
                    label: 'Messages',
                    data: [{{ $chartData['messages']['received'] }}, {{ $chartData['messages']['sent'] }}],
                    backgroundColor: [
                        '#0E8A74', // Red for received messages
                        '#FB3E7A' // Blue for sent messages
                    ]
                }]
            };

            new Chart(ctxDonut, {
                type: 'doughnut',
                data: data,
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                        },
                        title: {
                            display: true,
                            text: 'Message Distribution'
                        }
                    }
                }
            });

            const ctxDonut2 = document.getElementById('myDonutChart2');
            const data2 = {
                labels: ["{!! implode('" , "', array_values(__('user.message_statuses'))) !!}"],
                datasets: [{
                    label: 'Messages',
                    data: [{{ implode(',', $chartData['messages_statuses']) }}],
                    backgroundColor: [
                        'rgb(255, 205, 86)', // Orange for sent messages
                        'rgb(54, 162, 235)', // Blue for delivered messages
                        '#1ac9e6', // Cyan for read messages
                        'rgb(255, 99, 132)' // Red for failed messages
                    ],
                    borderWidth: 0
                }]
            };

            new Chart(ctxDonut2, {
                type: 'doughnut',
                data: data2,
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                        },
                        title: {
                            display: true,
                            text: 'Message Distribution'
                        }
                    }
                }
            });
            
            const ctx2 = document.getElementById('myChart2');
            new Chart(ctx2, {
                type: 'bar',
                data: {
                    labels: Array.from({
                        length: 24
                    }, (_, i) => i), // Hours of the day
                    datasets: [{
                        label: "{{ __('user.messages') }}",
                        data: [{{ implode(',', $chartData['messages_hourly']) }}],
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1,
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: "{{ __('user.number_of_messages') }}"
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: "{{ __('user.hour_of_the_day') }}"
                            }
                        }
                    },
                    legend: {
                        display: false
                    }
                }
            });
            
            const ctx5 = document.getElementById('myChart5');
            new Chart(ctx5, {
                type: 'bar',
                data: {
                    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16',
                            '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
                    datasets: [{
                        label: "{{ __('user.messages') }}",
                        data: [{{ implode(',', $chartData['messages_daily']) }}],
                        backgroundColor: 'rgba(153, 102, 255, 0.2)',
                        borderColor: 'rgb(153, 102, 255)',
                        borderWidth: 1,
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: "{{ __('user.number_of_messages') }}"
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: "{{ __('user.hour_of_the_day') }}"
                            }
                        }
                    },
                    legend: {
                        display: false
                    }
                }
            });
            
            const ctx3 = document.getElementById('myChart3');
            new Chart(ctx3, {
                type: 'bar',
                data: {
                    labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                    datasets: [{
                        label: "{{ __('user.messages') }}",
                        data: [{{ implode(',', $chartData['messages_week_day']) }}],
                        backgroundColor: [
                            '#027381',
                            '#0eb9cb',
                            '#ffc23d',
                            '#ff7751',
                            '#f33829',
                            '#c41e32',
                            '#4a0875'
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    legend: {
                        display: false
                    },
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display:false
                            }
                        }]
                    }
                }
            });
            
            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.messages') }}",
                        data: [{{ implode(',', $chartData['messages_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
                            }
                        }]
                    }
                }
            });
        });
    </script>
@endpush