wp-multi-teamcard/assets/js/teamcard-admin.js

jQuery(document).ready(function($) {
    var newTeamcardFrame;
    var teamcardFrame;

    // Medienbibliothek für neues Teammitglied
    $('#new-teamcard-bild-button').on('click', function(e) {
        e.preventDefault();
        if (newTeamcardFrame) { newTeamcardFrame.open(); return; }
        
        newTeamcardFrame = wp.media({ title: 'Bild auswählen', button: { text: 'Verwenden' }, multiple: false });
        newTeamcardFrame.on('select', function() {
            var attachment = newTeamcardFrame.state().get('selection').first().toJSON();
            $('#new-teamcard-bild-id').val(attachment.id);
            $('#new-teamcard-bild-vorschau').attr('src', attachment.url).show();
        });
        newTeamcardFrame.open();
    });
    
    // Medienbibliothek für vorhandene Teammitglieder
    $(document).on('click', '.teamcard-bild-button', function(e) {
        e.preventDefault();
        var button = $(this);
        var teamcardId = button.data('id');
        
        if (teamcardFrame) { teamcardFrame.open(); return; }

        teamcardFrame = wp.media({ title: 'Bild ändern', button: { text: 'Verwenden' }, multiple: false });
        teamcardFrame.on('select', function() {
            var attachment = teamcardFrame.state().get('selection').first().toJSON();
            $.ajax({
                url: teamcard_data.ajax_url,
                type: 'POST',
                data: { action: 'update_teamcard_image', id: teamcardId, bild_id: attachment.id, nonce: teamcard_data.nonce },
                success: function(response) {
                    if (response.success) {
                        var container = button.siblings('.image-preview-container');
                        container.html('<img src="' + response.data.bild_url + '" class="teamcard-bild-vorschau">');
                        showMessage('Bild erfolgreich aktualisiert.', 'success');
                    }
                }
            });
        });
        teamcardFrame.open();
    });
    
    // Neues Teammitglied hinzufügen
    $('#add-teamcard-button').on('click', function() {
        var name = $('#new-teamcard-name').val();
        if (!name) { showMessage('Bitte gib einen Namen ein.', 'error'); return; }

        $.ajax({
            url: teamcard_data.ajax_url,
            type: 'POST',
            data: {
                action: 'add_teamcard',
                name: name,
                funktion: $('#new-teamcard-funktion').val(),
                zustaendigkeit: $('#new-teamcard-zustaendigkeit').val(),
                card_type: $('#new-teamcard-card-type').val(),
                bild_id: $('#new-teamcard-bild-id').val(),
                nonce: teamcard_data.nonce
            },
            success: function(response) {
                if (response.success) {
                    var bildHtml = response.data.bild_url ? '<img src="' + response.data.bild_url + '" class="teamcard-bild-vorschau">' : '';
                    var newRow = `
                        <tr data-id="${response.data.id}" class="teamcard-item">
                            <td class="teamcard-bild-column"><div class="image-preview-container">${bildHtml}</div><button type="button" class="button teamcard-bild-button" data-id="${response.data.id}">Ändern</button></td>
                            <td><div class="editable" data-field="title" data-id="${response.data.id}">${name}</div></td>
                            <td><div class="editable" data-field="funktion" data-id="${response.data.id}">${$('#new-teamcard-funktion').val()}</div></td>
                            <td><div class="editable" data-field="zustaendigkeit" data-id="${response.data.id}">${$('#new-teamcard-zustaendigkeit').val()}</div></td>
                            <td>${$('#new-teamcard-card-type option:selected').text()}</td>
                            <td><button type="button" class="button button-small teamcard-delete" data-id="${response.data.id}">Löschen</button></td>
                        </tr>`;
                    $('#teamcard-list').append(newRow);
                    
                    // Formular zurücksetzen
                    $('#new-teamcard-name, #new-teamcard-funktion, #new-teamcard-zustaendigkeit, #new-teamcard-bild-id').val('');
                    $('#new-teamcard-bild-vorschau').hide();
                    $('#new-teamcard-card-type').prop('selectedIndex',0);
                    
                    showMessage('Teammitglied erfolgreich hinzugefügt.', 'success');
                } else {
                    showMessage(response.data.message || 'Ein unbekannter Fehler ist aufgetreten.', 'error');
                }
            }
        });
    });
    
    // Inline-Bearbeitung
    $(document).on('click', '.editable', function() {
        var element = $(this);
        var currentText = element.text().trim();
        element.html('<input type="text" class="inline-edit" value="' + currentText + '">');
        element.find('input').focus().select();
    });
    
    $(document).on('blur keypress', '.inline-edit', function(e) {
        if (e.type === 'keypress' && e.which !== 13) return;
        if (e.type === 'keypress') { e.preventDefault(); }

        var input = $(this);
        var element = input.parent();
        var newValue = input.val().trim();
        var field = element.data('field');
        var id = element.data('id');

        $.ajax({
            url: teamcard_data.ajax_url,
            type: 'POST',
            data: { action: 'update_teamcard', id: id, field: field, value: newValue, nonce: teamcard_data.nonce },
            success: function(response) {
                if (response.success) {
                    element.text(newValue);
                    showMessage('Erfolgreich aktualisiert.', 'success');
                } else {
                    element.text(newValue); // Text trotzdem aktualisieren, auch wenn der Request fehlschlägt
                    showMessage('Fehler beim Speichern.', 'error');
                }
            }
        });
    });
    
    // Teammitglied löschen
    $(document).on('click', '.teamcard-delete', function() {
        if (!confirm('Möchtest du dieses Teammitglied wirklich löschen?')) { return; }
        
        var button = $(this);
        var id = button.data('id');
        
        $.ajax({
            url: teamcard_data.ajax_url,
            type: 'POST',
            data: { action: 'delete_teamcard', id: id, nonce: teamcard_data.nonce },
            success: function(response) {
                if (response.success) {
                    button.closest('tr').fadeOut(400, function() { $(this).remove(); });
                    showMessage('Teammitglied erfolgreich gelöscht.', 'success');
                } else {
                    showMessage('Fehler beim Löschen.', 'error');
                }
            }
        });
    });
    
    // Drag & Drop Sortierung
    $('#teamcard-list').sortable({
        handle: 'td:first', // Nur die erste Spalte als Handle
        placeholder: 'ui-state-highlight',
        tolerance: 'pointer',
        update: function(event, ui) {
            var order = $(this).sortable('toArray', {attribute: 'data-id'});
            $.ajax({
                url: teamcard_data.ajax_url,
                type: 'POST',
                data: { action: 'update_teamcard_order', order: order, nonce: teamcard_data.nonce },
                success: function(response) {
                    if (response.success) {
                        showMessage('Reihenfolge aktualisiert.', 'success');
                    }
                }
            });
        }
    });

    function showMessage(message, type) {
        var messageElement = $('#teamcard-message');
        messageElement.removeClass('notice-success notice-error').addClass('notice-' + type);
        messageElement.html('<p>' + message + '</p>').show().delay(3000).fadeOut();
    }
});