@extends('Manager.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" id="categoryFilterGroup" style="display: none;">
                                    <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" id="departmentFilterGroup" style="display: none;">
                                    <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>
        var currentMonth = '{{ $currentMonth ?? $months[0] ?? date("Y-m") }}';
        var currentPrizes = {};
        var currentCategory = 'all';

        function filterByDate() {
            var selectedMonth = $('#dateFilter').val();
            var choice = $('#filter').val();
            currentMonth = selectedMonth;
            var targetContainer = '';
            var url = '';
            if (choice == 'emp') {
                targetContainer = '#empLeaderBoard';
                var categoryFilter = document.getElementById('categoryFilter') ? document.getElementById('categoryFilter').value : 'all';
                url = "{{ route('mngr.empFilter.leaderboard', ['currentMonth' => ':currentMonth']) }}".replace(':currentMonth', selectedMonth);
                if (categoryFilter && categoryFilter !== 'all') url += '?category=' + encodeURIComponent(categoryFilter);
            } else if (choice == 'dep') {
                targetContainer = '#depLeaderBoard';
                var departmentFilter = document.getElementById('departmentFilter') ? document.getElementById('departmentFilter').value : 'all';
                url = "{{ route('mngr.depFilter.leaderboard', ['currentMonth' => ':currentMonth']) }}".replace(':currentMonth', selectedMonth);
                if (departmentFilter && departmentFilter !== 'all') url += (url.indexOf('?') >= 0 ? '&' : '?') + 'department=' + encodeURIComponent(departmentFilter);
            } else {
                targetContainer = '#catLeaderBoard';
                var categoryFilter = document.getElementById('categoryFilter') ? document.getElementById('categoryFilter').value : 'all';
                url = "{{ route('mngr.catFilter.leaderboard', ['currentMonth' => ':currentMonth']) }}".replace(':currentMonth', selectedMonth);
                if (categoryFilter && categoryFilter !== 'all') url += (url.indexOf('?') >= 0 ? '&' : '?') + 'category=' + encodeURIComponent(categoryFilter);
            }
            if (targetContainer && url) {
                $.ajax({
                    url: url,
                    type: "GET",
                    success: function(response) {
                        $(targetContainer).html(response);
                        initManagerLeaderboardTooltips();
                    },
                    error: function(xhr) { console.error("Error fetching leaderboard:", xhr.responseText); }
                });
            }
        }

        function initManagerLeaderboardTooltips() {
            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 = { html: el.getAttribute('data-bs-html') === 'true' };
                        new bootstrap.Tooltip(el, opts);
                    }
                } catch (e) { console.warn('Tooltip init:', e); }
            });
        }

        function switchBoards() {
            var 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');
                $('#depLeaderBoard').addClass('d-none');
                $('#catLeaderBoard').addClass('d-none');
                filterByDate();
            } else if (choice == 'dep') {
                $('#depLeaderBoard').removeClass('d-none');
                $('#empLeaderBoard').addClass('d-none');
                $('#catLeaderBoard').addClass('d-none');
                filterByDate();
            } else {
                $('#catLeaderBoard').removeClass('d-none');
                $('#empLeaderBoard').addClass('d-none');
                $('#depLeaderBoard').addClass('d-none');
                filterByDate();
            }
        }

        function filterBySpecificDepartment() {
            filterByDate();
        }
        function filterBySpecificCategory() {
            var category = $('#categoryFilter').val();
            var selectedMonth = $('#dateFilter').val();
            var choice = $('#filter').val();
            if (category === 'all') { filterByDate(); return; }
            if (choice === 'emp') {
                var url = "{{ route('mngr.empFilter.leaderboard', ['currentMonth' => ':currentMonth']) }}".replace(':currentMonth', selectedMonth) + '?category=' + encodeURIComponent(category);
                $.get(url).then(function(data) {
                    $("#empLeaderBoard").html(data);
                    initManagerLeaderboardTooltips();
                }).fail(function() { alert('Failed to load data'); });
            } else { filterByDate(); }
        }

        function showLoadingState() {
            var id = $('#filter').val() + 'LeaderBoard';
            $('#' + id).html('<div class="col-12"><div class="text-center py-5"><div class="spinner-border text-primary"></div><p class="mt-3 text-muted">Loading...</p></div></div>');
        }
        function hideLoadingState() {}
        function showErrorMessage(msg) {
            var id = $('#filter').val() + 'LeaderBoard';
            $('#' + id).html('<div class="col-12"><div class="alert alert-danger text-center">' + msg + '</div></div>');
        }

        $(document).ready(function() {
            $('#filter').val('emp');
            $('#categoryFilterGroup').hide();
            $('#departmentFilterGroup').hide();
            $('#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) $monthSelect.val(defaultMonth);
            else if ($monthSelect.find('option').length) $monthSelect.prop('selectedIndex', 0);
            currentMonth = $monthSelect.val() || defaultMonth;

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

        function loadPrizes() {}
        function getPrizeForPosition(position) { return currentPrizes[position] ? currentPrizes[position][0] : null; }
        function generatePrizeHTML(prize) { return ''; }
        function waitForContentAndAddPrizes() {}
        function addPrizeDisplayToLeaderboard() {}
    </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