{{-- **************** Dynamisches Komponentensystem *****************
    Beschreibung:
    Dieses System ermöglicht es, dynamische Komponenten flexibel zu definieren und zu verwalten. Es unterstützt vielfältige Sektionen innerhalb einer Komponente mit anpassbaren Inhalten und Attributen.

    Komponentenstruktur:
        @modal(['componentName' => ['sectionName' => 'sectionData']])
        - componentName: Direkter Zugriff über "{{ "$componentName" }}". Eindeutige ID wird generiert aus dem componentName und einem Unique Key.
        - componentId: Zugriff über "{{ "$componentId" }}", generiert aus dem componentName.
        - componentData: Beinhaltet das gesamte Array aller Sektionen der Komponente, zugänglich über "{{ "$componentData" }}".
        - sectionName: Mehrere Sektionen mit einzigartigen Namen definierbar.
                       Ein Slash Suffox (/) im View deaktiviert die vordefinierte Sektion in der Komponente.
        - sectionData: Kann ein String oder Array sein:
            - String: Wird direkt gerendert und zu einem Array mit den Schlüsseln 'html', 'tag', 'string' konvertiert.
            - Array: Verarbeitung nach Schlüsseln 'html' und 'tag'; übrige Einträge werden als 'string' behandelt.

    Funktionen:
        @dynamicSection('name'): Definiert die zu rendernde Sektion, z.B. "header". Neuer Aufruf setzt neue sectionData mit dem angegebenen Namen.
        @dTag('div'): Setzt den Standard-HTML-Tag der Sektion; überschreibbar im View.
        @endDTag(): Schließt den HTML-Tag; im Component ist der Slash (/) nicht mehr nötig anzugeben.
        @dHtml('content'): Definiert den default HTML-Inhalt der Sektion; überschreibbar im View.
        @dAttr('style="color:red"'): Setzt oder überschreibt die Attribute der Sektion basierend auf Suffixen:
            - "@": Fügt Attribute aus dem View zum Standardattribut hinzu.
            - "": Ohne Suffix werden Attribute durch gleichnamige aus dem View ersetzt.
            - "/": Löscht im View definierte Standardattribute.
            Values der mit "@" attributen:
              - gleichernamig beginnender Value Name wird überschrieben: "btn-success" als default und "btn-outline-secondary" im view wird "btn-outline-secondary" gerendert
              - das Suffix "/" löscht das gleichnamige Value aus dem default String beim rendern.

        @endDynamicComponent(): Markiert das Ende der Komponente und bereinigt alle Komponentenvariablen.

    Example:
    
        @dynamicSection("btn")
            <@dTag('div') id="{{ $componentId }}" name="{{ $componentName }}" @dAttr('@class="btnlo btn-success btn" data-toggle="modal" data-target="#test" data-backdrop="static" data-keyboard="false" style="background-color: rgba(0, 50, 0, 0.5)"')>
                @dHtml('testNEW')
            <@endDTag('div')>


        @modal(['modal' => [
            'btn' => 'class="test /btnlo btn-outline-secondary" /data-toggle data-target="#test1" style="background-color: rgba(0, 0, 0, 0.5); color: white" tag="a" html="blub"',
        ]])
      --------------------------------------

        Output:
        <a id="test_modal_661a03e0da705" name="test_modal" class="btn-outline-secondary btn test" data-target="#test1" data-backdrop="static" data-keyboard="false" style="background-color: rgba(0, 0, 0, 0.5); color: white">
            blub    
        </a>

*END  *************************************************************** --}}

{{-- 
    Dynamic Modal settings:
    Modal Backdrop Close = Section ["modal" => 'data-backdrop="static"'] static  = default and allow closable only on click by close or cancel button, 
                                                                         dynamic = otherwise use data-backdrop="dynamic", this ollow close Modal by click on dimmer
--}} 


@dynamicSection("btn")
    <@dTag('button') name="{{ $componentName }}-btn" @dAttr('type="button" @class="btn btn-secondary"') data-toggle="modal" data-target="#{{ $componentId }}">
        @dHtml('open Modal')
    <@endDTag('button')>

{{-- @section('modal')
	@parent --}}
    @dynamicSection("modal")
	    <div id="{{ $componentId }}" name="{{ $componentName }}" aria-labelledby="{{ $componentId }}-Label" @dAttr('@class="modal fade" aria-hidden="true" data-backdrop="static"') tabindex="-1" dSection="modal">
            @dynamicSection("modal-dialog")
                <div @dAttr('@class="modal-dialog modal-dialog-centered modal-dialog-scrollable"') dSection="modal-dialog">
                    @dynamicSection("modal-content")
                        <div @dAttr('@class="modal-content"') dSection="modal-content">
                            @dynamicSection("modal-header")
                                <div class="modal-header card-header card-title" dSection="modal-header">
                                    @dynamicSection("modal-title")
                                        <@dTag('h1') id="{{ $componentId }}-Label" @dAttr('@class="modal-title fs-5"') dSection="modal-title">
                                            @dHtml('Modal title')
                                        <@endDTag('h1')>
                                    <button type="button" class="btn-close bg-white" data-dismiss="modal" aria-label="Close"></button>
                                </div>
                            
                            @dynamicSection("modal-body")
                                <div @dAttr('@class="modal-body card card-light"') dSection="modal-body">
                                    @dHtml('...')
                                </div>

                            @dynamicSection("modal-footer")
                                <div @dAttr('@class="modal-footer dark-tobacco-ad-backgroundt"') dSection="modal-footer">
                                    <button type="button" class="btn btn-success btn-sm" data-post="modal">
                                        Speichern
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm" data-dismiss="modal">
                                        Schließen
                                    </button>
                                </div>

                            {{-- Additional HTML Content --}}
                            @dynamicSection("modal-content")
                                @dHtml('')
                        </div>
                </div>
        </div>

        <script>
            initialModal("{{ $componentId }}");
        
            function initialModal(modal_id) {
                function cleanupModals() {
                    $('.modal').each(function() {
                        var modalId = $(this).attr('id');
                        // Prüfe, ob ein Button existiert, der dieses Modal als Ziel hat
                        if ($(`button[data-target="#${modalId}"]`).length === 0) {
                            $(this).remove(); // Entferne das Modal, wenn kein Button existiert
                        }
                    });
                }

                $(`button[data-target="#${modal_id}"]`).on('click', function(e) {
                    cleanupModals(); // Bereinige alle nicht mehr benötigten Modale
                    let closable = $(`#${modal_id}`).data('backdrop') === "dynamic";
                    $('#' + modal_id).modal('setting', 'closable', closable).modal('show');
                })
                // Event Handler für Schließen-Button
                $(`#${modal_id} button[data-dismiss="modal"]`).on('click', function() {
                    $('#' + modal_id).modal('hide');
                });

                // Event Handler für den Speichern-Button, falls nötig
                $(`#${modal_id} button[data-post="modal"]`).on('click', function() {
                    // Füge hier Code ein, der beim Klick auf Speichern ausgeführt werden soll
                    $('#' + modal_id).modal('hide');
                });
            }
        </script>
{{-- @stop --}}

@endDynamicComponent()