@php
    use App\Models\CodokKpi;
    use App\Models\StammDokstatus;

    $fid = request()->query('fid', session()->get('fid'));
    $mid = request()->query('mid', 1);
    $proz_id = request()->query('$proz_id');

    $statusIcon = [
        'F' => 'images/icons/CO-DatMenue/Status-Icons/statusicon_f.png',
        'IB' => 'images/icons/CO-DatMenue/Status-Icons/statusicon_b.png',
        'B' => 'images/icons/CO-DatMenue/Status-Icons/statusicon_b.png',
        'E' => 'images/icons/CO-DatMenue/Status-Icons/statusicon_e.png',
        'WF' => 'images/icons/CO-DatMenue/Status-Icons/statusicon_wf.png',
        'R' => 'images/icons/CO-DatMenue/Status-Icons/statusicon_r.png',
    ];
@endphp

<div class="container max-w-full px-6 py-4">
    <!-- Zurück Button + Titel -->
    <div class="flex justify-between items-center mb-6 ml-3">
        <div class="flex items-center gap-4">
            @php
                $fid = session()->get('fid');
                $proz_id = request()->get('proz_id');
            @endphp

            <a href="{{ config('constants.WEBPORTAL_URL') . ($proz_id
                ? "/?p=pb-view&mid=2&fid={$fid}&proz_id={$proz_id}"
                : "/?p=reporting&mid=2&fid={$fid}") }}"
               class="text-[rgb(241,131,0)] font-semibold hover:underline whitespace-nowrap">
                &lt; zurück
            </a>

            <span class="font-semibold text-[rgb(13,59,123)]">
                @if($prozess)
                    {{ $prozess->proz_nummer }} {{ $prozess->proz_name }}: Leistungskennzahlen
                @else
                    Leistungskennzahlen
                @endif
            </span>
        </div>

        <!-- Rechts: Add + Papierkorb Buttons -->
        <div class="flex items-center gap-3 ml-auto">
            @can('create', new CodokKpi())
                <button wire:click="createNewKpi" type="button"
                        class="flex items-center justify-center rounded-md bg-[rgb(241,131,0)] px-4 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="Neue KPI"/>
                </button>
            @else
                <button type="button"
                        class="grayscale flex items-center justify-center rounded-md bg-[rgb(241,131,0)] px-4 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="grayscale w-5 h-5 invert brightness-0"
                         title="Neue KPI"/>
                </button>
            @endcan

            @can('deleteAny', new CodokKpi())
                <a href="{{ route('kpi-bin', ['fid'=>session()->get('fid'), 'mid'=>session()->get('mid'), 'proz_id' => request('proz_id')]) }}" class="flex items-center justify-center rounded-md bg-[rgb(241,131,0)] px-4 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 KPIs Anzeigen"/>
                </a>
            @endcan
        </div>
    </div>

    <!-- KPI Tabelle -->
    <div>
        <table class="w-full table-auto bg-white border border-gray-200">
            <thead>
            <tr class="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
                <th class="py-3 px-6 text-left w-16">Status</th>
                <th class="py-3 px-6 text-left w-32">Prozess</th>
                <th class="py-3 px-6 text-left w-48">Name</th>
                <th class="py-3 px-6 text-left w-24">IST</th>
                <th class="py-3 px-6 text-left w-24">Ziel</th>
                <th class="py-3 px-6 text-left w-20">Bewertung</th>
                <th class="py-3 px-6 text-left w-24">Methode</th>
                <th class="py-3 px-6 text-left w-20">Zyklus</th>
                {{-- Breite der Datenquelle-Spalte erhöht --}}
                <th class="py-3 px-6 text-left w-52">Datenquelle</th>
                {{-- Spalte "Info" entfernt --}}
                <th class="py-3 px-6 text-center w-32">Aktionen</th>
            </tr>
            </thead>
            <tbody class="text-gray-600 text-sm font-light">
            @foreach($latestKpis as $kpi)
                @php
                    $status = StammDokstatus::where('ds_kuerzel', $kpi->status)->first();
                    $iconPath = $statusIcon[$kpi->status] ?? null;
                    $statusName = $status->ds_name ?? $kpi->status;
                    $proz_id_local = optional($kpi->prozesse->first())->proz_id;
                @endphp
                <tr class="border-b border-gray-200 hover:bg-gray-100">
                    <td class="py-3 px-6">
                        @if($iconPath)
                            <div class="relative inline-block group">
                                <img src="{{ asset($iconPath) }}" alt="{{ $kpi->status }}" class="inline-block w-6 h-6 ml-1 cursor-pointer" style="filter: invert(16%) sepia(69%) saturate(2022%) hue-rotate(197deg) brightness(100%) contrast(92%);">
                                <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 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">
                                    {{ $statusName }}
                                </div>
                            </div>
                        @else
                            <span class="text-gray-500">Kein Icon</span>
                        @endif
                    </td>
                    <td class="px-4 py-3">
                        @if($kpi->prozesse && $kpi->prozesse->count())
                            <div class="flex flex-wrap gap-1">
                                @foreach($kpi->prozesse as $p)
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
                            {{ $p->prozess->proz_nummer ?? '–' }} - {{ $p->prozess->proz_name ?? '–' }}
                        </span>
                                @endforeach
                            </div>
                        @else
                            <span class="text-gray-400">–</span>
                        @endif
                    </td>
                    <td class="py-3 px-6">{{ $kpi->name }}</td>
                    <td>
                        <div class="flex items-center gap-2"> <!-- Flexbox, vertikal zentriert, Abstand 2 -->
                            <div>{{ $kpi->ist_aktuell_kennzahl }}</div>

                            @if($kpi->ist_icon === 'grün')
                                <div class="w-4 h-4 rounded-full bg-lime-500"></div>
                            @elseif($kpi->ist_icon === 'gelb')
                                <div class="w-4 h-4 rounded-full bg-yellow-400"></div>
                            @elseif($kpi->ist_icon === 'rot')
                                <div class="w-4 h-4 rounded-full bg-red-600"></div>
                            @else
                                <div class="w-4 h-4 rounded-full bg-gray-300"></div> {{-- falls kein Wert gesetzt --}}
                            @endif
                        </div>
                    </td>
                    <td class="px-4 py-3">
                        @if($kpi->ziel)
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold text-gray-700">
                    {{ $kpi->ziel }}
                </span>
                        @else
                            <span class="text-gray-400">–</span>
                        @endif
                    </td>
                    <td class="py-3 px-6">{{ $kpi->bewertung }}</td>
                    <td class="py-3 px-6">{{ $kpi->methode }}</td>
                    <td class="py-3 px-6">{{ optional($kpi->zyklus)->name ?? '-' }}</td>

                    {{-- Datenquelle-Spalte (mehr Platz) --}}
                    <td class="px-4 py-3">
                        <div class="space-y-2">
                            @if(!empty($kpi->datenquelle_text))
                                <div x-data="{ showFull: false }" class="relative group text-gray-700 font-medium max-w-[350px]" @mouseenter="showFull = true" @mouseleave="showFull = false">
                                    {{-- Kurzer Text mit Hover-Hintergrund --}}
                                    <div class="line-clamp-2 pr-5 cursor-pointer transition-colors duration-200  rounded-md p-1">
                                        {!! $this->formatTextWithLinks($kpi->datenquelle_text) !!}
                                    </div>
                                    {{-- Tooltip mit Zeilenumbruch --}}
                                    <div x-show="showFull" x-cloak class="absolute z-50 top-full left-0 mt-1 text-gray-700 text-xs rounded-lg bg-blue-100 p-2 shadow-lg w-48 break-words whitespace-normal">
                                        {!! $this->formatTextWithLinks($kpi->datenquelle_text) !!}
                                    </div>
                                </div>
                            @endif

                            {{-- Dateien --}}
                            @if($kpi->dateien && $kpi->dateien->count())
                                @foreach($kpi->dateien as $file)
                                    @php
                                        try {
                                            $downloadUrl = $file->file_path
                                                ? URL::temporarySignedRoute(
                                                    'file.download',
                                                    now()->addMinutes(60),
                                                    [
                                                        'folder' => $file->getSFTP(),
                                                        'filePath' => $file->file_path,
                                                        'filename' => $file->original_filename,
                                                    ]
                                                  )
                                                : null;
                                        } catch (\Exception $e) {
                                            $downloadUrl = null;
                                        }
                                    @endphp

                                    <div class="flex flex-col text-sm">
                                        @if($downloadUrl)
                                            <a href="{{ $downloadUrl }}" target="_blank" class="text-blue-600 hover:underline font-medium">
                                                📄 {{ $file->original_filename ?? '–' }}
                                            </a>
                                        @else
                                            <span class="text-gray-500">{{ $file->original_filename ?? '–' }}</span>
                                        @endif
                                        @if(!empty($file->bemerkung))
                                            <div x-data="{ showFull: false }" class="relative group ml-5 mt-1 text-xs text-gray-500 italic max-w-[300px]" @mouseenter="showFull = true" @mouseleave="showFull = false">
                                                <div class="line-clamp-2 pr-5 cursor-pointer">
                                                    {{ $file->bemerkung }}
                                                </div>
                                                <div x-show="showFull" x-transition x-cloak class="absolute z-50 top-full left-0 mt-1 bg-blue-100 text-blue-600 text-xs rounded-lg p-2 shadow-lg w-max max-w-[400px]">
                                                    {{ $file->bemerkung }}
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            @else
                                @if(empty($kpi->datenquelle_text))
                                    <span class="text-gray-400">–</span>
                                @endif
                            @endif
                        </div>
                    </td>

                    {{-- Aktionen mit Info-Icon --}}
                    <td class="py-3 px-6 text-center">
                        <div class="flex items-center justify-center gap-2">

                            {{-- Info-Icon (kleiner, als erstes) --}}
                            <div class="relative inline-block group">
                                <img src="{{ asset('images/icons/question-mark-in-a-circle.png') }}"
                                     alt="Info"
                                     class="w-4 h-4 cursor-pointer"
                                     style="filter: invert(16%) sepia(69%) saturate(2022%) hue-rotate(197deg) brightness(100%) contrast(92%);"
                                     title="">
                                <div class="absolute top-full left-1/2 transform -translate-x-1/2 mt-2 bg-gray-200 text-gray-800 text-xs rounded-lg px-3 py-2 whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 shadow-lg pointer-events-none">
                                    <div><strong>Version:</strong> {{ $kpi->revnr ?? '0.1' }}</div>
                                    <div><strong>Zugew.:</strong> {{ $kpi->zugew_user_name ?? '-' }}</div>
                                    <div><strong>Bearb.:</strong> {{ \Carbon\Carbon::parse($kpi->geaendert_ts)->locale('de')->isoFormat('DD.MM.YYYY, HH:mm') }}</div>
                                </div>
                            </div>

                            {{--View (filtered in backend)--}}
                            <a href="{{ route('kpi-view', ['kpi_id' => $kpi->kpi_id]) }}?fid={{ $fid }}&mid={{ $mid }}@if(request()->has('proz_id'))&proz_id={{ request('proz_id') }}@endif" class="w-4 hover:scale-110" style="filter: invert(16%) sepia(69%) saturate(2022%) hue-rotate(197deg) brightness(100%) contrast(92%);">
                                <img src="{{ asset('images/icons/CO-DatMenue/eye.png') }}" alt="View" class="w-4 h-4" title="Anzeigen"/>
                            </a>
                            {{--Edit--}}
                            @can('edit',$kpi)
                                <a href="{{ route('kpi-edit', ['kpi_id' => $kpi->kpi_id]) }}?fid={{ $fid }}&mid={{ $mid }}@if(request()->has('proz_id'))&proz_id={{ request('proz_id') }}@endif" class="w-4 hover:scale-110" style="filter: invert(16%) sepia(69%) saturate(2022%) hue-rotate(197deg) brightness(100%) contrast(92%);">
                                    <img src="{{ asset('images/icons/CO-DatMenue/edit.png') }}" alt="Edit" class="w-4 h-4" title="Bearbeiten"/>
                                </a>
                            @else
                                <a  class="opacity-60 w-4 hover:scale-110" style="filter: invert(16%) sepia(69%) saturate(2022%) hue-rotate(197deg) brightness(100%) contrast(92%);">
                                    <img src="{{ asset('images/icons/CO-DatMenue/edit.png') }}" alt="Edit" class="w-4 h-4" title="Bearbeiten"/>
                                </a>
                            @endcan
                            @can('delete',$kpi)
                                <a wire:click="confirmDelete({{ $kpi->gruppen_nr }})" class="w-4 hover:scale-110">
                                    <img src="{{ asset('images/icons/CO-DatMenue/recycle-bin.png') }}" alt="Delete Icon" class="w-4 h-4" title="Löschen" style="filter: invert(16%) sepia(69%) saturate(2022%) hue-rotate(197deg) brightness(100%) contrast(92%);"/>
                                </a>
                            @endcan
                        </div>
                    </td>
                </tr>
            @endforeach

            @if($latestKpis->isEmpty())
                <tr>
                    <td colspan="11" class="py-3 px-6 text-center text-gray-500">
                        Keine KPIs gefunden
                    </td>
                </tr>
            @endif
            </tbody>
        </table>
    </div>

    @if ($showDeleteModal)
        <div class="fixed inset-0 bg-gray-400 bg-opacity-10 flex justify-center items-center z-50">
            <div class="bg-white rounded-lg w-1/3 p-6 shadow-xl border border-gray-300">
                <p class="text-lg font-semibold text-gray-800">
                    Möchten Sie diese Leisungskennzahl inklusive aller Versionen wirklich löschen?
                </p>
                <div class="mt-4 flex justify-end space-x-4">
                    <button wire:click="deleteKpiGroup" class="bg-orange-500 text-white px-4 py-2 rounded-md hover:bg-orange-600">
                        Ja, löschen
                    </button>
                    <button wire:click="$set('showDeleteModal', false)" class="bg-gray-200 text-gray-900 px-4 py-2 rounded-md hover:bg-gray-300">
                        Abbrechen
                    </button>
                </div>
            </div>
        </div>
    @endif
</div>