@extends('layouts.app')

@section('content')
<main class="sm:container sm:mx-auto sm:mt-10 bg-gray-100 antialiased leading-none flex flex-col justify-between flex-1">
    <div class="w-full sm:px-6">
        
        {{-- INÍCIO SECTION --}}
        <section class="flex flex-col break-words bg-white sm:border-1 sm:rounded-md sm:shadow-lg">

            {{-- INÍCIO HEADER --}}
            <header class="font-semibold bg-gray-200 text-gray-700 py-5 px-6 sm:py-6 sm:px-8 sm:rounded-t-md flex md:justify-between justify-center md:flex-row flex-col gap-2 md:gap-0">
                <span class="md:block hidden">
                    Relatórios
                </span>
                <p class="text-gray-700 text-right">
                    <b>{{ Auth::user()->name }}</b>, Este é o Painel de Relatório do Sistema!
                </p>
            </header>
            {{-- FIM HEADER --}}

            <div class="w-full p-6 mb-16">

                {{-- INÍCIO CORPO DO DASHBOARD --}}


                <div class="flex flex-col justify-start h-full">

                        <h1 class="mb-6 text-gray-600 text-center font-light tracking-wider text-4xl sm:mb-8 sm:text-6xl md:pb-14 border-b">
                            Painel de Relatórios
                        </h1>

                        {{-- INÍCIO ESTILO DE GRID DE DASHBOARD --}}
                        <div class="grid md:grid-cols-2 grid-cols-1 gap-x-28 gap-y-5">
                            
                            {{-- INÍCIO CHART.JS --}}                            
                            <div>
                                <div class="flex-1">
                                    <canvas id="myChart" width="800" height="400"></canvas>
                                </div>


                             <!-- Required chart.js -->
                            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
                            <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
                            
                            <script>
                            const ctx = document.getElementById('myChart');
                            const myChart = new Chart(ctx, {
                                type: 'bar',
                                data: {
                                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                                    datasets: [{
                                        label: '# of Votes',
                                        data: [12, 19, 3, 5, 2, 3],
                                        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)',
                                            'rgba(153, 102, 255, 0.2)',
                                            'rgba(255, 159, 64, 0.2)'
                                        ],
                                        borderColor: [
                                            'rgba(255, 99, 132, 1)',
                                            'rgba(54, 162, 235, 1)',
                                            'rgba(255, 206, 86, 1)',
                                            'rgba(75, 192, 192, 1)',
                                            'rgba(153, 102, 255, 1)',
                                            'rgba(255, 159, 64, 1)'
                                        ],
                                        borderWidth: 1
                                    }]
                                },
                                options: {
                                    scales: {
                                        y: {
                                            beginAtZero: true
                                        }
                                    }
                                }
                            });
                            </script>
                            </div>
                            {{-- FIM CHART.JS --}}

                        </div>
                        {{-- FIM ESTILO DE GRID DE DASHBOARD --}}
                </div>

                {{-- FIM CORPO DO DASHBOARD --}}

            </div>
        </section>
        {{-- FIM SECTION --}}

    </div>
</main>

{{-- INÍCIO FOOTER --}}
<footer>

    <x-footer>

    </x-footer>

</footer>
{{-- FIM FOOTER --}}

@endsection