@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')

    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#mount" type="button"
                    role="tab" aria-controls="mount" aria-selected="true">Монтаж МАФ
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#done" type="button"
                    role="tab" aria-controls="done" aria-selected="false">Сдача МАФ
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#all" type="button"
                    role="tab" aria-controls="all" aria-selected="false">Свод
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#reclamation" type="button"
                    role="tab" aria-controls="reclamations" aria-selected="false">Рекламации
            </button>
        </li>
    </ul>

    <div class="tab-content border-end border-start border-bottom p-5" id="myTabContent">

        <div class="tab-pane fade show active" id="mount" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
            <div class="row">
                <div class="col-12 text-center">
                    <h1 class="text-success my-3">Выполнение плана по монтажу МАФ</h1>
                </div>
            </div>

            <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>
            <div class="col-12 border-top my-3"></div>
            <div class="row align-items-center">
                <div class="col-xl-6">
                    <div class="ms-md-5 ps-md-5" style="max-height: 50vh">
                        <canvas id="total_orders" class="mx-4"></canvas>
                    </div>
                </div>

                <div class="col-xl-6 ">
                    <div class=" mb-3">
                        <canvas id="order_types" style="max-height: 50vh" class="mx-4"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="done" role="tabpanel" aria-labelledby="home-tab" tabindex="1">
            <div class="row">
                <div class="col-12 text-center">
                    <h1 class="text-success my-3">Выполнение плана по сдаче МАФ</h1>
                </div>
            </div>
            <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">
                        {!! $totalMountSum !!}
                    </div>
                    <div class="text-center">
                        Сдано на сумму
                    </div>
                </div>
            </div>
            <div class="col-12 border-top my-3"></div>

            <div class="row align-items-center">
                <div class="col-xl-6 align-middle">
                    <div class="ms-md-5 ps-md-5" style="max-height: 50vh">
                        <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>
        </div>

        <div class="tab-pane fade" id="all" role="tabpanel" aria-labelledby="home-tab" tabindex="2">
            <div class="row">
                <div class="col-12 text-center">
                    <h1 class="text-success my-3">Свод по МАФ</h1>
                </div>
            </div>
            <div class="row">


                <div class="col">
                    <div class="text-center text-success fs-4 fw-bold">
                        {{ $totalMafs }} / {{ $totalOrders }}
                    </div>
                    <div class="text-center">
                        Всего МАФ / Площадок
                    </div>
                </div>

                @foreach($orderStatuses as $name => $orders)
                    <div class="col">
                        <div class="text-center text-success fs-4 fw-bold">
                            {{ $orderMafStatuses[$name] }} / {{ $orders }}
                        </div>
                        <div class="text-center">
                            {{ $name }}
                        </div>
                    </div>
                @endforeach



            </div>
            <div class="col-12 border-top my-3"></div>
            <div class="row">
                <div class="col-12 overflow-x-scroll">
                    @include('reports.svod')
                </div>
            </div>

            <div class="col-12 border-top my-3"></div>
            <div class="row">
                <div class="col">
                    <div class="text-center text-success fs-4 fw-bold">
                        {!! $totalSum !!}
                    </div>
                    <div class="text-center">
                        Всего МАФ на сумму
                    </div>
                </div>
                <div class="col">
                    <div class="text-center text-success fs-4 fw-bold">
                        {!! $totalDoneSum !!}
                    </div>
                    <div class="text-center">
                        Сдано МАФ на сумму
                    </div>
                </div>

            </div>

        </div>

        <div class="tab-pane fade" id="reclamation" role="tabpanel" aria-labelledby="home-tab" tabindex="3">
            <div class="row">
                <div class="col-12 text-center">
                    <h1 class="text-success my-3">Отчет по рекламациям</h1>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="text-center text-success fs-5 fw-bold">
                        {{ $totalReclamations }}
                    </div>
                    <div class="text-center">
                        Всего рекламаций
                    </div>
                </div>

                @foreach($reclamations as $name => $r)
                    <div class="col">
                        <div class="text-center text-success fs-4 fw-bold">
                            {{ $r }}
                        </div>
                        <div class="text-center">
                            {{ $name }}
                        </div>
                    </div>
                @endforeach


            </div>
            <div class="col-12 border-top my-3"></div>
            <div class="row ">
                <div class="col-xl-6 p-3">
                    <h4 class="text-success">
                        Общий свод по МАФ
                    </h4>
                    <table class="table">
                        <tr>
                            <th>Артикул МАФ</th>
                            <th>Кол-во</th>
                        </tr>
                        @foreach($reclamationMafs as $n => $val)
                            <tr>
                                <td>{{ $n }}</td>
                                <td>{{ $val }}</td>
                            </tr>
                        @endforeach
                    </table>
                </div>

                <div class="col-xl-6 p-3">
                    <h4 class="text-success">
                        Общий свод по деталям
                    </h4>
                    <table class="table">
                        <tr>
                            <th>Деталь</th>
                            <th>Кол-во</th>
                        </tr>
                        @foreach($reclamationDetails as $n => $val)
                            <tr>
                                <td>{{ $n }}</td>
                                <td>{{ $val }}</td>
                            </tr>
                        @endforeach
                    </table>
                </div>

            </div>
        </div>

    </div>









    {{--@dump($reclamationMafs, $reclamationDetails)--}}

@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