@extends('layouts.admin')

@section('header')
    Members
@endsection

@section('content')
    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
        <div class="p-6 text-gray-900">
            <div class="flex justify-end items-center mb-6">
                <div class="flex gap-3 items-center">
                    <span id="member-count" class="px-3 py-1 text-sm font-bold text-gray-500 bg-gray-100 rounded-full">
                        Total: {{ $users->total() }}
                    </span>
                    @if(auth()->user()->role === 'admin' || auth()->user()->role === 'club_manager')
                        <a href="{{ route('reports.index') }}" class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-25 transition ease-in-out duration-150">
                            Export Builder
                        </a>
                        <a href="{{ route('members.create') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 focus:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                            Add Member
                        </a>
                    @endif
                </div>
            </div>

            <!-- Filters -->
            <div class="mb-6 bg-gray-50 p-4 rounded-lg border border-gray-200">
                <form method="GET" action="{{ route('members.index') }}" id="filter-form">
                    <div class="flex flex-col md:flex-row gap-4 items-end">
                        <!-- Search -->
                        <div class="flex-1">
                            <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Search by Name</label>
                            <input 
                                type="text" 
                                name="search" 
                                id="search" 
                                value="{{ request('search') }}" 
                                placeholder="Type to search..."
                                class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                            />
                        </div>

                        <!-- Club Filter (Admin Only) -->
                        @if(auth()->user()->role === 'admin')
                            <div class="flex-1">
                                <label for="club_id" class="block text-sm font-medium text-gray-700 mb-1">Filter by Club</label>
                                <select 
                                    name="club_id" 
                                    id="club_id" 
                                    onchange="document.getElementById('filter-form').submit()"
                                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                                >
                                    <option value="">All Clubs</option>
                                    @foreach($clubs as $club)
                                        <option value="{{ $club->id }}" {{ request('club_id') == $club->id ? 'selected' : '' }}>{{ $club->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif

                        @if(auth()->user()->role !== 'admin')
                            <!-- Rank Filter -->
                            @if($ranks->count() > 0)
                                <div class="flex-1">
                                    <label for="rank_filter_id" class="block text-sm font-medium text-gray-700 mb-1">Filter by Rank</label>
                                    
                                    <!-- Hidden select for form submission -->
                                    <select name="rank_id" id="rank_filter_id" class="hidden">
                                        <option value="">All Ranks</option>
                                        @foreach($ranks as $rank)
                                            <option value="{{ $rank->id }}" {{ request('rank_id') == $rank->id ? 'selected' : '' }}>{{ $rank->name }}</option>
                                        @endforeach
                                    </select>

                                    <!-- Custom visual dropdown -->
                                    <div class="relative">
                                        <button type="button" id="rank-filter-button" class="relative w-full cursor-pointer rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm">
                                            <span id="rank-filter-display" class="flex items-center gap-2">
                                                <span class="text-gray-500">All Ranks</span>
                                            </span>
                                            <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                                                <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                                                    <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                                                </svg>
                                            </span>
                                        </button>

                                        <div id="rank-filter-menu" class="hidden absolute z-50 mt-1 w-full rounded-md bg-white shadow-lg" style="max-height: 15rem;">
                                            <ul class="max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
                                                <li class="rank-filter-option cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-gray-100" data-value="">
                                                    <span class="block truncate text-gray-500">All Ranks</span>
                                                </li>
                                                @foreach($ranks as $rank)
                                                    <li class="rank-filter-option cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-gray-100" 
                                                        data-value="{{ $rank->id }}" 
                                                        data-color="{{ $rank->color }}" 
                                                        data-css="{{ $rank->css }}" 
                                                        data-name="{{ $rank->name }}"
                                                        data-count="{{ $rank->users_count }}">
                                                        <div class="flex items-center gap-2">
                                                            <div class="w-6 h-6 rounded border-2 border-gray-300 flex-shrink-0" 
                                                                 style="@if($rank->css)background:{{ $rank->css }}@else background-color: {{ $rank->color ?? '#cccccc' }};@endif">
                                                            </div>
                                                            <span class="block truncate">{{ $rank->name }} <span class="text-gray-500">({{ $rank->users_count }})</span></span>
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <script>
                                    (function() {
                                        const hiddenSelect = document.getElementById('rank_filter_id');
                                        const dropdownButton = document.getElementById('rank-filter-button');
                                        const dropdownMenu = document.getElementById('rank-filter-menu');
                                        const selectedDisplay = document.getElementById('rank-filter-display');
                                        const options = document.querySelectorAll('.rank-filter-option');

                                        // Toggle dropdown
                                        dropdownButton.addEventListener('click', function(e) {
                                            e.preventDefault();
                                            dropdownMenu.classList.toggle('hidden');
                                        });

                                        // Close dropdown when clicking outside
                                        document.addEventListener('click', function(e) {
                                            if (!dropdownButton.contains(e.target) && !dropdownMenu.contains(e.target)) {
                                                dropdownMenu.classList.add('hidden');
                                            }
                                        });

                                        // Handle option selection
                                        options.forEach(option => {
                                            option.addEventListener('click', function() {
                                                const value = this.dataset.value;
                                                const name = this.dataset.name;
                                                const color = this.dataset.color;
                                                const css = this.dataset.css;
                                                const count = this.dataset.count;

                                                // Update hidden select
                                                hiddenSelect.value = value;

                                                // Update visual display
                                                if (value) {
                                                    let swatchStyle = '';
                                                    if (css) {
                                                        swatchStyle = `background: ${css};`;
                                                    } else if (color) {
                                                        swatchStyle = `background-color: ${color};`;
                                                    } else {
                                                        swatchStyle = 'background-color: #cccccc;';
                                                    }
                                                    selectedDisplay.innerHTML = `
                                                        <div class="w-6 h-6 rounded border-2 border-gray-300 flex-shrink-0" style="${swatchStyle}"></div>
                                                        <span>${name} <span class="text-gray-500">(${count})</span></span>
                                                    `;
                                                } else {
                                                    selectedDisplay.innerHTML = '<span class="text-gray-500">All Ranks</span>';
                                                }

                                                // Remove selected state from all options
                                                options.forEach(opt => opt.classList.remove('bg-indigo-50'));
                                                // Add selected state to clicked option
                                                this.classList.add('bg-indigo-50');

                                                // Close dropdown
                                                dropdownMenu.classList.add('hidden');
                                                
                                                // Submit form
                                                document.getElementById('filter-form').submit();
                                            });
                                        });

                                        // Set initial selection if there's a selected value
                                        if (hiddenSelect.value) {
                                            const selectedOption = Array.from(options).find(opt => opt.dataset.value === hiddenSelect.value);
                                            if (selectedOption) {
                                                const value = selectedOption.dataset.value;
                                                const name = selectedOption.dataset.name;
                                                const color = selectedOption.dataset.color;
                                                const css = selectedOption.dataset.css;
                                                const count = selectedOption.dataset.count;

                                                let swatchStyle = '';
                                                if (css) {
                                                    swatchStyle = `background: ${css};`;
                                                } else if (color) {
                                                    swatchStyle = `background-color: ${color};`;
                                                } else {
                                                    swatchStyle = 'background-color: #cccccc;';
                                                }
                                                selectedDisplay.innerHTML = `
                                                    <div class="w-6 h-6 rounded border-2 border-gray-300 flex-shrink-0" style="${swatchStyle}"></div>
                                                    <span>${name} <span class="text-gray-500">(${count})</span></span>
                                                `;
                                                selectedOption.classList.add('bg-indigo-50');
                                            }
                                        }
                                    })();
                                </script>
                            @endif

                            @if($memberGroups->count() > 0)
                                <div class="flex-1">
                                    <label for="group_id" class="block text-sm font-medium text-gray-700 mb-1">Filter by Group</label>
                                    <select 
                                        name="group_id" 
                                        id="group_id" 
                                        onchange="document.getElementById('filter-form').submit()"
                                        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                                    >
                                        <option value="">All Groups</option>
                                        @foreach($memberGroups as $group)
                                            <option value="{{ $group->id }}" {{ request('group_id') == $group->id ? 'selected' : '' }}>
                                                {{ $group->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            @endif

                            <!-- Status Filter -->
                            <div class="w-full md:w-48">
                                <label for="status" class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                                <select 
                                    name="status" 
                                    id="status" 
                                    onchange="document.getElementById('filter-form').submit()"
                                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                                >
                                    <option value="active" {{ request('status', 'active') === 'active' ? 'selected' : '' }}>Active Only</option>
                                    <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive Only</option>
                                    <option value="all" {{ request('status') === 'all' ? 'selected' : '' }}>All Members</option>
                                </select>
                            </div>
                        @endif

                        <!-- Clear Filters Button -->
                        <div>
                            <a href="{{ route('members.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-300 border border-transparent rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-400 focus:bg-gray-400 active:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition ease-in-out duration-150 whitespace-nowrap">
                                Clear Filters
                            </a>
                        </div>
                    </div>

                    <!-- Hidden inputs for sorting -->
                    <input type="hidden" name="sort" value="{{ request('sort', 'name') }}">
                    <input type="hidden" name="direction" value="{{ request('direction', 'asc') }}">
                </form>
            </div>

            <div id="members-table-container">
                @include('members.partials.table', ['users' => $users])
            </div>

            <script>
                // AJAX Search and Filter
                const form = document.getElementById('filter-form');
                const searchInput = document.getElementById('search');
                const tableContainer = document.getElementById('members-table-container');
                let searchTimeout;

                function fetchResults() {
                    const url = new URL(form.action);
                    const params = new URLSearchParams(new FormData(form));
                    
                    // Add current sort params if they exist in URL but not in form
                    const currentUrlParams = new URLSearchParams(window.location.search);
                    if (currentUrlParams.has('sort') && !params.has('sort')) {
                        params.append('sort', currentUrlParams.get('sort'));
                    }
                    if (currentUrlParams.has('direction') && !params.has('direction')) {
                        params.append('direction', currentUrlParams.get('direction'));
                    }

                    url.search = params.toString();

                    fetch(url, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.text())
                    .then(html => {
                        tableContainer.innerHTML = html;
                        
                        // Update total count from the new table's data attribute
                        const startDiv = tableContainer.querySelector('div[data-total]');
                        if (startDiv) {
                            const total = startDiv.getAttribute('data-total');
                            const countSpan = document.getElementById('member-count');
                            if (countSpan && total) {
                                countSpan.textContent = `Total: ${total}`;
                            }
                        }

                        // Update browser URL without reloading
                        window.history.pushState({}, '', url);
                    })
                    .catch(error => console.error('Error fetching members:', error));
                }

                // Debounced Search Input
                searchInput.addEventListener('input', function() {
                    clearTimeout(searchTimeout);
                    searchTimeout = setTimeout(() => {
                        fetchResults();
                    }, 300); // 300ms debounce
                });

                // Handle other filters (select changes)
                form.querySelectorAll('select').forEach(select => {
                    // Remove old onchange attributes to prevent double submission
                    select.removeAttribute('onchange');
                    select.addEventListener('change', fetchResults);
                });
                
                // Handle custom rank filter dropdown submission
                // We need to hook into the custom dropdown logic or observe the hidden input
                 const rankFilterHidden = document.getElementById('rank_filter_id');
                 if(rankFilterHidden) {
                     const observer = new MutationObserver(function(mutations) {
                         mutations.forEach(function(mutation) {
                             if (mutation.type === "attributes" && mutation.attributeName === "value") {
                                 fetchResults();
                             }
                         });
                     });
                     // However, the input value property change doesn't trigger attribute mutation directly if set via JS property
                     // A safer bet for the custom dropdown is to intercept the form submission it triggers or update its callback.
                 }
                 
                 // Intercept form submission (e.g. from Clear Filters or Enter key)
                 form.addEventListener('submit', function(e) {
                     e.preventDefault();
                     fetchResults();
                 });

                 // Override custom dropdown submit behavior
                 // The custom dropdown script calls form.submit(). We need to change that.
                 // Since the custom script is defined later in the file (or we can overwrite it), 
                 // let's update the custom dropdown callback in the DOMContentLoaded or just overwrite the logic if possible.
                 // Ideally we should update the original script block for the dropdown.
            </script>
        </div>
    </div>
@endsection