@extends('layouts.app')

@section('title', 'Hotspot Profiles')

@section('content')
<div class="container-fluid">
    <div class="corporate-header">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="h3 mb-0 text-gray-800">
                    <i class="fas fa-id-card text-warning me-2"></i>
                    Hotspot User Profiles
                </h1>
                <p class="text-muted small mb-0">Template konfigurasi user profile hotspot di router Mikrotik</p>
                @if($selectedMikrotik)
                    <p class="text-info small mb-0">
                        <i class="fas fa-info-circle me-1"></i>
                        Ditemukan {{ count($profiles) }} user profile(s) dari router {{ $selectedMikrotik->name }}
                    </p>
                @endif
            </div>
            <div class="col-md-4 text-end">
                <button type="button" class="btn btn-primary btn-sm" onclick="refreshProfiles()">
                    <i class="fas fa-sync-alt me-1"></i>
                    Refresh
                </button>
                @if($selectedMikrotik)
                    <button type="button" class="btn btn-warning btn-sm ms-2" onclick="debugProfiles()">
                        <i class="fas fa-bug me-1"></i>
                        Debug Data
                    </button>
                    <button type="button" class="btn btn-info btn-sm ms-1" onclick="testAllData()">
                        <i class="fas fa-flask me-1"></i>
                        Test All Data
                    </button>
                @endif
            </div>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if($debugInfo)
        @if(!$debugInfo['success'])
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <strong>Error:</strong> {{ $debugInfo['error'] }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @else
            <div class="alert alert-info alert-dismissible fade show" role="alert">
                <i class="fas fa-info-circle me-2"></i>
                <strong>Debug Info:</strong> Total profiles ditemukan: {{ $debugInfo['total_found'] }}, Processed: {{ $debugInfo['profiles_count'] }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif
    @endif

    <!-- Router Selection -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="card-title mb-0">
                <i class="fas fa-router me-2"></i>
                Pilih Router Mikrotik
            </h5>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('hotspot.profiles') }}" id="routerForm">
                <div class="row align-items-end">
                    <div class="col-md-8">
                        <label for="mikrotik_id" class="form-label">Router</label>
                        <select class="form-select" id="mikrotik_id" name="mikrotik_id" onchange="this.form.submit()">
                            <option value="">-- Pilih Router --</option>
                            @foreach($mikrotiks as $mikrotik)
                                <option value="{{ $mikrotik->id }}" 
                                        {{ $selectedMikrotik && $selectedMikrotik->id == $mikrotik->id ? 'selected' : '' }}>
                                    {{ $mikrotik->name }} ({{ $mikrotik->host }})
                                    @if($mikrotik->status === 'online')
                                        <span class="text-success">● Online</span>
                                    @else
                                        <span class="text-secondary">● {{ ucfirst($mikrotik->status) }}</span>
                                    @endif
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        @if($selectedMikrotik)
                            <div class="alert alert-info mb-0 py-2">
                                <i class="fas fa-info-circle me-1"></i>
                                <strong>{{ $selectedMikrotik->name }}</strong><br>
                                <small>{{ $selectedMikrotik->host }}:{{ $selectedMikrotik->api_port }}</small>
                            </div>
                        @endif
                    </div>
                </div>
            </form>
        </div>
    </div>

    @if($selectedMikrotik)
        <!-- User Profile Statistics -->
        <div class="row mb-4">
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="stat-card bg-warning">
                    <div class="stat-icon">
                        <i class="fas fa-id-card"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">{{ count($profiles) }}</div>
                        <div class="stat-label">Total Profiles</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="stat-card bg-success">
                    <div class="stat-icon">
                        <i class="fas fa-tachometer-alt"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">{{ collect($profiles)->filter(function($p) { return !empty($p['rate_limit']); })->count() }}</div>
                        <div class="stat-label">With Rate Limit</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="stat-card bg-info">
                    <div class="stat-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">{{ collect($profiles)->filter(function($p) { return !empty($p['session_timeout']); })->count() }}</div>
                        <div class="stat-label">With Session Timeout</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="stat-card bg-primary">
                    <div class="stat-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">{{ collect($profiles)->filter(function($p) { return $p['transparent_proxy'] === 'yes'; })->count() }}</div>
                        <div class="stat-label">With Proxy</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Profiles Cards -->
        <div class="row">
            @if(count($profiles) > 0)
                @foreach($profiles as $profile)
                    <div class="col-lg-6 col-xl-4 mb-4">
                        <div class="card profile-card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h6 class="card-title mb-0">
                                    <i class="fas fa-id-card me-2"></i>
                                    <strong>{{ $profile['name'] }}</strong>
                                </h6>
                                <button type="button" class="btn btn-sm btn-outline-info" 
                                        onclick="showProfileDetails('{{ json_encode($profile) }}')"
                                        title="View Details">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <div class="card-body">
                                <div class="profile-info">
                                    <!-- Rate Limit -->
                                    @if(!empty($profile['rate_limit']))
                                        <div class="info-row">
                                            <div class="info-label">
                                                <i class="fas fa-tachometer-alt text-warning"></i>
                                                Rate Limit
                                            </div>
                                            <div class="info-value">
                                                <span class="badge bg-warning">{{ $profile['rate_limit'] }}</span>
                                            </div>
                                        </div>
                                    @endif

                                    <!-- Session Timeout -->
                                    <div class="info-row">
                                        <div class="info-label">
                                            <i class="fas fa-clock text-primary"></i>
                                            Session Timeout
                                        </div>
                                        <div class="info-value">
                                            {{ !empty($profile['session_timeout']) ? $profile['session_timeout'] : 'Unlimited' }}
                                        </div>
                                    </div>

                                    <!-- Idle Timeout -->
                                    <div class="info-row">
                                        <div class="info-label">
                                            <i class="fas fa-pause text-secondary"></i>
                                            Idle Timeout
                                        </div>
                                        <div class="info-value">
                                            {{ !empty($profile['idle_timeout']) ? $profile['idle_timeout'] : 'None' }}
                                        </div>
                                    </div>

                                    <!-- Shared Users -->
                                    <div class="info-row">
                                        <div class="info-label">
                                            <i class="fas fa-users text-success"></i>
                                            Shared Users
                                        </div>
                                        <div class="info-value">
                                            <span class="badge bg-success">{{ $profile['shared_users'] }}</span>
                                        </div>
                                    </div>

                                    <!-- Login Method -->
                                    @if(!empty($profile['login_by']))
                                        <div class="info-row">
                                            <div class="info-label">
                                                <i class="fas fa-sign-in-alt text-info"></i>
                                                Login By
                                            </div>
                                            <div class="info-value">
                                                <small class="text-muted">{{ $profile['login_by'] }}</small>
                                            </div>
                                        </div>
                                    @endif

                                    <!-- Queue Type -->
                                    <div class="info-row">
                                        <div class="info-label">
                                            <i class="fas fa-list text-info"></i>
                                            Queue Type
                                        </div>
                                        <div class="info-value">
                                            {{ $profile['queue_type'] }}
                                        </div>
                                    </div>

                                    <!-- Transparent Proxy -->
                                    <div class="info-row">
                                        <div class="info-label">
                                            <i class="fas fa-shield-alt text-danger"></i>
                                            Transparent Proxy
                                        </div>
                                        <div class="info-value">
                                            <span class="badge {{ $profile['transparent_proxy'] === 'yes' ? 'bg-success' : 'bg-secondary' }}">
                                                {{ $profile['transparent_proxy'] === 'yes' ? 'Enabled' : 'Disabled' }}
                                            </span>
                                        </div>
                                    </div>

                                    <!-- RADIUS -->
                                    @if($profile['use_radius'] === 'yes')
                                        <div class="info-row">
                                            <div class="info-label">
                                                <i class="fas fa-server text-primary"></i>
                                                RADIUS
                                            </div>
                                            <div class="info-value">
                                                <span class="badge bg-primary">Enabled</span>
                                            </div>
                                        </div>
                                    @endif

                                    <!-- Address Pool -->
                                    @if(!empty($profile['address_pool']))
                                        <div class="info-row">
                                            <div class="info-label">
                                                <i class="fas fa-network-wired text-dark"></i>
                                                Address Pool
                                            </div>
                                            <div class="info-value">
                                                <small class="text-muted">{{ $profile['address_pool'] }}</small>
                                            </div>
                                        </div>
                                    @endif

                                    @if(!empty($profile['comment']))
                                        <div class="info-row">
                                            <div class="info-label">
                                                <i class="fas fa-comment text-muted"></i>
                                                Comment
                                            </div>
                                            <div class="info-value">
                                                <small class="text-muted">{{ $profile['comment'] }}</small>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @else
                <div class="col-12">
                    <div class="card">
                        <div class="card-body text-center py-5">
                            <i class="fas fa-id-card fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">Tidak Ada User Profiles</h5>
                            <p class="text-muted">Belum ada user profile template yang dikonfigurasi di router ini</p>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    @else
        <!-- No Router Selected -->
        <div class="card">
            <div class="card-body text-center py-5">
                <i class="fas fa-router fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">Pilih Router Mikrotik</h5>
                <p class="text-muted">Silakan pilih router Mikrotik untuk melihat user profile hotspot</p>
            </div>
        </div>
    @endif
</div>

<!-- Profile Details Modal -->
<div class="modal fade" id="profileDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-info-circle me-2"></i>
                    Detail User Profile Hotspot
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="profileDetailsContent">
                <!-- Content will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<!-- Loading Modal -->
<div class="modal fade" id="loadingModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center p-4">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-3 mb-0" id="loadingText">Processing...</p>
            </div>
        </div>
    </div>
</div>

<!-- Debug Modal -->
<div class="modal fade" id="debugModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-bug me-2"></i>
                    Debug Data - RouterOS API Raw Response
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="debugContent">
                <!-- Content will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<style>
.corporate-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.stat-card {
    color: white;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 15px;
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 14px;
    opacity: 0.9;
}

.profile-card {
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 10px;
    transition: transform 0.2s ease;
}

.profile-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.profile-info {
    space-y: 10px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 0 0 45%;
    display: flex;
    align-items: center;
    gap: 5px;
}

.info-value {
    flex: 1;
    text-align: right;
    font-size: 13px;
}

.card {
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 10px;
}

.detail-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.detail-section h6 {
    color: #495057;
    margin-bottom: 10px;
    font-weight: 600;
}

.detail-table {
    font-size: 13px;
}

.detail-table td {
    padding: 5px 10px;
    border: none;
}

.detail-table td:first-child {
    font-weight: 600;
    color: #6c757d;
    width: 30%;
}
</style>

<script>
function refreshProfiles() {
    const mikrotikId = document.getElementById('mikrotik_id').value;
    
    if (!mikrotikId) {
        showAlert('warning', 'Pilih router terlebih dahulu');
        return;
    }
    
    showLoading('Memuat ulang profiles...');
    
    // Refresh halaman untuk mengambil data terbaru
    window.location.reload();
}

function debugProfiles() {
    const mikrotikId = document.getElementById('mikrotik_id').value;
    if (!mikrotikId) {
        showAlert('warning', 'Pilih router Mikrotik terlebih dahulu');
        return;
    }
    
    showLoading('Testing debug profiles...');
    
    fetch(`{{ route('api.hotspot.debug-profiles') }}?mikrotik_id=${mikrotikId}`)
        .then(response => response.json())
        .then(data => {
            hideLoading();
            showDebugModal(data);
        })
        .catch(error => {
            hideLoading();
            console.error('Error:', error);
            showAlert('danger', 'Error testing debug profiles: ' + error.message);
        });
}

function testAllData() {
    const mikrotikId = document.getElementById('mikrotik_id').value;
    if (!mikrotikId) {
        showAlert('warning', 'Pilih router Mikrotik terlebih dahulu');
        return;
    }
    
    showLoading('Testing all RouterOS queries...');
    
    fetch(`{{ route('api.hotspot.test-data') }}?mikrotik_id=${mikrotikId}`)
        .then(response => response.json())
        .then(data => {
            hideLoading();
            showTestModal(data);
        })
        .catch(error => {
            hideLoading();
            console.error('Error:', error);
            showAlert('danger', 'Error testing RouterOS queries: ' + error.message);
        });
}

function showProfileDetails(profileData) {
    const profile = JSON.parse(profileData);
    
    const content = `
        <div class="row">
            <!-- Basic Configuration -->
            <div class="col-md-6">
                <div class="detail-section">
                    <h6><i class="fas fa-cog me-2"></i>Basic Configuration</h6>
                    <table class="table detail-table">
                        <tr>
                            <td>Profile Name:</td>
                            <td><strong>${profile.name}</strong></td>
                        </tr>
                        <tr>
                            <td>Session Timeout:</td>
                            <td>${profile.session_timeout || 'Unlimited'}</td>
                        </tr>
                        <tr>
                            <td>Idle Timeout:</td>
                            <td>${profile.idle_timeout || 'Unlimited'}</td>
                        </tr>
                        <tr>
                            <td>Keepalive Timeout:</td>
                            <td>${profile.keepalive_timeout || 'Default'}</td>
                        </tr>
                        <tr>
                            <td>Shared Users:</td>
                            <td>${profile.shared_users || '1'}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <!-- Network & QoS -->
            <div class="col-md-6">
                <div class="detail-section">
                    <h6><i class="fas fa-network-wired me-2"></i>Network & QoS</h6>
                    <table class="table detail-table">
                        <tr>
                            <td>Rate Limit:</td>
                            <td>${profile.rate_limit ? `<span class="badge bg-warning">${profile.rate_limit}</span>` : 'Unlimited'}</td>
                        </tr>
                        <tr>
                            <td>Parent Queue:</td>
                            <td>${profile.parent_queue || 'N/A'}</td>
                        </tr>
                        <tr>
                            <td>Queue Type:</td>
                            <td>${profile.queue_type || 'default'}</td>
                        </tr>
                        <tr>
                            <td>Address List:</td>
                            <td>${profile.address_list || 'N/A'}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <!-- Web Portal Settings -->
            <div class="col-md-6">
                <div class="detail-section">
                    <h6><i class="fas fa-globe me-2"></i>Web Portal Settings</h6>
                    <table class="table detail-table">
                        <tr>
                            <td>Keep User Page:</td>
                            <td><span class="badge ${profile.keep_user_page === 'yes' ? 'bg-success' : 'bg-secondary'}">${profile.keep_user_page}</span></td>
                        </tr>
                        <tr>
                            <td>Status Autorefresh:</td>
                            <td>${profile.status_autorefresh || 'Default'}</td>
                        </tr>
                        <tr>
                            <td>Open Status Page:</td>
                            <td><span class="badge ${profile.open_status_page === 'yes' ? 'bg-success' : 'bg-secondary'}">${profile.open_status_page}</span></td>
                        </tr>
                        <tr>
                            <td>MAC Cookie Timeout:</td>
                            <td>${profile.mac_cookie_timeout || 'Default'}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <!-- Security & Features -->
            <div class="col-md-6">
                <div class="detail-section">
                    <h6><i class="fas fa-shield-alt me-2"></i>Security & Features</h6>
                    <table class="table detail-table">
                        <tr>
                            <td>Transparent Proxy:</td>
                            <td><span class="badge ${profile.transparent_proxy === 'yes' ? 'bg-success' : 'bg-secondary'}">${profile.transparent_proxy}</span></td>
                        </tr>
                        <tr>
                            <td>Advertise:</td>
                            <td><span class="badge ${profile.advertise === 'yes' ? 'bg-success' : 'bg-secondary'}">${profile.advertise}</span></td>
                        </tr>
                        <tr>
                            <td>Advertise URL:</td>
                            <td>${profile.advertise_url || 'N/A'}</td>
                        </tr>
                        <tr>
                            <td>Advertise Interval:</td>
                            <td>${profile.advertise_interval || 'Default'}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <!-- Script Events -->
            <div class="col-md-12">
                <div class="detail-section">
                    <h6><i class="fas fa-code me-2"></i>Script Events</h6>
                    <table class="table detail-table">
                        <tr>
                            <td style="width: 15%">On Login:</td>
                            <td style="width: 35%">${profile.on_login || 'N/A'}</td>
                            <td style="width: 15%">On Logout:</td>
                            <td style="width: 35%">${profile.on_logout || 'N/A'}</td>
                        </tr>
                        <tr>
                            <td>Internal ID:</td>
                            <td><code>${profile.id}</code></td>
                            <td>Comment:</td>
                            <td>${profile.comment || 'N/A'}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    `;
    
    document.getElementById('profileDetailsContent').innerHTML = content;
    const modal = new bootstrap.Modal(document.getElementById('profileDetailsModal'));
    modal.show();
}

function showLoading(text = 'Processing...') {
    document.getElementById('loadingText').textContent = text;
    const modal = new bootstrap.Modal(document.getElementById('loadingModal'));
    modal.show();
}

function hideLoading() {
    const modal = bootstrap.Modal.getInstance(document.getElementById('loadingModal'));
    if (modal) {
        modal.hide();
    }
}

function showAlert(type, message) {
    const alertHtml = `
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'danger' ? 'exclamation-circle' : 'info-circle'} me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    const container = document.querySelector('.container-fluid');
    if (!container) {
        console.error('Container not found');
        return;
    }
    
    // Cari tempat yang tepat untuk menampilkan alert
    let insertTarget = container.querySelector('.corporate-header');
    if (!insertTarget) {
        // Jika tidak ada corporate-header, cari alternatif lain
        insertTarget = container.querySelector('.card-header');
        if (!insertTarget) {
            insertTarget = container.querySelector('.row');
            if (!insertTarget) {
                // Sebagai fallback terakhir, masukkan di awal container
                container.insertAdjacentHTML('afterbegin', alertHtml);
                setTimeout(() => {
                    const alert = container.querySelector('.alert');
                    if (alert) {
                        alert.remove();
                    }
                }, 5000);
                return;
            }
        }
    }
    
    insertTarget.insertAdjacentHTML('afterend', alertHtml);
    
    // Auto hide after 5 seconds
    setTimeout(() => {
        const alert = container.querySelector('.alert');
        if (alert) {
            alert.remove();
        }
    }, 5000);
}

function showDebugModal(data) {
    const content = `
        <pre>${JSON.stringify(data, null, 2)}</pre>
    `;
    
    document.getElementById('debugContent').innerHTML = content;
    const modal = new bootstrap.Modal(document.getElementById('debugModal'));
    modal.show();
}

function showTestModal(data) {
    let content = `
        <div class="row">
            <div class="col-12 mb-3">
                <h6><i class="fas fa-info-circle me-2"></i>Router Information:</h6>
                <div class="alert alert-info">
                    <strong>${data.mikrotik.name}</strong> - ${data.mikrotik.host}
                </div>
            </div>
    `;
    
    // Tampilkan hasil untuk setiap query path
    Object.keys(data.query_results).forEach(key => {
        const result = data.query_results[key];
        const success = result.success;
        
        content += `
            <div class="col-md-6 mb-3">
                <div class="card">
                    <div class="card-header ${success ? 'bg-success' : 'bg-danger'} text-white">
                        <h6 class="mb-0">
                            <i class="fas fa-${success ? 'check' : 'times'} me-2"></i>
                            ${key.toUpperCase().replace('_', ' ')}
                        </h6>
                        <small>${result.path}</small>
                    </div>
                    <div class="card-body">
                        ${success ? 
                            `<div class="alert alert-success">
                                Found: ${result.count} items
                            </div>
                            <pre style="max-height: 200px; overflow-y: auto; font-size: 0.8em;">${JSON.stringify(result.data, null, 2)}</pre>` :
                            `<div class="alert alert-danger">
                                Error: ${result.error}
                            </div>`
                        }
                    </div>
                </div>
            </div>
        `;
    });
    
    content += '</div>';
    
    document.getElementById('debugContent').innerHTML = content;
    const modal = new bootstrap.Modal(document.getElementById('debugModal'));
    modal.show();
}
</script>
@endsection