@extends('layouts.app')

@section('title', 'Locker Groups')

@section('no-page-header')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <!-- <h1 class="text-2xl font-bold text-gray-900">All Lockers</h1> -->
            <p class="mt-1 text-sm text-gray-600">Manage locker groups and their configurations</p>
        </div>
        <div class="flex space-x-3">
            <!-- Add Group button removed - route not defined -->
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-5 gap-6">
        <!-- Total Lockers -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-blue-100 rounded-lg p-3">
                    <i class="fas fa-door-closed text-blue-600 text-xl"></i>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Total Lockers</dt>
                        <dd class="text-lg font-medium text-gray-900">{{ $stats['total'] }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <!-- Available Lockers -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-green-100 rounded-lg p-3">
                    <i class="fas fa-door-open text-green-600 text-xl"></i>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Available</dt>
                        <dd class="text-lg font-medium text-gray-900">{{ $stats['available'] }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <!-- Reserved Lockers -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-blue-100 rounded-lg p-3">
                    <i class="fas fa-clock text-blue-600 text-xl"></i>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Reserved</dt>
                        <dd class="text-lg font-medium text-gray-900">{{ $stats['reserved'] }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <!-- Occupied Lockers -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-red-100 rounded-lg p-3">
                    <i class="fas fa-lock text-red-600 text-xl"></i>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Occupied</dt>
                        <dd class="text-lg font-medium text-gray-900">{{ $stats['occupied'] }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <!-- Maintenance Lockers -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-yellow-100 rounded-lg p-3">
                    <i class="fas fa-tools text-yellow-600 text-xl"></i>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Maintenance</dt>
                        <dd class="text-lg font-medium text-gray-900">{{ $stats['maintenance'] }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <!-- Blocked Lockers -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-gray-100 rounded-lg p-3">
                    <i class="fas fa-ban text-gray-600 text-xl"></i>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Blocked</dt>
                        <dd class="text-lg font-medium text-gray-900">{{ $stats['blocked'] }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <!-- Locker Groups Tabs -->
    <div class="bg-white rounded-lg shadow">
        <!-- Tab Navigation -->
        <div class="border-b border-gray-200">
            <nav class="-mb-px flex flex-nowrap space-x-8 px-6 overflow-x-scroll" aria-label="Tabs">
                @forelse($lockerGroups as $index => $group)
                    <button 
                        onclick="showGroup({{ $index }})"
                        id="tab-{{ $index }}"
                        class="{{ $index === 0 ? 'border-primary-500 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200"
                        data-group-id="{{ $group->id }}"
                    >
                        <i class="fas fa-layer-group mr-2"></i>
                        {{ $group->name }}
                        <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">{{ $group->total_lockers }}</span>
                    </button>
                @empty
                    <div class="px-6 py-4">
                        <p class="text-gray-500">No locker groups found</p>
                    </div>
                @endforelse
            </nav>
        </div>

        <!-- Tab Content -->
        <div class="p-6">
            @forelse($lockerGroups as $index => $group)
                <div id="group-content-{{ $index }}" class="{{ $index === 0 ? '' : 'hidden' }}">
                    <div class="flex items-center justify-between mb-6">
                        <div>
                            <h3 class="text-lg font-medium text-gray-900">{{ $group->name }}</h3>
                            @if($group->description)
                                <p class="text-sm text-gray-600 mt-1">{{ $group->description }}</p>
                            @endif
                        </div>
                        <div class="flex items-center space-x-4">
                            <div class="text-sm text-gray-500">
                                <span class="font-medium">{{ $group->row_count }}</span> rows × 
                                <span class="font-medium">{{ $group->column_count }}</span> columns
                            </div>
                        </div>
                    </div>

                    <!-- Group Stats -->
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                        <div class="bg-gray-50 rounded-lg p-4">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 bg-blue-100 rounded-lg p-2">
                                    <i class="fas fa-th text-blue-600"></i>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm font-medium text-gray-500">Total Lockers</p>
                                    <p class="text-lg font-semibold text-gray-900">{{ $group->getTotalLockersAttribute() }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 bg-green-100 rounded-lg p-2">
                                    <i class="fas fa-door-open text-green-600"></i>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm font-medium text-gray-500">Available</p>
                                    <p class="text-lg font-semibold text-gray-900">{{ $group->getAvailableLockersCountAttribute() }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 bg-red-100 rounded-lg p-2">
                                    <i class="fas fa-lock text-red-600"></i>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm font-medium text-gray-500">Occupied</p>
                                    <p class="text-lg font-semibold text-gray-900">{{ $group->getOccupiedLockersCountAttribute() }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 bg-yellow-100 rounded-lg p-2">
                                    <i class="fas fa-tools text-yellow-600"></i>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm font-medium text-gray-500">Other</p>
                                    <p class="text-lg font-semibold text-gray-900">{{ $group->getMaintenanceLockersCountAttribute() + $group->getReservedLockersCountAttribute() + $group->getBlockedLockersCountAttribute() }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Grid Preview -->
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
                        <i class="fas fa-th-large text-gray-400 text-4xl mb-4"></i>
                        <h4 class="text-lg font-medium text-gray-900 mb-2">{{ $group->row_count }} × {{ $group->column_count }} Grid Layout</h4>
                        <p class="text-sm text-gray-600 mb-4">Click "View Lockers" to see the detailed locker grid</p>
                        <div class="inline-flex items-center px-4 py-2 bg-gray-100 rounded-md">
                            <i class="fas fa-info-circle text-gray-600 mr-2"></i>
                            <span class="text-sm text-gray-700">{{ $group->row_count * $group->column_count }} total locker positions</span>
                        </div>
                    </div>
                </div>
            @empty
                <div class="text-center py-12">
                    <i class="fas fa-layer-group text-gray-400 text-4xl mb-4"></i>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">No locker groups found</h3>
                    <p class="text-sm text-gray-500">Locker groups will appear here once available.</p>
                </div>
            @endforelse
        </div>
    </div>
</div>
@endsection

@push('scripts')
@verbatim
<script>
// Show specific group tab
function showGroup(index) {
    // Hide all group content
    document.querySelectorAll('[id^="group-content-"]').forEach(content => {
        content.classList.add('hidden');
    });
    
    // Remove active state from all tabs
    document.querySelectorAll('[id^="tab-"]').forEach(tab => {
        tab.classList.remove('border-primary-500', 'text-primary-600');
        tab.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
    });
    
    // Show selected group content
    const selectedContent = document.getElementById('group-content-' + index);
    if (selectedContent) {
        selectedContent.classList.remove('hidden');
        
        // Get the group ID and automatically load lockers
        const selectedTab = document.getElementById('tab-' + index);
        if (selectedTab) {
            selectedTab.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
            selectedTab.classList.add('border-primary-500', 'text-primary-600');
            
            const groupId = selectedTab.getAttribute('data-group-id');
            if (groupId) {
                // Automatically load lockers for this group
                loadLockersForGroup(groupId);
            }
        }
    }
}

// Load lockers for a specific group
function loadLockersForGroup(groupId) {
    // Show loading state
    const groupContent = document.getElementById('group-content-' + getCurrentGroupIndex());
    if (groupContent) {
        const gridPreview = groupContent.querySelector('.border-2.border-dashed');
        if (gridPreview) {
            gridPreview.innerHTML = `
                <div class="text-center py-8">
                    <i class="fas fa-spinner fa-spin text-gray-400 text-4xl mb-4"></i>
                    <p class="text-gray-500">Loading lockers...</p>
                </div>
            `;
        }
    }

    // Fetch lockers for this group
    fetch(`/lockers/api/group/${groupId}/lockers`)
        .then(response => response.json())
        .then(data => {
            displayLockerGrid(data, groupId);
        })
        .catch(error => {
            console.error('Error loading lockers:', error);
            if (gridPreview) {
                gridPreview.innerHTML = `
                    <div class="text-center py-8">
                        <i class="fas fa-exclamation-triangle text-red-400 text-4xl mb-4"></i>
                        <p class="text-red-500">Error loading lockers</p>
                    </div>
                `;
            }
        });
}

// Display locker grid with filters
function displayLockerGrid(data, groupId) {
    const groupContent = document.getElementById('group-content-' + getCurrentGroupIndex());
    if (!groupContent) return;

    const gridPreview = groupContent.querySelector('.border-2.border-dashed');
    if (!gridPreview) return;

    const { group, grid, lockers } = data;
    
    // Store data for filtering
    gridPreview.setAttribute('data-group-id', groupId);
    gridPreview.setAttribute('data-grid', JSON.stringify(grid));
    gridPreview.setAttribute('data-group', JSON.stringify(group));
    gridPreview.setAttribute('data-lockers', JSON.stringify(lockers));
    
    // Create grid HTML with filters
    let gridHtml = '<div class="space-y-4">';
    
    // Add grid title without close button
    gridHtml += `
        <div class="flex items-center justify-between mb-4">
            <h4 class="text-lg font-medium text-gray-900">Locker Grid - ${group.name}</h4>
        </div>
    `;
    
    // Create grid container with scrollable wrapper
    gridHtml += '<div class="overflow-x-auto pb-4">';
    gridHtml += '<div class="min-w-max">';
    
    // Column headers
    gridHtml += '<div class="grid gap-2 mb-2" style="grid-template-columns: 40px repeat(' + group.column_count + ', minmax(140px, 1fr));">';
    gridHtml += '<div></div>';
    for (let col = 1; col <= group.column_count; col++) {
        gridHtml += `<div class="text-center text-xs font-medium text-gray-500 bg-gray-100 rounded py-1">C${col}</div>`;
    }
    gridHtml += '</div>';
    
    // Grid container for rows
    gridHtml += '<div id="grid-rows-container">';
    
    // Grid rows
    for (let row = 1; row <= group.row_count; row++) {
        gridHtml += '<div class="grid gap-2 mb-2 grid-row" data-row="' + row + '" style="grid-template-columns: 40px repeat(' + group.column_count + ', minmax(140px, 1fr));">';
        
        // Row header
        gridHtml += `<div class="text-center text-xs font-medium text-gray-500 bg-gray-100 rounded flex items-center justify-center">R${row}</div>`;
        
        // Grid cells
        for (let col = 1; col <= group.column_count; col++) {
            const locker = grid[row] && grid[row][col];
            
            if (locker) {
                gridHtml += renderLockerCell(locker);
            } else {
                const position = `R${row}C${col}`;
                gridHtml += `
                    <div class="border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 min-h-[90px] flex items-center justify-center hover:border-gray-400 transition-colors grid-cell" data-position="${position}">
                        <div class="text-center text-gray-400">
                            <i class="fas fa-locker text-lg mb-1 opacity-50"></i>
                            <div class="text-xs font-medium">${position}</div>
                        </div>
                    </div>
                `;
            }
        }
        
        gridHtml += '</div>';
    }
    
    gridHtml += '</div>'; // End grid-rows-container
    gridHtml += '</div>';
    gridHtml += '</div>';
    gridHtml += '</div>';
    
    gridPreview.innerHTML = gridHtml;
    updateFilterStats();
}

// Render individual locker cell
function renderLockerCell(locker) {
    const statusColor = getStatusColor(locker.status);
    const statusIcon = getStatusIcon(locker.status);
    const sizeBadgeClass = getSizeBadgeClass(locker.locker_size);
    
    return `
        <div class="bg-white border border-gray-200 rounded-lg p-2 hover:shadow-md transition-shadow min-h-[90px] flex flex-col justify-between grid-cell locker-cell" 
             data-locker-id="${locker.id}"
             data-status="${locker.status}"
             data-size="${locker.locker_size || ''}"
             data-amount="${locker.locker_amount || 0}">
            <!-- Top: Icon and Status -->
            <div class="flex items-center justify-between mb-1">
                <div class="w-6 h-6 rounded-full bg-${statusColor}-100 flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-${statusIcon} text-${statusColor}-600 text-xs"></i>
                </div>
                <span class="text-xs font-semibold text-${statusColor}-600">${locker.status}</span>
            </div>
            
            <!-- Middle: Number and Size Badge -->
            <div class="text-center">
                <div class="text-sm font-bold text-gray-800 leading-tight">${locker.locker_number}</div>
                <div class="flex items-center justify-center gap-1 mt-1">
                    <div class="text-xs text-gray-500">${locker.locker_type || 'Default'}</div>
                    ${locker.locker_size ? `<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${sizeBadgeClass}">${locker.locker_size.toUpperCase()}</span>` : ''}
                </div>
            </div>
            
            <!-- Bottom: Amount and View Button -->
            <div class="flex items-center justify-between mt-1">
                <span class="text-xs text-gray-500">RM ${locker.locker_amount || '0.00'}</span>
                <div class="flex gap-1">
                    <a href="/lockers/${locker.id}" class="inline-flex items-center justify-center w-6 h-6 rounded bg-blue-100 hover:bg-blue-200 transition-colors" title="View">
                        <i class="fas fa-eye text-blue-600 text-xs"></i>
                    </a>
                </div>
            </div>
        </div>
    `;
}

// Get current group index
function getCurrentGroupIndex() {
    const activeTab = document.querySelector('[id^="tab-"].border-primary-500');
    if (activeTab) {
        return activeTab.id.replace('tab-', '');
    }
    return 0;
}

// Close locker grid and show preview
function closeLockerGrid() {
    const groupContent = document.getElementById('group-content-' + getCurrentGroupIndex());
    if (groupContent) {
        const gridPreview = groupContent.querySelector('.border-2.border-dashed');
        if (gridPreview) {
            const groupId = groupContent.querySelector('[data-group-id]').getAttribute('data-group-id');
            const group = document.querySelector(`[data-group-id="${groupId}"]`);
            
            // Restore original preview
            gridPreview.innerHTML = `
                <i class="fas fa-th-large text-gray-400 text-4xl mb-4"></i>
                <h4 class="text-lg font-medium text-gray-900 mb-2">${group ? group.textContent.trim().replace(/[0-9]/g, '') : ''} × ${group ? group.textContent.match(/[0-9]+/)?.[0] || '' : ''} Grid Layout</h4>
                <p class="text-sm text-gray-600 mb-4">Click "View Lockers" to see detailed locker grid</p>
                <div class="inline-flex items-center px-4 py-2 bg-gray-100 rounded-md">
                    <i class="fas fa-info-circle text-gray-600 mr-2"></i>
                    <span class="text-sm text-gray-700">${group ? (group.textContent.match(/[0-9]+/)?.[0] || '') * (group.textContent.match(/[0-9]+/)?.[1] || '') : ''} total locker positions</span>
                </div>
            `;
        }
    }
}

// Helper functions
function getStatusColor(status) {
    const statusLower = status?.toLowerCase();
    if (statusLower === 'available') return 'green';
    if (statusLower === 'occupied') return 'red';
    if (statusLower === 'maintenance') return 'yellow';
    if (statusLower === 'reserved') return 'blue';
    if (statusLower === 'blocked') return 'gray';
    return 'gray';
}

function getStatusIcon(status) {
    const statusLower = status?.toLowerCase();
    if (statusLower === 'available') return 'door-open';
    if (statusLower === 'occupied') return 'lock';
    if (statusLower === 'maintenance') return 'tools';
    if (statusLower === 'reserved') return 'clock';
    if (statusLower === 'blocked') return 'ban';
    return 'box';
}

function getSizeClass(size) {
    const sizeLower = size?.toLowerCase();
    switch (sizeLower) {
        case 'small':
            return 'min-h-[100px] p-2';
        case 'medium':
            return 'min-h-[120px] p-3';
        case 'large':
            return 'min-h-[140px] p-4';
        case 'extra large':
        case 'extra_large':
        case 'extralarge':
            return 'min-h-[160px] p-5';
        default:
            return 'min-h-[120px] p-3';
    }
}

function getSizeBadgeClass(size) {
    const sizeLower = size?.toLowerCase();
    switch (sizeLower) {
        case 'small':
            return 'bg-blue-100 text-blue-700';
        case 'medium':
            return 'bg-green-100 text-green-700';
        case 'large':
            return 'bg-orange-100 text-orange-700';
        case 'extra large':
        case 'extra_large':
        case 'extralarge':
            return 'bg-purple-100 text-purple-700';
        default:
            return 'bg-gray-100 text-gray-700';
    }
}

function getSizeTextClass(size) {
    const sizeLower = size?.toLowerCase();
    switch (sizeLower) {
        case 'small':
            return 'text-blue-600';
        case 'medium':
            return 'text-green-600';
        case 'large':
            return 'text-orange-600';
        case 'extra large':
        case 'extra_large':
        case 'extralarge':
            return 'text-purple-600';
        default:
            return 'text-gray-600';
    }
}

// Apply filters via AJAX
function applyFilters() {
    const statusFilter = document.getElementById('filter-status')?.value || '';
    const sizeFilter = document.getElementById('filter-size')?.value || '';
    
    const groupId = document.querySelector('.border-2.border-dashed')?.getAttribute('data-group-id');
    if (!groupId) return;
    
    // Build query params
    const params = new URLSearchParams();
    if (statusFilter) params.append('status', statusFilter);
    if (sizeFilter) params.append('size', sizeFilter);
    
    const url = `/lockers/api/group/${groupId}/lockers?${params.toString()}`;
    
    // Show loading state
    const gridRows = document.getElementById('grid-rows-container');
    if (gridRows) {
        gridRows.style.opacity = '0.5';
    }
    
    // Fetch filtered data
    fetch(url)
        .then(response => response.json())
        .then(data => {
            renderFilteredGrid(data);
            updateActiveFilterTags();
        })
        .catch(error => {
            console.error('Filter error:', error);
            alert('Error applying filters. Please try again.');
        })
        .finally(() => {
            if (gridRows) {
                gridRows.style.opacity = '1';
            }
        });
}

// Render filtered grid
function renderFilteredGrid(data) {
    const { group, grid, lockers } = data;
    
    const gridRowsContainer = document.getElementById('grid-rows-container');
    if (!gridRowsContainer) return;
    
    let rowsHtml = '';
    
    // Grid rows
    for (let row = 1; row <= group.row_count; row++) {
        rowsHtml += '<div class="grid gap-2 mb-2 grid-row" data-row="' + row + '" style="grid-template-columns: 40px repeat(' + group.column_count + ', minmax(140px, 1fr));">';
        
        // Row header
        rowsHtml += `<div class="text-center text-xs font-medium text-gray-500 bg-gray-100 rounded flex items-center justify-center">R${row}</div>`;
        
        // Grid cells
        for (let col = 1; col <= group.column_count; col++) {
            const locker = grid[row] && grid[row][col];
            
            if (locker) {
                rowsHtml += renderLockerCell(locker);
            } else {
                const position = `R${row}C${col}`;
                rowsHtml += `
                    <div class="border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 min-h-[90px] flex items-center justify-center hover:border-gray-400 transition-colors grid-cell" data-position="${position}">
                        <div class="text-center text-gray-400">
                            <i class="fas fa-locker text-lg mb-1 opacity-50"></i>
                            <div class="text-xs font-medium">${position}</div>
                        </div>
                    </div>
                `;
            }
        }
        
        rowsHtml += '</div>';
    }
    
    gridRowsContainer.innerHTML = rowsHtml;
    
    // Update stats
    const statsEl = document.getElementById('filter-stats');
    if (statsEl) {
        statsEl.textContent = `Showing ${lockers.length} lockers`;
    }
}

// Reset all filters
function resetFilters() {
    console.log('Resetting filters...');
    
    const statusSelect = document.getElementById('filter-status');
    const sizeSelect = document.getElementById('filter-size');
    
    if (statusSelect) {
        statusSelect.value = '';
        console.log('Status reset');
    }
    if (sizeSelect) {
        sizeSelect.value = '';
        console.log('Size reset');
    }
    
    // Clear active filters display
    const activeFilters = document.getElementById('active-filters');
    if (activeFilters) {
        activeFilters.innerHTML = '';
    }
    
    // Reload original data
    const groupId = document.querySelector('.border-2.border-dashed')?.getAttribute('data-group-id');
    if (groupId) {
        loadLockersForGroup(groupId);
    }
    
    console.log('Filters reset complete');
}

// Update active filter tags
function updateActiveFilterTags() {
    const container = document.getElementById('active-filters');
    if (!container) return;
    
    const statusFilter = document.getElementById('filter-status')?.value;
    const sizeFilter = document.getElementById('filter-size')?.value;
    
    let tagsHtml = '';
    
    if (statusFilter) {
        const statusColor = getStatusColor(statusFilter);
        tagsHtml += `<span class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full bg-${statusColor}-100 text-${statusColor}-700"><i class="fas fa-circle mr-1 text-${statusColor}-500" style="font-size: 6px;"></i>${statusFilter}</span>`;
    }
    
    if (sizeFilter) {
        tagsHtml += `<span class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full bg-gray-100 text-gray-700 border border-gray-300">${sizeFilter}</span>`;
    }
    
    container.innerHTML = tagsHtml;
}

function viewLockerDetails(lockerId) {
    window.location.href = `/lockers/${lockerId}`;
}

// Initialize event listeners
document.addEventListener('DOMContentLoaded', function() {
    // Automatically load lockers for the first group when page loads
    const firstTab = document.getElementById('tab-0');
    if (firstTab) {
        const groupId = firstTab.getAttribute('data-group-id');
        if (groupId) {
            loadLockersForGroup(groupId);
        }
    }
});
</script>
@endverbatim
@endpush