@extends('PointsAdmin.layout')
@section('title',"Leader Board")
@section('page-name',"Leader Board")
@section('page-detail',"All Rankings Information")
@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">
                    <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 d-none" id="categoryFilterGroup">
                                    <label class="form-label small">Category</label>
                                    <select class="form-select shadow-none" id="categoryFilter" style="width: 150px" onchange="filterBySpecificCategory()">
                                        <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 d-none" id="departmentFilterGroup">
                                    <label class="form-label small">Department</label>
                                    <select class="form-select shadow-none" id="departmentFilter" style="width: 150px" onchange="filterBySpecificDepartment()">
                                        <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">Employees</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();
            $('#categoryFilterGroup').addClass('d-none');
            $('#departmentFilterGroup').addClass('d-none');
            $('#categoryFilter').val('all');
            $('#departmentFilter').val('all');
            if (choice === 'cat') {
                $('#categoryFilterGroup').removeClass('d-none');
            } else if (choice === 'dep') {
                $('#departmentFilterGroup').removeClass('d-none');
            }
            filterByDate();
            if(choice == 'emp') {
                $('#empLeaderBoard').removeClass('d-none');
                $('#depLeaderBoard').addClass('d-none');
                $('#catLeaderBoard').addClass('d-none');
            } else if(choice == 'dep') {
                $('#depLeaderBoard').removeClass('d-none');
                $('#empLeaderBoard').addClass('d-none');
                $('#catLeaderBoard').addClass('d-none');
            } else {
                $('#catLeaderBoard').removeClass('d-none');
                $('#empLeaderBoard').addClass('d-none');
                $('#depLeaderBoard').addClass('d-none');
            }
        }
        function filterBySpecificDepartment() { 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';
                // Get category filter if available
                const categoryFilter = document.getElementById('categoryFilter') ? document.getElementById('categoryFilter').value : 'all';
                url = "{{ route('pAdmin.empFilter.leaderboard', ['currentMonth' => ':currentMonth']) }}".replace(':currentMonth', selectedMonth);
                // Add category parameter if not 'all'
                if (categoryFilter && categoryFilter !== 'all') {
                    url += '?category=' + encodeURIComponent(categoryFilter);
                }
            }
            else if(choice == 'dep')
            {
                targetContainer = '#depLeaderBoard';
                const departmentFilter = document.getElementById('departmentFilter') ? document.getElementById('departmentFilter').value : 'all';
                url = "{{ route('pAdmin.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('pAdmin.catFilter.leaderboard', ['currentMonth' => ':currentMonth']) }}".replace(':currentMonth', selectedMonth);
                if (categoryFilter && categoryFilter !== 'all') url += (url.indexOf('?') >= 0 ? '&' : '?') + 'category=' + encodeURIComponent(categoryFilter);
            }
            
            // Make AJAX call for all cases
            if (targetContainer && url) {
                $.ajax({
                    url: url,
                    type: "GET",
                    success: function(response) {
                        $(targetContainer).html(response);
                        initLeaderboardTooltips();
                        waitForContentAndAddPrizes();
                    },
                    error: function(xhr) {
                        console.error("Error fetching leaderboard:", xhr.responseText);
                    }
                });
            }
        }
        var currentPrizes = {};
        var currentCategory = 'all';
        var currentMonth = '{{ $currentMonth ?? $months[0] ?? date('Y-m') }}';

        function loadPrizes() { /* no-op: prize info is shown via tooltip only */ }
        function addPrizeDisplayToLeaderboard() { /* no-op */ }
        function waitForContentAndAddPrizes() { /* no-op */ }

        function initLeaderboardTooltips() {
            var els = document.querySelectorAll('[data-bs-toggle="tooltip"]');
            els.forEach(function(el) {
                try {
                    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
                        var existing = bootstrap.Tooltip.getInstance(el);
                        if (existing) existing.dispose();
                        var opts = el.getAttribute('data-bs-html') === 'true' ? { html: true } : {};
                        new bootstrap.Tooltip(el, opts);
                    }
                } catch (e) { console.warn('Tooltip init:', e); }
            });
        }
        
        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;
        }
       
        // Advanced Category Filtering Functions
        function filterBySpecificCategory() {
            const category = $('#categoryFilter').val();
            const selectedMonth = $('#dateFilter').val();
            const choice = $('#filter').val();
            
            console.log('Filtering by category:', category, 'Month:', selectedMonth, 'Choice:', choice);
            
            if (category === 'all') {
                // Show all categories - reload without category filter
                filterByDate();
                return;
            }
            
            if (choice === 'emp') {
                showLoadingState();
                
                let url = "{{ route('pAdmin.empFilter.leaderboard', ['currentMonth' => ':currentMonth']) }}".replace(':currentMonth', selectedMonth);
                url += '?category=' + encodeURIComponent(category);
                
                console.log('Fetching URL:', url);
                
                fetch(url)
                    .then(response => {
                        console.log('Response status:', response.status);
                        if (!response.ok) {
                            throw new Error(`HTTP error! status: ${response.status}`);
                        }
                        return response.text();
                    })
                    .then(data => {
                        console.log('Received data length:', data.length);
                        $("#empLeaderBoard").html(data);
                        initLeaderboardTooltips();
                        hideLoadingState();
                    })
                    .catch(error => {
                        console.error('Error fetching filtered leaderboard:', error);
                        hideLoadingState();
                        showErrorMessage('Failed to load filtered leaderboard data');
                    });
            } else {
                // For other views, just show all data
                filterByDate();
            }
        }

        function showLoadingState() {
            const currentChoice = $('#filter').val();
            const container = $('#' + currentChoice + 'LeaderBoard');
            
            container.html(`
                <div class="col-12">
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-3 text-muted">Loading leaderboard data...</p>
                    </div>
                </div>
            `);
        }

        function hideLoadingState() {
            // Loading state is automatically hidden when content is replaced
        }

        function showErrorMessage(message) {
            const currentChoice = $('#filter').val();
            const container = $('#' + currentChoice + 'LeaderBoard');
            
            container.html(`
                <div class="col-12">
                    <div class="alert alert-danger text-center">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        ${message}
                    </div>
                </div>
            `);
        }

        // Override the switchBoards function to show/hide category filter
        function switchBoards() {
            let choice = $('#filter').val();
            
            // Show/hide category filter based on selection
            if (choice === 'cat') {
                $('#categoryFilterGroup').show();
            } else {
                $('#categoryFilterGroup').hide();
                $('#categoryFilter').val('all'); // Reset category filter
            }
            
            if(choice == 'emp')
            {
                $('#empLeaderBoard').removeClass('d-none');
                $('#depLeaderBoard').addClass('d-none');
                $('#catLeaderBoard').addClass('d-none');
                // Load employee data for current month
                filterByDate();
            }
            else if(choice == 'dep')
            {
                $('#depLeaderBoard').removeClass('d-none');
                $('#empLeaderBoard').addClass('d-none');
                $('#catLeaderBoard').addClass('d-none');
                // Load department data for current month
                filterByDate();
            }
            else
            {
                $('#catLeaderBoard').removeClass('d-none');
                $('#empLeaderBoard').addClass('d-none');
                $('#depLeaderBoard').addClass('d-none');
                // Load category data for current month
                filterByDate();
            }
        }

        $(document).ready(function() {
            $('#filter').val('emp');
            $('#categoryFilterGroup').addClass('d-none');
            $('#departmentFilterGroup').addClass('d-none');
            $('#empLeaderBoard').removeClass('d-none');
            $('#depLeaderBoard').addClass('d-none');
            $('#catLeaderBoard').addClass('d-none');
            var defaultMonth = '{{ $currentMonth ?? $months[0] ?? date("Y-m") }}';
            var 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;

            function tryInitTooltips(attempt) {
                attempt = attempt || 0;
                if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
                    initLeaderboardTooltips();
                    return;
                }
                if (attempt < 10) setTimeout(function() { tryInitTooltips(attempt + 1); }, 200);
            }
            setTimeout(function() { tryInitTooltips(0); }, 300);
        });

    </script>

    <style>
        .filter-group {
            margin-bottom: 15px;
        }

        .filter-group label {
            font-weight: 600;
            color: #495057;
            margin-bottom: 5px;
        }

        .filter-group .form-select {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
        }

        .filter-group .form-select:focus {
            border-color: #86b7fe;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }
    </style>
@endsection