@extends('Employee.layout')
@section('title',"Leader Board")
@section('page-name',"Leader Board")
@section('page-detail',"All Rankings 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">
                    <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">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();
            if (choice === 'cat') {
                $('#categoryFilterGroup').show();
                $('#departmentFilterGroup').hide();
                $('#departmentFilter').val('all');
            } else if (choice === 'dep') {
                $('#departmentFilterGroup').show();
                $('#categoryFilterGroup').hide();
                $('#categoryFilter').val('all');
            } else {
                $('#categoryFilterGroup').hide();
                $('#departmentFilterGroup').hide();
                $('#categoryFilter').val('all');
                $('#departmentFilter').val('all');
            }
            if(choice == 'emp') {
                $('#empLeaderBoard').removeClass('d-none').show();
                $('#depLeaderBoard').addClass('d-none').hide();
                $('#catLeaderBoard').addClass('d-none').hide();
                if (!isInitialLoad) filterByDate();
            } else if(choice == 'dep') {
                $('#depLeaderBoard').removeClass('d-none').show();
                $('#empLeaderBoard').addClass('d-none').hide();
                $('#catLeaderBoard').addClass('d-none').hide();
                filterByDate();
            } else {
                $('#catLeaderBoard').removeClass('d-none').show();
                $('#empLeaderBoard').addClass('d-none').hide();
                $('#depLeaderBoard').addClass('d-none').hide();
                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('emp.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('emp.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('emp.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);
                    }
                });
            }
        }
  // Enhanced Leaderboard with Advanced Filtering
        let currentMonth = '{{ $currentMonth ?? $months[0] ?? date('Y-m') }}';
        
        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);
        }
        
        function addPrizeDisplayToLeaderboard() {
            // Prize info is shown only via tooltip (no box below card).
        }

        function initLeaderboardTooltips() {
            document.querySelectorAll('.leaderboard-prize-tooltip[data-bs-toggle="tooltip"]').forEach(function(el) {
                if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
                    bootstrap.Tooltip.getOrCreateInstance(el);
                }
            });
        }

        // Track if this is the initial page load
        let isInitialLoad = true;

        // Initialize page on load
        $(document).ready(function() {
            // Ensure employee view is selected by default
            $('#filter').val('emp');
            $('#categoryFilterGroup').hide();
            $('#departmentFilterGroup').hide();
            // Force show employee leaderboard and hide others
            $('#empLeaderBoard').removeClass('d-none').show();
            $('#depLeaderBoard').addClass('d-none').hide();
            $('#catLeaderBoard').addClass('d-none').hide();
            
            // Initialize Bootstrap tooltips for prize info (e.g. "Prize achieved: Information")
            setTimeout(initLeaderboardTooltips, 100);
            
            // The employee data is already loaded in the view, so no need for AJAX call
            console.log('Employee leaderboard initialized with employee view as default');
            
            // Double-check after a short delay to ensure it's still visible
            setTimeout(function() {
                if ($('#empLeaderBoard').hasClass('d-none') || !$('#empLeaderBoard').is(':visible')) {
                    console.log('Employee leaderboard was hidden, forcing it to show...');
                    $('#empLeaderBoard').removeClass('d-none').show();
                }
            }, 200);
            
            // Mark initial load as complete after a delay
            setTimeout(function() {
                isInitialLoad = false;
                console.log('Initial load complete - future view switches will trigger AJAX calls');
            }, 500);
        });
    </script>
@endsection