{% extends 'admin/kmuhelper/base_site.html' %}

{% load static kmuhelper_tags %}

{% block title %}WooCommerce Einstellungen | KMUHelper{% endblock %}

{% block breadcrumbs %}
{% endblock %}

{% block branding %}
    {% kmuhelper_branding module_name='settings' %}
{% endblock %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'admin/css/forms.css' %}">
    <link rel="stylesheet" href="{% static 'admin/kmuhelper/css/style.css' %}">
{% endblock %}

{% block extrahead %}
    {{ block.super }}
    <script src="{% static 'admin/kmuhelper/js/beforeunload.js' %}" type="text/javascript"></script>
    <script src="{% static 'admin/js/vendor/jquery/jquery.js' %}" type="text/javascript"></script>
{% endblock %}

{% block content_title %}
    <h1>WooCommerce-Integration</h1>
{% endblock %}

{% block content %}
    {% include 'kmuhelper/_includes/form.html' with submit_text="Einstellungen speichern" %}

    <hr style="margin-top: 2em; margin-bottom: 2em;">
    <h2>Einrichtung</h2>

    <div style="margin-top: 2em;">
        <h3>Schritt 0: Einstellungen festlegen</h3>
        <p>
            Als erstes müssen Sie ein paar Einstellungen vornehmen. Tragen Sie dazu oben die URL Ihrer WooCommerce
            Installation ein (z. B. https://shop.example.com).
            Geben sie ausserdem eine zufällig generierte Zeichenkette als Secret an, z. B.
            <code>{{ random_secret }}</code> (Dieses Secret wird bei jedem Laden der Seite zufällig generiert.)
            Klicken Sie anschliessend auf "Einstellungen speichern".
        </p>

        <hr>

        <h3>Schritt 1: WooCommerce verbinden</h3>
        <p>
            Um die WooCommerce Schnittstelle zu nutzen, muss diese zuerst mit dem KMUHelper verbunden werden.
            Dazu muss der KMUHelper <b>Lese-Zugriff</b> auf die WooCommerce API erhalten.
            Dieser Zugriff kann jederzeit widerrufen werden.
            Klicken Sie auf folgenden Knopf und melden Sie sich mit Ihren WooCommerce/WordPress
            Zugangsdaten an:
        </p>

        {% if is_connected %}
            <button class="button" disabled>Verbunden!</button>
        {% else %}
            {% if is_url_valid %}
                <a href="{% url 'kmuhelper:wc-auth-start' %}">
                    <button class="button">API verbinden</button>
                </a>
            {% else %}
                <button class="button" disabled>Die angegebene URL ist ungültig</button>
            {% endif %}
        {% endif %}

        <br><br>

        <h3>Schritt 2: Status überprüfen (optional)</h3>
        {% if is_connected %}
            <p>
                Die WooCommerce-Schnittstelle wurde erfolgreich eingerichtet.
                Über folgenden Knopf können Sie überprüfen, ob die Verbindung funktioniert:
            </p>

            <a href="{% url 'kmuhelper:wc-system-status' %}">
                <button class="button">Verbindung überprüfen</button>
            </a>
        {% else %}
            <p>
                Die WooCommerce-Schnittstelle wurde noch nicht eingerichtet.
                Bitte folgen Sie den Anweisungen oben.
            </p>

            <button class="button" disabled>Schritt 1 muss zuerst abgeschlossen werden</button>
        {% endif %}

        <br><br>

        <h3>Schritt 3: Webhooks einrichten</h3>
        <p>
            Damit Daten automatisch von WooCommerce an den KMUHelper übertragen werden können, müssen Webhooks
            eingerichtet werden.
            Dieser Schritt muss manuell durchgeführt werden.
            Öffnen Sie die WooCommerce-Einstellungen via folgendem Knopf und erstellen sie die Webhooks gemäss
            nachfolgender Tabelle.
        </p>

        {% if is_connected %}
            <a href="{{ wc_url }}/wp-admin/admin.php?page=wc-settings&tab=advanced&section=webhooks" target="_blank"
               rel="noopener noreferrer">
                <button class="button">Webhook-Einstellungen öffnen</button>
            </a>
        {% else %}
            <button class="button" disabled>Schritt 1 muss zuerst abgeschlossen werden</button>
        {% endif %}

        <table style="margin-bottom: 2em; margin-top: 2em;">
            <thead>
                <tr>
                    <th>Feld</th>
                    <th>Wert</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Name</td>
                    <td><i>(nach Belieben, z. B. kmuhelper.product.created)</i></td>
                </tr>
                <tr>
                    <td>Thema</td>
                    <td>
                        <span>Pro Thema ein Webhook:</span>
                        <ul>
                            <li>Bestellung erstellt (order.created)</li>
                            <li>Bestellung aktualisiert (order.updated)</li>
                            <li>Bestellung gelöscht (order.deleted)</li>
                            <li>Bestellung wiederhergestellt (order.restored)</li>
                            <li>Kunde erstellt (customer.created)</li>
                            <li>Kunde aktualisiert (customer.updated)</li>
                            <li>Kunde gelöscht (customer.deleted)</li>
                            <li>Produkt erstellt (product.created)</li>
                            <li>Produkt aktualisiert (product.updated)</li>
                            <li>Produkt entfernt (product.deleted)</li>
                            <li>Produkt wiederhergestellt (product.restored)</li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>Auslieferungs-URL</td>
                    <td><code>{{ kmuhelper_url }}{% url 'kmuhelper:wc-webhooks' %}</code></td>
                </tr>
                <tr>
                    <td>Secret</td>
                    <td><i>(wie oben festgelegt)</i></td>
                </tr>
                <tr>
                    <td>API-Version</td>
                    <td>WP REST-API Integration v3</td>
                </tr>
            </tbody>
        </table>
    
        <h3>Schritt 4: Status der Webhooks überprüfen (optional)</h3>
        <p>
            Der Status der Webhooks kann über folgenden Button überprüft werden.
            Um wirklich sicher zu gehen, sollten die Webhooks aber manuell überprüft werden, indem Daten in WooCommerce 
            verändert werden (z. B. ein Produkt erstellt oder bearbeitet).
        </p>
        {% if is_connected %}
            <a href="{% url 'kmuhelper:wc-webhooks-status' %}">
                <button class="button">Webhooks überprüfen</button>
            </a>
        {% else %}
            <button class="button" disabled>Schritt 1 muss zuerst abgeschlossen werden</button>
        {% endif %}
    </div>

    {% if is_connected %}
        <hr style="margin-top: 2em; margin-bottom: 2em;">
        <h2>Einstellungen zurücksetzen</h2>

        <div style="margin-top: 2em;">
            <h3>Schritt 1: Webhooks löschen oder deaktivieren</h3>
            <p>
                Nachdem die API-Zugangsdaten gelöscht wurden, werden auch Webhooks nicht mehr akzeptiert. Entfernen oder 
                deaktivieren Sie daher zuerst alle Webhooks:
            </p>
            <a href="{{ wc_url }}/wp-admin/admin.php?page=wc-settings&tab=advanced&section=webhooks" target="_blank"
               rel="noopener noreferrer">
                <button class="button">Webhook-Einstellungen öffnen</button>
            </a>
        
            <h3>Schritt 2: API-Zugangsdaten löschen</h3>
            <p>
                Durch Klick auf folgenden Knopf werden die Zugangsdaten vernichtet. Nach erfolgreichem Löschen 
                sollten die Zugangsdaten ausserdem in den WooCommerce-Einstellungen annulliert werden. Ein Link
                dazu wird nach dem Löschen automatisch angezeigt.
            </p>
            <a href="{% url 'kmuhelper:wc-auth-clear' %}">
                <button class="button">API-Zugangsdaten löschen & Verbindung trennen</button>
            </a>
        </div>
    {% endif %}

    <hr style="margin-top: 2em; margin-bottom: 2em;">
    <div style="margin-top: 2em;">
        <i>
            Zurück zu den <a class="link" href="{% url 'kmuhelper:settings' %}">Einstellungen</a>
        </i>
    </div>
{% endblock %}
