@php
    // Capture ALL queries at render time (this is the last moment before displaying)
    if (isset($queryDebugEnabled) && $queryDebugEnabled) {
        $finalQueries = \App\Services\QueryDebugService::getAllQueriesAtRenderTime();
        $finalSummary = \App\Services\QueryDebugService::getSummary();
        $queriesByPurpose = \App\Services\QueryDebugService::getQueriesByPurpose();
    } else {
        $finalQueries = [];
        $finalSummary = [];
        $queriesByPurpose = [];
    }
@endphp

@if(isset($queryDebugEnabled) && $queryDebugEnabled && !empty($finalQueries))
<div id="query-debug-panel" style="background: #f3f4f6; border: 2px solid #ef4444; padding: 20px; margin: 20px 20px 40px 20px; border-radius: 8px; font-family: 'Courier New', monospace; position: relative; z-index: 1000;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
        <h2 style="color: #dc2626; margin: 0; font-size: 18px; font-weight: bold;">
            📊 SQL Queries Debug Panel
        </h2>
        <button onclick="document.getElementById('query-debug-panel').style.display='none'" 
                style="background: #ef4444; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px;">
            ✕ Close
        </button>
    </div>
    
    @if(config('query-debug.show_summary', true))
    <div style="background: #dbeafe; border: 1px solid #3b82f6; padding: 12px; border-radius: 6px; margin-bottom: 15px; font-size: 14px;">
        <strong>Query Summary:</strong> 
        <span style="color: #1e40af;">Total: {{ $finalSummary['total'] ?? 0 }} queries</span> | 
        <span style="color: #059669;">Total Time: {{ $finalSummary['total_time'] ?? 0 }}ms</span> | 
        <span style="color: #7c3aed;">Avg Time: {{ $finalSummary['avg_time'] ?? 0 }}ms</span>
    </div>
    @endif
    
    @if(!empty($queriesByPurpose))
    <div style="background: #fef3c7; border: 1px solid #f59e0b; padding: 15px; border-radius: 6px; margin-bottom: 15px; font-size: 13px;">
        <strong style="color: #92400e; display: block; margin-bottom: 12px; font-size: 14px;">📋 Queries by Purpose / Section:</strong>
        <div style="display: grid; gap: 8px;">
            @foreach($queriesByPurpose as $purposeGroup)
            <div style="background: white; padding: 10px; border-radius: 4px; border-left: 3px solid #f59e0b; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 10px; align-items: center; font-size: 12px;">
                <div style="font-weight: 600; color: #92400e;">
                    {{ $purposeGroup['purpose'] }}
                </div>
                <div style="text-align: center;">
                    <span style="color: #6b7280; font-size: 11px;">Count:</span>
                    <strong style="color: #1e40af; display: block;">{{ $purposeGroup['count'] }}</strong>
                </div>
                <div style="text-align: center;">
                    <span style="color: #6b7280; font-size: 11px;">Total Time:</span>
                    <strong style="color: #059669; display: block;">{{ $purposeGroup['total_time'] }}ms</strong>
                </div>
                <div style="text-align: center;">
                    <span style="color: #6b7280; font-size: 11px;">Avg Time:</span>
                    <strong style="color: #7c3aed; display: block;">{{ $purposeGroup['avg_time'] }}ms</strong>
                </div>
                <div style="text-align: center;">
                    <span style="color: #6b7280; font-size: 11px;">% of Total:</span>
                    <strong style="color: #dc2626; display: block;">{{ $purposeGroup['percentage'] }}%</strong>
                </div>
            </div>
            @endforeach
        </div>
        <div style="margin-top: 10px; padding: 8px; background: #fef3c7; border-radius: 4px; font-size: 11px; color: #92400e;">
            <strong>💡 Tip:</strong> This shows which sections/components are generating the most queries. Focus optimization efforts on sections with high query counts or execution times.
        </div>
    </div>
    @endif
    
    @if(isset($queryDebugPageInfo) && !empty($queryDebugPageInfo))
    <div style="background: #f0fdf4; border: 1px solid #22c55e; padding: 15px; border-radius: 6px; margin-bottom: 15px; font-size: 13px;">
        <strong style="color: #15803d; display: block; margin-bottom: 10px; font-size: 14px;">📍 Page Information (Where query=1 is being used):</strong>
        <div style="display: grid; grid-template-columns: auto 1fr; gap: 8px 15px; font-size: 12px;">
            <strong style="color: #6b7280;">Current URL:</strong>
            <code style="background: #e5e7eb; padding: 4px 8px; border-radius: 3px; word-break: break-all;">{{ $queryDebugPageInfo['url'] ?? 'N/A' }}</code>
            
            <strong style="color: #6b7280;">Path:</strong>
            <code style="background: #e5e7eb; padding: 4px 8px; border-radius: 3px;">{{ $queryDebugPageInfo['path'] ?? 'N/A' }}</code>
            
            <strong style="color: #6b7280;">Route Name:</strong>
            <code style="background: #e5e7eb; padding: 4px 8px; border-radius: 3px;">{{ $queryDebugPageInfo['route_name'] ?? 'N/A' }}</code>
            
            <strong style="color: #6b7280;">Route URI:</strong>
            <code style="background: #e5e7eb; padding: 4px 8px; border-radius: 3px;">{{ $queryDebugPageInfo['route_uri'] ?? 'N/A' }}</code>
            
            <strong style="color: #6b7280;">HTTP Method:</strong>
            <code style="background: #e5e7eb; padding: 4px 8px; border-radius: 3px;">{{ $queryDebugPageInfo['method'] ?? 'N/A' }}</code>
            
            @if(!empty($queryDebugPageInfo['controller']))
            <strong style="color: #6b7280;">Controller:</strong>
            <code style="background: #e5e7eb; padding: 4px 8px; border-radius: 3px;">{{ $queryDebugPageInfo['controller'] }}</code>
            @endif
            
            @if(!empty($queryDebugPageInfo['referrer']))
            <strong style="color: #6b7280;">Referrer:</strong>
            <code style="background: #e5e7eb; padding: 4px 8px; border-radius: 3px; word-break: break-all;">{{ $queryDebugPageInfo['referrer'] }}</code>
            @endif
            
            <strong style="color: #6b7280;">Timestamp:</strong>
            <code style="background: #e5e7eb; padding: 4px 8px; border-radius: 3px;">{{ $queryDebugPageInfo['timestamp'] ?? 'N/A' }}</code>
        </div>
    </div>
    @endif
    
    <div style="background: white; padding: 15px; border-radius: 6px; margin-bottom: 15px; font-size: 13px;">
        <strong>ℹ️ Info:</strong> Query debugging is enabled via <code style="background: #e5e7eb; padding: 2px 6px; border-radius: 3px;">?query=1</code> parameter.
        | 
        <a href="{{ request()->fullUrlWithQuery([config('query-debug.parameter', 'query') => null]) }}" 
           style="color: #2563eb; text-decoration: underline;">
            Hide Queries
        </a>
        <div style="margin-top: 8px; padding: 8px; background: #fef3c7; border-radius: 4px; font-size: 12px;">
            <strong>⚠️ Note:</strong> Livewire component queries (lazy-loaded widgets) may execute separately via AJAX and won't appear here. 
            This panel shows queries from the initial server-side page render.
        </div>
    </div>
    
    <div style="max-height: 600px; overflow-y: auto; overflow-x: auto;">
        @foreach($finalQueries as $query)
        <details style="background: white; padding: 15px; margin-bottom: 10px; border-radius: 6px; border-left: 4px solid #3b82f6; cursor: pointer;">
            <summary style="font-weight: bold; color: #1f2937; padding: 5px; user-select: none;">
                <span style="background: #3b82f6; color: white; padding: 4px 12px; border-radius: 4px; font-size: 13px; margin-right: 10px;">
                    Query #{{ $query['index'] }}
                </span>
                <span style="color: #059669; font-weight: bold; margin-right: 10px;">
                    ⏱️ {{ $query['time'] }}ms
                </span>
                @if(!empty($query['source']['summary']))
                <span style="background: #fef3c7; color: #92400e; padding: 4px 8px; border-radius: 4px; font-size: 11px; margin-right: 10px; font-weight: 600;">
                    📍 {{ $query['source']['summary'] }}
                </span>
                @endif
                <span style="color: #6b7280; font-size: 12px;">
                    ({{ strlen($query['raw_sql']) }} chars)
                </span>
            </summary>
            
            <div style="margin-top: 12px;">
                @if(!empty($query['source']))
                <div style="background: #eff6ff; border: 1px solid #3b82f6; padding: 12px; border-radius: 4px; margin-bottom: 12px; font-size: 12px;">
                    <strong style="color: #1e40af; display: block; margin-bottom: 8px;">📍 Query Source / Purpose:</strong>
                    <div style="display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 11px;">
                        @if(!empty($query['source']['section']))
                        <strong style="color: #6b7280;">Section:</strong>
                        <code style="background: #dbeafe; padding: 2px 6px; border-radius: 3px; color: #1e40af;">{{ $query['source']['section'] }}</code>
                        @endif
                        
                        @if(!empty($query['source']['component']))
                        <strong style="color: #6b7280;">Component:</strong>
                        <code style="background: #dbeafe; padding: 2px 6px; border-radius: 3px; color: #1e40af;">{{ $query['source']['component'] }}</code>
                        @endif
                        
                        @if(!empty($query['source']['controller']))
                        <strong style="color: #6b7280;">Controller:</strong>
                        <code style="background: #dbeafe; padding: 2px 6px; border-radius: 3px; color: #1e40af;">{{ $query['source']['controller'] }}</code>
                        @endif
                        
                        @if(!empty($query['source']['method']))
                        <strong style="color: #6b7280;">Method:</strong>
                        <code style="background: #dbeafe; padding: 2px 6px; border-radius: 3px; color: #1e40af;">{{ $query['source']['method'] }}()</code>
                        @endif
                        
                        @if(!empty($query['source']['class']))
                        <strong style="color: #6b7280;">Class:</strong>
                        <code style="background: #dbeafe; padding: 2px 6px; border-radius: 3px; color: #1e40af; word-break: break-all;">{{ $query['source']['class'] }}</code>
                        @endif
                        
                        @if(!empty($query['source']['file']))
                        <strong style="color: #6b7280;">File:</strong>
                        <code style="background: #dbeafe; padding: 2px 6px; border-radius: 3px; color: #1e40af;">{{ $query['source']['file'] }}@if(!empty($query['source']['line'])):{{ $query['source']['line'] }}@endif</code>
                        @endif
                    </div>
                </div>
                @endif
                
                <div style="background: #1f2937; color: #10b981; padding: 15px; border-radius: 4px; overflow-x: auto; font-size: 12px; line-height: 1.6; max-height: 300px; overflow-y: auto;">
                    <pre style="margin: 0; white-space: pre-wrap; word-wrap: break-word; font-family: 'Courier New', monospace;">{{ $query['sql'] }}</pre>
                </div>
                
                @if(!empty($query['bindings']))
                <div style="margin-top: 10px; font-size: 11px; color: #6b7280; background: #f9fafb; padding: 10px; border-radius: 4px;">
                    <strong>Bindings:</strong> 
                    <code style="background: #e5e7eb; padding: 4px 8px; border-radius: 3px; display: block; margin-top: 5px; white-space: pre-wrap; font-size: 11px;">
{{ json_encode($query['bindings'], JSON_PRETTY_PRINT) }}
                    </code>
                </div>
                @endif
                
                <div style="margin-top: 10px;">
                    <button onclick="copyQueryToClipboard({{ $query['index'] }})" 
                            style="background: #3b82f6; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 11px; margin-right: 8px;">
                        📋 Copy SQL
                    </button>
                    <button onclick="copyQueryRaw({{ $query['index'] }})" 
                            style="background: #6b7280; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 11px;">
                        📋 Copy Raw
                    </button>
                </div>
            </div>
        </details>
        @endforeach
    </div>
</div>

<script>
// Store queries in JavaScript for copying
const queryDebugData = @json($finalQueries);

function copyQueryToClipboard(index) {
    const query = queryDebugData.find(q => q.index === index);
    if (query) {
        navigator.clipboard.writeText(query.sql).then(() => {
            alert('SQL query copied to clipboard!');
        }).catch(err => {
            console.error('Failed to copy:', err);
            // Fallback
            const textarea = document.createElement('textarea');
            textarea.value = query.sql;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            alert('SQL query copied to clipboard!');
        });
    }
}

function copyQueryRaw(index) {
    const query = queryDebugData.find(q => q.index === index);
    if (query) {
        const rawData = {
            sql: query.raw_sql,
            bindings: query.bindings,
            time: query.time
        };
        navigator.clipboard.writeText(JSON.stringify(rawData, null, 2)).then(() => {
            alert('Raw query data copied to clipboard!');
        }).catch(err => {
            console.error('Failed to copy:', err);
        });
    }
}
</script>
@elseif(isset($queryDebugEnabled) && $queryDebugEnabled && empty($queryDebugQueries))
<div style="background: #fef3c7; border: 2px solid #f59e0b; padding: 15px; margin: 20px; border-radius: 8px; font-size: 14px;">
    <strong>No queries logged.</strong> 
    This might be because:
    <ul style="margin: 10px 0; padding-left: 20px;">
        <li>Queries are cached</li>
        <li>Page hasn't executed any database queries yet</li>
        <li>Queries were executed before logging was enabled</li>
    </ul>
</div>
@endif