strprfcrm/resources/views/reports/index.blade.php

@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 mb-2 page-header-row">
        <div class="col-12 col-md-6 page-header-title">
            <h3>Отчеты</h3>
        </div>
        <div class="col-auto col-md-6 text-md-center page-header-year">
            @include('partials.year-switcher')
        </div>
    </div>

    <ul class="nav nav-tabs report-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 report-tab-content" 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 max-h-50vh">
                        <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 max-h-50vh"></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">
                        {!! $totalHandedOverSum !!}
                    </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 max-h-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">
                    @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 class="col">
                    <div class="text-center text-success fs-4 fw-bold">
                        {!! $totalPaidSum !!}
                    </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>
                    <div class="table-responsive js-subtable-scroll">
                        <table class="table js-sortable-table" id="table-mafs">
                            <thead>
                                <tr>
                                    <th class="sortable" data-col="0" data-dir="asc">Артикул МАФ <span class="sort-icon"></span></th>
                                    <th class="sortable" data-col="1" data-dir="asc">Кол-во <span class="sort-icon"></span></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($reclamationMafs as $n => $val)
                                    <tr>
                                        <td>{{ $n }}</td>
                                        <td>{{ $val }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="col-xl-6 p-3">
                    <h4 class="text-success">
                        Общий свод по деталям
                    </h4>
                    <div class="table-responsive js-subtable-scroll">
                        <table class="table js-sortable-table" id="table-details">
                            <thead>
                                <tr>
                                    <th class="sortable" data-col="0" data-dir="asc">Деталь <span class="sort-icon"></span></th>
                                    <th class="sortable" data-col="1" data-dir="asc">Кол-во <span class="sort-icon"></span></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($reclamationDetails as $n => $val)
                                    <tr>
                                        <td>{{ $n }}</td>
                                        <td>{{ $val }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>

    </div>









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

@endsection


@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const totalMafs = {{ $totalMafs }};

        function formatMafPercent(value) {
            const percent = totalMafs > 0 ? (value / totalMafs * 100) : 0;

            return percent.toFixed(2).replace('.', ',');
        }

        function getBarValue(context) {
            if (Array.isArray(context.raw)) {
                return Math.abs(Number(context.raw[1] || 0) - Number(context.raw[0] || 0));
            }

            return Number(context.parsed?.y ?? context.parsed ?? 0);
        }

        function mafTooltipLabel(context) {
            const value = Number(context.parsed || 0);

            return context.label + ': ' + value + ' МАФ (' + formatMafPercent(value) + '%)';
        }

        function mafBarTooltipLabel(context) {
            const value = getBarValue(context);

            return context.dataset.label + ': ' + value + ' МАФ (' + formatMafPercent(value) + '%)';
        }

        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: {
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: mafBarTooltipLabel
                        }
                    }
                },
                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: {
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: mafBarTooltipLabel
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },

            }
        });


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

            },
            options: {
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: mafTooltipLabel
                        }
                    }
                }
            }
        });

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

            },
            options: {
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: mafTooltipLabel
                        }
                    }
                }
            }
        });

        // Сортировка таблиц рекламаций
        function sortTable(table, colIndex, dir) {
            const tbody = table.querySelector('tbody');
            const rows = Array.from(tbody.querySelectorAll('tr'));
            rows.sort((a, b) => {
                const aVal = a.cells[colIndex].textContent.trim();
                const bVal = b.cells[colIndex].textContent.trim();
                const aNum = parseFloat(aVal);
                const bNum = parseFloat(bVal);
                const isNum = !isNaN(aNum) && !isNaN(bNum);
                let cmp = isNum ? aNum - bNum : aVal.localeCompare(bVal, 'ru');
                return dir === 'desc' ? -cmp : cmp;
            });
            rows.forEach(r => tbody.appendChild(r));
        }

        function initSortableTable(table, defaultCol, defaultDir) {
            const headers = table.querySelectorAll('th.sortable');
            let currentCol = defaultCol;
            let currentDir = defaultDir;

            function updateIcons() {
                headers.forEach(h => {
                    const icon = h.querySelector('.sort-icon');
                    const col = parseInt(h.dataset.col);
                    if (col === currentCol) {
                        icon.innerHTML = currentDir === 'asc'
                            ? '<i class="bi bi-arrow-down-square-fill text-primary"></i>'
                            : '<i class="bi bi-arrow-up-square-fill text-primary"></i>';
                    } else {
                        icon.innerHTML = '';
                    }
                });
            }

            headers.forEach(th => {
                th.addEventListener('click', () => {
                    const col = parseInt(th.dataset.col);
                    if (col === currentCol) {
                        currentDir = currentDir === 'asc' ? 'desc' : 'asc';
                    } else {
                        currentCol = col;
                        currentDir = col === 1 ? 'desc' : 'asc';
                    }
                    sortTable(table, currentCol, currentDir);
                    updateIcons();
                });
            });

            sortTable(table, currentCol, currentDir);
            updateIcons();
        }

        document.querySelectorAll('.js-sortable-table').forEach(table => {
            initSortableTable(table, 1, 'desc');
        });

    </script>
@endpush