@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <div class="row">
        <div class="col-12">
            <h1>Bem vindo, {{$nome}} 
        </div>
    </div>
@stop

@section('content')
    @if(Session::has('error'))
        @php
            $data = Session::get('error');
        @endphp

        @if (is_array($data))
            @foreach ($data as $msg)
                <div class="alert alert-danger" role="alert">
                    <i class="fa fa-times"></i>
                    {{ $msg }}
                </div>
            @endforeach
        @else
            <div class="alert alert-danger" role="alert">
                <i class="fa fa-times"></i>
                {{ $data }}
            </div>
        @endif
    @endif

    <div class="row mb-3">
        <div class="col-md-4">
            <a href="{{route('clients.index')}}" class="btn btn-primary btn-lg btn-block btn-square">
                <i class="fas fa-user-plus"></i><br>Cadastro de Cliente
            </a>
        </div>
        <div class="col-md-4">
            <a href="{{route('products.index')}}" class="btn btn-success btn-lg btn-block btn-square">
                <i class="fas fa fa-archive"></i><br>Cadastro de Produtos
            </a>
        </div>
        <div class="col-md-4">
            <a href="{{route('suppliers.index')}}" class="btn btn-info btn-lg btn-block btn-square">
                <i class="fas fa-truck"></i><br>Cadastro de Fornecedor
            </a>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-4">
            <a href="{{route('sales.index')}}" class="btn btn-primary btn-lg btn-block btn-square">
                <i class="fas fa fa-shopping-cart"></i><br>Vendas
            </a>
        </div>
        <div class="col-md-4">
            <a href="{{route('lancamentodeestoques.index')}}" class="btn btn-success btn-lg btn-block btn-square">
                <i class="fas fa fa-box"></i><br>Lançamento de Estoque
            </a>
        </div>
        <div class="col-md-4">
            <a href="{{route('consignacoes.index')}}" class="btn btn-info btn-lg btn-block btn-square">
                <i class="fas fa fa-cubes"></i><br>Consignação
            </a>
        </div>
    </div>
    <div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <i class="fas fa-chart-line"></i>
                Gráfico Semestral de Vendas (R$)
                <div class="row">
                    <div class="col-12">
                        <canvas id="salesChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <i class="fas fa-chart-bar"></i>
                Gráfico Semestral de Quantidade de Vendas
                <div class="row">
                    <div class="col-12">
                        <canvas id="salesQuantityChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
    <style>
         .btn-square {
            border-radius: 0 !important;
        }
        .btn-square i {
            font-size: 30px;
            margin-bottom: 10px;
        }
    </style>
@stop

@section('js')

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        $(document).ready(function() {
            $.ajax({
                url: '/buscar-salesValor',
                dataType: 'json',
                success: function(salesData) {
                    var Nomes = salesData.map(function (sale) {
                        var Meses = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
                        var Mes = Meses[sale.month - 1];
                        return Mes;
                    });

                    var data = salesData.map(function (sale) {
                        return sale.total;
                    });

                    // Inicializar o gráfico
                    var ctx = document.getElementById('salesChart').getContext('2d');
                    var salesChart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: Nomes,
                            datasets: [{
                                label: 'Valor de Vendas (R$)',
                                data: data,
                                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                                borderColor: 'rgba(54, 162, 235, 1)',
                                borderWidth: 1
                            }]
                        },
                        options: {
                            responsive: true,
                            scales: {
                                x: {
                                    beginAtZero: true
                                },
                                y: {
                                    beginAtZero: true
                                }
                            },
                            plugins: {
                                tooltip: {
                                    callbacks: {
                                        label: function(context) {
                                            return 'R$ ' + context.raw.toFixed(2);
                                        }
                                    }
                                }
                            }
                        }
                    });
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error('Erro ao buscar os dados:', textStatus, errorThrown);
                }
            });
        });

        $(document).ready(function() {
            $.ajax({
                url: '/buscar-salesQuantidade',
                dataType: 'json',
                success: function(salesData) {
                    var Nomes = salesData.map(function (sale) {
                        var Meses = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
                        var Mes = Meses[sale.month - 1];
                        return Mes;
                    });

                    var quantityData = salesData.map(function (sale) {
                        return sale.total;
                    });

                    // Inicializar o gráfico
                    var ctx2 = document.getElementById('salesQuantityChart').getContext('2d');
                    var quantityChart = new Chart(ctx2, {
                        type: 'bar',
                        data: {
                            labels: Nomes,
                            datasets: [{
                                label: 'Quantidade de Vendas',
                                data: quantityData,
                                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                                borderColor: 'rgba(255, 99, 132, 1)',
                                borderWidth: 1
                            }]
                        },
                        options: {
                            responsive: true,
                            scales: {
                                x: {
                                    beginAtZero: true
                                },
                                y: {
                                    beginAtZero: true
                                }
                            },
                            plugins: {
                                tooltip: {
                                    callbacks: {
                                        label: function(context) {
                                            return 'Quantidade: ' + context.raw;
                                        }
                                    }
                                }
                            }
                        }
                    });
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error('Erro ao buscar os dados:', textStatus, errorThrown);
                }
            });
        });
    </script>

@stop