@php use Illuminate\Support\Str; @endphp
<div>
    <div class="bg-csy-gray-blue rounded-lg p-2 mb-2 mt-8 space-y-8">
        <div class="flex justify-between items-center w-full">
            <h2 class="text-lg font-semibold text-gray-900">{{__('general.Vulnerabilities')}}</h2>

            {{-- Button Edit --}}
            @if(!$readonly)
                <button type="button" wire:click.throttle="openPopup()" class="bg-[rgb(13,59,123)] text-white p-2 rounded">
                    {{__('general.manage vulnerabilities')}}
                </button>
            @endif
        </div>

        <!--<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.vulnerability search')}} ...">
                    <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--}}
            <button type="button" class="text-lg cursor-pointer ml-8 flex items-center mb-2" wire:click="flipHideAllSchwachstellen()">
                <input wire:model="hide_all_schwachstellen" type="checkbox" class="h-5 w-5 mr-2 peer">
                <label  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>
            </button>
        </div>-->

        <div class="relative max-h-[40vh] overflow-y-auto my-2">
            <div>
                @foreach($schwachstellen as $schwachstelle)
                    @php $uuid=Str::uuid() @endphp
                    @if($selectedSchwachstellen[$schwachstelle->stamm_schwachstelle_id])
                        <div class="flex py-1 w-full">
                            <label for="{{$uuid}}" class="block ml-2 w-full rounded-md bg-gray-100 border border-gray-300 py-2 px-3 text-csy-input-gray">
                                {{$schwachstelle->schwachstelle_name}}
                            </label>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </div>

    {{-- select Popup --}}

    <!-- Modal -->
    @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-[80vh] 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 vulnerabilities')}}</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 vulnerability')}} ...">
                            <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
                                <button type="button">
                                    <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 wire:model.live="hide_all_schwachstellen" id="hide_all_schwachstellen" type="checkbox" class="h-5 w-5 mr-2 peer">
                        <label for="hide_all_schwachstellen" 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="relative overflow-y-auto my-2 max-h-[45vh]">
                    <div>
                        @foreach($this->filteredSchwachstellen as $schwachstelle)
                            @php $uuid=Str::uuid() @endphp
                            @if(!(!$selectedSchwachstellen[$schwachstelle->stamm_schwachstelle_id] && $hide_all_schwachstellen))
                                <div wire:key="{{$uuid}}" class="flex py-1 w-full">
                                    <input id="{{$uuid}}"
                                           type="checkbox"
                                           value="!selectedSchwachstellen.{{$schwachstelle->stamm_schwachstelle_id}}"
                                           wire:model="selectedSchwachstellen.{{$schwachstelle->stamm_schwachstelle_id}}"
                                    />
                                    <label for="{{$uuid}}" class="block ml-2 w-full rounded-md bg-gray-100 border border-gray-300 py-2 px-3 text-csy-input-gray">
                                        {{$schwachstelle->schwachstelle_name}}
                                    </label>
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>

                <!-- 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>