@extends('layouts.app')
@section('content')
    <div class="row">
        <div class="col-12 text-center">
            <h1 class="text-success">Выполнение плана по сдаче МАФ</h1>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-4">
            <div class="text-center text-success fs-4 fw-bold" >
               {{ $totalMafs }} / {{ $totalOrders }}
            </div>
            <div class="text-center">
                Всего МАФ / Площадок
            </div>
        </div>
        <div class="col-4">
            <div class="text-center text-success fs-4 fw-bold" >
               {{ $doneMafs }} / {{ $doneOrders }}
            </div>
            <div class="text-center">
                Сдано МАФ / Площадок
            </div>
        </div>
        <div class="col-md-4">
            <div class="text-center text-success fs-4 fw-bold" >
               {!! $totalSum !!}
            </div>
            <div class="text-center">
                Сдано на сумму
            </div>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-4 offset-md-1">
            <canvas id="total_orders" class="p-4 m-4"></canvas>
        </div>

        <div class="col-md-6 offset-md-1">
            <canvas id="order_types"></canvas>
        </div>
    </div>


    @dump(get_defined_vars())

@endsection

@php
    $notDone = $labels = '';
    foreach ($doneMafsType as $id => $count) {
        $labels .= '"' . $objectTypes[$id] . ' (' . $doneMafsType[$id] .'/'. $notDoneMafsType[$id] . ')",';
        $notDone .= '[' . $totalMafsType[$id] . ', ' . $doneMafsType[$id] . '],';
    }
@endphp

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const ctx = document.getElementById('order_types');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [{!! $labels  !!}],
                datasets: [
                    {
                        label: 'Сдано',
                        data: [{{ implode(',', $doneMafsType) }}],
                        borderWidth: 1,
                        backgroundColor: [
                            'rgb(114,180,150)',
                        ],
                        grouped: false,
                    },
                    {
                        label: 'Осталось сдать',
                        data: [{{ $notDone }}],
                        borderWidth: 1,
                        backgroundColor: [
                            'rgb(251,215,105)',
                        ],
                        grouped: false,
                    }
                ]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },

            }
        });

        // круговая диаграмма
        const circleDiag = document.getElementById('total_orders');
        new Chart(circleDiag, {
            type: 'doughnut',
            data: {
                labels: ['Сдано', 'Осталось сдать'],
                datasets: [{
                    data: [{{ $doneMafs }}, {{ $totalMafs - $doneMafs }}],
                    backgroundColor: [
                        'rgb(114,180,150)',
                        'rgb(251,215,105)',
                    ]
                }],

            },
        });


    </script>
@endpush