{{-- 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="w-full flex flex-col mb-4">
    <!-- Header Row -->

    @if($mode == 'popup')
        <div class="w-full flex items-center justify-between">
            <h2 class="text-md font-bold">CO-DATproV+</h2>
            <!-- X-Button zum Schließen -->
            <button type="button" wire:click="dispatch('show_ticket_popup')" class="text-gray-500 hover:text-gray-700 text-2xl">
                &times;
            </button>
        </div>
        <!-- Horizontal Line -->
        <hr class="solid w-full mt-2">
    @endif


    <div class="space-y-4 mt-2">

        {{-- Suchfeld --}}
        <div class="flex w-full space-x-3 items-center">
            <select wire:model.live="selected_filter"
                    class="flex-shrink rounded-md border border-gray-300 px-3 py-1 text-sm shadow-sm focus:ring-2 focus:ring-orange-400 focus:outline-none">
                @foreach($filter_options as $key => $option)
                    <option value="{{ $key }}">{{ $option }}</option>
                @endforeach
            </select>

            <select wire:model.live="selected_operator"
                    class="flex-shrink rounded-md border border-gray-300 px-3 py-1 text-sm shadow-sm focus:ring-2 focus:ring-orange-400 focus:outline-none">
                @foreach($filter_operatoren as $key => $operator)
                    <option value="{{ $key }}">{{ $operator }}</option>
                @endforeach
            </select>

            <div class="w-[70%] justify-end">
                <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 process')}} ...">
                    <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
                        <button type="button" wire:click="filtered_Tickets()">
                            <img src="{{ asset('images/icons/CO-DatMenue/magnifying-glass.png') }}" alt="View Icon" class="w-4 h-4 mr-4" />
                        </button>
                    </div>
                </div>
            </div>

            @can('createAny', new \App\Models\CoriskBewertung())
                @switch($mode)
                    @case('edit')
                        <button wire:click="flipHide_not_selected" type="button" 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/Plus.png') }}" alt="Add" class="w-5 h-5 invert brightness-0" title="Neues Ticket"/>
                        </button>
                        @break

                    @case('view')
                        <button wire:click.once="AddVvt" type="button" 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/Plus.png') }}" alt="Add" class="w-5 h-5 invert brightness-0" title="Neues Ticket"/>
                        </button>
                        @break

                    @default
                        <button wire:click="set('check_for_uc_add', true)" type="button" 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/Plus.png') }}" alt="Add" class="w-5 h-5 invert brightness-0" title="Neues Ticket"/>
                        </button>
                @endswitch
            @else
                <button type="button" class="flex items-center justify-center grayscale 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/Plus.png') }}" alt="Add" class="w-5 h-5 invert brightness-0" title="Neues Ticketg"/>
                </button>
            @endcan
        </div>

        @if($check_for_uc_add)
            <div class="fixed inset-0 bg-gray-50 bg-opacity-50 flex justify-center items-center z-10">
                <div class="bg-white rounded-lg w-1/2 p-6 space-y-4 shadow-lg relative">
                    <p class="text-lg mb-4">Möchten sie die Bearbeitung wirklich verlassen? Ihre Änderungen werden beim verlassen gespeichert.</p>

                    <div class="mt-4 flex space-x-4">
                        <button type="button" wire:click.once="AddVvt" class="bg-[rgb(241,131,0)] text-white px-4 py-2 rounded-md hover:bg-[rgb(241,131,0)]">
                            wechseln zu <b>CO-DATproV+</b>
                        </button>
                        <button type="button" wire:click="set('check_for_uc_add', false)" class="bg-gray-200 text-gray-900 px-4 py-2 rounded-md hover:bg-gray-200">
                            Abbrechen
                        </button>
                    </div>
                </div>
            </div>
        @endif

        {{-- Tabelle mit fixem Header --}}
        <div class="border border-gray-300 rounded-md">
            {{-- Header (nicht scrollbar) --}}
            <div class="grid grid-cols-12 font-semibold bg-gray-200 py-2 px-4 text-sm text-gray-700 border-b">
                @if($mode == 'edit')
                    <div class="col-span-1">{{-- Checkboxen --}}</div>
                @endif

                <div class="col-span-1">Status</div>
                <div class="col-span-1">%</div>
                <div class="col-span-1">Modus</div>
                <div class="col-span-5">Unternehmenswert</div>
                <div class="col-span-1">RL</div>
                <div class="flex-col col-span-2">
                    <div>Zugew. An</div>
                    <div>Bearb.</div>
                </div>

                @if($mode != 'edit')
                    <div class="col-span-1">Aktionen</div>
                @endif

            </div>

            {{-- Scrollbarer Inhalt --}}
            <div class=" @if($mode == 'popup') h-[325px] @else max-h-[350px]  @endif overflow-y-auto">
                @foreach($this->filtered_bewertungen as $bewertung)
                    <div class="grid grid-cols-12 items-center border-b px-4 py-2 text-sm">
                        @if($mode == 'edit')
                            <input wire:model.live="selected_bewertungen.{{$bewertung->bewertung_id}}"
                                   type="checkbox"
                                   class="accent-csy-orange" />
                        @endif

                        {{-- Status --}}
                        <div class="felx-col col-span-1 -ml-1">
                            @php
                                $iconPath = $statusIcon[$bewertung->risiko_status] ?? null;
                            @endphp
                            @if($iconPath)
                                <div class="relative inline-block group">
                                    <!-- Status Icon -->
                                    <img src="{{ asset($iconPath) }}" alt="Status Icon" class="inline-block w-6 h-6 ml-3 cursor-pointer color-csy-blue" style="filter: invert(16%) sepia(69%) saturate(2022%) hue-rotate(197deg) brightness(100%) contrast(92%);">

                                    <!-- Tooltip -->
                                    <div class="absolute bottom-full left transform  w-max bg-gray-200 text-gray-800 border-2 border-solid border-gray-400 text-xs rounded p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                        {{ $bewertung->risikoStatus?->ds_name ?? 'N/A' }}
                                    </div>
                                </div>
                            @else
                                <span class="text-gray-500">Kein Icon</span>
                            @endif
                        </div>

                        {{-- Fortschritt --}}
                        <div class="flex-col col-span-1">
                            {{($bewertung->fortschritt ?? '0')*100}}%
                        </div>

                        {{-- Modus --}}
                        <div class="flex-col col-span-1">
                            {{$bewertung->modus ?? 'N/A'}}
                        </div>

                        {{-- Unternehmenswert --}}
                        <div class="flex-col col-span-5">
                            @switch($bewertung->modus)
                                @case('DS')
                                    {{$bewertung->latest_version_of_vvt()?->vvkateg ?? 'N/A'}}
                                    @break

                                @case('ISMS')
                                    {{$bewertung->latest_version_of_unternehmenswert()?->name ?? 'N/A'}}
                                    @break

                                @case('QMS')
                                    {{$bewertung->prozess?->proz_nummer.' '.$bewertung->prozess?->proz_name ?? 'N/A'}}: {{$bewertung->gegenstand}}
                                    @break

                                @default
                                    {{'N/A'}}
                            @endswitch
                        </div>

                        {{-- RL --}}
                        <div class="flex-col col-span-1 py-3 mr-3 text-center text-gray-800 font-semibold" style="background-color: {{ getGradientColor($bewertung->rl) }}; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);">
                            {{round($bewertung->rl,2)}}
                        </div>

                        {{-- Zugew. An / Bearb --}}
                        <div class="flex-col col-span-2">
                            <div>
                                {{$bewertung->zugew_user?->vorname.' '.$bewertung->zugew_user?->nachname ?? 'N/A'}}
                            </div>
                            <div>
                                {{ optional($bewertung->geaendert_ts ? \Carbon\Carbon::parse($bewertung->geaendert_ts) : null)->locale('de')?->isoFormat('DD.MM.YYYY, HH:mm') ?? '—' }}
                            </div>
                        </div>

                        {{-- Aktionen  --}}
                        @if($mode != 'edit')
                            <div class="flex col-span-1" style="filter: invert(16%) sepia(69%) saturate(2022%) hue-rotate(197deg) brightness(100%) contrast(92%);">
                                {{-- View --}}
                                <a
                                    @if($vvt->getConnectionName() == 'haupmandant_DB')
                                        href="{{route("show-vt", ['vvt_id' => $vvt->vvt_id, 'fid'=>session()->get('fid'),'mid'=>6,'is_main_db'=>true])}}" class="w-4 mr-2 transform hover:text-yellow-500 hover:scale-110">
                                    @else
                                        href="{{route("show-vt", ['vvt_id' => $vvt->vvt_id, 'fid'=>session()->get('fid'),'mid'=>6])}}" class="w-4 mr-2 transform hover:text-yellow-500 hover:scale-110">
                                    @endif

                                    <img src="{{ asset('images/icons/CO-DatMenue/eye.png') }}" alt="View Icon" class="w-4 h-4" title="Anzeigen"/>
                                </a>
                                {{-- Edit --}}
                                @can('edit',$vvt)
                                    <a href="{{ route("edit-vt", ['vvt_id' => $vvt->vvt_id, 'fid'=>session()->get('fid'),'mid'=>6]) }}" class="w-4 mr-2 transform hover:text-yellow-500 hover:scale-110">
                                        <img src="{{ asset('images/icons/CO-DatMenue/edit.png') }}" alt="Edit Icon" class="w-4 h-4" title="Bearbeiten"/>
                                    </a>
                                @else
                                    <a  class="opacity-50 w-4 mr-2 transform hover:text-yellow-500 hover:scale-110">
                                        <img src="{{ asset('images/icons/CO-DatMenue/edit.png') }}" alt="Edit Icon" class="w-4 h-4" title="Bearbeiten"/>
                                    </a>
                                @endcan
                                {{-- Export --}}
                                @can('export',$vvt)
                                    <a
                                        @if($vvt->getConnectionName() == 'haupmandant_DB')
                                            href="{{route('vvt-export',['vvt_id'=>$vvt->vvt_id, 'fid'=>session()->get('fid'), 'mid'=>6,'is_main_db'=>true])}}"
                                        @else
                                            href="{{route('vvt-export',['vvt_id'=>$vvt->vvt_id, 'fid'=>session()->get('fid'), 'mid'=>6 ])}}"
                                        @endif
                                        class="w-4 mr-2 transform hover:scale-110">
                                        <img src="{{ asset('images/icons/CO-DatMenue/maximize-size-option.png') }}" alt="Maximize Icon" class="w-4 h-4" title="Export"/>
                                    </a>
                                @else
                                    <a  class="opacity-60 w-4 mr-2 transform hover:text-red-500 hover:scale-110">
                                        <img src="{{ asset('images/icons/CO-DatMenue/maximize-size-option.png') }}" alt="Maximize Icon" class="w-4 h-4" title="Export"/>
                                    </a>
                                @endcan
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
            <!-- Pagination -->
            <div class="items-center">
                {{$this->filtered_bewertungen->links()}}
            </div>
        </div>
    </div>
</div>