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

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

    // Array mit Status-Icons (Backend bleibt unverändert)
    $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 mx-auto p-4">
    <!-- Zurück Button -->
    <div class="flex justify-between items-center mb-6">
        <!-- Links -->
        <button type="button" class="text-[rgb(241,131,0)] z-10">
            <a href="{{ route('kpi-menu', ['fid' => session('fid'), 'mid' => session('mid'), 'proz_id' => $proz_id ?? request('proz_id')]) }}">
                &lt;zurück
            </a>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span class="text-[rgb(13,59,123)] cursor-default">Liste gelöschte KPIs</span>
        </button>
    </div>

    <div class="mt-6">
        <div class="container mx-auto">
            <table class="min-w-full table-auto bg-white">
                <thead>
                <tr class="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
                    <th class="py-3 px-6 text-left">Status</th>
                    <th class="py-3 px-6 text-left">Name</th>
                    <th class="py-3 px-6 text-left">Ziel</th>
                    <th class="py-3 px-6 text-left">Bewertung</th>
                    <th class="py-3 px-6 text-left">Methode</th>
                    <th class="py-3 px-6 text-left">Zyklus</th>
                    <th class="py-3 px-6 text-left">Version</th>
                    <th class="py-3 px-6 text-left">Zugewiesene Person</th>
                    <th class="py-3 px-6 text-left">Zuletzt bearbeitet</th>
                    <th class="py-3 px-6 text-center">Aktionen</th>
                </tr>
                </thead>
                <tbody class="text-gray-600 text-sm font-light">
                @foreach($latestKpis as $kpi)
                    @php
                        // Status-Info holen
                        $status = StammDokstatus::where('ds_kuerzel', $kpi->status)->first();
                        $iconPath = $statusIcon[$kpi->status] ?? null;
                        $statusName = $status->ds_name ?? $kpi->status;
                    @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="py-3 px-6">{{ $kpi->name }}</td>
                        <td class="py-3 px-6">{{ $kpi->ziel }}</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>
                        <td class="py-3 px-6">{{ $kpi->revnr ?? '0.1' }}</td>
                        <td class="py-3 px-6"> {{ $kpi->zugew_user_name ?? '-' }} </td>
                        <td class="py-3 px-6">{{ \Carbon\Carbon::parse($kpi->geaendert_ts)->locale('de')->isoFormat('DD.MM.YYYY, HH:mm') }}</td>
                        <td class="py-3 px-6 text-center">
                            <div class="flex items-center justify-center" style="filter: invert(16%) sepia(69%) saturate(2022%) hue-rotate(197deg) brightness(100%) contrast(92%);">

                                <!-- Rückgängig machen -->
                                <button wire:click.throttle="restoreKpiGroup({{ $kpi->gruppen_nr }})"
                                        class="w-4 mr-2 transform hover:text-yellow-500 hover:scale-110">
                                    <img src="{{ asset('images/icons/CO-DatMenue/undo-navigational-arrow-in-a-circle.png') }}"
                                         alt="Restore Icon"
                                         class="w-4 h-4"
                                         title="Wiederherstellen"/>
                                </button>

                                <!-- endgültig löschen -->
                                <a wire:click="confirmDelete({{ $kpi->gruppen_nr }})" class="w-4 mr-2 transform hover:scale-110">
                                    <img src="{{ asset('images/icons/CO-DatMenue/recycle-bin.png') }}" alt="Delete Icon" class="w-4 h-4" title="Löschen"/>
                                </a>
                            </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

                @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 Leistungskennzahl inklusive aller Versionen endgültig 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

                </tbody>
            </table>
        </div>
    </div>
</div>