@php use Illuminate\Support\Str; @endphp
<div>
    <div class="bg-csy-gray-blue rounded-lg p-2 mb-2 space-y-8">
        <div class="flex justify-between items-center w-full">
            <h2 class="text-lg font-semibold text-gray-900">{{__('general.Measures')}}</h2>
            @if(!$readonly)
                <button type="button" wire:click.throttle="openPopup()" class="bg-[rgb(13,59,123)] text-white p-2 rounded">
                    {{__('general.manage measures')}}
                </button>
            @endif
        </div>

        <div class="flex">
            <div class="relative w-full overflow-y-auto my-2">
                <div class="w-full space-y-6">
                    @foreach($massnahmen as $massnahme)
                        @if(!empty($selectedMassnahmen[$massnahme->normk_id]))
                        <div class="grid grid-cols-[auto_1fr_auto] gap-2 w-full">
                                {{-- Spalte 1: Nummer --}}
                                <div class="rounded-md bg-gray-100 border border-gray-300 py-2 px-3 text-csy-input-gray">
                                    {{$massnahme->normk_nummer}}
                                </div>

                                {{-- Spalte 2: Name + Chancen --}}
                                <div class="flex flex-col min-w-0">
                                    {{-- Maßnahmebezeichnung --}}
                                    <div class="rounded-md bg-gray-100 border border-gray-300 py-2 px-3 text-csy-input-gray">
                                        {{$massnahme->normk_name}} @if($massnahme->normk_text)- {{$massnahme->normk_text}} @endif
                                    </div>

                                    {{-- Maßnahmen Umsetzung
                                    <span class="text-xs font-semibold text-csy-blue pl-1 mt-2">
                                            {{ __('general.Execution') }}
                                        </span>
                                    <div class="space-y-2 mt-1">
                                        <textarea wire:model.live="" rows="3" class="mt-1 border border-gray-300 rounded px-2 py-1 w-full text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none" @if($readonly) disabled @endif></textarea>
                                    </div>--}}

                                    {{-- Chancen --}}
                                    <div class="space-y-2 mt-1">
                                        {{-- Bestehende Chancen --}}
                                        <span class="text-xs font-semibold text-csy-blue pl-1">
                                            {{ __('Chancen') }}
                                        </span>
                                        @if(!empty($chancen[$massnahme->normk_id]) && count($chancen[$massnahme->normk_id]) > 0)
                                        @foreach($chancen[$massnahme->normk_id] as $index => $chance)
                                                <div class="flex flex-col space-y-1" wire:key="{{Str::uuid()}}">
                                                    <div class="flex items-center space-x-2">
                                                        <input type="text" wire:key="{{Str::uuid()}}"
                                                               wire:model.defer="chancen.{{ $massnahme->normk_id }}.{{ $index }}.chance_text"
                                                               class="border border-gray-300 rounded px-2 py-1 w-full text-sm text-gray-700"
                                                               placeholder="{{__('general.New Chance')}}"
                                                               @if($readonly) readonly @endif/>
                                                        @if(!$readonly)
                                                            <button type="button" wire:click="deleteChance({{ $massnahme->normk_id }}, {{ $index }})"
                                                                    class="w-5 h-5">
                                                                <img src="{{ asset('images/icons/CO-DatMenue/recycle-bin.png') }}" alt="Bin Icon">
                                                            </button>
                                                        @endif
                                                    </div>
                                                </div>
                                            @endforeach
                                        @else
                                            @if($readonly)
                                                <div class="text-xs font-semibold text-csy-blue">
                                                    <span class="ml-2">-- {{__('general.none Chances added')}} --</span>
                                                </div>
                                            @endif
                                        @endif

                                        {{-- "Chance hinzufügen" Button --}}
                                        @if(!$readonly)
                                            <div class="flex items-center space-x-2">
                                                <button type="button" wire:click="addChance({{ $massnahme->normk_id }})">
                                                    <img src="{{ asset('images/icons/CO-DatMenue/Plus.png') }}" alt="Add Chance" class="w-8 h-8" />
                                                </button>
                                                <span class="text-sm text-gray-700">{{ __('general.Add Chance') }}</span>
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                {{-- Spalte 3: Normname + Buttons --}}
                                <div class="flex flex-col justify-start items-end min-w-[140px] space-y-2">
                                    <div class="rounded-md bg-gray-100 border border-gray-300 py-2 px-3 mb-4 text-csy-input-gray">
                                        {{$stammNorm->where('norm_id',$massnahme->norm_id)->first()->norm_name}}
                                    </div>
                                    {{-- Fortschrittsanzeige --}}
                                    <div class="mr-[0.25cm]">
                                        <livewire:Corisk.MasnahmenFortschrittPopup wire:key="{{Str::uuid()}}" massnahme_id="{{$massnahme->normk_id}}" risiko_id="{{$risiko_id}}" readonly="{{$readonly}}"/>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Popup --}}
        @if($showPopup)
            <div class="fixed inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center z-50">
                <div class="bg-white rounded-lg w-1/2 p-6 space-y-4 shadow-lg relative max-h-[100vh] overflow-scroll">
                    <!-- Close Button -->
                    <button type="button" wire:click.throttle="closePopup()" class="absolute top-3 right-3 px-3 py-1 rounded-full text-gray-600 hover:text-gray-800 focus:outline-none">
                        <img src="{{ asset('images/icons/delete.png') }}" alt="View Icon" class="w-4 h-4 mb-2" />
                    </button>

                    <h2 class="text-lg font-semibold text-gray-900">{{__('general.manage measures')}}</h2>
                    <div class="h-0.5 bg-[rgb(13,59,123)] w-full mt-2"></div>

                    <!-- inhalt -->
                    <div class="flex ">
                        {{-- Searchbar --}}
                        <div class="w-3/5 justify-end mb-3">
                            <div class="relative flex items-center">
                                <input wire:model.live="searchterm" 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:gray-400 focus:ring-2 focus:ring-[rgb(241,131,0)]
                                          focus:border-[rgb(241,131,0)] focus:outline-none sm:text-sm sm:leading-6"
                                       placeholder="{{__('general.search measure')}} ...">
                                <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
                                    <button type="button" wire:click="search">
                                        <img src="{{ asset('images/icons/CO-DatMenue/magnifying-glass.png') }}" alt="View Icon" class="w-4 h-4 mr-4" />
                                    </button>
                                </div>
                            </div>
                        </div>

                        {{-- Filter Button --}}
                        <div class="text-lg cursor-pointer ml-8 flex items-center mb-2">
                            <input type="checkbox" wire:model.live="hide_all_massnahmen" id="hide_all_massnahmen" class="h-5 w-5 mr-2 peer">
                            <label for="hide_all_massnahmen" class="text-sm font-[15px] text-csy-label-blue transition duration-160 ease-in-out peer-checked:text-csy-orange">
                                {{ __('general.only selected options') }}
                            </label>
                        </div>
                    </div>

                    <div class="inline-block w-full overflow-y-auto max-h-[45vh]">
                        @foreach($this->filteredMassnahmen as $massnahme)
                            @php $uuid = Str::uuid() @endphp
                            @if($selectedMassnahmen[$massnahme->normk_id] || !$hide_all_massnahmen)
                            <div class="flex items-center py-1">
                                    <input id="{{$uuid}}"
                                           type="checkbox"
                                           value="!selectedMassnahmen.{{$massnahme->normk_id}}"
                                           wire:key="{{$uuid}}"
                                           wire:model="selectedMassnahmen.{{$massnahme->normk_id}}"
                                    />
                                    <label for="{{$uuid}}" class="flex flex-grow">
                                        <span class="block ml-2 flex-shrink rounded-md bg-gray-100 border border-gray-300 py-2 px-3 text-csy-input-gray">
                                            {{$massnahme->normk_nummer}}
                                        </span>
                                        <span class="block w-full -mx-1 rounded-md bg-gray-100 border border-gray-300 py-2 px-3 text-csy-input-gray">
                                            {{$massnahme->normk_name}}
                                            @if($massnahme->normk_text != null)- {{$massnahme->normk_text}} @endif
                                        </span>
                                        <span class="block flex-shrink rounded-md bg-gray-100 border border-gray-300 py-2 px-3 text-csy-input-gray">
                                            {{$stammNorm->where('norm_id',$massnahme->norm_id)->first()->norm_name}}
                                        </span>
                                    </label>

                                    {{-- Fortschrittsanzeige --}}
                                    <livewire:Corisk.MasnahmenFortschrittPopup wire:key="{{Str::uuid()}}" massnahme_id="{{$massnahme->normk_id}}" risiko_id="{{$risiko_id}}" readonly="{{$readonly}}"/>
                                </div>
                            @endif
                        @endforeach
                    </div>

                    @if(!$readonly)
                        <div class="mt-4 mb-4 p-4 bg-gray-50 border border-gray-300 rounded">
                            <h3 class="text-sm font-semibold text-csy-blue mb-2">Eigene Maßnahmen hinzufügen</h3>
                            <div class="flex space-x-2 items-center">
                                <input type="text"
                                       wire:model.defer="newMeasureName"
                                       placeholder="Name der Maßnahme"
                                       class="border border-gray-300 rounded px-2 py-1 w-1/2 text-sm text-gray-700 focus:ring-2 focus:ring-[rgb(13,59,123)]"/>

                                <input type="text"
                                       wire:model.defer="newMeasureText"
                                       placeholder="Bemerkung der Maßnahme"
                                       class="border border-gray-300 rounded px-2 py-1 w-1/2 text-sm text-gray-700 focus:ring-2 focus:ring-[rgb(13,59,123)]"/>

                                <button type="button"
                                        wire:click.throttle="createNewMeasure"
                                        class="bg-[rgb(13,59,123)] text-white px-3 py-2 rounded">
                                    Hinzufügen
                                </button>
                            </div>

                            @error('newMeasureName')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    @endif

                    <!-- Save Button -->
                    <div class="flex justify-end space-x-2">
                        <button type="button" wire:click.throttle="closePopup(true)" class="bg-[rgb(241,131,0)] text-white px-4 py-2 rounded">{{ __('general.Save') }}</button>
                    </div>

                </div>
            </div>
        @endif
    </div>

    <style>
        .circular-progress {
            --size: 350px;
            --half-size: calc(var(--size) / 2);
            --stroke-width: 35px;
            --radius: calc((var(--size) - var(--stroke-width)) / 2);
            --circumference: calc(var(--radius) * pi * 2);
            --dash: calc((var(--progress) * var(--circumference)) / 100);
            animation: progress-animation 5s linear 0s 1 forwards;
        }

        .circular-progress circle {
            cx: var(--half-size);
            cy: var(--half-size);
            r: var(--radius);
            stroke-width: var(--stroke-width);
            fill: none;
            stroke-linecap: round;
        }

        .circular-progress circle.bg {
            stroke: #ddd;
        }

        .circular-progress circle.fg {
            transform: rotate(-90deg);
            transform-origin: var(--half-size) var(--half-size);
            stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
            transition: stroke-dasharray 0.3s linear 0s;
            stroke: #1E417D;
        }
        .circular-progress:hover circle.fg{
            stroke: #F5881F;
        }

        .circular-progress text {
            font-size: 4rem;
            font-weight: bold;
            fill: #1E417D;
            pointer-events: none; /* Verhindert, dass der Text auf Klicks reagiert */
        }
        .circular-progress:hover text{
            fill: #F5881F;
        }

        @property --progress {
            syntax: "<number>";
            inherits: false;
            initial-value: 0;
        }


    </style>

</div>