@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">

        @if (session('status'))
            <div class="text-sm border border-t-8 rounded text-green-700 border-green-600 bg-green-100 px-3 py-4 mb-4" role="alert">
                {{ session('status') }}
            </div>
        @endif

        <section class="flex flex-col break-words bg-white sm:border-1 sm:rounded-md sm:shadow-lg">

            <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">
                    Painel Principal
                </span>
                <p class="text-gray-700 text-right">
                    Seja bem vindo <b>{{ ucfirst(trans(Auth::user()->name)) }}</b>, Você está Logado!<br>
                    Você é do setor: <b>{{ \App\Models\Setor::where('id', Auth::user()->setor)->first()->nome }}</b>
                </p>
            </header>

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

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


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

                        <h2 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 Principal
                        </h2>

                        {{-- Grids --}}
                        <div class="grid md:grid-cols-1 lg:grid-cols-2 grid-cols-1 gap-x-28 gap-y-5">

                            {{-- Area dos Usuarios --}}
                            <div>
                                <h3 class="font-bold p-2 pb-4">
                                    Usuários (Administradores do Sistema):
                                </h3>

                                <div class="grid gap-3 flex-wrap md:grid-cols-3 grid-cols-2">
                                    <div class="w-full p-5 border flex flex-col rounded hover:bg-blue-200 transition-colors min-w-min-content">
                                        <a href="{{ route('register') }}" class="w-full  flex flex-col items-center gap-5 my-auto">
                                            <div class="p-4 bg-blue-500 w-fit rounded-full">
                                                <x-bi-person-plus-fill class="w-6 h-6 text-zinc-100" />
                                            </div>
                                            <span class="text-zinc-700 font-bold">
                                                Criar Usuário
                                            </span>
                                        </a>
                                    </div>

                                    <div class="w-full p-5 border flex flex-col rounded hover:bg-blue-200 transition-colors flex-1 min-w-min-content">
                                        <a href="{{ route('usuario-show') }}" class="w-full  flex flex-col items-center gap-5">
                                            <div class="p-4 bg-blue-500 w-fit rounded-full">
                                                <x-bi-person-fill class="w-6 h-6 text-zinc-100" />
                                            </div>
                                            <span class="text-zinc-700 font-bold">

                                                    Listar Usuários

                                            </span>
                                        </a>
                                    </div>

                                    {{-- Link Funarte --}}

                                    <div class="w-full p-5 border flex flex-col rounded hover:bg-blue-200 transition-colors flex-1 min-w-min-content">

                                        <a href="https://www.gov.br/funarte/pt-br" title="Funarte">
                                            <div class="w-full  flex flex-col items-center gap-5">
                                                <div class="p-4  w-fit rounded-full">
                                                    <img src="{{ asset('img/Brasil.png') }}" alt="Funarte" class="w-6 h-6" />
                                                </div>
                                                <span class="text-zinc-700 font-bold text-center">
                                                    Website Funarte
                                                </span>
                                            </div>
                                        </a>

                                    </div>
                                </div>

                                                        {{-- INÍCIO CHART.JS --}} 
                        <div class="chart-container mt-6 flex-1 flex flex-col border-t pt-5">                         
                        
                            <div class="flex justify-between p-2 pb-4">
                                <h3 class="font-bold ">
                                    Gráfico de Registros:
                                </h3>

                                <span>
                                  Administradores Cadastrados:  {{ $administradores }}
                                </span>
                            </div>
                            <div class="flex-1 flex items-center justify-center">
                                <div class="flex-1 max-w-md pt-2">
                                    <canvas id="myChart"></canvas>
                                </div>
                            </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: 'doughnut',
                            data: {
                                labels: ['Comissão de Julgamento', 'Capacitação', 'Contratados'],
                                datasets: [{
                                    label: 'Gráfico de Registros',
                                    data: [ {{ $credenciados_comissao }},  {{ $credenciados_capacitacao }}, {{ $contratacoes }}],
                                    backgroundColor: [
                                        'rgba(27, 38, 79, 1)',
                                        'rgba(1, 186, 239, 1)',
                                        'rgba(255, 201, 20, 0.8)'
                                        
                                    ],
                                    borderColor: [
                                        'rgba(27, 38, 79, 1)',
                                        'rgba(1, 186, 239, 1)',
                                        'rgba(255, 201, 20, 0.8)'
                                        
                                    ],
                                    borderWidth: 1
                                }]
                            },
                        });
                        </script>
                        
                        </div>
                        {{-- FIM CHART.JS --}}

                            </div>

                        <div>

                            {{-- Area dos Credenciados --}}

                            <h3 class="font-bold p-2 pb-4">
                                Credenciados:
                            </h3>
                            
                            <div class="grid gap-3 flex-wrap  md:grid-cols-3 grid-cols-2">
                                    @foreach ($listagens as $listagem)
                                        <div class="w-full p-5 border flex flex-col rounded hover:bg-blue-200 transition-colors flex-1 min-w-min-content">
                                            <a href="{{ route('listar-credenciados', $listagem->slug) }}" class="w-full  flex flex-col items-center gap-5">
                                                <div class="p-4 bg-blue-500 w-fit rounded-full">
                                                    <x-pepicon-persons class="w-6 h-6 text-zinc-100" />
                                                </div>
                                                <span class="text-zinc-700 font-bold text-center">

                                                        Listar Credenciados - {{$listagem->nome}}

                                                </span>
                                            </a>
                                        </div>
                                    @endforeach

                                <div class="w-full p-5 border flex flex-col rounded hover:bg-blue-200 transition-colors flex-1 min-w-min-content">
                                    <a href="{{ route('credenciado-index') }}" class="w-full  flex flex-col items-center gap-5">
                                        <div class="p-4 bg-blue-500 w-fit rounded-full">
                                            <x-pepicon-person-plus class="w-6 h-6 text-zinc-100" />
                                        </div>
                                        <span class="text-zinc-700 font-bold text-center">

                                                Adicionar Credenciado

                                        </span>
                                    </a>
                                </div>
                                <div class="w-full p-5 border flex flex-col rounded hover:bg-blue-200 transition-colors flex-1 min-w-min-content">
                                    <a href="{{ route('listar-contratacao') }}" class="w-full  flex flex-col items-center gap-5">
                                        <div class="p-4 bg-blue-500 w-fit rounded-full">
                                            <x-pepicon-persons class="w-6 h-6 text-zinc-100" />
                                        </div>
                                        <span class="text-zinc-700 font-bold text-center">

                                                Listar Contratados

                                        </span>
                                    </a>
                                </div>

                            </div>
                        </div>

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

            </div>
                                       
        </section>
        
    </div>

</main>

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

    <x-footer>

    </x-footer>

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

@endsection