@extends('layouts.app')

@php
    $labels_manager = $notDone = $labels = '';
    $la = [];
    foreach ($mountMafsType as $id => $count) {
        $la[] = $objectTypes[$id] . ' ' . $mountMafsType[$id] .'/'. $notMountMafsType[$id];
        $labels .= '"' . $objectTypes[$id] . ' (' . $mountMafsType[$id] .'/'. $notMountMafsType[$id] . ')",';
        $notDone .= '[' . $totalMafsType[$id] . ', ' . $mountMafsType[$id] . '],';
    }

    foreach ($doneMafsManager as $id => $count) {
        $labels_manager .= '"' . $managers[$id] . ' (' . $doneMafsManager[$id] .'/'. $notDoneMafsManager[$id] . ')",';
    }

@endphp

@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-xl-4 mb-2">
            <div class="text-center text-success fs-4 fw-bold" >
               {{ $totalMafs }} / {{ $totalOrders }}
            </div>
            <div class="text-center">
                Всего МАФ / Площадок
            </div>
        </div>
        <div class="col-xl-4 mb-2">
            <div class="text-center text-success fs-4 fw-bold" >
               {{ $mountMafs }} / {{ $mountOrders }}
            </div>
            <div class="text-center">
                Установлено МАФ / Площадок
            </div>
        </div>
        <div class="col-xl-4 mb-2">

            <div class="text-center text-success fs-6 fw-bold" >
                {{ implode('; ', $la) }}
            </div>
            <div class="text-center">
                Установлено по типам объекта
            </div>
        </div>
    </div>
    <hr>
    <div class="row align-items-center">
        <div class="col-xl-6">
            <div class="mx-5 px-5 mb-3">
                <canvas id="total_orders" class="mx-4"></canvas>
            </div>
        </div>

        <div class="col-xl-6 ">
            <div class=" mb-3">
                <canvas id="order_types" class="mx-4"></canvas>
            </div>
        </div>
    </div>
    <hr>


    <div class="row">
        <div class="col-12 text-center">
            <h1 class="text-success">Выполнение плана по сдаче МАФ</h1>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-xl-4">
            <div class="text-center text-success fs-4 fw-bold" >
               {{ $totalMafs }} / {{ $totalOrders }}
            </div>
            <div class="text-center">
                Всего МАФ / Площадок
            </div>
        </div>
        <div class="col-xl-4">
            <div class="text-center text-success fs-4 fw-bold" >
               {{ $doneMafs }} / {{ $doneOrders }}
            </div>
            <div class="text-center">
                Сдано МАФ / Площадок
            </div>
        </div>
        <div class="col-xl-4">
            <div class="text-center text-success fs-4 fw-bold" >
               {!! $totalSum !!}
            </div>
            <div class="text-center">
                Сдано на сумму
            </div>
        </div>
    </div>
    <hr>
    <div class="row align-items-center">
        <div class="col-xl-6 align-middle">
            <div class="mx-5 px-5 mb-3">
                <canvas id="done_orders" class="mx-4"></canvas>
            </div>
        </div>

        <div class="col-xl-6 align-middle">
            <div class=" mb-3">
                <canvas id="done_users" class="mx-4"></canvas>
            </div>
        </div>
    </div>


@endsection


@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(',', $mountMafsType) }}],
                        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
                    }
                },

            }
        });


        // by users
        const ctx1 = document.getElementById('done_users');
        new Chart(ctx1, {
            type: 'bar',
            data: {
                labels: [{!! $labels_manager  !!}],
                datasets: [
                    {
                        label: 'Сдано',
                        data: [{{ implode(',', $doneMafsManager) }}],
                        borderWidth: 1,
                        backgroundColor: [
                            'rgb(114,180,150)',
                        ],
                        grouped: false,
                    },
                    {
                        label: 'Осталось сдать',
                        data: [{{ implode(',', $notDoneMafsManager) }}],
                        borderWidth: 1,
                        backgroundColor: [
                            'rgb(251,215,105)',
                        ],
                        grouped: false,
                    }
                ]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },

            }
        });


        // круговая диаграмма 1
        let 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)',
                    ]
                }],

            },
        });

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

            },
        });


    </script>
@endpush