<?php
if (!defined('ABSPATH')) {
    exit;
}
$brainx_admin_url = admin_url();
?>
<div class="brainx_logo">
    <div class="brainx_title"><img src="<?php echo esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/brain_X_logo_connector.svg'); ?>" alt=""/></div>
    <div class="brainx_version"><?php
        if (defined('BRAINX_API_CONNECTOR_VERSION')) {
            $brainx_plugin_version = BRAINX_API_CONNECTOR_VERSION;
            echo '<span>' . sprintf(
                    /* translators: %s: Plugin version number */
                    esc_html__('Version: %s', 'brainx-form-connector'), esc_html($brainx_plugin_version)
            ) . '</span>';
        } else {
            echo '<span>' . esc_html__('Version konnte nicht geladen werden.', 'brainx-form-connector') . '</span>';
        }
        ?></div>
</div>
<div class="tabs-container">
    <div class="tabs">
        <button class="tab-button active" data-tab="tab1"><img src="<?php echo esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/circle-nodes.svg'); ?>" alt=""/><?php esc_html_e('brainX API-Connector', 'brainx-form-connector'); ?></button>
        <button class="tab-button" data-tab="tab2"><img src="<?php echo esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/gear.svg'); ?>" alt=""/><?php esc_html_e('Anleitung &amp; Einrichtung', 'brainx-form-connector'); ?></button>
        <button class="tab-button" data-tab="tab3"><img src="<?php echo esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/life-ring.svg'); ?>" alt=""/><?php esc_html_e('Debug &amp; Support', 'brainx-form-connector'); ?></button>
        <button class="tab-button" data-tab="tab4"><img src="<?php echo esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/icon_X.svg'); ?>" alt=""/><?php esc_html_e('Über brainX', 'brainx-form-connector'); ?></button>
    </div>
    <div class="content">
        <div id="tab1" class="tab-content active">
            <div class="tab-content_title">
                <h2 style="margin-bottom:0"><?php esc_html_e('brainX Form Connector', 'brainx-form-connector'); ?></h2>
                <p style="margin:0"><?php esc_html_e('Maximale Effizienz für Ihre Webformulare', 'brainx-form-connector'); ?></p>
            </div>
            <div class="tab-content_item">
                <div>
                    <p><?php esc_html_e('Mit dem brainX Form Connector übertragen Sie Formulardaten aus Ninja Forms oder Formidable Forms automatisch und in Echtzeit direkt über die API in brainX – ohne manuelle Zwischenschritte.', 'brainx-form-connector'); ?></p>
                    <p><?php esc_html_e('Sobald ein Formular abgesendet wird, stehen die Daten unmittelbar im System bereit und lassen sich nahtlos in Prozesse, Automationen und Workflows einbinden. Medienbrüche werden eliminiert, die Datenqualität bleibt konstant hoch.', 'brainx-form-connector'); ?></p>
                    <p><?php esc_html_e('Das Plugin ist in wenigen Minuten in WordPress eingerichtet – ohne Programmier- oder Datenbankkenntnisse. Bestehende Webformulare können unverändert weitergenutzt werden. Ideal für Unternehmen, die ihre Lead- und Kontaktprozesse vollständig automatisieren und direkt aus dem Web befüllen möchten – DSGVO-konform und ohne zusätzlichen Pflegeaufwand.', 'brainx-form-connector'); ?></p>
                </div>
            </div>
            <hr/>
            <div class="tab-content_item">
                <div>
                    <h3><?php esc_html_e('Übersicht der Features', 'brainx-form-connector'); ?></h3>
                    <h4><?php esc_html_e('Einfaches Setup', 'brainx-form-connector'); ?></h4>
                    <p><?php esc_html_e('Schnelle, intuitive Einrichtung direkt in WordPress. Keine Programmier- oder Datenbankkenntnisse erforderlich.', 'brainx-form-connector'); ?></p>
                    <h4><?php esc_html_e('Flexibles Mapping & Zuordnung', 'brainx-form-connector'); ?></h4>
                    <p><?php esc_html_e('Formularfelder lassen sich individuell den entsprechenden Feldern in brainX zuordnen. Mandant, Zielmodul (Leads oder Kontakte) sowie weitere Parameter sind frei konfigurierbar.', 'brainx-form-connector'); ?></p>
                    <h4><?php esc_html_e('Echtzeit-Synchronisation', 'brainx-form-connector'); ?></h4>
                    <p><?php esc_html_e('Formulardaten werden unmittelbar nach dem Absenden automatisch an brainX übertragen.', 'brainx-form-connector'); ?></p>
                    <h4><?php esc_html_e('Nahtlose Integration', 'brainx-form-connector'); ?></h4>
                    <p><?php esc_html_e('Direkte Übergabe der Webformulardaten ins System. Excel-Exporte und manuelle Datenerfassung entfallen vollständig.', 'brainx-form-connector'); ?></p>
                    <h4><?php esc_html_e('DSGVO-konforme Datenübertragung', 'brainx-form-connector'); ?></h4>
                    <p><?php esc_html_e('1:1-Übertragung per REST-API ohne Zwischenspeicherung auf externen Servern.', 'brainx-form-connector'); ?></p>
                </div>
            </div>
            <hr/>
            <div class="tab-content_item">
                <div>
                    <h3><?php esc_html_e('Systemvoraussetzungen', 'brainx-form-connector'); ?></h3>
                    <p><?php esc_html_e('• WordPress', 'brainx-form-connector'); ?><br/>
                        <?php esc_html_e('• Ninja Forms oder Formidable Forms', 'brainx-form-connector'); ?><br/>
                        <?php esc_html_e('• brainX', 'brainx-form-connector'); ?>
                    </p>
                </div>
            </div>
        </div>
        <div id="tab2" class="tab-content">
            <div class="tab-content_title">
                <h2><?php esc_html_e('Anleitung & Einrichtung', 'brainx-form-connector'); ?></h2>
            </div>
            <div class="tab-content_item">
                <p><?php esc_html_e('Diese Anleitung führt Sie Schritt für Schritt durch die Einrichtung des brainX Form Connectors. Nach der Konfiguration werden alle Formulareinsendungen automatisch und in Echtzeit in brainX übertragen.', 'brainx-form-connector'); ?></p>
            </div>
            <hr/>
            <div class="tab-content_item grid">
                <div>
                    <h3><?php esc_html_e('1.  Plugin installieren und aktivieren', 'brainx-form-connector'); ?></h3>
                    <p><?php esc_html_e('Installieren Sie das Plugin in Ihrem WordPress-System und aktivieren Sie es anschließend.', 'brainx-form-connector'); ?></p>
                </div>
                <div>
                 
                </div>
            </div>
            <hr/>
            <div class="tab-content_item grid">
                <div>
                    <h3><?php esc_html_e('2. API-Verbindung einrichten', 'brainx-form-connector'); ?></h3>
                    <p><?php echo wp_kses_post('Navigieren Sie zum Menüpunkt <strong>„Einstellungen“</strong> und legen Sie einen <strong>API-User</strong> mit <strong>Benutzernamen</strong> und <strong>Passwort</strong> an. Tragen Sie außerdem die <strong>URL Ihrer brainX-Instanz</strong> ein.', 'brainx-form-connector'); ?></p>
                    <div class="infobox_green">
                        <p><?php echo wp_kses_post('Hinweis: Falls für den API-User die <strong>2-Faktor-Authentifizierung (2FA)</strong> aktiviert ist, hinterlegen Sie unter <strong>„2FA aktivieren“</strong> das entsprechende App-Passwort.', 'brainx-form-connector'); ?></p>
                    </div>
                    <p style="margin-top:30px"><a style="margin-right:10px" class="button" href="<?php echo esc_url($brainx_admin_url); ?>admin.php?page=brainx_crm_settings"><?php esc_html_e('Zu den Einstellungen', 'brainx-form-connector'); ?></a></p>
                </div>
                <div>
                    <img class="preview" src="<?php echo esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/Bild_Schritt_2.png'); ?>" alt="Configuration">	
                </div>
            </div>
            <hr/>
            <div class="tab-content_item grid">
                <div>
                    <h3><?php esc_html_e('3.  Formular auswählen', 'brainx-form-connector'); ?></h3>
                    <p><?php echo wp_kses_post('Klicken Sie – abhängig von Ihrem Setup – auf <strong>„Formidable“</strong> oder <strong>„Ninja Forms“</strong>, um eine Übersicht aller verfügbaren Formulare zu öffnen. Wählen Sie anschließend ein Formular aus, um die Konfiguration zu starten oder ein bestehendes Setup zu bearbeiten.', 'brainx-form-connector'); ?></p>
                    <p style="margin-top:30px"><a style="margin-right:10px" class="button" href="<?php echo esc_url($brainx_admin_url); ?>admin.php?page=brainx_crm_ninja_forms"><?php esc_html_e('Ninja Forms Mapping', 'brainx-form-connector'); ?></a> <a class="button" href="<?php echo esc_attr($brainx_admin_url); ?>admin.php?page=brainx_crm_formidable"><?php esc_html_e('Formidable Forms Mapping', 'brainx-form-connector'); ?></a></p>
                </div>
                <div>
                    <img class="preview" src="<?php echo esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/Bild_Schritt_3.png'); ?>" alt="Configuration">	
                </div>
            </div>
            <hr/>
            <div class="tab-content_item grid">
                <div>
                    <h3><?php esc_html_e('4. Zielmodul und Mandant festlegen', 'brainx-form-connector'); ?></h3>
                    <p><?php echo wp_kses_post('Wählen Sie in den Formulareinstellungen das <strong>CRM-Modul</strong> (Leads oder Kontakte), in das die Formulareinsendungen übertragen werden sollen. Legen Sie außerdem den <strong>Mandanten</strong> fest. Unter <strong>„Vorhandene Felder“</strong> können Sie optional verfügbare API-Datenfelder einschränken oder neue Felder hinzufügen.', 'brainx-form-connector'); ?></p>
                    <div class="infobox_red">
                        <p><?php echo wp_kses_post('<strong>Wichtig:</strong> Vergessen Sie nicht, Ihre Änderungen zu speichern.', 'brainx-form-connector'); ?></p>
                    </div>
                </div>
                <div>
                    <img class="preview" src="<?php echo esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/Bild_Schritt_4.png'); ?>" alt="Configuration">	
                </div>
            </div>
            <hr/>
            <div class="tab-content_item grid">
                <div>
                    <h3><?php esc_html_e('5. Felder mappen', 'brainx-form-connector'); ?></h3>
                    <p><?php echo wp_kses_post('Ziehen Sie die gewünschten <strong>Formularfelder</strong> aus der <strong>linken Spalte</strong> in das <strong>brainX-Mapping</strong> in der <strong>mittleren Spalte</strong>, um die Daten logisch zuzuordnen.', 'brainx-form-connector'); ?></p>
                    <div class="infobox_red">
                        <p><?php echo wp_kses_post('<strong>Pflichtfelder:</strong> Achten Sie auf Pflichtfelder wie <strong>„Mandant“</strong> oder <strong>„Nachname“</strong>. Sind diese im Formular nicht vorhanden, definieren Sie stattdessen <strong>Standardwerte</strong> durch manuelle Eingabe.', 'brainx-form-connector'); ?></p>
                    </div>
                </div>
                <div>
                    <img class="preview" src="<?php echo esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/Bild_Schritt_5.png'); ?>" alt="Configuration">	
                </div>
            </div>
            <hr/>
            <div class="tab-content_item grid">
                <div>
                    <h3><?php esc_html_e('6. Auswahllisten zuordnen', 'brainx-form-connector'); ?></h3>
                    <p><?php echo wp_kses_post('Nach dem Speichern des Mappings ordnen Sie in der <strong>rechten Spalte</strong> die <strong>Werte für Auswahllisten</strong> zu. Klicken Sie auf das jeweilige Auswahlfeld und wählen Sie den passenden brainX-Wert aus.', 'brainx-form-connector'); ?></p>
                    <div class="infobox_red">
                        <p><?php echo wp_kses_post('<strong>Wichtig:</strong> Dieser Schritt ist bei Auswahllisten verpflichtend. Eine fehlende oder fehlerhafte Zuordnung führt zu Problemen bei der Datenübertragung.', 'brainx-form-connector'); ?></p>
                    </div>
                </div>
                <div>
                    <img class="preview" src="<?php echo esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/Bild_Schritt_6.png'); ?>" alt="Configuration">	
                </div>
            </div>
            <hr/>
            <div class="tab-content_item grid">
                <div>
                    <h3><?php esc_html_e('7. Konfiguration speichern', 'brainx-form-connector'); ?></h3>
                    <p><?php esc_html_e('Speichern Sie alle Einstellungen, bevor Sie zum nächsten Schritt übergehen.', 'brainx-form-connector'); ?></p>
                </div>
                <div>
                    <img class="preview" src="<?php echo esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/Bild_Schritt_7.png'); ?>" alt="Configuration">	
                </div>
            </div>
            <hr/>
            <div class="tab-content_item grid">
                <div>
                    <h3><?php esc_html_e('8. Connector aktivieren', 'brainx-form-connector'); ?></h3>
                    <p><?php echo wp_kses_post('Kehren Sie zur <strong>Formularübersicht</strong> zurück und aktivieren Sie den <strong>Formular-Connector</strong> für das gewünschte Formular. Sobald dieser aktiv ist, werden alle übermittelten Daten in <strong>Echtzeit</strong> direkt in brainX übertragen.', 'brainx-form-connector'); ?></p>
                </div>
                <div>
                    <img class="preview" src="<?php echo esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/Bild_Schritt_8.png'); ?>" alt="Configuration">	
                </div>
            </div>
            <hr/>
            <div class="tab-content_item grid">
                <div>
                    <h3><?php esc_html_e('9. Testdurchlauf', 'brainx-form-connector'); ?></h3>
                    <p><?php echo wp_kses_post('Füllen Sie das konfigurierte Formular auf Ihrer Website aus und senden Sie es ab. Prüfen Sie anschließend in <strong>brainX</strong>, ob der Datensatz korrekt übernommen und wie erwartet angezeigt wird.', 'brainx-form-connector'); ?></p>
                </div>
                <div>
                   
                </div>
            </div>
            <hr/>
            <div class="tab-content_item grid">
                <div>
                    <h3><?php esc_html_e('10. Fehlerdiagnose über API Logs', 'brainx-form-connector'); ?></h3>
                    <p><?php echo wp_kses_post('Falls Daten nicht erfolgreich übertragen wurden, navigieren Sie zum Menüpunkt <strong>„API Logs“</strong>. Dort finden Sie alle Fehlermeldungen, mit denen Sie Konfigurationsfehler gezielt identifizieren und beheben können.', 'brainx-form-connector'); ?></p>
                    <p style="margin-top:30px"><a style="margin-right:10px" class="button" href="<?php echo esc_url($brainx_admin_url); ?>admin.php?page=brainxapi_logs"><?php esc_html_e('API Logs', 'brainx-form-connector'); ?></a></p>
                </div>
                <div>
                    <img class="preview" src="<?php echo esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/Bild_Schritt_10.png'); ?>" alt="Configuration">	
                </div>
            </div>
            <hr/>
            <div class="tab-content_item">
                <div class="infobox_red">
                    <p><strong><?php esc_html_e('Support', 'brainx-form-connector'); ?></strong></p>
                    <p><?php echo wp_kses_post('Bei Fragen zur Einrichtung wenden Sie sich an <a href="mailto:info@brainx.de">info@brainx.de</a> oder besuchen Sie unsere Dokumentation zu finden unter dem Menüpunkt „Hilfe“ in Ihrem brainX System.', 'brainx-form-connector'); ?></p>
                </div>
            </div>
        </div>
        <div id="tab3" class="tab-content">
            <div class="tab-content_title">
                <h2><?php esc_html_e('Debug &amp; Support', 'brainx-form-connector'); ?></h2>
            </div>
            <div class="tab-content_item grid">
                <div>
                    <p><?php echo wp_kses_post('Im Menüpunkt <strong>„API Logs“</strong> können Sie alle vom Plugin nach brainX abgeschickten Datensätze zur Kontrolle einsehen.', 'brainx-form-connector'); ?></p>
                    <p style="margin-top:30px"><a style="margin-right:10px" class="button" href="<?php echo esc_url($brainx_admin_url); ?>admin.php?page=brainxapi_logs"><?php esc_html_e('Zu den API Logs', 'brainx-form-connector'); ?></a></p>
                </div>
                <div>
                    <img class="preview" src="<?php echo esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/Debug_und_Support.png'); ?>" alt="Configuration">	
                </div>
            </div>
        </div>
        <div id="tab4" class="tab-content">
            <div class="tab-content_title">
                <h2><?php esc_html_e('Über brainX', 'brainx-form-connector'); ?></h2>
            </div>
            <div class="tab-content_item">
                <div>
                    <p><?php esc_html_e('brainX ist eine moderne Finance- und CRM-Plattform für SaaS-Unternehmen im DACH-Markt. Die Lösung vereint Finanzautomatisierung, Kundenmanagement und Echtzeit-Reporting in einer zentralen Anwendung – entwickelt für die Anforderungen von CFOs und CEOs wachsender Unternehmen.', 'brainx-form-connector'); ?></p>
                    <p><?php esc_html_e('Mit brainX APP erhalten Unternehmen eine All-in-one-Lösung für Abonnement- und Projektabrechnung, native DATEV-Integration, E-Rechnung nach XRechnung- und ZUGFeRD-Standard sowie unbegrenzte Nutzer – ohne zusätzliche Lizenzkosten. Die Plattform ist DSGVO-konform, ISO 9001:2015-zertifiziert und auf die spezifischen Anforderungen des DACH-Markts ausgerichtet.', 'brainx-form-connector'); ?></p>
                    <p><?php esc_html_e('brainX wird von der brainX GmbH entwickelt und kontinuierlich weiterentwickelt – mit einem klaren Fokus auf Automatisierung, Skalierbarkeit und enge Kundenpartnerschaft.', 'brainx-form-connector'); ?></p>
                </div>
            </div>
            <hr/>
            <div class="tab-content_item">
                <div>
                    <p><strong>brainX GmbH</strong><br>
                        Richard-Wagner-Str. 14b<br>
                        D-84453 Mühldorf a. Inn
                    </p>
                    <p><?php esc_html_e('Montag bis Freitag, 08:00 – 17:00 Uhr', 'brainx-form-connector'); ?><br>
                        <?php esc_html_e('Tel.', 'brainx-form-connector'); ?> +49 8631 306935-0<br>
                        www.brainx.app
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
