@extends('layouts.base')
@section('heading')
    {{ __('Dashboard') }}
@endsection
@section('info')
    Analytical information
@endsection
{{-- @section('return-link')
    <div>
        <a href="{{ route('dashboard') }}">
            HOME
        </a>
    </div>
@endsection
@section('center-focus-activity')
    MIDDLE ACTION
@endsection
@section('seconday-activity')
<div class="inline">
    <form action="{{ route('processes.index') }}" method="get">
        <div class="inline-block mr-2">
            <input type="text" name="s" id="s" placeholder="process name" value="{{ $search_term ?? '' }}" class="rounded-lg h-7_">
        </div>
        <div class="inline-block mr-2">
            <button type="submit" class="w-full text-white rounded-lg py-2 px-3 bg-blue-500 hover:bg-blue-400">SEARCH</button>
        </div>
    </form>
</div>
@endsection --}}
{{-- @section('focus_action')
    <form action="" method="get">
        @csrf
        <button type="submit" class="text-sm text-blue-500 hover:text-blue-700">
            ADD A NEW PROCESS +
        </button>
    </form>
@endsection --}}
@section('body')
    <div>
        <div class="flex flex-row">

            <div class="w-full">
                <canvas id="myChart"></canvas>
            </div>

            <div class="w-full">
                <canvas id="myChart2"</canvas>
            </div>
        </div>
        <div class="m-auto py-6">
            <div>
                @php
                    $process_statistics = App\Classes\CamundaProcess::statistics();
                    $stats = $process_statistics->content;
                    // dump($stats, collect(json_decode($process_statistics->content)));

                    $total_tasks = collect(json_decode(App\Classes\CamundaTask::initClass()->tasksCount()->content))['count'] ?? 0;

                    $unassigned_tasks = collect(json_decode(App\Classes\CamundaTask::initClass()->add_parameters('unassigned', true)->tasksCount()->content))['count'] ?? 0;

                    $assigned_tasks = collect(json_decode(App\Classes\CamundaTask::initClass()->add_parameters('assigned', true)->tasksCount()->content))['count'] ?? 0;

                    // dump($total_tasks, $unassigned_tasks, $assigned_tasks);
                @endphp

                <div x-data="{ open: false }">
                    <input type="text" x-show="open" x-model_="total_tasks" name="total_tasks" id="total_tasks" value="{{ $total_tasks }}">
                    <input type="text" x-show="open" x-model_="assigned_tasks" name="assigned_tasks" id="assigned_tasks" value="{{ $assigned_tasks }}">
                    <input type="text" x-show="open" x-model_="unassigned_tasks" name="unassigned_tasks" id="unassigned_tasks" value="{{ $unassigned_tasks }}">

                    <input type="text" x-show="open" name="data" id="data" value="{{ $stats }}">
                </div>
            </div>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
            </script>
            <script>
                var statistics = document.getElementById('data').value;

                var stats = JSON.parse(statistics);


                var zArray = Array.from(stats, x => [x.instances, 40]);

                function get_instances_count(key) {
                    const sum = stats.reduce((accumulator, object) => {
                        if(object.definition.key == key) {
                            return accumulator + object.instances;
                        } else {
                            return accumulator;
                        }
                    }, 0);
                    // console.log(sum);
                    return sum;
                }
                const uniqueArr = [... new Set(stats.map(data => data.definition.key))];
                console.log(uniqueArr);

                var zArray = Array.from(uniqueArr, x => [ x, get_instances_count(x)] );


                console.log(zArray);
                console.log('zArray');

                // console.log(list);

                var yArray = Array.from(zArray, x => x[0]);
                var xArray = Array.from(zArray, x => x[1]);
                // var xArray = Array.from(stats, x => x.instances);
                // var yArray = Array.from(stats, x => x.definition.key);

                var barColors = [
                    "rgba(0,0,255,1.0)",
                    "rgba(0,0,255,0.8)",
                    "rgba(0,0,255,0.6)",
                    "rgba(0,0,255,0.4)",
                    "rgba(0,0,255,0.2)",
                    "rgba(0,0,255,0.2)",
                    "rgba(0,0,255,0.2)",
                    "rgba(0,0,255,0.2)",
                    "rgba(0,0,255,0.2)",
                ];
                var myChart = new Chart("myChart", {
                    type: "doughnut",
                    data: {
                        labels: yArray,
                        datasets: [{
                            backgroundColor: barColors,
                            borderColor: "rgba(0,0,0,0.1)",
                            data: xArray
                        }]
                    },
                    options: {
                        plugins: {
                            legend: {
                                display: false,
                                position: 'bottom',
                            }
                        }
                    }
                });
            </script>
            <script>
                var total_tasks = document.getElementById('total_tasks').value;
                var assigned_tasks = document.getElementById('assigned_tasks').value;
                var unassigned_tasks = document.getElementById('unassigned_tasks').value;

                var yArray = ["total tasks", "assigned tasks", "unassigned tasks"];

                var xArray = [total_tasks, assigned_tasks, unassigned_tasks];

                var barColors = [
                    "rgba(0,0,255,1.0)",
                    "rgba(0,0,255,0.8)",
                    "rgba(0,0,255,0.6)",
                    "rgba(0,0,255,0.4)",
                    "rgba(0,0,255,0.2)",
                ];
                var myChart = new Chart("myChart2", {
                    type: "doughnut",
                    data: {
                        labels: yArray,
                        datasets: [{
                            backgroundColor: barColors,
                            borderColor: "rgba(0,0,0,0.1)",
                            data: xArray
                        }]
                    },
                    options: {

                    }
                });
            </script>
        </div>

    </div>
@endsection