@extends('adminlte::page')

@section('title', 'SIGLV')

@section('content_header')

@stop

@section('content')
<div class="container-fluid">
    <div class="row pt-4">
        <div class="col-md-6">
            <h3><img src="{{ asset('vendor/adminlte/dist/img/logomarca.png') }}"> LV Distribuidora</h3>
        </div>
    </div>


    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0"><i class='fa fa-braille'></i> Dashboard LV</h1>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">

        <div class="row">

            <div class="col-lg-3 col-6">

                <div class="small-box bg-danger">
                    <div class="inner">
                        <h3>{{ $countPerspective }}</h3>
                        <p class="text-center"><i class="fas fa-car"></i> Previsão de material para hoje, à receber ou autorizado para distribuição!</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-car"></i>
                    </div>
                    <span class="small-box-footer">No sistema</span>
                </div>
            </div>

            <div class="col-lg-3 col-6">

                <div class="small-box bg-info">
                    <div class="inner">
                        <h3>{{ $countCustomer }}</h3>
                        <p><i class="fa fa-check"></i> Cliente(s)<br>
                        Cadastrado(s)</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-check"></i>
                    </div>
                    <span class="small-box-footer">No sistema</span>
                </div>
            </div>

            <div class="col-lg-3 col-6">

                <div class="small-box bg-success">
                    <div class="inner">
                        <h3>{{ $countUser }}</h3>
                        <p><i class="fas fa-user"></i> Usuário(s)<br>
                        Cadastrado(s)</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-user"></i>
                    </div>
                    <span class="small-box-footer">No sistema</span>
                </div>
            </div>

            <div class="col-lg-3 col-6">

                <div class="small-box bg-warning">
                    <div class="inner">
                        <h3>{{ $countCollaborator }}</h3>
                        <p><i class="fas fa-users"></i> Colaborador(s)<br>
                        Cadastrado(s)</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <span class="small-box-footer">No sistema</span>
                </div>
            </div>
        </div>

        <div class="row">
            
            <!-- GRAFICO DE PREVISÃO DE MATERIAL -->
            <section class="col-lg-7 connectedSortable">

                <div class="card">
                    
                    <div class="card-body">
                        <h5><i class="fas fa-chart-pie mr-1"></i> Mês atual: {{ $currentMonth }}</h5>
                        
                        <canvas id="myChart" width="400" max-height="282" style="min-height: 300px;"></canvas>
                        
                        <script>
                            let ctx = document.getElementById('myChart').getContext('2d');
                            let chartData = @json($chartData);
                            let labels = chartData.map(item => item.fantasy_name + ' - ' + item.qtd);
                            let data = chartData.map(item => item.count);

                            let myChart = new Chart(ctx, {
                                type: 'bar',
                                //type: 'line',
                                //type: 'pie',
                                //type: 'doughnut',
                                //type: 'radar',
                                //type: 'area',
                                //type: 'bubble',
                                data: {
                                    labels: labels,
                                    datasets: [{
                                        label: 'Previsão de material do mês atual',
                                        data: data,
                                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                                        borderColor: 'rgba(75, 192, 192, 1)',
                                        borderWidth: 1
                                    }]
                                },
                                options: {
                                    // Configurações adicionais do Chart.js
                                }
                            });
                        </script>
                    </div>
                </div>

            </section>
            
            <!-- GRAFICO DE DISTRIBUIÇÃO -->
            <section class="col-lg-5 connectedSortable">

                <div class="card">
                    
                    <div class="card-body">
                        <p><i class="fas fa-car"></i> Total distribuido nos últimos 5 meses</p>

                        <canvas id="distributionChart" width="400" height="282" style="min-height: 300px;"></canvas>

                        <script>
                            // Obtenha os dados do PHP para o gráfico de distribuição
                            let distributionData = {!! json_encode($chartDataDistribution) !!};

                            // Trate os dados corretamente
                            let months = distributionData.map(item => item.month);
                            let distributionSums = distributionData.map(item => item.sum); // Use 'sum' em vez de 'count'

                            // Configuração do gráfico de distribuição
                            let distributionChartCanvas = document.getElementById('distributionChart').getContext('2d');
                            let distributionChart = new Chart(distributionChartCanvas, {
                                type: 'line',
                                data: {
                                    labels: months,
                                    datasets: [{
                                        label: 'Total distribuído',
                                        data: distributionSums, // Altere para a soma
                                        backgroundColor: 'rgba(255, 0, 0, 0.2)', // Vermelho forte com opacidade
                                        borderColor: 'rgba(255, 0, 0, 1)', // Vermelho forte sem opacidade
                                        borderWidth: 1
                                    }]
                                },
                                options: {
                                    scales: {
                                        y: {
                                            beginAtZero: true
                                        }
                                    }
                                }
                            });
                        </script>

                    </div>
                </div>

            </section>

        </div>

    </div>
</div>
@stop