@extends('layouts.app')

@section('title', 'API Timing Log')

@push('styles')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        .datepicker {
            z-index: 1060 !important;
        }

        /* Fix for modal scrolling issues */
        .modal-body {
            max-height: 70vh;
            overflow-y: auto;
        }

        /* Add scrolling to tables */
        .table-container {
            max-height: 400px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        /* Ensure query modal appears above parent modal */
        #query-details-modal {
            z-index: 1060;
        }

        #api-details-modal {
            z-index: 1050;
        }

        /* Fix table responsiveness */
        .table-responsive {
            max-height: 400px;
            overflow-y: auto;
        }

        /* Ensure proper modal backdrop handling */
        .modal-backdrop.show {
            opacity: 0.5;
        }

        /* Tab fixes for both Bootstrap versions */
        .nav-tabs .nav-link {
            cursor: pointer;
        }

        .nav-tabs .nav-link:hover {
            border-color: #e9ecef #e9ecef #dee2e6;
            isolation: isolate;
        }

        .nav-tabs .nav-link.active {
            color: #495057;
            background-color: #fff;
            border-color: #dee2e6 #dee2e6 #fff;
        }

        /* Ensure tab content is properly hidden/shown */
        .tab-pane {
            display: none;
        }

        .tab-pane.active {
            display: block;
        }

        .tab-pane.show.active {
            display: block;
        }

        /* Fix for modal z-index issues */
        .modal {
            z-index: 1050;
        }

        .modal-backdrop {
            z-index: 1040;
        }

        /* Ensure badges in tabs are visible */
        .nav-tabs .nav-link .badge {
            margin-left: 5px;
        }

        /* Your existing styles continue... */
        .datepicker {
            z-index: 1060 !important;
        }

        .modal-body {
            max-height: 70vh;
            overflow-y: auto;
        }

        .table-container {
            max-height: 400px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        #query-details-modal {
            z-index: 1060;
        }

        #api-details-modal {
            z-index: 1050;
        }

        .table-responsive {
            max-height: 400px;
            overflow-y: auto;
        }

        .modal-backdrop.show {
            opacity: 0.5;
        }
    </style>
@endpush

@section('content')
    <div class="page-title">
        <div class="title_left">
            <h3>API Timing Log</h3>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Date Filter</h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="row">
                        <div class="col-md-12">
                            <form id="filter-form" class="form-horizontal form-label-left">
                                <div class="form-group row">
                                    <label class="control-label col-md-2 col-sm-2">Select Date</label>
                                    <div class="col-md-3 col-sm-3">
                                        <input type="date" class="form-control" id="selected-date" name="selected-date"
                                            value="{{ $startDate }}">
                                    </div>
                                    <label class="control-label col-md-1 col-sm-1">Platform</label>
                                    <div class="col-md-2 col-sm-2">
                                        <select class="form-control" id="selected-platform" name="selected-platform">
                                            <option value="">All Platform</option>
                                            @foreach ($platforms as $platform)
                                                <option value="{{ $platform }}"
                                                    {{ $platform == $selectedPlatform ? 'selected' : '' }}>
                                                    {{ ucfirst($platform) }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-2 col-sm-2">
                                        <button type="button" class="btn btn-primary" id="apply-filter">Apply</button>
                                        <button type="button" class="btn btn-default" id="today-filter">Today</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>API Timing Details</h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="table-responsive">
                        <table id="api-timings-table" class="table table-striped table-bordered dt-responsive nowrap"
                            cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Method</th>
                                    <th>Path</th>
                                    <th>Total Time (seconds)</th>
                                    <th>Platform</th>
                                    <th>User ID</th>
                                    <th>Date</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Data will be loaded via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- API Timing Details Modal -->
    <div class="modal fade" id="api-details-modal" tabindex="-1" role="dialog" aria-labelledby="apiDetailsModalLabel"
        aria-hidden="true" data-backdrop="true" data-keyboard="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="apiDetailsModalLabel">API Timing Details</h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- Basic Information -->
                    <div class="row mb-3">
                        <div class="col-md-3 mb-2">
                            <strong>ID:</strong> <span id="api-id" class="text-muted"></span>
                        </div>
                        <div class="col-md-3 mb-2">
                            <strong>Method:</strong> <span id="api-method" class="text-muted"></span>
                        </div>
                        <div class="col-md-3 mb-2">
                            <strong>Total Time:</strong> <span id="api-total_seconds"></span>
                        </div>
                        <div class="col-md-3 mb-2">
                            <strong>Platform:</strong> <span id="api-platform" class="text-muted"></span>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6 mb-2">
                            <strong>Path:</strong> <span id="api-path" class="text-muted"></span>
                        </div>
                        <div class="col-md-3 mb-2">
                            <strong>User ID:</strong> <span id="api-user_id" class="text-muted"></span>
                        </div>
                        <div class="col-md-3 mb-2">
                            <strong>Date:</strong> <span id="api-date" class="text-muted"></span>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <strong>Full URL:</strong> <span id="api-full_url" class="text-muted"></span>
                        </div>
                    </div>

                    <hr>

                    <!-- Payload Data Tabs -->
                    <ul class="nav nav-tabs" id="payload-tabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="summary-tab" data-bs-toggle="tab"
                                data-bs-target="#summary-content" type="button" role="tab"
                                aria-controls="summary-content" aria-selected="true">
                                Timing Summary
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="steps-tab" data-bs-toggle="tab" data-bs-target="#steps-content"
                                type="button" role="tab" aria-controls="steps-content" aria-selected="false">
                                Steps <span id="steps-count" class="badge bg-info">0</span>
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="queries-tab" data-bs-toggle="tab"
                                data-bs-target="#queries-content" type="button" role="tab"
                                aria-controls="queries-content" aria-selected="false">
                                DB Queries <span id="queries-count" class="badge bg-info">0</span>
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="http-calls-tab" data-bs-toggle="tab"
                                data-bs-target="#http-calls-content" type="button" role="tab"
                                aria-controls="http-calls-content" aria-selected="false">
                                HTTP Calls <span id="http-calls-count" class="badge bg-info">0</span>
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content mt-3" id="payload-tab-content">
                        <!-- Timing Summary Tab -->
                        <div class="tab-pane fade show active" id="summary-content" role="tabpanel"
                            aria-labelledby="summary-tab" tabindex="0">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h6 class="mb-0">Overall Performance</h6>
                                        </div>
                                        <div class="card-body">
                                            <table class="table table-sm">
                                                <tr>
                                                    <td><strong>Total Time:</strong></td>
                                                    <td><span id="summary-total-time"></span></td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Database Time:</strong></td>
                                                    <td><span id="summary-db-time"></span></td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Business Logic Time:</strong></td>
                                                    <td><span id="summary-non-db-time"></span></td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Peak Memory:</strong></td>
                                                    <td><span id="summary-memory"></span></td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h6 class="mb-0">Database Performance</h6>
                                        </div>
                                        <div class="card-body">
                                            <table class="table table-sm">
                                                <tr>
                                                    <td><strong>Total Queries:</strong></td>
                                                    <td><span id="summary-query-count"></span></td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Average Query Time:</strong></td>
                                                    <td><span id="summary-avg-query-time"></span></td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Slowest Query:</strong></td>
                                                    <td><span id="summary-slowest-query"></span></td>
                                                </tr>
                                                <tr>
                                                    <td><strong>DB Connections:</strong></td>
                                                    <td><span id="summary-connections"></span></td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h6 class="mb-0">Time Distribution</h6>
                                        </div>
                                        <div class="card-body">
                                            <div id="time-distribution-chart"
                                                style="height: 60px; background: #f8f9fa; border-radius: 4px; position: relative; overflow: hidden;">
                                                <div id="db-time-bar"
                                                    style="position: absolute; top: 0; left: 0; height: 100%; background: #28a745; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;">
                                                </div>
                                                <div id="logic-time-bar"
                                                    style="position: absolute; top: 0; height: 100%; background: #dc3545; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;">
                                                </div>
                                            </div>
                                            <div class="mt-2">
                                                <small>
                                                    <span class="badge bg-success">■</span> Database Time
                                                    <span class="badge bg-danger ms-2">■</span> Business Logic Time
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Steps Tab -->
                        <div class="tab-pane fade" id="steps-content" role="tabpanel" aria-labelledby="steps-tab"
                            tabindex="0">
                            <div class="table-container">
                                <div class="table-responsive">
                                    <table class="table table-sm table-striped" id="steps-table">
                                        <thead class="thead-light">
                                            <tr>
                                                <th>Step</th>
                                                <th>Label</th>
                                                <th>Delta Time</th>
                                                <th>Cumulative Time</th>
                                                <th>Description</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- Steps will be populated here -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- Queries Tab -->
                        <div class="tab-pane fade" id="queries-content" role="tabpanel" aria-labelledby="queries-tab"
                            tabindex="0">
                            <div class="table-container">
                                <div class="table-responsive">
                                    <table class="table table-sm table-striped" id="queries-table">
                                        <thead class="thead-light">
                                            <tr>
                                                <th>#</th>
                                                <th>Time</th>
                                                <th>Connection</th>
                                                <th>Query Type</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- Queries will be populated here -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- HTTP Calls Tab -->
                        <div class="tab-pane fade" id="http-calls-content" role="tabpanel"
                            aria-labelledby="http-calls-tab" tabindex="0">
                            <div class="table-container">
                                <div class="table-responsive">
                                    <table class="table table-sm table-striped" id="http-calls-table">
                                        <thead class="thead-light">
                                            <tr>
                                                <th>#</th>
                                                <th>Method</th>
                                                <th>URL</th>
                                                <th>Status</th>
                                                <th>Time</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- HTTP calls will be populated here -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
    </div>

    <!-- Query Details Modal -->
    <div class="modal fade" id="query-details-modal" tabindex="-1" role="dialog"
        aria-labelledby="queryDetailsModalLabel" aria-hidden="true" data-backdrop="false">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="queryDetailsModalLabel">Query Details</h5>
                    <button type="button" class="close" onclick="closeQueryModal()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="mb-2">
                        <strong>Time:</strong> <span id="query-time"></span>
                    </div>
                    <div class="mb-2">
                        <strong>Connection:</strong> <span id="query-connection"></span>
                    </div>
                    <hr>
                    <h6><strong>SQL Query:</strong></h6>
                    <div class="border rounded p-3 bg-light" style="max-height: 300px; overflow-y: auto;">
                        <pre id="query-sql" class="mb-0"
                            style="white-space: pre-wrap; word-wrap: break-word; font-family: 'Courier New', Courier, monospace; font-size: 12px;"></pre>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="closeQueryModal()">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="module">
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Initialize Bootstrap tabs - Add this section
            // Check for Bootstrap version and initialize tabs accordingly
            function initializeTabs() {
                if (typeof bootstrap !== 'undefined' && bootstrap.Tab) {
                    // Bootstrap 5
                    console.log('Initializing Bootstrap 5 tabs');
                    var triggerTabList = [].slice.call(document.querySelectorAll(
                        '#payload-tabs button[data-bs-toggle="tab"]'));
                    triggerTabList.forEach(function(triggerEl) {
                        var tabTrigger = new bootstrap.Tab(triggerEl);

                        triggerEl.addEventListener('click', function(event) {
                            event.preventDefault();
                            tabTrigger.show();
                        });
                    });
                } else if (typeof $.fn.tab !== 'undefined') {
                    // Bootstrap 4 - Update the data attributes to work with Bootstrap 4
                    console.log('Initializing Bootstrap 4 tabs');
                    $('#payload-tabs button').each(function() {
                        var $this = $(this);
                        var target = $this.attr('data-bs-target') || $this.attr('data-target');
                        if (target) {
                            $this.attr('data-toggle', 'tab');
                            $this.attr('href', target);
                            $this.removeAttr('data-bs-toggle');
                            $this.removeAttr('data-bs-target');
                        }
                    });

                    // Initialize Bootstrap 4 tabs
                    $('#payload-tabs button[data-toggle="tab"]').on('click', function(e) {
                        e.preventDefault();
                        $(this).tab('show');
                    });
                } else {
                    // Manual tab implementation
                    console.log('Implementing manual tab functionality');
                    $('#payload-tabs button').on('click', function(e) {
                        e.preventDefault();

                        // Remove active class from all tabs and content
                        $('#payload-tabs button').removeClass('active');
                        $('.tab-pane').removeClass('show active');

                        // Add active class to clicked tab
                        $(this).addClass('active');

                        // Show corresponding tab content
                        var target = $(this).attr('data-bs-target') || $(this).attr('href');
                        $(target).addClass('show active');
                    });
                }
            }

            // Call tab initialization
            initializeTabs();
            // Re-initialize tabs when modal is shown
            $('#api-details-modal').on('shown.bs.modal', function() {
                // Ensure scrolling is enabled
                $(this).find('.modal-body').css('overflow-y', 'auto');

                // Re-initialize tabs after modal is fully shown
                setTimeout(function() {
                    initializeTabs();
                }, 100);
            });
            var table = $('#api-timings-table').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 100,
                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],
                ajax: {
                    url: "{{ route('api.logs.data') }}",
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: function(d) {
                        var selectedDate = $('#selected-date').val();
                        var selectedPlatform = $('#selected-platform').val();
                        d.start_date = selectedDate;
                        d.end_date = selectedDate;
                        d.platform = selectedPlatform;
                        d._token = $('meta[name="csrf-token"]').attr('content');
                        return d;
                    },
                    error: function(xhr, error, thrown) {
                        console.error('DataTables AJAX error:', error);
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'method',
                        name: 'method',
                        render: function(data, type, row) {
                            var badgeClass = 'bg-secondary';
                            switch (data) {
                                case 'GET':
                                    badgeClass = 'bg-success';
                                    break;
                                case 'POST':
                                    badgeClass = 'bg-primary';
                                    break;
                                case 'PUT':
                                    badgeClass = 'bg-warning';
                                    break;
                                case 'DELETE':
                                    badgeClass = 'bg-danger';
                                    break;
                            }
                            return '<span class="badge ' + badgeClass + '">' + data + '</span>';
                        }
                    },
                    {
                        data: 'path',
                        name: 'path'
                    },
                    {
                        data: 'total_ms',
                        name: 'total_ms',
                        render: function(data, type, row) {
                            // Convert milliseconds to seconds
                            var seconds = (data / 1000).toFixed(3);
                            var badge = 'bg-success';

                            if (seconds >= 5) {
                                badge = 'bg-danger';
                            } else if (seconds >= 1) {
                                badge = 'bg-warning';
                            } else if (seconds >= 0.5) {
                                badge = 'bg-secondary';
                            } else {
                                badge = 'bg-success';
                            }

                            return '<span class=" badge ' + badge + '">' + seconds + ' s</span>';
                        }
                    },
                    {
                        data: 'platform',
                        name: 'platform'
                    },
                    {
                        data: 'user_id',
                        name: 'user_id'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        render: function(data, type, row) {
                            return moment(data).format('YYYY-MM-DD HH:mm:ss');
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        render: function(data, type, row) {
                            return '<button type="button" class="btn btn-primary btn-sm view-details" data-id="' +
                                row.id + '">View Details</button>';
                        }
                    }
                ],
                order: [
                    [0, 'desc']
                ],
                columnDefs: [{
                    targets: '_all',
                    orderSequence: ["asc", "desc"]
                }]
            });

            // Ensure the table is drawn immediately
            table.draw();

            // Apply filter button click
            $('#apply-filter').on('click', function(e) {
                e.preventDefault();
                table.ajax.reload(null, true);
            });

            // Today filter button click
            $('#today-filter').on('click', function(e) {
                e.preventDefault();
                var today = new Date().toISOString().split('T')[0];
                $('#selected-date').val(today);
                $('#selected-platform').val('');
                table.ajax.reload(null, true);
            });

            // Add form submit handler to prevent default form submission
            $('#filter-form').on('submit', function(e) {
                e.preventDefault();
                $('#apply-filter').click();
            });

            // View details button click
            $('#api-timings-table').on('click', '.view-details', function() {
                var id = $(this).data('id');

                // Show loading state
                $('#api-id').text('Loading...');
                $('#api-method').text('Loading...');
                $('#api-path').text('Loading...');
                $('#api-total_seconds').text('Loading...');
                $('#api-platform').text('Loading...');
                $('#api-user_id').text('Loading...');
                $('#api-full_url').text('Loading...');
                $('#api-date').text('Loading...');

                // Clear tables
                $('#steps-table tbody').empty();
                $('#queries-table tbody').empty();
                $('#http-calls-table tbody').empty();
                $('#steps-count').text('0');
                $('#queries-count').text('0');
                $('#http-calls-count').text('0');

                // Show modal
                $('#api-details-modal').modal('show');

                // Fetch API timing details
                $.ajax({
                    url: "{{ route('api.logs.details') }}",
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        console.log('API Response:', response);
                        console.log('Debug Info:', response.debug_info);

                        // Show debug information in console
                        if (response.debug_info) {
                            console.log('Raw payload type:', response.debug_info
                                .raw_payload_type);
                            console.log('Decoded payload keys:', response.debug_info
                                .decoded_payload_keys);
                            console.log('Has queries:', response.debug_info.has_queries);
                            console.log('Queries count:', response.debug_info.queries_count);
                            console.log('Complete structure:', response.debug_info
                                .complete_structure);
                        }
                        // Populate basic info
                        $('#api-id').text(response.id);
                        $('#api-method').text(response.method);
                        $('#api-path').text(response.path);

                        // Show total time with badge
                        var totalBadgeClass = getTimingBadgeClass(parseFloat(response
                            .total_seconds));
                        $('#api-total_seconds').html('<span class="badge ' + totalBadgeClass +
                            '">' + response.total_seconds + ' s</span>');

                        $('#api-platform').text(response.platform);
                        $('#api-user_id').text(response.user_id || 'N/A');
                        $('#api-full_url').text(response.full_url || 'N/A');
                        $('#api-date').text(response.created_at);

                        // Debug payload structure
                        console.log('Payload:', response.payload);
                        console.log('Raw Payload:', response.raw_payload);

                        // Populate payload tables
                        if (response.payload) {
                            populateSummaryTab(response.payload.summary || {});
                            populateStepsTable(response.payload.steps || []);
                            populateQueriesTable(response.payload.queries || []);
                            populateHttpCallsTable(response.payload.http_calls || []);
                        } else {
                            console.log('No payload data found');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('AJAX Error:', error);
                        $('#api-id').text('Error loading data');
                        $('#api-method').text('Error loading data');
                        $('#api-path').text('Error loading data');
                        $('#api-total_seconds').text('Error loading data');
                        $('#api-platform').text('Error loading data');
                        $('#api-user_id').text('Error loading data');
                        $('#api-full_url').text('Error loading data');
                        $('#api-date').text('Error loading data');
                    }
                });
            });

            // Helper function to get timing badge class
            function getTimingBadgeClass(seconds) {
                if (seconds >= 5) {
                    return 'bg-danger';
                } else if (seconds >= 1) {
                    return 'bg-warning';
                } else if (seconds >= 0.5) {
                    return 'bg-secondary';
                } else {
                    return 'bg-success';
                }
            }
            // Populate summary tab
            function populateSummaryTab(summary) {
                console.log('Populating summary:', summary);

                if (!summary.total_time_seconds) {
                    $('#summary-content').html('<div class="alert alert-warning">No timing data available</div>');
                    return;
                }

                // Overall performance
                var totalBadge = getTimingBadgeClass(parseFloat(summary.total_time_seconds));
                $('#summary-total-time').html('<span class="badge ' + totalBadge + '">' + summary
                    .total_time_seconds + ' s</span>');

                var dbBadge = getTimingBadgeClass(parseFloat(summary.db_time_seconds));
                $('#summary-db-time').html('<span class="badge ' + dbBadge + '">' + summary.db_time_seconds +
                    ' s (' + summary.db_percentage + '%)</span>');

                var logicBadge = getTimingBadgeClass(parseFloat(summary.non_db_time_seconds));
                $('#summary-non-db-time').html('<span class="badge ' + logicBadge + '">' + summary
                    .non_db_time_seconds + ' s (' + summary.non_db_percentage + '%)</span>');

                $('#summary-memory').html('<span class="badge bg-info">' + summary.memory_peak_mb +
                    ' MB</span>');

                // Database performance
                if (summary.db_summary) {
                    $('#summary-query-count').html('<span class="badge bg-info">' + summary.db_summary
                        .total_queries + '</span>');
                    $('#summary-avg-query-time').html('<span class="badge bg-secondary">' + summary.db_summary
                        .average_time_ms + ' ms</span>');

                    if (summary.db_summary.slowest_query) {
                        var slowestBadge = summary.db_summary.slowest_query.badge_class || 'bg-warning';
                        $('#summary-slowest-query').html('<span class="badge ' + slowestBadge + '">' + summary
                            .db_summary.slowest_query.time_seconds + ' s</span>');
                    }

                    // Connections
                    var connectionText = '';
                    for (var conn in summary.db_summary.connections) {
                        var connData = summary.db_summary.connections[conn];
                        connectionText += '<span class="badge text-bg-primary mr-1">' + conn + ' (' + connData
                            .count + ')</span>';
                    }
                    $('#summary-connections').html(connectionText);
                }

                // Time distribution chart
                var dbPercent = parseFloat(summary.db_percentage);
                var logicPercent = parseFloat(summary.non_db_percentage);

                $('#db-time-bar').css('width', dbPercent + '%').text(dbPercent + '%');
                $('#logic-time-bar').css({
                    'left': dbPercent + '%',
                    'width': logicPercent + '%'
                }).text(logicPercent + '%');
            }
            // Populate steps table
            function populateStepsTable(steps) {
                console.log('Populating steps:', steps);
                var tbody = $('#steps-table tbody');
                tbody.empty();
                $('#steps-count').text(steps.length);

                if (steps.length === 0) {
                    tbody.append(
                        '<tr><td colspan="5" class="text-center text-muted">No steps data available</td></tr>');
                    return;
                }

                steps.forEach(function(step, index) {
                    var deltaBadge = step.badge_class || 'bg-info';
                    var deltaTime = step.delta_seconds ?
                        '<span class="badge ' + deltaBadge + '">' + step.delta_seconds + ' s</span>' :
                        '<span class="text-muted">N/A</span>';

                    var cumulativeBadge = step.cumulative_badge_class || 'bg-secondary';
                    var cumulativeTime = step.cumulative_seconds ?
                        '<span class="badge ' + cumulativeBadge + '">' + step.cumulative_seconds +
                        ' s</span>' :
                        '<span class="text-muted">N/A</span>';

                    var description = getStepDescription(step.label);

                    var row = '<tr>' +
                        '<td>' + (index + 1) + '</td>' +
                        '<td><code>' + (step.label || 'N/A') + '</code></td>' +
                        '<td>' + deltaTime + '</td>' +
                        '<td>' + cumulativeTime + '</td>' +
                        '<td><small class="text-muted">' + description + '</small></td>' +
                        '</tr>';
                    tbody.append(row);
                });
            }

            // Populate queries table
            function populateQueriesTable(queries) {
                console.log('Populating queries:', queries);
                var tbody = $('#queries-table tbody');
                tbody.empty();
                $('#queries-count').text(queries.length);

                if (queries.length === 0) {
                    tbody.append(
                        '<tr><td colspan="5" class="text-center text-muted">No database queries found</td></tr>'
                    );
                    return;
                }

                queries.forEach(function(query, index) {
                    var badgeClass = query.badge_class || 'bg-info';
                    var timeDisplay = query.time_seconds ?
                        '<span class="badge ' + badgeClass + '">' + query.time_seconds + ' s</span>' :
                        '<span class="text-muted">N/A</span>';

                    var connection = query.connection || 'default';
                    var queryType = getQueryType(query.sql || query.raw_sql || '');

                    var row = '<tr>' +
                        '<td>' + (query.query_number || (index + 1)) + '</td>' +
                        '<td>' + timeDisplay + '</td>' +
                        '<td><span class="badge bg-info">' + connection + '</span></td>' +
                        '<td><span class="badge bg-secondary">' + queryType + '</span></td>' +
                        '<td><button class="btn btn-sm text-bg-primary view-query" data-index="' +
                        index + '">View SQL</button></td>' +
                        '</tr>';
                    tbody.append(row);
                });

                // Store queries data for modal
                window.currentQueries = queries;
            }

            // Populate HTTP calls table
            function populateHttpCallsTable(httpCalls) {
                console.log('Populating HTTP calls:', httpCalls); // Debug
                var tbody = $('#http-calls-table tbody');
                tbody.empty();
                $('#http-calls-count').text(httpCalls.length);

                if (httpCalls.length === 0) {
                    tbody.append(
                        '<tr><td colspan="5" class="text-center text-muted">No HTTP calls found</td></tr>');
                    return;
                }

                httpCalls.forEach(function(call, index) {
                    var badgeClass = call.badge_class || 'bg-info';
                    var timeDisplay = call.time_seconds ?
                        '<span class="badge ' + badgeClass + '">' + call.time_seconds + ' s</span>' :
                        '<span class="text-muted">N/A</span>';

                    var statusBadge = call.status ?
                        '<span class="badge ' + (call.status < 400 ? 'bg-success' : 'bg-danger') +
                        '">' + call.status + '</span>' :
                        '<span class="text-muted">N/A</span>';

                    var row = '<tr>' +
                        '<td>' + (index + 1) + '</td>' +
                        '<td><span class="badge bg-info">' + (call.method || 'GET') + '</span></td>' +
                        '<td>' + (call.url || 'N/A') + '</td>' +
                        '<td>' + statusBadge + '</td>' +
                        '<td>' + timeDisplay + '</td>' +
                        '</tr>';
                    tbody.append(row);
                });
            }

            function getStepDescription(label) {
                var descriptions = {
                    'start': 'Request initialization',
                    'middleware_start': 'Middleware processing begins',
                    'after_controller': 'Controller logic completed',
                    'end': 'Response preparation and sending'
                };
                return descriptions[label] || 'Custom application step';
            }

            function getQueryType(sql) {
                if (!sql) return 'UNKNOWN';
                sql = sql.toLowerCase().trim();
                if (sql.startsWith('select')) return 'SELECT';
                if (sql.startsWith('insert')) return 'INSERT';
                if (sql.startsWith('update')) return 'UPDATE';
                if (sql.startsWith('delete')) return 'DELETE';
                if (sql.startsWith('create')) return 'CREATE';
                if (sql.startsWith('alter')) return 'ALTER';
                if (sql.startsWith('drop')) return 'DROP';
                return 'OTHER';
            }
            $(document).on('click', '.view-query', function() {
                var index = $(this).data('index');
                var query = window.currentQueries[index];

                console.log('Viewing query:', query);

                if (query) {
                    var badgeClass = query.badge_class || 'bg-info';
                    var timeValue = query.time_seconds ||
                        (query.time ? (query.time / 1000).toFixed(3) + ' s' :
                            (query.time_ms ? (query.time_ms / 1000).toFixed(3) + ' s' : 'N/A'));

                    $('#query-time').html('<span class="badge ' + badgeClass + '">' + timeValue +
                        '</span>');
                    $('#query-connection').text(query.connection || query.connection_name || 'default');

                    // Handle different SQL field names
                    var sqlQuery = query.sql || query.query || query.raw || 'No query available';

                    // If there are bindings, try to show rendered query
                    if (query.bindings && query.bindings.length > 0 && query.sql) {
                        try {
                            var rendered = query.sql;
                            query.bindings.forEach(function(binding) {
                                var value = typeof binding === 'string' ? "'" + binding + "'" :
                                    binding;
                                rendered = rendered.replace('?', value);
                            });
                            sqlQuery = rendered;
                        } catch (e) {
                            console.log('Error rendering query:', e);
                        }
                    }

                    $('#query-sql').text(sqlQuery);

                    // Show the query modal
                    $('#query-details-modal').modal('show');
                } else {
                    alert('Query data not found');
                }
            });

            // Prevent clicks inside query modal from bubbling to parent
            $('#query-details-modal').on('click', function(e) {
                e.stopPropagation();
            });

            // Handle escape key for query modal
            $(document).on('keydown', function(e) {
                if (e.key === 'Escape' && $('#query-details-modal').hasClass('show')) {
                    e.stopPropagation();
                    closeQueryModal();
                }
            });
            // Function to close only the query modal and restore parent modal scrolling
            window.closeQueryModal = function() {
                $('#query-details-modal').modal('hide');

                // Ensure parent modal body scrolling is restored
                setTimeout(function() {
                    $('body').removeClass('modal-open');
                    $('body').addClass('modal-open');

                    // Ensure the parent modal can scroll
                    $('#api-details-modal .modal-body').css('overflow-y', 'auto');
                }, 100);
            };

            // Handle query modal events
            $('#query-details-modal').on('show.bs.modal', function(e) {
                // Prevent parent modal from losing scroll capability
                e.stopPropagation();
            });

            $('#query-details-modal').on('hidden.bs.modal', function(e) {
                e.stopPropagation();

                // Restore parent modal scrolling
                setTimeout(function() {
                    if ($('#api-details-modal').hasClass('show')) {
                        $('body').addClass('modal-open');
                        $('#api-details-modal .modal-body').css('overflow-y', 'auto');
                    }
                }, 50);
            });

            // Handle parent modal events
            $('#api-details-modal').on('shown.bs.modal', function(e) {
                // Ensure scrolling is enabled
                $(this).find('.modal-body').css('overflow-y', 'auto');
            });
        });
    </script>
@endpush