@extends('SuperAdmin.layout.layout')
@section('title',"Leader Board")
@section('page-name',"Leader Board")
@section('page-detail',"Your Dealership Ranking Information")
@section('pagelink', 'leaderboard')
@section('body')
    <div class="content-are-dashboard p-3">
        <div class="card rounded-3">
            <div class="card-body">
                <div class="border rounded-3 p-3 leaderboard-container">
                    <div class="row align-items-center">
                        <div class="col-md-5 col-lg-4 mb-3">
                            <h4>Leader Board</h4>
                        </div>
                        <div class="col-md-7 ms-auto mb-3">
                            <div class="d-flex justify-content-end gap-2 align-items-center flex-wrap">
                                <!-- Category (when View = Category) - single dropdown -->
                                <div class="filter-group" id="categoryFilterGroup" style="display: none;">
                                    <label class="form-label small">Category</label>
                                    <select class="form-select shadow-none" id="categoryFilter" style="width: 150px" onchange="filterByDate()">
                                        <option value="all">All Categories</option>
                                        @foreach($availableCategories as $category)
                                            <option value="{{ $category }}">{{ $category }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <!-- Department (when View = Department) - single dropdown -->
                                <div class="filter-group" id="departmentFilterGroup" style="display: none;">
                                    <label class="form-label small">Department</label>
                                    <select class="form-select shadow-none" id="departmentFilter" style="width: 150px" onchange="filterByDate()">
                                        <option value="all">All Departments</option>
                                        @foreach($availableDepartments as $dept)
                                            <option value="{{ $dept }}">{{ $dept }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                
                                <!-- Month Dropdown -->
                                <div class="filter-group">
                                    <label class="form-label small">Month</label>
                                    <select class="form-select shadow-none" style="width: 150px" id="dateFilter" onchange="filterByDate()">
                                        @foreach($months as $month)
                                            <option value="{{ $month }}" {{ ($month == ($currentMonth ?? $months->first())) ? 'selected' : '' }}>{{ \Carbon\Carbon::parse($month)->format('M-y') }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                
                                <!-- Filter Dropdown -->
                                <div class="filter-group">
                                    <label class="form-label small">View</label>
                                    <select class="form-select shadow-none" style="width: 150px" id="filter" onchange="switchBoards()">
                                        <option value="emp">Employee</option>
                                        <option value="dep">Department</option>
                                        <option value="cat">Category</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Department Leader Board -->
                    <div class="row d-none" id="depLeaderBoard">
                        @include('partials.departmentLeaderBoard', ['departments' => $departments, 'prizes' => $prizes])
                    </div>


                    <!-- Employee Leader Board -->
                    <div class="row" id="empLeaderBoard">
                        @include('partials.employeeLeaderBoard', ['employees' => $employees, 'prizes' => $prizes])
                    </div>

                    <!-- Category Leader Board -->
                    <div class="row d-none" id="catLeaderBoard">
                        @include('partials.categoryLeaderBoard', ['categories' => $categories, 'prizes' => $prizes])
                    </div>

                    <!-- Dealership Leader Board -->
                    <div class="row d-none" id="dealerLeaderBoard">
                        {{--                        @include('partials.dealershipLeaderBoard', ['dealerships' => $dealerships])--}}
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@section('custom-scripts')
    <script>
        //Function to switch between Leader Boards
        function switchBoards() {
            let choice = $('#filter').val();
            console.log('Switching leaderboard view to:', choice);
            const categoryFilterGroup = document.getElementById('categoryFilterGroup');
            
            const departmentFilterGroup = document.getElementById('departmentFilterGroup');
            if (choice === 'cat') {
                categoryFilterGroup.style.display = 'flex';
                if (departmentFilterGroup) { departmentFilterGroup.style.display = 'none'; document.getElementById('departmentFilter').value = 'all'; }
            } else if (choice === 'dep') {
                if (departmentFilterGroup) departmentFilterGroup.style.display = 'flex';
                categoryFilterGroup.style.display = 'none';
                document.getElementById('categoryFilter').value = 'all';
            } else {
                categoryFilterGroup.style.display = 'none';
                if (departmentFilterGroup) { departmentFilterGroup.style.display = 'none'; document.getElementById('departmentFilter').value = 'all'; }
                document.getElementById('categoryFilter').value = 'all';
            }
            
            // Show the selected leaderboard and hide others
            // IMPORTANT: Always show the selected one, never hide it
            if(choice == 'emp')
            {
                console.log('Showing Employee Leaderboard');
                $('#empLeaderBoard').removeClass('d-none').css('opacity', '1');
                $('#depLeaderBoard').addClass('d-none');
                $('#catLeaderBoard').addClass('d-none');
            }
            else if(choice == 'dep')
            {
                console.log('Showing Department Leaderboard');
                $('#depLeaderBoard').removeClass('d-none').css('opacity', '1');
                $('#empLeaderBoard').addClass('d-none');
                $('#catLeaderBoard').addClass('d-none');
            }
            else if(choice == 'cat')
            {
                console.log('Showing Category Leaderboard');
                categoryFilterGroup.style.display = 'flex';
                $('#catLeaderBoard').removeClass('d-none').css('opacity', '1');
                $('#empLeaderBoard').addClass('d-none');
                $('#depLeaderBoard').addClass('d-none');
            }
            
            // Filter by date to load the data for selected view
            filterByDate();
        }

        //Function to get Filtered Data By Date
        function filterByDate() {
            let selectedMonth = $('#dateFilter').val();
            let choice = $('#filter').val();
            currentMonth = selectedMonth;
            
            // Determine which leaderboard container to update
            let targetContainer = '';
            let url = '';
            
            if(choice == 'emp')
            {
                targetContainer = '#empLeaderBoard';
                url = "{{route('empFilter.leaderboard', ['currentMonth' => ':currentMonth'])}}".replace(':currentMonth', selectedMonth);
            }
            else if(choice == 'dep')
            {
                targetContainer = '#depLeaderBoard';
                const departmentFilter = document.getElementById('departmentFilter') ? document.getElementById('departmentFilter').value : 'all';
                url = "{{ route('depFilter.leaderboard', ['currentMonth' => ':currentMonth']) }}".replace(':currentMonth', selectedMonth);
                if (departmentFilter && departmentFilter !== 'all') url += (url.indexOf('?') >= 0 ? '&' : '?') + 'department=' + encodeURIComponent(departmentFilter);
            }
            else
            {
                targetContainer = '#catLeaderBoard';
                const categoryFilter = document.getElementById('categoryFilter') ? document.getElementById('categoryFilter').value : 'all';
                url = "{{ route('catFilter.leaderboard', ['currentMonth' => ':currentMonth']) }}".replace(':currentMonth', selectedMonth);
                if (categoryFilter && categoryFilter !== 'all') url += (url.indexOf('?') >= 0 ? '&' : '?') + 'category=' + encodeURIComponent(categoryFilter);
            }
            
            // Show loading state - hide old content and show loader
            if (targetContainer) {
                // Hide the container content first to prevent flash
                $(targetContainer).css('opacity', '0.3');
                showLoadingState();
                
                $.ajax({
                    url: url,
                    type: "GET",
                    success: function(response) {
                        // Hide loader first
                        hideLoadingState();
                        
                        // Update content
                        $(targetContainer).html(response);
                        $(targetContainer).css('opacity', '1');
                        
                        console.log('Leaderboard updated:', choice);
                        
                        // Re-initialize Bootstrap tooltips for prize info (hover on leaderboard items)
                        initLeaderboardTooltips();
                        
                        // Wait for content to be ready, then add prizes
                        waitForContentAndAddPrizes();
                    },
                    error: function(xhr) {
                        hideLoadingState();
                        $(targetContainer).css('opacity', '1');
                        console.error("Error fetching leaderboard:", xhr.responseText);
                        alert('Error loading leaderboard data. Please try again.');
                    }
                });
            }
        }
        
        function waitForContentAndAddPrizes() {
            // Wait for content to be loaded before adding prizes
            const checkContent = setInterval(function() {
                if ($('.leaderboard-item').length > 0 || $('.leader-table tbody tr').length > 0) {
                    clearInterval(checkContent);
                    // Add prizes after a short delay to ensure DOM is ready
                    setTimeout(function() {
                        addPrizeDisplayToLeaderboard();
                    }, 300);
                }
            }, 100);
            
            // Timeout after 3 seconds
            setTimeout(function() {
                clearInterval(checkContent);
            }, 3000);
        }

        // Enhanced Leaderboard with Advanced Filtering
        let currentPrizes = {};
        let currentCategory = 'all';
        let currentMonth = '{{ $currentMonth ?? $months->first() ?? date('Y-m') }}';
        let prizesLoaded = false;
        let contentReady = false;
        
        function initLeaderboardTooltips() {
            document.querySelectorAll('.leaderboard-prize-tooltip[data-bs-toggle="tooltip"]').forEach(function(el) {
                if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
                    bootstrap.Tooltip.getOrCreateInstance(el);
                }
            });
        }
        
        // Initialize page on load
        $(document).ready(function() {
            // Ensure employee leaderboard is visible on page load
            ensureInitialView();
            
            // Initialize Bootstrap tooltips for prize info on leaderboard items
            setTimeout(initLeaderboardTooltips, 100);
            
            // Wait for all content to be ready before loading prizes
            waitForContentReady();
        });
        
        function ensureInitialView() {
            // Ensure employee leaderboard is shown by default
            $('#empLeaderBoard').removeClass('d-none');
            $('#depLeaderBoard').addClass('d-none');
            $('#catLeaderBoard').addClass('d-none');
            
            // Set the filter dropdown to 'emp' if not already set
            const filterValue = $('#filter').val();
            if (!filterValue || filterValue === '') {
                $('#filter').val('emp');
            }
            
            // Set the month dropdown to server default (first available month) so data shows without selecting
            const defaultMonth = '{{ $currentMonth ?? $months->first() ?? date("Y-m") }}';
            const monthSelect = $('#dateFilter');
            if (monthSelect.find('option[value="' + defaultMonth + '"]').length > 0) {
                monthSelect.val(defaultMonth);
            } else if (monthSelect.find('option').length > 0) {
                monthSelect.prop('selectedIndex', 0);
            }
            currentMonth = monthSelect.val() || defaultMonth;
            
            console.log('Initial view set - Employee leaderboard should be visible');
        }
        
        function waitForContentReady() {
            // Check if leaderboard content is loaded
            const checkContent = setInterval(function() {
                if ($('.leaderboard-item').length > 0 || $('.leader-table tbody tr').length > 0) {
                    contentReady = true;
                    clearInterval(checkContent);
                    
                    // Load prizes only after content is ready
                    if (!prizesLoaded) {
                        loadPrizes();
                    }
                }
            }, 100);
            
            // Timeout after 5 seconds to prevent infinite waiting
            setTimeout(function() {
                clearInterval(checkContent);
                if (!prizesLoaded) {
                    loadPrizes();
                }
            }, 5000);
        }
        
        async function loadPrizes() {
            if (prizesLoaded) {
                return; // Prevent multiple loads
            }
            
            try {
                const response = await fetch('/super-admin/prizes', {
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                });
                
                const result = await response.json();
                console.log('Prizes loaded:', result);
                
                if (result.success) {
                    currentPrizes = result.data.reduce((acc, prize) => {
                        if (!acc[prize.position]) {
                            acc[prize.position] = [];
                        }
                        acc[prize.position].push(prize);
                        return acc;
                    }, {});
                    
                    prizesLoaded = true;
                    
                    // Wait a bit more to ensure DOM is fully rendered
                    setTimeout(function() {
                        addPrizeDisplayToLeaderboard();
                    }, 200);
                }
            } catch (error) {
                console.error('Error loading prizes:', error);
            }
        }
        
        function addPrizeDisplayToLeaderboard() {
            // Prize info is shown only via tooltip (no box below card).
        }
        
        function getPrizeForPosition(position) {
            return currentPrizes[position] ? currentPrizes[position][0] : null;
        }
        
        function generatePrizeHTML(prize) {
            let html = `
                <div class="prize-info mt-2">
                    <div class="prize-badge">
                        <i class="fas fa-trophy me-1"></i>
                        <strong>${prize.title}</strong>
                    </div>
            `;
            
            if (prize.prize_amount) {
                html += `
                    <div class="prize-amount">
                        ${prize.formatted_amount || prize.currency + ' ' + parseFloat(prize.prize_amount).toFixed(2)}
                    </div>
                `;
            }
            
            if (prize.description) {
                html += `
                    <div class="prize-description">
                        <small>${prize.description}</small>
                    </div>
                `;
            }
            
            html += `</div>`;
            return html;
        }
        
        // Category filtering (when Category view is selected)
        function filterBySpecificCategory() {
            const category = document.getElementById('categoryFilter').value;
            const currentMonth = document.getElementById('dateFilter').value;
            console.log('Filtering by specific category:', category, 'for month:', currentMonth);
            
            // Use the existing employee leaderboard route with category filtering
            let url = '/super-admin/leader-board/emp-leader-board/' + currentMonth;
            
            console.log('Loading URL:', url);
            
            // Ensure employee leaderboard is visible
            $('#empLeaderBoard').removeClass('d-none').css('opacity', '0.3');
            // Show loading state
            showLoadingState();
            
            // Load the filtered content using existing route
            $.ajax({
                url: url,
                method: 'GET',
                data: {
                    category: category // Pass category as parameter
                },
                success: function(response) {
                    console.log('Successfully loaded category filter data');
                    // Hide loader first
                    hideLoadingState();
                    
                    // Replace the employee leaderboard content
                    $('#empLeaderBoard').html(response).css('opacity', '1');
                    
                    // Wait for content to be ready, then add prizes
                    waitForContentAndAddPrizes();
                },
                error: function(xhr, status, error) {
                    hideLoadingState();
                    $('#empLeaderBoard').css('opacity', '1');
                    console.error('Error loading category filter:', error);
                    showErrorMessage('Failed to load filtered data for ' + category);
                }
            });
        }
        
        function showAllCategories() {
            // Show all categories without filtering
            $('#catLeaderBoard').removeClass('d-none');
            // Reset any filtered content
            $('.col-lg-8 .row').html(''); // Clear any custom ranking content
        }
        
        function updateCategoryLeaderboardWithFilteredData(data, category) {
            try {
                // Update the category leaderboard with filtered data
                $('#catLeaderBoard').removeClass('d-none');
                
                // Update top 3 positions with filtered data
                updateTop3Positions(data.top3 || [], category);
                
                // Update complete ranking for this specific category
                updateCompleteRankingForCategory(data.complete_ranking || [], category);
            } catch (error) {
                console.error('Error updating category leaderboard:', error);
                showErrorMessage('Error updating category leaderboard display');
            }
        }
        
        function updateCompleteRankingForCategory(ranking, category) {
            try {
                // Update the complete ranking section for specific category
                const rankingContainer = $('.col-lg-8 .row');
                if (rankingContainer.length > 0) {
                    let rankingHtml = `
                        <div class="col-12">
                            <div class="border rounded-3 p-3">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h5>Complete ${category} Ranking</h5>
                                    <span class="badge bg-primary">${ranking.length} Total</span>
                                </div>
                    `;
                    
                    if (ranking.length > 0) {
                        rankingHtml += `
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Rank</th>
                                            <th>Name</th>
                                            <th>Category</th>
                                            <th>Points</th>
                                            <th>Performance</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                        `;
                        
                        ranking.forEach((performer, index) => {
                            const rank = index + 4; // Starting from 4th place
                            const points = performer.earned_points || 0;
                            const progressWidth = Math.min((points / 100) * 100, 100);
                            
                            rankingHtml += `
                                <tr>
                                    <td><span class="badge bg-secondary">${rank}</span></td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <img src="${performer.image || '/assets/img/placeholder-img-2.png'}" 
                                                 alt="${performer.employee_name || performer.department_name}" 
                                                 class="rounded-circle me-2" width="32" height="32">
                                            <span>${performer.employee_name || performer.department_name || 'N/A'}</span>
                                        </div>
                                    </td>
                                    <td>${performer.category || 'N/A'}</td>
                                    <td><strong>${points}</strong></td>
                                    <td>
                                        <div class="progress" style="width: 100px;">
                                            <div class="progress-bar" style="width: ${progressWidth}%"></div>
                                        </div>
                                    </td>
                                </tr>
                            `;
                        });
                        
                        rankingHtml += `
                                    </tbody>
                                </table>
                            </div>
                        `;
                    } else {
                        rankingHtml += `
                            <div class="text-center py-4">
                                <p class="text-muted">No additional ${category} rankings available.</p>
                            </div>
                        `;
                    }
                    
                    rankingHtml += `
                            </div>
                        </div>
                    `;
                    
                    rankingContainer.html(rankingHtml);
                }
            } catch (error) {
                console.error('Error updating complete ranking for category:', error);
            }
        }

        // Advanced Category Filtering Function
        async function filterByCategory() {
            const category = document.getElementById('categoryFilter').value;
            currentCategory = category;
            
            console.log('Filtering by category:', category);
            
            // If "all" is selected, just show the original leaderboard
            if (category === 'all') {
                console.log('Showing original leaderboard...');
                showOriginalLeaderboard();
                return;
            }
            
            try {
                // Show loading state
                showLoadingState();
                
                // Get CSRF token
                const csrfToken = document.querySelector('meta[name="csrf-token"]');
                if (!csrfToken) {
                    throw new Error('CSRF token not found');
                }
                
                console.log('Making AJAX request to:', '/super-admin/leader-board/filtered');
                
                // Create a timeout promise
                const timeoutPromise = new Promise((_, reject) => {
                    setTimeout(() => reject(new Error('Request timeout')), 10000); // 10 second timeout
                });
                
                // Fetch filtered data based on category
                const fetchPromise = fetch('/super-admin/leader-board/filtered', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken.getAttribute('content')
                    },
                    body: JSON.stringify({
                        category: category,
                        time_period: 'current_month',
                        month: currentMonth
                    })
                });
                
                // Race between fetch and timeout
                const response = await Promise.race([fetchPromise, timeoutPromise]);
                
                console.log('Response status:', response.status);
                
                const result = await response.json();
                console.log('Response data:', result);
                
                if (result.success) {
                    console.log('Successfully received filtered data');
                    // Update the leaderboard with filtered data
                    updateLeaderboardWithFilteredData(result, category);
                } else {
                    console.error('Error filtering leaderboard:', result.message);
                    showErrorMessage('Failed to load filtered data');
                }
            } catch (error) {
                console.error('Error in filterByCategory:', error);
                showErrorMessage('An error occurred while filtering');
            } finally {
                // Always hide loading state
                hideLoadingState();
            }
        }
        
        function showOriginalLeaderboard() {
            // Show the original leaderboard without filtering
            $('#empLeaderBoard, #depLeaderBoard, #catLeaderBoard').addClass('d-none');
            
            // Show the appropriate leaderboard based on current view
            const currentView = document.getElementById('filter').value;
            let targetBoard = '';
            
            switch(currentView) {
                case 'emp':
                    targetBoard = '#empLeaderBoard';
                    break;
                case 'dep':
                    targetBoard = '#depLeaderBoard';
                    break;
                case 'cat':
                    targetBoard = '#catLeaderBoard';
                    break;
            }
            
            if (targetBoard) {
                $(targetBoard).removeClass('d-none');
            }
        }
        
        function updateLeaderboardWithFilteredData(data, category) {
            try {
                // Hide all existing leaderboards
                $('#empLeaderBoard, #depLeaderBoard, #catLeaderBoard').addClass('d-none');
                
                // Show the appropriate leaderboard based on current filter
                const currentView = document.getElementById('filter').value;
                let targetBoard = '';
                
                switch(currentView) {
                    case 'emp':
                        targetBoard = '#empLeaderBoard';
                        break;
                    case 'dep':
                        targetBoard = '#depLeaderBoard';
                        break;
                    case 'cat':
                        targetBoard = '#catLeaderBoard';
                        break;
                }
                
                // Update the leaderboard content
                if (targetBoard) {
                    $(targetBoard).removeClass('d-none');
                    
                    // Update top 3 positions with filtered data
                    updateTop3Positions(data.top3 || [], category);
                    
                    // Update complete ranking
                    updateCompleteRanking(data.complete_ranking || [], category);
                }
            } catch (error) {
                console.error('Error updating leaderboard:', error);
                showErrorMessage('Error updating leaderboard display');
            }
        }
        
        function updateTop3Positions(top3, category) {
            try {
                // Update the top 3 positions with new data
                $('.leaderboard-item').each(function(index) {
                    if (index < 3) {
                        const performer = top3[index] || null;
                        const position = index + 1;
                        const prize = getPrizeForPosition(position);
                        
                        // Update the content
                        const infoDiv = $(this).find('.employee-info, .department-info, .category-info');
                        
                        // Clear existing prize info
                        infoDiv.find('.prize-info').remove();
                        
                        if (performer) {
                            // Update name and points
                            infoDiv.find('h6').text(performer.category || performer.department || performer.employee_name || 'N/A');
                            infoDiv.find('.count').text((performer.earned_points || 'N/A') + ' pts');
                            infoDiv.find('.u-name').text(performer.employee_name || performer.department_name || performer.manager || 'N/A');
                            
                            // Add prize info if available
                            if (prize) {
                                const prizeHtml = generatePrizeHTML(prize);
                                infoDiv.append(prizeHtml);
                            }
                        } else {
                            // No data for this position
                            infoDiv.find('h6').text('N/A');
                            infoDiv.find('.count').text('0 pts');
                            infoDiv.find('.u-name').text('No data');
                        }
                    }
                });
            } catch (error) {
                console.error('Error updating top 3 positions:', error);
            }
        }
        
        function updateCompleteRanking(ranking, category) {
            try {
                // Update the complete ranking section
                const rankingContainer = $('.col-lg-8 .row');
                if (rankingContainer.length > 0) {
                    let rankingHtml = `
                        <div class="col-12">
                            <div class="border rounded-3 p-3">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h5>Complete ${category} Ranking</h5>
                                    <span class="badge bg-primary">${ranking.length} Total</span>
                                </div>
                    `;
                    
                    if (ranking.length > 0) {
                        rankingHtml += `
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Rank</th>
                                            <th>Name</th>
                                            <th>Category</th>
                                            <th>Points</th>
                                            <th>Performance</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                        `;
                        
                        ranking.forEach((performer, index) => {
                            const rank = index + 4; // Starting from 4th place
                            const points = performer.earned_points || 0;
                            const progressWidth = Math.min((points / 100) * 100, 100);
                            
                            rankingHtml += `
                                <tr>
                                    <td><span class="badge bg-secondary">${rank}</span></td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <img src="${performer.image || '/assets/img/placeholder-img-2.png'}" 
                                                 alt="${performer.employee_name || performer.department_name}" 
                                                 class="rounded-circle me-2" width="32" height="32">
                                            <span>${performer.employee_name || performer.department_name || 'N/A'}</span>
                                        </div>
                                    </td>
                                    <td>${performer.category || 'N/A'}</td>
                                    <td><strong>${points}</strong></td>
                                    <td>
                                        <div class="progress" style="width: 100px;">
                                            <div class="progress-bar" style="width: ${progressWidth}%"></div>
                                        </div>
                                    </td>
                                </tr>
                            `;
                        });
                        
                        rankingHtml += `
                                    </tbody>
                                </table>
                            </div>
                        `;
                    } else {
                        rankingHtml += `
                            <div class="text-center py-4">
                                <p class="text-muted">No additional rankings available for this category.</p>
                            </div>
                        `;
                    }
                    
                    rankingHtml += `
                            </div>
                        </div>
                    `;
                    
                    rankingContainer.html(rankingHtml);
                }
            } catch (error) {
                console.error('Error updating complete ranking:', error);
            }
        }
        
        function showLoadingState() {
            // Remove any existing loader first
            $('.loading-overlay').remove();
            
            // Show loading indicator
            console.log('Showing loading state...');
            const loaderHtml = `
                <div class="loading-overlay">
                    <div class="loading-content">
                        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-3 text-primary">Loading leaderboard...</p>
                    </div>
                </div>
            `;
            $('.leaderboard-container').append(loaderHtml);
        }
        
        function hideLoadingState() {
            // Hide loading indicator
            console.log('Hiding loading state...');
            $('.loading-overlay').fadeOut(300, function() {
                $(this).remove();
            });
        }
        
        function showErrorMessage(message) {
            // Show error message
            alert(message); // You can replace this with a better notification system
        }

    </script>

    <style>
        /* Filter Group Styles */
        .filter-group {
            display: flex;
            flex-direction: column;
            margin-right: 15px;
        }
        
        .filter-group .form-label {
            margin-bottom: 5px;
            font-weight: 500;
            color: #6c757d;
            font-size: 0.875rem;
        }
        
        /* Prize Display Styles */
        .prize-info {
            background: linear-gradient(135deg, #ffd700, #ffed4e);
            border-radius: 8px;
            padding: 8px;
            margin-top: 10px;
            border: 2px solid #ffd700;
        }
        
        .prize-badge {
            font-size: 0.8rem;
            margin-bottom: 5px;
            color: #333;
        }
        
        .prize-badge i {
            color: #ff6b35;
        }
        
        .prize-amount {
            font-size: 1.1rem;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .prize-description {
            font-size: 0.7rem;
            color: #555;
            margin-top: 3px;
        }

        /* Enhanced styling for top 3 positions */
        .leaderboard-item:nth-child(1) .prize-info {
            background: linear-gradient(135deg, #ffd700, #ffed4e);
            border-color: #ffd700;
        }
        
        .leaderboard-item:nth-child(2) .prize-info {
            background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
            border-color: #c0c0c0;
        }
        
        .leaderboard-item:nth-child(3) .prize-info {
            background: linear-gradient(135deg, #cd7f32, #daa520);
            border-color: #cd7f32;
        }
        
        /* Loading Overlay Styles */
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.95);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            backdrop-filter: blur(2px);
        }
        
        .loading-content {
            text-align: center;
        }
        
        .loading-content .spinner-border {
            width: 3rem;
            height: 3rem;
            border-width: 0.3rem;
        }
        
        .loading-content p {
            font-weight: 500;
            margin-top: 1rem;
        }
        
        .leaderboard-container {
            position: relative;
            min-height: 400px;
        }
        
        /* Prize Placeholder Styles */
        .prize-placeholder {
            background: linear-gradient(135deg, #e9ecef, #f8f9fa) !important;
            border: 2px dashed #dee2e6 !important;
            opacity: 0.7;
        }
        
        .prize-placeholder .prize-badge {
            color: #6c757d !important;
        }
        
        .prize-placeholder .prize-badge i {
            color: #adb5bd !important;
        }
        
        .prize-placeholder strong {
            font-weight: 500;
            color: #6c757d;
        }
        
        /* Leaderboard responsive */
        @media (max-width: 768px) {
            .leader-box-left .img-circle-area,
            .leader-box-middle .img-circle-area,
            .leader-box-right .img-circle-area {
                width: 52px;
                height: 52px;
            }
            .leader-box-left, .leader-box-middle, .leader-box-right {
                padding: 12px 8px;
                padding-top: 32px;
            }
        }
    </style>
@endsection