Backend/WEBROOT/services/ajaxTests.php

<?php
if (!isset($selectedService)) {
    exit('Direkter Zugriff nicht erlaubt.');
}
?>

<div>
    <!-- Formular für INSERT -->
    <div class="vergabe-form">
        <h3>1. Eintrag hinzufügen (DatabaseInsert)</h3>
        <form id="insertForm" class="vergabe-grid">
            <div class="form-group">
                <label>Artikelname</label>
                <input type="text" id="insertProdukt" placeholder="z.B. Apfel" required>
            </div>
            <div class="form-group">
                <label>Menge</label>
                <input type="text" id="insertMenge" placeholder="z.B. 5 Stück" required>
            </div>
            <button type="submit" class="btn-submit-vergabe">💾 Hinzufügen</button>
        </form>
    </div>

    <!-- Suchfeld für SHOW mit Filtern -->
    <div class="form-container" style="margin-top: 20px;">
        <h3>2. Liste filtern (DatabaseShow mit Conditions)</h3>
        <div class="user-form-grid">
            <div class="form-group">
                <label>Suche nach Produkt (LIKE)</label>
                <input type="text" id="searchProdukt" placeholder="Leer lassen für alle Einträge...">
            </div>
            <button type="button" id="btnFilter" class="btn btn-primary" style="margin: 0; width: 100%; height: 43px;">
                🔍 Filtern
            </button>
        </div>
    </div>

    <!-- Tabellen-Container -->
    <div class="table-container" style="margin-top: 30px;">
        <h3>3 & 4. Daten verwalten (Tabelle via JS gerendert)</h3>
        <div id="showcaseTableWrapper">
            <p>Lade daten...</p>
        </div>
    </div>
</div>

<script src="/js/AjaxMethods.js"></script>
<script src="/js/AjaxRenderTables.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const tableWrapper = document.getElementById('showcaseTableWrapper');
    const dbTable = 'Einkaufsliste';

    const spaltenKonfig = [{
            key: 'PRODUKT',
            label: 'Produkt'
        },
        {
            key: 'MENGE',
            label: 'Menge'
        }
    ];

    // ALL IN ONE: Daten laden und via AjaxMethods-Tabelle anzeigen
    async function loadData() {
        const searchQuery = document.getElementById('searchProdukt').value.trim();
        let conditions = [];

        if (searchQuery !== '') {
            conditions.push({
                column: 'PRODUKT',
                operator: 'LIKE',
                value: `%${searchQuery}%`
            });
        }

        try {
            // 1. SHOW ausführen
            const data = await DatabaseShow(dbTable, ['ID', 'PRODUKT', 'MENGE'], conditions);

            // 2. TABELLE RENDERN(Nutzt die neue Methode aus AjaxMethods.js)
            // renderTableWithEdit(
            //     tableWrapper,
            //     data.entries,
            //     spaltenKonfig,
            //     'ID',
            //     async (id) => {
            //         await editWorkflow(id);
            //     }, // Edit Callback
            // );

            // renderTableWithDelete(
            //     tableWrapper,
            //     data.entries,
            //     spaltenKonfig,
            //     'ID',
            //     async (id) => {
            //         await deleteWorkflow(id);
            //     }, // Edit Callback
            // )

            // renderTableWithEditAndDelete(
            //     tableWrapper,
            //     data.entries,
            //     spaltenKonfig,
            //     'ID',
            //     async (id) => {
            //             await editWorkflow(id);
            //         }, // Edit Callback
            //         async (id) => {
            //             await deleteWorkflow(id);
            //         } // Delete Callback
            // )

            renderTable(
                tableWrapper,
                data.entries,
                spaltenKonfig,
            )

        } catch (error) {
            tableWrapper.innerHTML = `<p style="color:red;">❌ Fehler: ${escapeHtml(error.message)}</p>`;
        }
    }

    // WORKFLOW: INSERT
    document.getElementById('insertForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const produkt = document.getElementById('insertProdukt').value.trim();
        const menge = document.getElementById('insertMenge').value.trim();

        try {
            await DatabaseInsert(dbTable, ['PRODUKT', 'MENGE'], [produkt, menge]);
            e.target.reset();
            await loadData();
        } catch (error) {
            alert('Fehler beim Einfügen: ' + error.message);
        }
    });

    // WORKFLOW: UPDATE
    async function editWorkflow(id) {

        const neueMenge = prompt('Neue Menge (Abbrechen für keine Änderung):');
        if (neueMenge === null) return; // Abgebrochen

        // Daten-Objekt für den UPDATE-Query vorbereiten
        let updates = {};
        if (neueMenge.trim() !== '') updates.MENGE = neueMenge.trim();

        // Falls beide Felder leer gelassen wurden, abbrechen
        if (Object.keys(updates).length === 0) return;

        try {
            await DatabaseUpdate(
                dbTable,
                updates,
                [{
                    column: 'ID',
                    operator: '=',
                    value: id
                }]
            );
            await loadData();
        } catch (error) {
            alert('Fehler beim Aktualisieren: ' + error.message);
        }
    }

    // WORKFLOW: DELETE
    async function deleteWorkflow(id) {
        try {
            await DatabaseDelete(dbTable, [{
                column: 'ID',
                operator: '=',
                value: id
            }]);
            await loadData();
        } catch (error) {
            alert('Fehler beim Löschen: ' + error.message);
        }
    }

    // Event Listener für Filter-Button
    document.getElementById('btnFilter').addEventListener('click', loadData);

    // Erster App-Start
    loadData();
});
</script>