芝麻web文件管理V1.00

编辑当前文件:/home/forge/stage.sksb.smartcon-survey.com/resources/views/livewire/topic-detail.blade.php

<div>

<div class="flex items-center justify-start p-4">
        @foreach ($indexLabels as $key => $label)
            <div class="flex items-center justify-center pr-4">
                <div class="w-4 h-4 mr-2 rounded-full" style="background: {{ $colors[$key] }}"></div>
                <div>{{ $label }}</div>
            </div>
        @endforeach
    </div>

<div class="p-4 mt-4 bg-white rounded-lg shadow">

<div class="w-full pb-2 text-2xl font-bold bg-white rounded-t-lg">{{ $currentTopic->name }}<span>:
                GESAMT-INDEX</span></div>

<div x-data="{ open: false }" class="p-2 bg-gray-100 rounded cursor-pointer focus:outline-none">
            <div @click="open = !open" class="px-2 py-4 font-bold underline select-none"
                x-text="open ? 'Filter schließen' : 'Filter anzeigen'"></div>

<x-select wire:change="checkDepartmentFilter" label="Abteilung" placeholder="Abteilung wählen"
                    multiselect wire:model="selectedDepartments">
                    @foreach ($departments as $dep)
                        <x-select.option value="{{ $dep['id'] }}" label="{{ $dep['name'] }}">
                        </x-select.option>
                    @endforeach
                </x-select>

<x-select label="Führungsposition" placeholder="Bitte wählen" wire:model.defer="leadingPosition">
                    <x-select.option value="0" label="Keine Führungsposition"></x-select.option>
                    <x-select.option value="1" label="Führungsposition"></x-select.option>
                </x-select>

<x-select label="Alter" placeholder="Altersgruppen wählen" multiselect wire:model.defer="selectedAges">
                    <x-select.option value="16_25" label="16 - 25 Jahre"></x-select.option>
                    <x-select.option value="26_35" label="26 - 35 Jahre"></x-select.option>
                    <x-select.option value="36_45" label="36 - 45 Jahre"></x-select.option>
                    <x-select.option value="46_55" label="46 - 55 Jahre"></x-select.option>
                    <x-select.option value="56_99" label="56 Jahre oder älter"></x-select.option>
                </x-select>

<x-select label="Zeitraum" placeholder="Quartal auswählen" multiselect wire:model="selectedQuarters">
                    @foreach ($quarters as $quarter)
                        <x-select.option label="{{ $quarter['label'] }}" value="{{ $quarter['value'] }}">
                        </x-select.option>
                    @endforeach
                </x-select>

<div class="col-span-3">
                    <div wire:click="filter"
                        class="inline-flex px-4 py-2 text-white rounded shadow cursor-pointer select-none bg-primary-500 hover:bg-primary-600">
                        Filter Anwenden
                    </div>
                    <div wire:click="clearFilter"
                        class="inline-flex px-4 py-2 text-black bg-gray-300 rounded shadow cursor-pointer select-none hover:bg-gray-400">
                        Filter Zurücksetzen
                    </div>
                </div>
            </div>

</div>

@if (count($interviews) >= 5)
            <button
                onclick='captureChart("{{ $currentTopic->id }}","index-container", "{{ $currentTopic->name }}", "{!! str_replace('"', '\"', json_encode($allSelectedFilters, JSON_THROW_ON_ERROR)) !!}");'
                class="float-right px-4 py-2 m-2 duration-150 bg-gray-100 rounded shadow hover:shadow-md" type="button"
                title="Chart Daten herunterladen">
                <svg id="spinner" class="hidden w-6 h-6 text-black animate-spin" xmlns="http://www.w3.org/2000/svg"
                    fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                        stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                    </path>
                </svg>
                <svg id="download-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke-width="2" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
                </svg>
            </button>
            <div id="index-container">
                
                <div class="pt-4 pl-4 font-medium">
                    <div>Anzahl der Antworten: <span>{{ count($interviews) }} Interviews</span></div>
                </div>

<div class="p-4 overflow-hidden">
                    <div class="flex items-center justify-center w-full rounded-lg">
                        @php
                            $total = array_sum($results['index']);
                            $results['index'] = array_reverse(
                                array_filter($results['index'], function ($e) {
                                    return $e > 0;
                                }),
                                true,
                            );
                        @endphp
                        @if ($total > 0)
                            @foreach (array_reverse($results['index'], true) as $key => $value)
                                @if ($value > 0)
                                    @php
                                        $percentage = number_format(($value / $total) * 100, 0);
                                    @endphp
                                    <div class="flex h-36 justify-center items-center text-white text-sm font-bold {{ $key == array_key_last($results['index']) ? 'rounded-l-lg' : '' }} {{ $key == array_key_first($results['index']) ? 'rounded-r-lg' : '' }} hover:shadow-lg hover:opacity-70 transition-all"
                                        style="width: {{ $percentage }}%; background-color: {{ $reversedColors[$key - 1] }};">
                                        {{ $percentage }}%
                                    </div>
                                @endif
                            @endforeach
                            <div class="px-4 font-bold"><span
                                    class="pr-1 text-xl">∅</span>{{ $results['indexAverage'] }}</div>
                        @else
                            <div class="py-8 font-bold">Nicht genügend Daten.</div>
                        @endif
                    </div>
                </div>
            </div>
        @else
            <div class="p-4 text-xl font-medium">Leider nicht genügend Daten.</div>
        @endif

@if (count($results['questions']) > 1 && count($interviews) >= 5)
            
            <div class="z-50 flex items-end p-4 pl-10 border-b-2">
                <img src="{{ asset('img/rect846.png') }}" class="w-20" alt="arrow">
                <div class="pl-4 text-2xl font-semibold text-gray-600 uppercase">SETZT SICH ZUSAMMEN AUS:</div>
            </div>

<div class="flex items-center justify-start p-4">
                @foreach (array_reverse($results['questions'][0]['labels']) as $key => $label)
                    <div class="flex items-center justify-center pr-4">
                        <div class="w-4 h-4 mr-2 rounded-full" style="background: {{ $colors[$key] }}"></div>
                        <div>{{ $label }}</div>
                    </div>
                @endforeach
            </div>

@foreach ($results['questions'] as $qk => $question)
                <div class="p-4 border-b-2">
                    <div class="flex">
                        <div class="flex items-center justify-start w-1/4 p-2 text-base font-semibold">
                            {{ $question['title'] }}</div>
                        <div class="flex w-3/4 py-4 overflow-hidden">
                            
                            <div class="flex items-center justify-center w-full rounded-lg">
                                @php
                                    $total = array_sum($question['results']);
                                    $question['results'] = array_reverse(
                                        array_filter($question['results'], function ($e) {
                                            return $e > 0;
                                        }),
                                        true,
                                    );
                                @endphp
                                <?php $sum = 0; ?>
                                @if ($total > 0)
                                    @foreach (array_reverse($question['results'], true) as $key => $value)
                                        @if ($value > 0)
                                            @php
                                                $percentage = number_format(($value / $total) * 100, 0);
                                            @endphp
                                            <div class="flex h-24 justify-center items-center text-white text-sm font-bold {{ $key == array_key_last($question['results']) ? 'rounded-l-lg' : '' }} {{ $key == array_key_first($question['results']) ? 'rounded-r-lg' : '' }} hover:shadow-lg hover:opacity-70 transition-all"
                                                style="width: {{ $percentage }}%; background-color: {{ $reversedColors[$key - 1] }};">
                                                {{ $percentage }}%
                                            </div>
                                        @endif
                                    @endforeach
                                    <div class="px-4 font-bold"><span
                                            class="pr-1 text-xl">∅</span>{{ $question['average'] }}</div>
                                @else
                                    <div>Nicht genügend Daten.</div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        @endif
    </div>
</div>