<?php if (($user->rights >= 7 && DEBUG) || DEBUG_FOR_ALL): ?>
    <?php
    $connection = \Illuminate\Database\Capsule\Manager::connection();
    $query_log = $connection->getQueryLog();
    ?>
    <!-- Debug Info Bar -->
    <div class="fixed bottom-4 right-4 z-50">
        <div class="bg-gray-800 text-white text-xs rounded-lg shadow-lg border border-gray-700">
            <button 
                onclick="toggleDebugModal()" 
                class="flex items-center space-x-2 px-3 py-2 hover:bg-gray-700 rounded-lg transition-colors duration-200"
            >
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
                </svg>
                <span class="font-medium">
                    SQL: <span class="text-green-400"><?= count($query_log) ?></span>
                </span>
                <span class="text-gray-300">|</span>
                <span class="text-blue-300"><?= format_size(memory_get_usage()) ?></span>
                <span class="text-gray-300">|</span>
                <span class="text-yellow-300"><?= round(microtime(true) - START_TIME, 2) ?>s</span>
            </button>
        </div>
    </div>

    <!-- Debug Modal -->
    <?php if (! empty($query_log)): ?>
        <div id="debugModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
            <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                <!-- Background Overlay -->
                <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="toggleDebugModal()"></div>

                <!-- Modal Panel -->
                <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-7xl sm:w-full">
                    <!-- Header -->
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
                                </svg>
                                <h3 class="text-lg font-semibold text-gray-900">
                                    <?= d__('system', 'SQL Query Log') ?>
                                </h3>
                            </div>
                            <button 
                                onclick="toggleDebugModal()" 
                                class="text-gray-400 hover:text-gray-600 transition-colors duration-200"
                            >
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        </div>
                        <div class="mt-2 flex items-center space-x-4 text-sm text-gray-600">
                            <span class="flex items-center space-x-1">
                                <span class="w-2 h-2 bg-green-500 rounded-full"></span>
                                <span>Queries: <span class="font-semibold"><?= count($query_log) ?></span></span>
                            </span>
                            <span class="flex items-center space-x-1">
                                <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
                                <span>Memory: <span class="font-semibold"><?= format_size(memory_get_usage()) ?></span></span>
                            </span>
                            <span class="flex items-center space-x-1">
                                <span class="w-2 h-2 bg-yellow-500 rounded-full"></span>
                                <span>Time: <span class="font-semibold"><?= round(microtime(true) - START_TIME, 2) ?>s</span></span>
                            </span>
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="bg-white px-6 py-4 max-h-96 overflow-y-auto">
                        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            #
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            <?= d__('system', 'Query') ?>
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            <?= d__('system', 'Bindings') ?>
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            <?= d__('system', 'Time') ?>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <?php foreach ($query_log as $k => $query): ?>
                                        <tr class="hover:bg-gray-50 transition-colors duration-150">
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                                <?= $k + 1 ?>
                                            </td>
                                            <td class="px-6 py-4 text-sm text-gray-900 font-mono">
                                                <code class="bg-gray-100 px-2 py-1 rounded text-xs"><?= $query['query'] ?></code>
                                            </td>
                                            <td class="px-6 py-4 text-sm text-gray-600">
                                                <div class="bg-orange-50 px-2 py-1 rounded border border-orange-200">
                                                    <?= $this->e(implode(', ', $query['bindings'])) ?>
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-<?= $query['time'] > 100 ? 'red' : ($query['time'] > 50 ? 'yellow' : 'green') ?>-100 text-<?= $query['time'] > 100 ? 'red' : ($query['time'] > 50 ? 'yellow' : 'green') ?>-800">
                                                    <?= $query['time'] ?> ms
                                                </span>
                                            </td>
                                        </tr>
                                    <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Footer -->
                    <div class="bg-gray-50 px-6 py-3 border-t border-gray-200">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">
                                Total execution time: <span class="font-semibold"><?= round(microtime(true) - START_TIME, 2) ?> seconds</span>
                            </span>
                            <button 
                                onclick="toggleDebugModal()" 
                                class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 transition-colors duration-200"
                            >
                                Close
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
        function toggleDebugModal() {
            const modal = document.getElementById('debugModal');
            modal.classList.toggle('hidden');
            document.body.classList.toggle('overflow-hidden');
        }

        // Close modal with Escape key
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                const modal = document.getElementById('debugModal');
                if (!modal.classList.contains('hidden')) {
                    toggleDebugModal();
                }
            }
        });
        </script>
    <?php endif ?>
<?php endif ?>