{{-- 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
<div class="bg-gray-100 min-h-screen p-8">
    <!-- Container für beide Formulare -->
    <div class="flex w-full space-x-8">
        <!-- Linke Seite (3/4 der Seite) -->
        <div class="w-3/4 flex flex-col">
            <!-- Zurück Button -->
            <div class="flex justify-between items-center mb-6">
                <button class="text-[rgb(241,131,0)] z-10">
                    <a href="{{route('risk', ['fid'=>session()->get('fid'),'mid'=>session()->get('mid')])}}">
                        &lt;zurück &nbsp;&nbsp;&nbsp;&nbsp;
                    </a>
                    <span class="text-[rgb(13,59,123)] cursor-default">
                        {{ __('general.Risk Assessment') . ': ' . $risk_nummer . ' (' . $modus . ')' }}
                    </span>
                </button>
            </div>

            {{-- Buttons top-right --}}
            <div class="space-x-4 z-10 flex justify-end mb-6">
                @if($bewertungId == $history->first()->bewertung_id)
                    {{-- edit --}}
                    @can('edit',[$history->first()])
                        <a type="button" href="{{ route('risk-edit',['bewertung_id'=>$bewertungId, 'fid'=>session()->get('fid'),'mid'=>session()->get('mid') ]) }}"
                           class="rounded-md bg-[rgb(241,131,0)] text-white font-semibold border-2 border-[rgb(241,131,0)] py-1 px-3 hover:bg-orange-400 focus:outline-none focus:ring-2 focus:ring-[rgb(241,131,0)]">
                            {{ __('general.Edit') }}
                        </a>
                    @else
                        <div class="grayscale rounded-md bg-[rgb(241,131,0)] text-white font-semibold border-2 border-[rgb(241,131,0)] py-1 px-3 hover:bg-orange-400 focus:outline-none focus:ring-2 focus:ring-[rgb(241,131,0)]">
                            {{ __('general.Edit') }}
                        </div>
                    @endcan
                @endif

                {{-- export --}}
                @can('export', [$history->first()])
                        <a target="_blank" href="{{ route('bewertung-export', ['bewertung_id' => $bewertungId, 'fid' => session('fid'), 'mid' => session('mid')]) }}"
                           class="rounded-md bg-[rgb(241,131,0)] text-white font-semibold border-2 border-[rgb(241,131,0)] py-1 px-3 focus:outline-none focus:ring-2 focus:ring-[rgb(241,131,0)]">
                            {{ __('general.Export') }}
                        </a>
                @else
                    <div class="grayscale rounded-md bg-[rgb(241,131,0)] text-white font-semibold border-2 border-[rgb(241,131,0)] py-1 px-3 focus:outline-none focus:ring-2 focus:ring-[rgb(241,131,0)]">
                        {{ __('general.Export') }}
                    </div>
                @endcan

                @can('delete',[$history->first()])
                    <button type="button"
                            onclick="return confirm('Sind Sie sicher, dass Sie diesen Datensatz löschen möchten?')"
                            wire:click.throttle="deleteRisksByGroup"
                            class="rounded-md bg-white text-[rgb(241,131,0)] font-semibold border-2 border-[rgb(241,131,0)] py-1 px-3 hover:bg-orange-200 focus:outline-none focus:ring-2 focus:ring-[rgb(241,131,0)]">{{ __('general.Delete') }}
                    </button>
                @endcan

            </div>


            <!-- Hauptformular (linke Seite) -->
            <div class="w-full flex flex-col">

                <!-- Abschnitt 1: Risiko-Identifizierung -->
                <livewire:corisk.components.risiko-identifizierung :bewertung_id="$bewertungId" :readonly="true" modus="{{$modus}}"/>

                <!-- Diagramm-Panel (einklappbar) -->
                <div x-data="{ open: false }" class="border border-gray-300 rounded-lg shadow-sm bg-white p-4 mb-2">
                    <button type="button" @click="open = !open"
                            class="w-full text-left text-csy-dark-blue font-semibold hover:text-[rgb(241,131,0)] focus:outline-none">
                        <span x-show="!open">📊 Diagramme anzeigen ▼</span>
                        <span x-show="open">📉 Diagramme verbergen ▲</span>
                    </button>

                    <div x-show="open" x-collapse class="mt-4">
                        <!-- Diagramme zentriert mit Abstand -->
                        <div class="flex justify-center gap-8 flex-wrap max-w-5xl mx-auto">
                            <!-- Diagramm 1 -->
                            <div class="flex-1 min-w-[300px] max-w-[400px]">
                                <h4 class="text-csy-dark-blue text-sm font-bold mb-2">
                                    @switch($modus)
                                        @case('DS') {{__('general.Security requirements')}} @break
                                        @default {{__('general.Risk of failure')}} @break
                                    @endswitch
                                </h4>
                                <canvas id="probabilityChart" style="width:100%; height:300px;"></canvas>
                            </div>

                            <!-- Diagramm 2 -->
                            <div class="flex-1 min-w-[300px] max-w-[400px]">
                                <h4 class="text-csy-dark-blue text-sm font-bold mb-2">Risiko Gesamtbewertung</h4>
                                <canvas id="impactChart" style="width:100%; height:300px;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Abschnitt 2: Risiken -->
                <livewire:corisk.components.risiko :bewertung_id="$bewertungId" modus="{{$modus}}" :readonly="true"/>

                {{--<!-- Abschnitt 3: Risiko-Schwachstellen -->
                   <livewire:corisk.components.risiko-schwachstellen :bewertung_id="$bewertungId"/>

                    <!-- Abschnitt 4: Risiko-Maßnahmen -->
                    <livewire:corisk.components.risiko-massnahmen :bewertung_id="$bewertungId"/>
                    --}}

                    {{--<!-- Abschnitt 5: Chancen -->
                    <livewire:corisk.components.risiko-darstellung :bewertung_id="$bewertungId"/>
--}}
                </div>
        </div>

        <!-- Rechte Seite (1/4 der Seite) -->
        <div class="w-1/4 bg-white p-6 rounded-lg shadow-lg fixed right-0 bottom-3 h-[calc(100vh-12rem)] overflow-y-auto">
            <div class="flex justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900">Workflow</h3>
                <h3 class="text-lg font-semibold text-gray-900">{{ __('general.Completed') }}</h3>
            </div>

            <div class="space-y-3 overflow-visible pr-3 mr-0 max-h-[15vh]">