on-motorrad-buchungs-plugin/assets/js/admin-kanban.js

jQuery(document).ready(function ($) {

    // Make cards draggable
    $('.on-kanban-card').draggable({
        revert: 'invalid', // Snap back if not dropped on a valid droppable
        helper: 'clone',
        cursor: 'move',
        zIndex: 100,
        cancel: '.on-edit-icon, input, textarea, button, select, option' // Prevent dragging when clicking icon
    });

    // Make columns droppable
    $('.on-kanban-column').droppable({
        accept: '.on-kanban-card',
        hoverClass: 'on-drop-hover',
        drop: function (event, ui) {
            var card = ui.draggable;
            var newStatus = $(this).data('status');
            var postId = card.data('id');
            var oldParent = card.parent();
            var newParent = $(this).find('.on-kanban-items');

            // Move card visually immediately
            card.detach().appendTo(newParent);

            // Update Counts
            updateCounts();

            // AJAX Update
            $.ajax({
                url: ajaxurl,
                type: 'POST',
                data: {
                    action: 'on_update_booking_status',
                    nonce: onBookingKanban.nonce,
                    post_id: postId,
                    status: newStatus
                },
                success: function (response) {
                    if (response.success) {
                        // Update card's data-status attribute to trigger color change
                        card.attr('data-status', newStatus);
                    } else {
                        alert('Fehler: ' + response.data.message);
                        // Revert visual change
                        card.detach().appendTo(oldParent);
                        updateCounts();
                    }
                },
                error: function () {
                    alert('Verbindungsfehler.');
                    // Revert
                    card.detach().appendTo(oldParent);
                    updateCounts();
                }
            });
        }
    });

    function updateCounts() {
        $('.on-kanban-column').each(function () {
            var count = $(this).find('.on-kanban-card').length;
            $(this).find('.count').text(count);
        });
    }

    // --- MODAL LOGIC (Copied/Adapted from Calendar) ---
    const modal = $('#onAdminModal');
    const modalContent = $('#onBokingDetailsContent'); // Typo in original? No, ID is onBookingDetailsContent
    const modalBody = $('#onBookingDetailsContent');

    // Close Modal
    $('#onAdminCloseModal').on('click', function () {
        // Remove WordPress editor instance before closing
        if (typeof wp !== 'undefined' && wp.editor) {
            wp.editor.remove('onAdminNotesEditor');
        }
        modal.removeClass('is-open');
    });

    $(window).on('click', function (event) {
        if ($(event.target).is(modal)) {
            // Remove WordPress editor instance before closing
            if (typeof wp !== 'undefined' && wp.editor) {
                wp.editor.remove('onAdminNotesEditor');
            }
            modal.removeClass('is-open');
        }
    });

    // Open Modal on Card Click
    // Use 'on' on document/container for dynamic elements if re-rendering, but cards are static here mostly (except drag moves).
    // Delegated event better.
    // Open Modal Function
    function openAdminModal(postId) {
        modalBody.html('<p>Lade Details...</p>');
        modal.addClass('is-open');

        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'on_get_booking_details',
                post_id: postId,
                nonce: onBookingKanban.nonce
            },
            success: function (response) {
                if (response.success) {
                    const data = response.data;
                    let html = `
                        <h4>${data.title}</h4>
                        <div style="margin-bottom:15px; padding:10px; background:#f5f5f5; border-radius:4px; color:#333;">
                            ${data.content}
                        </div>
                        
                        <div style="margin-top:20px;">
                            <label style="font-weight:bold; display:block; margin-bottom:5px;">Öffentliche Notizen (für Kunden sichtbar):</label>
                            <textarea id="onAdminNotesEditor" style="width:100%; height:150px;">${data.notes || ''}</textarea>
                            <button id="onSaveNotesBtn" class="button button-primary" style="margin-top:10px;" data-id="${data.id}">Notiz Speichern</button>
                            <span id="onSaveNotesMsg" style="margin-left:10px; font-weight:bold;"></span>
                        </div>

                        <hr>
                        <button class="button button-secondary" id="onDeleteBookingBtn" data-id="${data.id}" style="color: #a00; border-color: #a00;">Löschen</button>
                    `;
                    modalBody.html(html);

                    // Initialize WordPress Editor after modal content is loaded
                    setTimeout(function () {
                        wp.editor.initialize('onAdminNotesEditor', {
                            tinymce: {
                                wpautop: true,
                                plugins: 'lists,paste,textcolor',
                                toolbar1: 'bold,italic,bullist,numlist,undo,redo'
                            },
                            quicktags: true,
                            mediaButtons: false
                        });
                    }, 100);
                } else {
                    modalBody.html('<p style="color:red;">Fehler beim Laden.</p>');
                }
            },
            error: function () {
                modalBody.html('<p style="color:red;">Verbindungsfehler.</p>');
            }
        });
    }

    // Open Modal on Card Click (Delegated)
    $(document).on('click', '.on-kanban-card', function (e) {
        console.log('Card clicked');
        // Prevent if clicking actual input elements usually, but here we only have text and icon.
        // The draggable cancel option handles the drag issue.
        const postId = $(this).data('id');
        openAdminModal(postId);
    });

    // Explicit handler for icon just in case bubbling is weird or user clicks precisely on it
    $(document).on('click', '.on-edit-icon', function (e) {
        console.log('Icon clicked');
        e.stopPropagation(); // Stop bubbling if we want to handle distinct logic, but here we want same logic. 
        // Actually if we stop propagation, the card click won't fire.
        // But let's call openAdminModal directly to be sure.
        const postId = $(this).closest('.on-kanban-card').data('id');
        openAdminModal(postId);
    });

    // Save Notes Handler
    $(document).on('click', '#onSaveNotesBtn', function () {
        const btn = $(this);
        const postId = btn.data('id');
        // Get content from WordPress editor (TinyMCE or textarea fallback)
        const notes = wp.editor.getContent('onAdminNotesEditor');
        const msg = $('#onSaveNotesMsg');

        btn.prop('disabled', true);
        msg.text('Speichere...').css('color', '#333');

        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'on_update_booking_notes',
                post_id: postId,
                notes: notes,
                nonce: onBookingKanban.nonce
            },
            success: function (response) {
                if (response.success) {
                    msg.text('Gespeichert!').css('color', 'green');
                } else {
                    msg.text('Fehler.').css('color', 'red');
                }
            },
            error: function () {
                msg.text('Fehler.').css('color', 'red');
            },
            complete: function () {
                setTimeout(() => {
                    btn.prop('disabled', false);
                    msg.text('');
                }, 2000);
            }
        });
    });

    // Delete Booking Handler (Reused logic)
    $(document).on('click', '#onDeleteBookingBtn', function () {
        if (!confirm('Wirklich löschen?')) return;

        const btn = $(this);
        const postId = btn.data('id');

        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'on_delete_booking',
                post_id: postId,
                nonce: onBookingKanban.nonce
            },
            success: function (response) {
                if (response.success) {
                    alert('Gelöscht.');
                    modal.removeClass('is-open');
                    // Remove card from UI
                    $(`.on-kanban-card[data-id="${postId}"]`).remove();
                    updateCounts();
                } else {
                    alert('Fehler: ' + response.data.message);
                }
            }
        });
    });

});