@extends('layouts.app')

@section('header')
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
    Admin Dashboard
</h2>
@endsection

@section('content')
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
        <div class="p-6 text-gray-900">
            Welcome, Admin! Here you can manage roles, users, and departments.
        </div>
    </div>

    <!-- Graphs Section -->
    <div class="mt-6">
        <h3 class="text-lg font-semibold">Analytics</h3>
        <div id="graphs-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-4">
            <div class="bg-white p-4 shadow rounded">
                <h4 class="text-md font-semibold mb-4">Activities Attended by Department</h4>
                <canvas id="activitiesAttendedChart"></canvas>
            </div>
            <div class="bg-white p-4 shadow rounded">
                <h4 class="text-md font-semibold mb-4">Activities Organised by Department</h4>
                <canvas id="activitiesOrganisedChart"></canvas>
            </div>
            <div class="bg-white p-4 shadow rounded">
                <h4 class="text-md font-semibold mb-4">Iv Organised by Department</h4>
                <canvas id="ivOrganisedChart"></canvas>
            </div>
            <div class="bg-white p-4 shadow rounded">
                <h4 class="text-md font-semibold mb-4">Publications by Department</h4>
                <canvas id="publicationsChart"></canvas>
            </div>
            <div class="bg-white p-4 shadow rounded">
                <h4 class="text-md font-semibold mb-4">Books Published by Department</h4>
                <canvas id="booksPublishedChart"></canvas>
            </div>
            <div class="bg-white p-4 shadow rounded">
                <h4 class="text-md font-semibold mb-4">External Engagement by Department</h4>
                <canvas id="externalEngagementChart"></canvas>
            </div>
            <div class="bg-white p-4 shadow rounded">
                <h4 class="text-md font-semibold mb-4">Online Course by Department</h4>
                <canvas id="onlineCourseChart"></canvas>
            </div>
            <div class="bg-white p-4 shadow rounded">
                <h4 class="text-md font-semibold mb-4">Patents by Department</h4>
                <canvas id="patentsChart"></canvas>
            </div>
            <!-- Add more charts as needed -->
        </div>
    </div>
</div>
@endsection

<!-- <style>
    #graphs-container canvas {
        max-width:500px; /* Set a maximum width for each graph */
        max-height:500px; /* Set a maximum height for each graph */
        margin: auto; /* Center the graphs */
    }
</style> -->

@section('scripts')

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Fetch data for Activities Attended
        fetch("{{ route('admin.analytics.activitiesAttended') }}")
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('activitiesAttendedChart').getContext('2d');
                new Chart(ctx, {
                    type: 'pie', // Changed to pie chart
                    data: {
                        labels: data.labels,
                        datasets: [{
                            label: 'Activities Attended',
                            data: data.values,
                            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)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    plugins: [ChartDataLabels],
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'bottom',
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(tooltipItem) {
                                        return `${tooltipItem.label}: ${tooltipItem.raw}`;
                                    }
                                }
                            },
                            datalabels: {
                                color: '#000',
                                font: {
                                    weight: 'bold'
                                },
                                formatter: (value, ctx) => {
                                    return value;
                                }
                            }
                        }
                    }
                });

                // Display total for Activities Attended
                const activitiesTotal = document.createElement('p');
                activitiesTotal.textContent = `Total: ${data.total}`;
                activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
                document.getElementById('activitiesAttendedChart').parentElement.appendChild(activitiesTotal);
            });

        // Fetch data for Books Published
        fetch("{{ route('admin.analytics.booksPublished') }}")
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('booksPublishedChart').getContext('2d');
                new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            label: 'Books Published',
                            data: data.values,
                            // backgroundColor: 'rgba(153, 102, 255, 0.2)',
                            // borderColor: 'rgba(153, 102, 255, 1)',
                            borderWidth: 1
                        }]
                    },
                    plugins: [ChartDataLabels],
                    options: {
                        plugins: {
                            legend: {
                                position: 'bottom',
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(tooltipItem) {
                                        return `${tooltipItem.label}: ${tooltipItem.raw}`;
                                    }
                                }
                            },
                            datalabels: {
                                color: '#000',
                                font: {
                                    weight: 'bold'
                                },
                                formatter: (value, ctx) => {
                                    return value;
                                }
                            }
                        },
                        responsive: true,
                    }
                });
                const activitiesTotal = document.createElement('p');
                activitiesTotal.textContent = `Total: ${data.total}`;
                activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
                document.getElementById('booksPublishedChart').parentElement.appendChild(activitiesTotal);
            });

        // Fetch data for Publications
        fetch("{{ route('admin.analytics.paperPublished') }}")
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('publicationsChart').getContext('2d');
                new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            label: 'Papers Published',
                            data: data.values,
                            // backgroundColor: 'rgba(153, 102, 255, 0.2)',
                            // borderColor: 'rgba(153, 102, 255, 1)',
                            borderWidth: 1
                        }]
                    },
                    plugins: [ChartDataLabels],
                    options: {
                        plugins: {
                            legend: {
                                position: 'bottom',
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(tooltipItem) {
                                        return `${tooltipItem.label}: ${tooltipItem.raw}`;
                                    }
                                }
                            },
                            datalabels: {
                                color: '#000',
                                font: {
                                    weight: 'bold'
                                },
                                formatter: (value, ctx) => {
                                    return value;
                                }
                            }
                        },
                        responsive: true,
                    }
                });
                const activitiesTotal = document.createElement('p');
                activitiesTotal.textContent = `Total: ${data.total}`;
                activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
                document.getElementById('publicationsChart').parentElement.appendChild(activitiesTotal);
            });

        fetch("{{ route('admin.analytics.activitiesOrganised') }}")
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('activitiesOrganisedChart').getContext('2d');
                new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            label: 'Activities Organised',
                            data: data.values,
                            // backgroundColor: 'rgba(153, 102, 255, 0.2)',
                            // borderColor: 'rgba(153, 102, 255, 1)',
                            borderWidth: 1
                        }]
                    },
                    plugins: [ChartDataLabels],
                    options: {
                        plugins: {
                            legend: {
                                position: 'bottom',
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(tooltipItem) {
                                        return `${tooltipItem.label}: ${tooltipItem.raw}`;
                                    }
                                }
                            },
                            datalabels: {
                                color: '#000',
                                font: {
                                    weight: 'bold'
                                },
                                formatter: (value, ctx) => {
                                    return value;
                                }
                            }
                        },
                        responsive: true,
                    }
                });
                const activitiesTotal = document.createElement('p');
                activitiesTotal.textContent = `Total: ${data.total}`;
                activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
                document.getElementById('activitiesOrganisedChart').parentElement.appendChild(activitiesTotal);
            });

        fetch("{{ route('admin.analytics.ivOrganised') }}")
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('ivOrganisedChart').getContext('2d');
                new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            label: 'Iv Organised',
                            data: data.values,
                            // backgroundColor: 'rgba(153, 102, 255, 0.2)',
                            // borderColor: 'rgba(153, 102, 255, 1)',
                            borderWidth: 1
                        }]
                    },
                    plugins: [ChartDataLabels],
                    options: {
                        plugins: {
                            legend: {
                                position: 'bottom',
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(tooltipItem) {
                                        return `${tooltipItem.label}: ${tooltipItem.raw}`;
                                    }
                                }
                            },
                            datalabels: {
                                color: '#000',
                                font: {
                                    weight: 'bold'
                                },
                                formatter: (value, ctx) => {
                                    return value;
                                }
                            }
                        },
                        responsive: true,
                    }
                });
                const activitiesTotal = document.createElement('p');
                activitiesTotal.textContent = `Total: ${data.total}`;
                activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
                document.getElementById('ivOrganisedChart').parentElement.appendChild(activitiesTotal);
            });

        fetch("{{ route('admin.analytics.externalEngagement') }}")
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('externalEngagementChart').getContext('2d');
                new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            label: 'External Engagement',
                            data: data.values,
                            // backgroundColor: 'rgba(153, 102, 255, 0.2)',
                            // borderColor: 'rgba(153, 102, 255, 1)',
                            borderWidth: 1
                        }]
                    },
                    plugins: [ChartDataLabels],
                    options: {
                        plugins: {
                            legend: {
                                position: 'bottom',
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(tooltipItem) {
                                        return `${tooltipItem.label}: ${tooltipItem.raw}`;
                                    }
                                }
                            },
                            datalabels: {
                                color: '#000',
                                font: {
                                    weight: 'bold'
                                },
                                formatter: (value, ctx) => {
                                    return value;
                                }
                            }
                        },
                        responsive: true,
                    }
                });
                const activitiesTotal = document.createElement('p');
                activitiesTotal.textContent = `Total: ${data.total}`;
                activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
                document.getElementById('externalEngagementChart').parentElement.appendChild(activitiesTotal);
            });

        fetch("{{ route('admin.analytics.onlineCourse') }}")
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('onlineCourseChart').getContext('2d');
                new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            label: 'Online Course',
                            data: data.values,
                            // backgroundColor: 'rgba(153, 102, 255, 0.2)',
                            // borderColor: 'rgba(153, 102, 255, 1)',
                            borderWidth: 1
                        }]
                    },
                    plugins: [ChartDataLabels],
                    options: {
                        plugins: {
                            legend: {
                                position: 'bottom',
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(tooltipItem) {
                                        return `${tooltipItem.label}: ${tooltipItem.raw}`;
                                    }
                                }
                            },
                            datalabels: {
                                color: '#000',
                                font: {
                                    weight: 'bold'
                                },
                                formatter: (value, ctx) => {
                                    return value;
                                }
                            }
                        },
                        responsive: true,
                    }
                });
                const activitiesTotal = document.createElement('p');
                activitiesTotal.textContent = `Total: ${data.total}`;
                activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
                document.getElementById('onlineCourseChart').parentElement.appendChild(activitiesTotal);
            });

        fetch("{{ route('admin.analytics.patent') }}")
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('patentsChart').getContext('2d');
                new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            label: 'Online Course',
                            data: data.values,
                            // backgroundColor: 'rgba(153, 102, 255, 0.2)',
                            // borderColor: 'rgba(153, 102, 255, 1)',
                            borderWidth: 1
                        }]
                    },
                    plugins: [ChartDataLabels],
                    options: {
                        plugins: {
                            legend: {
                                position: 'bottom',
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(tooltipItem) {
                                        return `${tooltipItem.label}: ${tooltipItem.raw}`;
                                    }
                                }
                            },
                            datalabels: {
                                color: '#000',
                                font: {
                                    weight: 'bold'
                                },
                                formatter: (value, ctx) => {
                                    return value;
                                }
                            }
                        },
                        responsive: true,
                    }
                });
                const activitiesTotal = document.createElement('p');
                activitiesTotal.textContent = `Total: ${data.total}`;
                activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
                document.getElementById('patentsChart').parentElement.appendChild(activitiesTotal);
            });
    });
</script>
@endsection