@extends('home')


@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="w-100">
                <div class="card">
                    <div class="card-header d-100">{{ __('Dashboard') }}</div>

                    <div class="card-body">
                        @if (session('status'))
                            <div class="alert alert-success" role="alert">
                                {{ session('status') }}
                            </div>
                        @endif

                        <div class="w-100 flex-column flex-md-row  d-flex gap-3 p-2 flex-wrap">

                            <div class="card" id="chart_div1"></div>

                            <div class="card" id="chart_div2"></div>

                            <div class="card" id="chart_count_user_movement"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <script type="text/javascript">
            // Load the Visualization API and the corechart package.
            google.charts.load('current', {
                'packages': ['corechart']
            });

            // Set a callback to run when the Google Visualization API is loaded.
            google.charts.setOnLoadCallback(drawChart);

            // Callback that creates and populates a data table,
            // instantiates the pie chart, passes in the data and
            // draws it.

            function addChartCategory() {

                // Create the data table 1.
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Topping');
                data.addColumn('number', 'Slices');

                const productTypes = {}

                @foreach ($movimentos as $movimento)
                    @foreach ($movimento->movement_products as $produto)

                        @if ($produto->product->product)
                            if (productTypes['{{ $produto->product->product->type->category->name }}']) {
                                productTypes['{{ $produto->product->product->type->category->name }}'] += 1
                            } else {

                                productTypes['{{ $produto->product->product->type->category->name }}'] = 1
                            }
                        @else
                            if (productTypes['{{ $produto->product->type->category->name }}']) {
                                productTypes['{{ $produto->product->type->category->name }}'] += 1
                            } else {

                                productTypes['{{ $produto->product->type->category->name }}'] = 1
                            }
                        @endif
                    @endforeach
                @endforeach

                data.addRows(Object.keys(productTypes).map((key) => {
                    return [key, productTypes[key]];
                }));

                // Set chart options
                var options = {
                    'title': 'Movimentação de produtos por categoria',
                    'width': 500,
                    'height': 400,
                    'is3D': true
                };

                // Instantiate and draw our chart, passing in some options.
                var chart_category = new google.visualization.PieChart(document.getElementById('chart_div1'));
                chart_category.draw(data, options);
            }

            function addChartType() {

                // Create the data table 2.
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Topping');
                data.addColumn('number', 'Slices');
                const typeData = {
                    {{ __('moviment.input') }}: 0,
                    {{ __('moviment.output') }}: 0,
                    {{ __('moviment.return') }}: 0,
                    {{ __('moviment.drop') }}: 0
                };

                @foreach ($movimentos as $movimento)
                    typeData["{{ __('moviment.' . $movimento->type) }}"] += 1
                @endforeach
                data.addRows(
                    Object.keys(typeData).map((key) => {
                        return [key, typeData[key]];
                    })

                );

                // Set chart options
                var options = {
                    'title': 'Movimentação de produtos por tipo',
                    'width': 500,
                    'height': 400,
                    'is3D': true
                };
                // Instantiate and draw our chart, passing in some options.
                var chart = new google.visualization.PieChart(document.getElementById('chart_div2'));
                chart.draw(data, options);

            }

            function addChartUser() {

                //chart movement by user
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Topping');
                data.addColumn('number', 'Slices');
                const typeUser = {};

                @foreach ($usuarios as $usuario)

                    typeUser["{{ $usuario->name }}"] = {{ $usuario->movements->count() }}
                @endforeach
                data.addRows(
                    Object.keys(typeUser).map((key) => {
                        return [key, typeUser[key]];
                    })

                );
                // Set chart options
                var options = {
                    'title': 'Movimentação de produtos por Usuário',
                    'width': 500,
                    'height': 400,
                    'is3D': true
                };

                // Instantiate and draw our chart, passing in some options.
                var chart = new google.visualization.PieChart(document.getElementById('chart_count_user_movement'));
                chart.draw(data, options);

            }

            function drawChart() {

                addChartCategory()
                addChartType()
                addChartUser()

            }
        </script>
    @endsection