{{-- EDIT FOR CHERRY PICK --}}
<div>
    <div class="bg-white rounded-lg p-8 shadow-lg mb-2 space-y-8">
        <h2 class="text-lg font-semibold text-csy-dark-blue">{{ $abschnitt_nr }}. {{ __('general.Documents') }}</h2>
        @if (!$readonly)
            <div class="flex flex-row">
                @if(!$isKpi)
                    <!-- Dokumentklasse-Auswahl -->
                    <div class="">
                        <label for="dk_id" class="block text-sm font-medium text-csy-label-blue">
                            Dokumentenklasse auswählen:
                        </label>
                        <select id="dk_id" wire:model.live="selected_dk_id"
                                class="mt-2 block w-64 rounded-md border border-gray-300 py-2 px-3 text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            <option value="">-- Bitte wählen --</option>
                            @foreach($stamm_dokklassen as $kategorie)
                                <option value="{{ $kategorie->dk_id }}">{{ $kategorie->dk_name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Dokumentkategorie-Auswahl -->
                    <div class="ml-5">
                        <label for="dokkat_id" class="block text-sm font-medium text-csy-label-blue">
                            Dokumentenkategorie auswählen:
                        </label>
                        <select id="dokkat_id" wire:model.live="selected_dkat_id"
                                class="mt-2 block w-64 rounded-md border border-gray-300 py-2 px-3 text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            <option value="">-- Bitte wählen --</option>
                            @foreach($stamm_dokkategorien as $kategorie)
                                <option value="{{ $kategorie->dokkat_id }}">{{ $kategorie->dokkat_name }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
<!--
                <button wire:click="flipShow_stammdata_popup" class="ml-auto mb-auto h-10 bg-[rgb(13,59,123)] text-white p-2 rounded">
                    Aus Stammdaten hinzufügen
                </button>-->
                {{-- Popup --}}
                @if(false){{--$show_stammdata_popup--}}
                    <div class="fixed inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center z-50">
                        <div class="bg-white rounded-lg max-h-[80%] w-1/2 p-6 shadow-lg relative">
                            <!-- Close Button -->
                            <button wire:click.throttle="flipShow_stammdata_popup"
                                    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="Close Icon" class="w-4 h-4" />
                            </button>

                            <div class="space-y-4 mt-2">
                                <div class="mt-2 h-auto overflow-hidden overflow-y-auto">
                                    {{-- Suchfeld --}}
                                    <div class="w-4/5 justify-end mb-3 mt-4">
                                        <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 Document')}} ...">
                                            <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 Select für stamm_dateien dokkategorie --}}
                                    <div class="w-4/5 mb-3">
                                        <select wire:model.live="filter_dakt_id"
                                                class="w-full rounded-md border border-gray-300 px-3 py-1 text-sm shadow-sm focus:ring-2 focus:ring-orange-400 focus:outline-none">
                                            <option value="0">-- Nach Dokumentenkategorie filtern --</option>
                                            @foreach($stamm_dokkategorien as $kategorie)
                                                <option value="{{ $kategorie->dokkat_id }}">{{ $kategorie->dokkat_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- Tabelle mit fixem Header --}}
                                    <div class="border border-gray-300 rounded-md">

                                        {{-- Header (nicht scrollbar) --}}
                                        <div class="grid grid-cols-2 font-semibold bg-gray-200 py-2 px-4 text-sm text-gray-700 border-b">
                                            <div>Dokument</div>
                                            <div>Dokumentenkategorie</div>
                                        </div>

                                        {{-- Scrollbarer Inhalt --}}
                                        <div class="h-[250px] overflow-y-auto">
                                            @foreach($this->filtered_stamm_dateien as $datei)
                                                <div class="grid grid-cols-2 items-center border-b px-4 py-2 text-sm">
                                                    <div class="flex">
                                                        <input wire:model.live="selected_StammDateien.{{$datei->dateien_id}}" id="uw_{{$datei->dateien_id}}" type="checkbox" name="uw-option" class="accent-csy-orange"/>
                                                        <div class="ml-2 w-full">
                                                            <label for="uw_{{$datei->dateien_id}}" class="block">
                                                                {{$datei->original_filename}}
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="w-full">
                                                        <label for="uw_{{$datei->dateien_id}}" class="block">
                                                            {{$stamm_dokkategorien->where('dokkat_id',$datei->dokkat_id)->first()?->dokkat_name  ?? '–' }}
                                                        </label>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>

                                {{-- Action Button --}}
                                <div class="flex justify-end space-x-4">
                                    <button wire:click.throttle="add_files_from_stammdata_popup()" class="bg-csy-orange text-white px-4 py-2 rounded">
                                        {{ __('general.add Document(s)') }}
                                    </button>
                                </div>
                            </div>

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

        <!--
            <div class="text-lg cursor-pointer flex items-center">
                <input wire:model.live="selected_isStammData" id="stamm_data_check" type="checkbox" class="h-5 w-5 mr-2 peer">
                <label for="stamm_data_check" class="text-sm text-csy-label-blue transition duration-160 ease-in-out peer-checked:text-csy-orange">
                    {{'Als Stammdaten Anlegen'}}
                </label>
            </div>
            -->

            <!-- Drag & Drop Bereich -->
            <p class="mt-3 text-csy-label-blue flex item-center">Wählen Sie bitte die Dateien aus, die Sie hochladen möchten:
                <img src="{{ asset('images/icons/question-mark-in-a-circle.png') }}"
                     class="h-4 w-4 ml-1 mt-1 cursor-pointer"
                     title="Erlaubte Dateitypen:
                        • Dokumente: DOC, DOCX, PDF, TXT
                        • Tabellenkalkulation: XLS, XLSX, XLSM
                        • Präsentationen: PPT, PPTX, VSD, VSDX
                        • Bilder: JPG, JPEG, BMP, TIF
                        • ZIP-Archiv: ZIP
                        Maximale Dateigröße: 60 MB" />
            </p>

            <div {{-- Progress Tracker --}}
                 x-data="{ isUploading: false, progress: 0 }"
                 x-on:livewire-upload-start="isUploading = true"
                 x-on:livewire-upload-progress="progress = $event.detail.progress"
                 x-on:livewire-upload-finish="isUploading = false"
                 x-on:livewire-upload-error="isUploading = false">

                <div {{-- Drag & Drop Feld --}}
                     class="w-1/3 border-2 border-dashed border-gray-400 rounded-lg p-6 text-center bg-gray-50 cursor-pointer" ondragover="event.preventDefault(); this.classList.add('border-orange-500', 'bg-orange-100');" ondragleave="this.classList.remove('border-orange-500', 'bg-orange-100');"

                     {{-- Drag & Drop Mechanik --}}
                     x-data
                     x-on:dragover.prevent
                     x-on:drop.prevent="() => {
                        const dt = $event.dataTransfer;
                        const files = dt.files;
                        $refs.fileInput.files = files;
                        $refs.fileInput.dispatchEvent(new Event('change', { bubbles: true }));}"
                >
                    {{-- Text --}}
                    <p class="text-csy-input-gray"> Auf den Button klicken oder Dateien auf den Button ziehen (Drag & Drop)</p>

                    {{-- "Button" für browser Upload--}}
                    <label for="file-upload" class="mt-3 inline-block bg-[rgb(13,59,123)] text-white font-semibold py-4 px-8 rounded-lg cursor-pointer hover:bg-[rgb(241,131,0)] text-lg">
                        Datei Hochladen
                    </label>

                    <!-- Upload Progress -->
                    <div class="mt-4" x-show="isUploading">
                        <div class="h-4 bg-gray-200 rounded">
                            <div
                                class="h-4 bg-blue-500 rounded"
                                :style="{ width: progress + '%' }"
                            ></div>
                        </div>
                        <p class="text-sm text-gray-600 mt-1" x-text="'Uploading: ' + progress + '%'"></p>
                    </div>

                    {{-- echter Input (hidden) --}}
                    <input id="file-upload" type="file" multiple wire:model.live="files" x-ref="fileInput" class="hidden"/>
                </div>
            </div>
        @endif

                @foreach($stamm_dokkategorien as $stamm_dokkategorie)