@php use Illuminate\Support\Facades\DB; @endphp
<div class="bg-gray-100 min-h-screen p-8 flex">
    <script src="https://cdn.ckeditor.com/ckeditor5/39.0.0/classic/ckeditor.js"></script>

    <script setup lang="ts">
        //CKEditor Instanzierung 4. Software
        document.addEventListener('DOMContentLoaded', function() {
            ClassicEditor
                .create(document.querySelector('#softwareBemerkung'), {
                    toolbar: [
                        'undo', 'redo', '|',
                        'bold', 'italic', 'underline', 'strikethrough', '|',
                        'link', 'bulletedList', 'numberedList', '|',
                        'blockQuote', 'insertTable', '|',
                        'alignment', 'highlight', '|',
                        'removeFormat'
                    ]
                })
                .then(editor => {
                    // Bei Änderungen im Editor wird der Wert in Livewire aktualisiert
                    editor.model.document.on('change:data', () => {
                        @this.set('softwareBemerkung', editor.getData());
                    });
                })
                .catch(error => {
                    console.error(error);
                });
        });

        //CKEditor Instanzierung 15. Zuweisung & Notify
        document.addEventListener('DOMContentLoaded', function() {
            ClassicEditor
                .create(document.querySelector('#notifyBemerkung'), {
                    toolbar: [
                        'undo', 'redo', '|',
                        'bold', 'italic', 'underline', 'strikethrough', '|',
                        'link', 'bulletedList', 'numberedList', '|',
                        'blockQuote', 'insertTable', '|',
                        'alignment', 'highlight', '|',
                        'removeFormat'
                    ]
                })
                .then(editor => {
                    // Bei Änderungen im Editor wird der Wert in Livewire aktualisiert
                    editor.model.document.on('change:data', () => {
                        @this.set('notifyBemerkung', editor.getData());
                    });
                })
                .catch(error => {
                    console.error(error);
                });
        });

    </script>


    <style>
        .ck-editor__editable_inline {
            min-height: 100px; /* Höhe anpassen */
            max-height: 300px;  /* Optional: Automatische Anpassung */
            overflow-y: auto;  /* Falls der Inhalt die maximale Höhe überschreitet */
        }
    </style>

    <!-- Container für beide Formulare -->
    <div class="flex w-full space-x-8">
        <!-- Linke Seite (3/4 der Seite) -->
        <div class="w-3/4 flex flex-col">
            <!-- Zurück Button -->
            <div class="flex justify-between items-center mb-6">
                <button class="text-[rgb(241,131,0)] z-10">

                    @if ($statusList->verzeichnis_id != 2)
                        <a href="{{route('vvt',['fid'=>session()->get('fid'),'mid'=>6])}}" wire:v-v-t>
                            &lt;zurück
                        </a>
                    @else
                        <a href="{{route('vvt-av',['fid'=>session()->get('fid'),'mid'=>6])}}" wire:v-v-t>
                            &lt;zurück
                        </a>
                    @endif
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <span class="text-[rgb(13,59,123)] cursor-default">
                        {{ __('general.Processing number') }}: {{ $verarbeitungsNummer }} -
                        @if ($statusList->verzeichnis_id == 1)
                            (Verantwortlicher)
                        @elseif ($statusList->verzeichnis_id == 2)
                            (Auftragsverarbeiter)
                        @endif
                    </span>
                </button>
                <button type="button" wire:click="$dispatch('openPopup')" class="inline-flex items-center gap-x-1.5 rounded-md bg-[rgb(241,131,0)] px-5 py-2 z-2000 text-sm font-semibold text-white shadow-sm hover:bg-orange-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600 ml-auto">
                    Adressen & Personen
                </button>
                @livewire('address-book.address-book')
            </div>

            {{--<!-- Container für Verarbeitungsnummer und Buttons -->
            <div class="flex justify-between items-center mb-6">
                <div class="text-lg font-semibold text-gray-900">
                    {{ __('general.Processing number') }}: <span class="font-bold">{{ $verarbeitungsNummer }}</span>
                </div>
            </div>--}}
            <!-- Hauptformular (linke Seite) -->
            <div class="space-y-6">
                <div class="w-full flex flex-col">

                    <!-- Abschnitt 1: Verarbeitungstaetigkeit -->
                    <div id="section1">
                        <livewire:vvt.verarbeitungstaetigkeit-form :vvt_id="$vvt_id" :read-only="false" />
                    </div>

                    <!-- Abschnitt 2: Verantwortlichkeiten  -->
                    <div id="section2">
                        <livewire:vvt.verantwortlichkeiten-form :vvt_id="$vvt_id" :read-only="false"/>
                    </div>

                    @if ($statusList->verzeichnis_id != 2)
                        <!-- Abschnitt 3: Auftragsverarbeiter & gemeinsame Verantwortliche -->
                        <div id="section3">
                            <livewire:vvt.auftragverarbeiter-gemeinsame-verantwortliche-form :vvt_id="$vvt_id" :readonly="false"/>
                        </div>
                    @endif


                    <!-- Abschnitt 4: Software -->
                    <div id="section4">
                        <livewire:vvt.software-form :vvt_id="$vvt_id"/>
                    </div>

                    <!-- Abschnitt 5: Zweckbestimmungen -->
                    <div id="section5">
                        <livewire:vvt.zweckbestimmung-form :vvt_id="$vvt_id" :readonly="false"/>
                    </div>

                    <!-- Abschnitt 6: Art der Daten -->
                    <div id="section6">
                        <livewire:vvt.art_der_daten-form :vvt_id="$vvt_id" :readonly="false"/>
                    </div>

                    <!-- Abschnitt 7: Empfänger -->
                    <div id="section7">
                        <livewire:vvt.empfaenger-form :vvt_id="$vvt_id"/>
                    </div>

                    @if ($statusList->verzeichnis_id != 2)
                    <!-- Abschnitt 8: Löschfristen -->
                    <div id="section8">
                        <livewire:vvt.loeschfristen-form :vvt_id="$vvt_id" :readonly="false"/>
                    </div>

                    <!-- Abschnitt 9: Berechtigungsgruppen -->
                    <div id="section9">
                        <livewire:vvt.berechtigungsgruppen-form :vvt_id="$vvt_id" :readonly="false"/>
                    </div>

                    <!-- Abschnitt 10: Datenschutzfolgenabschätzung (DSFA) -->
                    <div id="section10">
                        <livewire:vvt.datenschutzfolgenabschaetzung :vvt_id="$vvt_id"/>
                    </div>

                    <!-- Abschnitt 11: Künstlicher Intelligenz -->
                    <div id="section11">
                        <livewire:vvt.k-i :vvt_id="$vvt_id" :readonly="false"/>
                    </div>

                    <!-- Abschnitt 12: Informationspflichten -->
                    <div id="section12">
                        <livewire:vvt.informationspflichten :vvt_id="$vvt_id" :readonly="false"/>
                    </div>
                    @endif

                    <!-- Abschnitt 13: Technische und organisatorische Maßnahmen -->
                    <div id="section13">
                        <livewire:vvt.t-o-m :vvt_id="$vvt_id" :readonly="false"/>
                    </div>

                    <!-- Abschnitt 14: Dokumente -->
                    <div id="section14">
                        <livewire:vvt.dokumente :vvt_id="$vvt_id" :readonly="false"/>
                    </div>

                    <!-- Abschnitt 15: Zuweisung & notify -->
                    <div id="section15">
                        <livewire:vvt.zuweisung-notify :vvt_id="$vvt_id" :readonly="false"/>
                    </div>

                </div>
            </div>
        </div>

        <!-- Rechte Seite (1/4 der Seite) -->
        <div class="w-1/4 bg-white p-6 rounded-lg shadow-lg fixed right-0 bottom-16 h-[calc(100vh-15rem)] overflow-y-auto">
        <div class="flex justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900">{{ __('general.Contents') }}</h3>
                <h3 class="text-lg font-semibold text-gray-900">{{ __('general.Completed') }}</h3>
            </div>

            @php
                $sections = [
                    ['id' => 1, 'label' => __('general.Processing activity'), 'show' => true],
                    ['id' => 2, 'label' => __('general.Responsibilities'), 'show' => true],
                    ['id' => 3, 'label' => __('general.Processors & joint controllers'), 'show' => $statusList->verzeichnis_id != 2],
                    ['id' => 4, 'label' => __('general.Software'), 'show' => true],
                    ['id' => 5, 'label' => __('general.Purpose'), 'show' => true],
                    ['id' => 6, 'label' => __('general.Type of data'), 'show' => true],
                    ['id' => 7, 'label' => __('general.Receiver'), 'show' => true],
                    ['id' => 8, 'label' => __('general.Deletion deadlines'), 'show' => $statusList->verzeichnis_id != 2],
                    ['id' => 9, 'label' => __('general.Authorization groups'), 'show' => $statusList->verzeichnis_id != 2],
                    ['id' => 10, 'label' => 'Datenschutzfolgenabschätzung', 'show' => $statusList->verzeichnis_id != 2],
                    ['id' => 11, 'label' => 'Künstliche Intelligenz (KI)', 'show' => $statusList->verzeichnis_id != 2],
                    ['id' => 12, 'label' => __('general.Duty to inform'), 'show' => $statusList->verzeichnis_id != 2],
                    ['id' => 13, 'label' => __('general.Technical and organizational measures'), 'show' => true],
                    ['id' => 14, 'label' => 'Dokumente', 'show' => true],
                    ['id' => 15, 'label' => 'Zuweisung & Notify', 'show' => true],
                ];

                // Filter nur sichtbare Abschnitte
                $visibleSections = collect($sections)->filter(fn($s) => $s['show'])->values();
            @endphp

            <div class="space-y-4 overflow-y-auto pr-3 mr-0 h-[calc(100vh-38rem)]">
                @foreach ($visibleSections as $index => $section)
                    <div class="flex items-center justify-between">
                        <a href="#section{{ $section['id'] }}" class="text-blue-500">
                            <span class="text-csy-dark-blue">{{ $index + 1 }}. {{ $section['label'] }}</span>
                        </a>
                        <input type="checkbox" wire:click="onDirtyStateChanged('#section{{ $section['id'] }}, 1)" wire:model.live="checkboxValues.option{{ $section['id'] }}" class="ml-2">
                    </div>
                @endforeach
            </div>

            <div class="w-full flex justify-between items-center mt-2">
                <label for="fortschritt" class="block text-sm font-medium text-gray-700">Fortschritt</label>
                <input value="{{ $this->checkboxProgress }}%" type="text" id="fortschritt" readonly class="mt-1 block w-1/3 bg-gray-200 border-gray-300 rounded-md shadow-sm focus:ring-[rgb(241,131,0)] focus:border-[rgb(241,131,0)] text-center" placeholder="0%" disabled>
            </div>

            <div class="flex flex-row pt-[25px]">
                <!-- Revisionsnummer -->
                <div class="flex-auto flex-col pr-4">
                    <div class="flex justify-between ">
                        <small class="font-semibold text-csy-dark-blue text-[clamp(12px,1vw,14px)]">{{ __('general.Revision number') }}</small>
                    </div>
                    <div wire:model="revision" class="items-center justify-between p-2 mb-4 rounded bg-csy-white border-0 ring-1 ring-inset ring-csy-blue focus:ring-2">
                        <span class="flex-shrink-0 text-csy-dark-blue">{{$revision}}</span>
                    </div>
                </div>
                <!-- Status -->
                <div class="flex-auto flex-col pr-4">
                    <div class="flex justify-between ">
                        <small class="font-semibold text-csy-dark-blue text-[clamp(12px,1vw,14px)]">{{ __('general.Status') }}</small>
                    </div>
                    <div>
                        <select wire:model="selectedStatus" id="status" name="status" class="z-50 h-[40px] p-2 w-full bg-white text-csy-dark-blue rounded border-0 ring-1 ring-inset ring-csy-blue focus:ring-2 focus:ring-csy-dark-blue">
                            @foreach($dokstatus as $key => $status)
                                <option  wire:click.throttle="setNextRevision" value="{{$key}}" wire:key="$status[0]">{{$status}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <!-- Checkbox Revision Hochzählen -->
            <div class="flex items-center">
                <label>
                    <input wire:model="revision_nicht_hochzaehlen"  wire:click.throttle="setNextRevision" type="checkbox" id="nicht_hochzaehlen" value="true" class="mr-2">
                    <span class="text-csy-dark-blue">{{ __('general.Do not increment the revision number') }}</span>
                </label>
            </div>

            <div class="mt-1">
                {{--<button type="button" disabled
                        class="mt-2 w-full bg-white text-[rgb(241,131,0)] border border-[rgb(241,131,0)] py-2 rounded-md grayscale">{{ __('general.Save as template') }}
                </button>--}}
                <button type="submit" wire:click.once="save"
                        @if(!$this->isDirty) disabled style="background-color: lightgray !important;" @endif
                        class="w-full mt-2 bg-[rgb(241,131,0)] text-white py-2 rounded-md hover:bg-orange-400 focus:outline-none">{{ __('general.Save') }}
                </button>
            </div>
            @if($statusList)
                @if($statusList->vvt_id == $vvt_id)
                    <div class="mt-4 text-center mb-3">
                        <a  @if($vvt_id != 0) href="{{route('show-vt',[ 'vvt_id'=> $vvt_id, 'fid'=>session()->get('fid'),'mid'=>6])}}"
                            @else href="{{route('vvt',['fid'=>session()->get('fid'),'mid'=>6])}}"
                            @endif
                            class="text-blue-400 underline text-sm">{{ __('general.Finish editing') }}</a>
                    </div>
                @endif
            @endif

            {{--<div class="flex-auto justify-center mt-1">
                <!-- Switch to CO-RISK Button -->
                <button class="w-full bg-[rgb(13,59,122)] text-white py-2 rounded-md hover:bg-orange-400 focus:outline-none">
                    {{ __('general.Switch to CO-RISK') }}
                </button>
            </div>--}}


        </div>
            {{--
            @if (session()->has('message'))
                <div class="p-4 mb-4 text-sm text-green-700 bg-green-100 rounded-lg" role="alert">
                    {{ session('message') }}
                </div>
            @endif
            --}}

    <!-- Fehler-Popup -->
    <div>
        @if ($showErrorPopup)
            <div
                class="fixed bottom-0 right-0 mb-6 mr-6 bg-white bg-opacity-50 flex items-center justify-center z-50">
                <div class="bg-orange-400 rounded-lg shadow-lg p-6 w-72 relative">
                    <!-- "X" Close Button oben rechts -->
                    <button wire:click="closeErrorPopup"
                            class="absolute top-2 right-2 text-white text-xl font-bold">
                        &times;
                    </button>
                    <h2 class="text-lg font-semibold text-white">Fehler</h2>
                    <p class="mt-4 text-gray-700">{{ $errorMessage }}</p>
                </div>
            </div>
        @endif
    </div>

    <style>
        :target {
            scroll-margin-top: 160px;
        }
    </style>
</div>

</div>