芝麻web文件管理V1.00

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

<div>
    @php
        $colors = [0 => '#4CAF50', 1 => '#8AC249', 2 => '#FFEB3B', 3 => '#FFC107', 4 => '#F44336', 98 => 'rgb(229, 231, 235)'];
        $indexLabels = [0 => 'sehr zufrieden', 1 => 'zufrieden', 2 => 'teils/teils', 3 => 'unzufrieden', 4 => 'sehr unzufrieden', 98 => 'Nicht Sicher'];
    @endphp

<div x-data="{ open: false }" class="p-2 bg-white rounded-lg shadow-sm cursor-pointer focus:outline-none">
        <div @click="open = !open" class="px-2 py-4 font-bold underline select-none">Filter</div>
        <div class="grid-cols-3 gap-2 p-4 bg-gray-100 rounded-lg" :class="open ? 'grid' : 'hidden'">

<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="2" 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.defer="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>

<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="grid justify-start grid-cols-4 gap-4">
        @foreach ($topics as $topic)
            <div class="relative p-6 bg-white rounded-lg shadow-sm">
                @if ($topic->is_extra)
                    <div
                        class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-gray-200 text-gray-800 absolute top-2 right-2">
                        Sonderthema
                    </div>
                @endif
                <div class="flex flex-col items-center h-56 mx-auto mt-4 w-36">
                    @php
                        $total = array_sum($topic->results['index']);
                        $results = $topic->results['index'];
                    @endphp
                    @if ($total > 0 && $topic->interviews->count() >= 5)
                        @foreach ($results as $key => $value)
                            @if ($value > 0)
                                @php
                                    $percentage = number_format(($value / $total) * 100, 0);
                                    $colors = [0 => '#4CAF50', 1 => '#8AC249', 2 => '#FFEB3B', 3 => '#FFC107', 4 => '#F44336', 98 => 'rgb(229, 231, 235)'];
                                    $colors = $colors;
                                @endphp
                                <div class="flex items-center justify-center w-20 text-sm font-bold text-white transition-all first:rounded-t-lg last:rounded-b-lg hover:shadow-lg hover:opacity-70"
                                    style="height: {{ $percentage }}%; background-color: {{ $colors[$key - 1] }};">
                                    {{ $percentage }}%
                                </div>
                            @endif
                        @endforeach
                    @else
                        <div style="margin-top: 50px;">Noch keine Daten vorhanden.</div>
                    @endif
                </div>
                <div class="flex items-center justify-center mt-2">
                    <a class="text-sm text-center underline"
                        href="/dashboard/topics/detail/{{ $topic->id }}">{{ $topic->name }}</a>
                </div>
            </div>
        @endforeach
    </div>
</div>