{{-- php setup-----------------------------------------}}
@php
    function getGradientColor($value): string
    {
      $t = ($value - 1) / 4;

        // Max RGB value slightly dimmed (from 255 down to ~220)
        $max = 230;
        $min = 20;

        if ($t <= 0.5) {
            // Green → Yellow (0,max,0) to (max,max,0)
            $r = (int)(2 * $t * $max);
            $g = $max;
        } else {
            // Yellow → Red (max,max,0) to (max,0,0)
            $r = $max;
            $g = (int)((1 - 2 * ($t - 0.5)) * $max);
        }

        $b = $min; // we’re staying on the warm spectrum

        return "rgb($r, $g, $b, 0.9)";
    }
@endphp
{{-- Blade --}}

<div class="container mx-auto p-4">
    <script>
        function select_all()
        {
            var master_checkbox = document.getElementById('master_checkbox');
            var bool =  master_checkbox.checked;
            var checkboxes = document.querySelectorAll('input[type="checkbox"]');
            checkboxes.forEach(function(checkbox) {
                if(checkbox !== master_checkbox){
                    checkbox.checked = !bool;
                    checkbox.click();
                }
            });
        }
    </script>
    <!-- Zurück Button -->
    <div class="flex justify-start items-center pl-4 mb-6">
        <button class="text-[rgb(241,131,0)] z-10">
            <a href="{{ route('vvt', ['fid' => session()->get('fid'), 'mid' => 6]) }}" wire:v-v-t>
                &lt;zurück
            </a>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span class="text-[rgb(13,59,123)] cursor-default">Risikobewertungen Liste</span>
        </button>
    </div>
    <div class="mt-12">
        <div class="container mx-auto w-full p-4">
            <!-- Erste Reihe mit Dropdown, Ausführen und Buttons -->
            <div class="flex items-center w-full space-x-2">
                <div class="flex-shrink relative z-40">
                    <select id="selection" wire:model="selectedMultifunktion" name="selection" class="block h-[36px] w-full rounded-md border-0 py-1.5 pl-3 pr-10 mr-3 text-gray-900 ring-1 ring-inset ring-[rgb(13,59,123)] focus:ring-2 focus:ring-[rgb(241,131,0)] sm:text-sm sm:leading-6">
                        <option value="" selected>Aktion für ausgewählte Einträge ...</option>
                        @foreach($options as $val => $option)
                            <option value="{{$val}}" wire:click.throttle="multifunktion">{{ __('general.'.$option)}}</option>
                        @endforeach
                    </select>
                </div>

                <div class="flex-1 justify-end">
                    <div class="relative flex items-center">
                        <input wire:model.live.debounce(500)="searchterm" wire:keydown.enter="loadRiskBewertungen()" type="text" name="search" id="search"
                               class="block w-full rounded-md border-0 py-1.5 pl-4 pr-14
                          text-gray-900 shadow-sm ring-1 ring-inset ring-[rgb(13,59,123)]
                          placeholder:text-[rgb(241,131,0)] focus:ring-2 focus:ring-[rgb(241,131,0)]
                          focus:border-[rgb(241,131,0)] focus:outline-none sm:text-sm sm:leading-6">
                        <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
                            <button wire:click="loadRiskBewertungen()">
                                <img src="{{ asset('images/icons/CO-DatMenue/magnifying-glass.png') }}" alt="View Icon" class="w-4 h-4 mr-4" />
                            </button>
                        </div>
                    </div>
                </div>

                <livewire:Corisk.NewBewertungPopup></livewire:Corisk.NewBewertungPopup>

                <a href="{{ route('bewertung.export', ['fid' => session('fid'), 'mid' => session('mid')]) }}">
                    <button class="inline-flex items-center gap-x-1.5 rounded-md bg-[rgb(241,131,0)] px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">XLS-Export Liste</button>
                </a>
                {{-- Papierkorb --}}

                    <a href="{{ route('risk-bin', ['fid'=>session()->get('fid'), 'mid'=>session()->get('mid')]) }}" class="flex items-center justify-center rounded-md bg-[rgb(241,131,0)] px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-400 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-blue-600">
                        <img src="{{ asset('images/icons/CO-DatMenue/recycle-bin.png') }}" alt="Recycle Bin" class="w-5 h-5 invert" title="Gelöschte Risikobewertungen Anzeigen"/>
                    </a>

            </div>
        </div>

        <!-- Zweite Reihe mit der Tabelle -->
        <div class="container w-full p-4">

            <div class="mt-6 w-full">
                <!-- Zweite Reihe mit der Tabelle -->
                <div class="container mt-2 flex justify-center w-full"> <!-- Hinzugefügt um die Tabelle zu zentrieren -->
                    <table class="min-w-full table-auto bg-white">
                        <thead>
                        <tr class="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
                            <th class="py-3 px-2 text-center">
                                <input id="master_checkbox" type="checkbox" onclick="select_all()" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 cursor-pointer">
                            </th>

                            <th class="py-3 px-2 text-center whitespace-nowrap">
                                <div class="inline-flex items-center space-x-1 justify-center">
                                    <span>Status</span>
                                    <button wire:click="sortBy('ds_kuerzel')" class="focus:outline-none">
                                        <img src="{{ asset('images/icons/CO-DatMenue/arrow-down-sign-to-navigate.png') }}" alt="Sort Icon" class="w-3 h-3" />
                                    </button>
                                </div>
                            </th>

                            <th class="py-3 px-2 text-center whitespace-nowrap">
                                <div class="inline-flex items-center space-x-1 justify-center">
                                    <span>%</span>
                                    <button wire:click="sortBy('fortschritt')" class="focus:outline-none">
                                        <img src="{{ asset('images/icons/CO-DatMenue/arrow-down-sign-to-navigate.png') }}" alt="Sort Icon" class="w-3 h-3" />
                                    </button>
                                </div>
                            </th>

                            <th class="py-3 px-2 text-center whitespace-nowrap">
                                <div class="inline-flex items-center space-x-1 justify-center">
                                    <span>Modus</span>
                                    <button wire:click="sortBy('modus')" class="focus:outline-none">
                                        <img src="{{ asset('images/icons/CO-DatMenue/arrow-down-sign-to-navigate.png') }}" alt="Sort Icon" class="w-3 h-3" />
                                    </button>
                                </div>
                            </th>

                            <th class="py-3 px-2 text-center whitespace-nowrap">
                                <div class="inline-flex items-center space-x-1 justify-center">
                                    <span>Bewertung</span>
                                    <button wire:click="sortBy('name')" class="focus:outline-none">
                                        <img src="{{ asset('images/icons/CO-DatMenue/arrow-down-sign-to-navigate.png') }}" alt="Sort Icon" class="w-3 h-3" />
                                    </button>
                                </div>
                            </th>

                            <th class="py-3 px-2 text-center whitespace-nowrap">
                                <div class="inline-flex items-center space-x-1 justify-center">
                                    <span>Werteart</span>
                                    <button wire:click="sortBy('uw_art')" class="focus:outline-none">
                                        <img src="{{ asset('images/icons/CO-DatMenue/arrow-down-sign-to-navigate.png') }}" alt="Sort Icon" class="w-3 h-3" />
                                    </button>
                                </div>
                            </th>

                            <th class="py-3 px-2 text-center whitespace-nowrap">
                                <div class="inline-flex items-center space-x-1 justify-center">
                                    <span>Prozess</span>
                                    <button wire:click="sortBy('prozess')" class="focus:outline-none">
                                        <img src="{{ asset('images/icons/CO-DatMenue/arrow-down-sign-to-navigate.png') }}" alt="Sort Icon" class="w-3 h-3" />
                                    </button>
                                </div>
                            </th>

                            <th class="py-3 px-2 text-center whitespace-nowrap">
                                <div class="inline-flex items-center space-x-1 justify-center">
                                    <span>Version</span>
                                    <button wire:click="sortBy('risk_revnr')" class="focus:outline-none">
                                        <img src="{{ asset('images/icons/CO-DatMenue/arrow-down-sign-to-navigate.png') }}" alt="Sort Icon" class="w-3 h-3" />
                                    </button>
                                </div>
                            </th>

                            <th class="py-3 px-2 text-center relative group whitespace-nowrap">
                                <div class="inline-flex items-center space-x-1 justify-center">
                                    <span>BIA</span>
                                    <button wire:click="sortBy('bia')" class="focus:outline-none">
                                        <img src="{{ asset('images/icons/CO-DatMenue/arrow-down-sign-to-navigate.png') }}" alt="Sort Icon" class="w-3 h-3" />
                                    </button>
                                </div>
                                <div class="absolute left-1/2 -translate-x-1/2 bottom-full transform w-max bg-gray-200 text-gray-600 border-2 border-solid border-gray-400 text-xs rounded p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                    Einfluß auf die Geschäftstätigkeit
                                </div>
                            </th>

                            <th class="py-3 px-2 text-center relative group whitespace-nowrap">
                                <div class="inline-flex items-center space-x-1 justify-center">
                                    <span>RoE</span>
                                    <button wire:click="sortBy('roe')" class="focus:outline-none">
                                        <img src="{{ asset('images/icons/CO-DatMenue/arrow-down-sign-to-navigate.png') }}" alt="Sort Icon" class="w-3 h-3" />
                                    </button>
                                </div>
                                <div class="absolute left-1/2 -translate-x-1/2 bottom-full transform w-max bg-gray-200 text-gray-600 border-2 border-solid border-gray-400 text-xs rounded p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                    Risiko des Ausfalls
                                </div>
                            </th>

                            <th class="py-3 px-2 text-center relative group whitespace-nowrap">
                                <div class="inline-flex items-center space-x-1 justify-center">
                                    <span><strong>RL</strong></span>
                                    <button wire:click="sortBy('rl')" class="focus:outline-none">
                                        <img src="{{ asset('images/icons/CO-DatMenue/arrow-down-sign-to-navigate.png') }}" alt="Sort Icon" class="w-3 h-3" />
                                    </button>
                                </div>
                                <div class="absolute left-1/2 -translate-x-1/2 bottom-full transform w-max bg-gray-200 text-gray-600 border-2 border-solid border-gray-400 text-xs rounded p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                    Risiko-Level (Gesamtbewertung)
                                </div>
                            </th>

                            <th class="py-3 px-2 text-center whitespace-nowrap">
                                <div class="inline-flex items-center space-x-1 justify-center">
                                    <span>Zugew.</span>
                                    <button wire:click="sortBy('zugew_user_name')" class="focus:outline-none">
                                        <img src="{{ asset('images/icons/CO-DatMenue/arrow-down-sign-to-navigate.png') }}" alt="Sort Icon" class="w-3 h-3" />
                                    </button>
                                </div>
                            </th>

                            <th class="py-3 px-2 text-center whitespace-nowrap">
                                <div class="inline-flex items-center space-x-1 justify-center">
                                    <span>Bearb.</span>
                                </div>
                            </th>

                            <th class="py-3 px-2 text-center whitespace-nowrap">
                                <span>Aktionen</span>
                            </th>
                        </tr>
                        </thead>

                        <tbody class="text-gray-600 text-sm font-light">
                        @foreach($risk_Bewertungen as $index => $bewertung)