@extends('layouts.app')

@section('title', 'Available Lockers')

@section('content')
<div class="container mx-auto px-4 py-6">
    <!-- Header -->
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900">Available Lockers</h1>
        <p class="text-gray-600 mt-1">View and assign available lockers by group</p>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <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-open text-blue-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">Total Available</p>
                    <p class="text-2xl font-bold text-gray-900">{{ App\Models\Locker::available()->count() }}</p>
                </div>
            </div>
        </div>

        <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-box text-green-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">Small Available</p>
                    <p class="text-2xl font-bold text-green-600">{{ App\Models\Locker::available()->where('locker_size', 'Small')->count() }}</p>
                </div>
            </div>
        </div>

        <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-box-open text-yellow-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">Medium Available</p>
                    <p class="text-2xl font-bold text-yellow-600">{{ App\Models\Locker::available()->where('locker_size', 'Medium')->count() }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-purple-100 rounded-lg p-3">
                    <i class="fas fa-archive text-purple-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">Large Available</p>
                    <p class="text-2xl font-bold text-purple-600">{{ App\Models\Locker::available()->where('locker_size', 'Large')->count() }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Locker Groups Tabs -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="border-b border-gray-200">
            <nav class="flex space-x-8 px-6 overflow-x-auto" aria-label="Tabs">
                @if($lockerGroups->count() > 0)
                    @foreach($lockerGroups as $index => $group)
                        <button 
                            onclick="showGroup({{ $index }})"
                            id="tab-{{ $index }}"
                            class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm {{ $index == 0 ? 'border-primary-500 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}"
                        >
                            {{ $group->name }}
                            <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                {{ $group->available_lockers_count }}
                            </span>
                        </button>
                    @endforeach
                @else
                    <div class="px-6 py-4 text-gray-500">No locker groups found</div>
                @endif
            </nav>
        </div>

        <!-- Tab Content -->
        <div class="p-6">
            @if($lockerGroups->count() > 0)
                @foreach($lockerGroups as $index => $group)
                    <div id="group-content-{{ $index }}" class="{{ $index != 0 ? 'hidden' : '' }}">
                        <!-- 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-door-open text-blue-600 text-sm"></i>
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-xs font-medium text-gray-500">Total Available</p>
                                        <p class="text-lg font-bold text-gray-900">{{ $group->available_lockers_count }}</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-box text-green-600 text-sm"></i>
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-xs font-medium text-gray-500">Small Available</p>
                                        <p class="text-lg font-bold text-green-600">{{ App\Models\Locker::where('locker_group_id', $group->id)->where('status', 'Available')->where('locker_size', 'Small')->count() }}</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-box-open text-yellow-600 text-sm"></i>
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-xs font-medium text-gray-500">Medium Available</p>
                                        <p class="text-lg font-bold text-yellow-600">{{ App\Models\Locker::where('locker_group_id', $group->id)->where('status', 'Available')->where('locker_size', 'Medium')->count() }}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="bg-gray-50 rounded-lg p-4">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 bg-purple-100 rounded-lg p-2">
                                        <i class="fas fa-archive text-purple-600 text-sm"></i>
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-xs font-medium text-gray-500">Large Available</p>
                                        <p class="text-lg font-bold text-purple-600">{{ App\Models\Locker::where('locker_group_id', $group->id)->where('status', 'Available')->where('locker_size', 'Large')->count() }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
                            <i class="fas fa-locker text-gray-400 text-4xl mb-4"></i>
                            <p class="text-gray-500">Click "View Lockers" to see available lockers in this group</p>
                            <button onclick="loadAvailableLockersForGroup({{ $group->id }})" class="mt-4 inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700">
                                <i class="fas fa-eye mr-2"></i>View Lockers
                            </button>
                        </div>
                    </div>
                @endforeach
            @else
                <div class="text-center py-8">
                    <i class="fas fa-exclamation-triangle text-gray-400 text-4xl mb-4"></i>
                    <p class="text-gray-500">No locker groups available</p>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Show 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
    document.getElementById('group-content-' + index).classList.remove('hidden');
    
    // Add active state to selected tab
    const activeTab = document.getElementById('tab-' + index);
    activeTab.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
    activeTab.classList.add('border-primary-500', 'text-primary-600');
}

// Load available lockers for a group
function loadAvailableLockersForGroup(groupId) {
    fetch(`/lockers/api/group/${groupId}/available-lockers`)
        .then(response => response.json())
        .then(data => {
            displayAvailableLockerGrid(data, groupId);
        })
        .catch(error => {
            console.error('Error loading available lockers:', error);
            const groupContent = document.getElementById('group-content-' + getCurrentGroupIndex());
            const gridPreview = groupContent.querySelector('.border-2.border-dashed');
            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 available lockers</p>
                </div>
            `;
        });
}

// Display available locker grid
function displayAvailableLockerGrid(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;
    
    // Create grid HTML
    let gridHtml = '<div class="space-y-4">';
    
    // Add grid title
    gridHtml += `
        <div class="flex items-center justify-between mb-4">
            <h4 class="text-lg font-medium text-gray-900">Available Lockers - ${group.name}</h4>
            <span class="text-sm text-gray-500">${lockers.length} available</span>
        </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 rows
    for (let row = 1; row <= group.row_count; row++) {
        gridHtml += '<div class="grid gap-2 mb-2" 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 && locker.status === 'Available') {
                gridHtml += renderAvailableLockerCell(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" 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>';
    gridHtml += '</div>';
    gridHtml += '</div>';
    
    gridPreview.innerHTML = gridHtml;
}

// Render available locker cell
function renderAvailableLockerCell(locker) {
    const sizeBadgeClass = getSizeBadgeClass(locker.locker_size);
    
    return `
        <div class="bg-white border-2 border-green-200 rounded-lg p-2 hover:shadow-md transition-shadow min-h-[90px] flex flex-col justify-between">
            <!-- Top: Icon and Status -->
            <div class="flex items-center justify-between mb-1">
                <div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-door-open text-green-600 text-xs"></i>
                </div>
                <span class="text-xs font-semibold text-green-600">Available</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 Assign Button -->
            <div class="flex items-center justify-between mt-1">
                <span class="text-xs text-gray-500">RM ${locker.locker_amount || '0.00'}</span>
                <a href="/customer/create?locker_id=${locker.id}" class="inline-flex items-center justify-center w-6 h-6 rounded bg-green-100 hover:bg-green-200 transition-colors" title="Assign">
                    <i class="fas fa-key text-green-600 text-xs"></i>
                </a>
            </div>
        </div>
    `;
}

// Get size badge class
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';
    }
}

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

// Initialize event listeners
document.addEventListener('DOMContentLoaded', function() {
    // Auto-load first group's available lockers
    const firstGroup = @if($lockerGroups->isNotEmpty()) {{ $lockerGroups->first()->id }} @else null @endif;
    if (firstGroup) {
        loadAvailableLockersForGroup(firstGroup);
    }
});
</script>
@endpush