<div class="container">
    <div class="row">
        <!-- Prima colonna per la prima tabella -->
        <div class="col-md-5">
            <table class="generaltable" id="table-voce-saldo">
                <thead>
                    <tr>
                        <th>Voce</th>
                        <th>{{#str}}saldo, mtcontabilita{{/str}}</th>
                    </tr>
                </thead>
                <tbody>
                    {{#elementi}}
                    <tr class="draggable" data-id="{{id}}">
                        <td class="voce">{{voce}}</td>
                        <td class="saldo">{{saldo}}</td>
                    </tr>
                    {{/elementi}}
                </tbody>
            </table>
        </div>

        <!-- Seconda colonna per la seconda tabella -->
        <div class="col-md-7">
            <table class="generaltable" id="table-destinazione">
                <thead>
                    <tr><th colspan="4">{{lbl}}</th></tr>
                    <tr><th colspan="2">{{t1}}</th><th colspan="2">{{t2}}</th></tr>
                    <tr>
                        <th>{{#str}}denominazioneconto, mtcontabilita{{/str}}</th><th>{{#str}}saldo, mtcontabilita{{/str}}</th>
                        <th>{{#str}}denominazioneconto, mtcontabilita{{/str}}</th><th>{{#str}}saldo, mtcontabilita{{/str}}</th>
                    </tr>
                </thead>
                <tbody>
                    {{#ele_body}}
                    <tr>
                        <td class="dropzone col-1-2" data-col="1">{{c1}}</td>
                        <td class="dropzone col-1-2" data-col="2">{{c2}}</td>
                        <td class="dropzone col-3-4" data-col="3">{{c3}}</td>
                        <td class="dropzone col-3-4" data-col="4">{{c4}}</td>
                    </tr>
                    {{/ele_body}}
                    <tr>
                        <td class="dropzone col-1-2" data-col="1"></td>
                        <td class="dropzone col-1-2" data-col="2"></td>
                        <td class="dropzone col-3-4" data-col="3"></td>
                        <td class="dropzone col-3-4" data-col="4"></td>
                    </tr>
                    <tr>
                        <td class="dropzone col-1-2" data-col="1"></td>
                        <td class="dropzone col-1-2" data-col="2"></td>
                        <td class="dropzone col-3-4" data-col="3"></td>
                        <td class="dropzone col-3-4" data-col="4"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="btn-group mt-6">
    <button type="submit" name="finish" class="btn btn-primary" id="id_finish">{{#str}}finish, mtcontabilita{{/str}}</button>
</div>


<script>
$(document).ready(function() {
    console.log("DOM ready and script running");

    // Funzione per la riga draggable
    $(".draggable").draggable({
        helper: 'clone',
        revert: 'invalid', // Ritorna automaticamente se non è valido
        start: function(event, ui) {
            // Memorizza l'elemento originale
            $(this).data('orig', $(this).html());
            console.log("Drag start per id: ", $(this).attr('data-id'));
        }
    });

    // Funzionalità droppable
    $(".dropzone").droppable({
        accept: ".draggable",
        hoverClass: "drop-hover",
        drop: function(event, ui) {
            var draggedRow = ui.draggable; // Riga trascinata
            var voce = draggedRow.find('.voce').text(); // Testo della cella voce
            var saldo = draggedRow.find('.saldo').text(); // Testo della cella saldo
            var col = $(this).attr('data-col'); // Colonna droppata (1, 2, 3, 4)
            var row = $(this).closest('tr'); // Riga della tabella destinazione

            console.log("Elemento droppato su colonna: ", col);

            // Controlla se la colonna di destinazione è già occupata
            if (row.find('[data-col="' + col + '"]').html() === "") {
                // Piazza "voce" qui
                row.find('[data-col="' + col + '"]').html(voce);
                // Posiziona il saldo nella colonna successiva (2 o 4)
                var nextCol = (col === "1") ? "2" : "4";
                row.find('[data-col="' + nextCol + '"]').html(saldo);

                // Rimuovi l'elemento originale dalla tabella di origine
                draggedRow.remove();
            } else {
                // Se la colonna è già occupata, ritorna il draggable
                console.log("Colonna già occupata, il drag fallisce");
                ui.draggable.draggable("option", "revert", true);
                // Ripristina l'elemento originale
                $(this).droppable('option', 'revert', true);
            }
        },
        over: function(event, ui) {
            // Se si sovrappone a un elemento già presente, indica che non è valido
            var occupyingElement = $(this).html();
            if (occupyingElement !== "") {
                $(this).addClass('invalid-drop'); // Indica che il drop è invalido
            }
        },
        out: function(event, ui) {
            // Rimuovi l'indicazione di drop non valido quando non è più sopra
            $(this).removeClass('invalid-drop');
        }
    });

    // Ritorna l'elemento originale se il drop è andato male
    $(".draggable").on("dragstop", function(event, ui) {
        if (ui.helper.data('cancel')) {
            $(this).html($(this).data('orig'));
        }
    });
});
</script>

<style>
/* Stile per rendere la dropzone evidente */
.drop-hover {
    background-color: #f0f0f0;
    border: 2px dashed #999;
}

.invalid-drop {
    border: 2px dashed red; /* Indica un drop non valido */
}

.drag-container {
    display: flex;
    justify-content: space-between;
    gap: 50px;
}

.generaltable {
    width: 45%;
    border-collapse: collapse;
}

.generaltable th, .generaltable td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}

/* Assicurati che gli elementi trascinati siano sopra */
.ui-draggable-dragging {
    z-index: 1000; /* Porta l'elemento in primo piano durante il drag */
}

.dropped-item {
    background-color: #e6ffe6; /* Colore per distinguere gli elementi droppati */
}


</style>
