@foreach ($trashs as $room_setup)
    <tr>
        <td>{{ $room_setup->rel_to_class_room->class_room_name }}</td>

        <!-- Layout Column -->
        <td id="visualize-{{ $room_setup->id }}"
            data-row="{{ $room_setup->class_room_row ?? 0 }}"
            data-column="{{ $room_setup->class_room_column ?? 0 }}"
            data-seats-per-row="{{ $room_setup->seat_per_row ?? 0 }}"
            data-seats-per-column="{{ $room_setup->seat_per_column ?? 0 }}"
            data-max-capacity="{{ $room_setup->rel_to_class_room->max_capacity ?? 0 }}">
        </td>

        <td>{{ $room_setup->note ? $room_setup->note : 'N/A' }}</td>

         <td>
            <div style="display: flex; gap: 10px;">
            <a href="{{ route('academic.class_rooms_setup.restore', $room_setup->id) }}" class="restore"data-bs-toggle="modal" data-bs-target="#restoreModal"><button class="btn btn-sm btn-secondary"><i class="fa fa-undo-alt"></i></button></a>

            <a href="{{ route('academic.class_rooms_setup.delete_forever', $room_setup->id) }}"class="delete" data-bs-toggle="modal" data-bs-target="#deleteModal"><button class="btn btn-sm btn-danger"> <i class="fa fa-trash"></i></button></a>
            </div>
        </td>

    </tr>
@endforeach


@push('script')
<script>
        window.addEventListener('DOMContentLoaded', function() {
        var roomSetups = document.querySelectorAll('[id^="visualize-"]');

        if (roomSetups.length === 0) {
            console.warn('No elements found with id starting with "visualize-"');
        }

        roomSetups.forEach(function(container) {
            if (!container) {
                console.warn('Container element is undefined');
                return;
            }

            var row = parseInt(container.getAttribute('data-row')) || 0;
            var column = parseInt(container.getAttribute('data-column')) || 0;
            var seatsPerRow = parseInt(container.getAttribute('data-seats-per-row')) || 0;
            var seatsPerColumn = parseInt(container.getAttribute('data-seats-per-column')) || 0;
            var maxCapacity = parseInt(container.getAttribute('data-max-capacity')) || 0;

            console.log({ row, column, seatsPerRow, seatsPerColumn, maxCapacity });

            visualize(row, column, seatsPerRow, seatsPerColumn, maxCapacity, container);
        });
    });

        function visualize(row, column, seatsPerRow, seatsPerColumn, maxCapacity, container) {
        if (!container) {
            console.warn('Container element is undefined in visualizeLayout');
            return;
        }

        console.log('Rendering layout for container:', container.id);

        var totalSeats = 0;
        var rows = 0;
        var cols = 0;

        if (seatsPerRow > 0) {
            totalSeats = column * seatsPerRow;
            rows = seatsPerRow;
            cols = column;
        } else if (seatsPerColumn > 0) {
            totalSeats = row * seatsPerColumn;
            rows = row;
            cols = seatsPerColumn;
        } else {
            container.innerHTML = 'N/A';
            console.warn('Both seatsPerRow and seatsPerColumn are 0, displaying N/A');
            return;
        }

        container.innerHTML = '';  // Clear any existing content

        if (totalSeats > maxCapacity) {
            container.innerHTML = 'N/A (Exceeds Capacity)';
            console.warn('Total seats exceed max capacity, displaying warning');
            return;
        }

        if (rows > 0 && cols > 0) {
            for (var r = 0; r < rows; r++) {
                var rowContainer = document.createElement('div');
                rowContainer.classList.add('row-container');
                for (var c = 0; c < cols; c++) {
                    var bench = document.createElement('div');
                    bench.className = 'bench';
                    rowContainer.appendChild(bench);
                }
                container.appendChild(rowContainer);
            }
        } else {
            container.innerHTML = 'N/A';
            console.warn('Rows or columns are zero, displaying N/A');
        }
    }
</script>
@endpush