@extends('layouts.app')

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

@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">Available Lockers</h1> -->
            <p class="mt-1 text-sm text-gray-600">Lockers currently available for assignment</p>
        </div>
        <div class="flex space-x-3">
            <a href="{{ route('lockers.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                <i class="fas fa-arrow-left mr-2"></i>
                All Lockers
            </a>
            <a href="{{ route('lockers.create') }}" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700">
                <i class="fas fa-plus mr-2"></i>
                Add Locker
            </a>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <!-- 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 Now</dt>
                        <dd class="text-lg font-medium text-gray-900">{{ $lockers->count() }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <!-- Small 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-compress 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">Small Available</dt>
                        <dd class="text-lg font-medium text-gray-900">{{ $sizeStats['small'] }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <!-- Medium Lockers -->
        <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-expand-arrows-alt text-purple-600 text-xl"></i>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Medium Available</dt>
                        <dd class="text-lg font-medium text-gray-900">{{ $sizeStats['medium'] }}</dd>
                    </dl>
                </div>
            </div>
        </div>

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

        <!-- Extra Large Lockers -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
                    <i class="fas fa-expand-arrows-alt text-indigo-600 text-xl"></i>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Extra Large Available</dt>
                        <dd class="text-lg font-medium text-gray-900">{{ $sizeStats['extra_large'] }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter and Search -->
    <div class="bg-white rounded-lg shadow p-4">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-3 md:space-y-0">
            <div class="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
                <div class="relative">
                    <input type="text" placeholder="Search available lockers..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-search text-gray-400"></i>
                    </div>
                </div>
                <select class="px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
                    <option value="">All Sizes</option>
                    <option value="small">Small</option>
                    <option value="medium">Medium</option>
                    <option value="large">Large</option>
                    <option value="Extra_large">Extra Large</option>
                </select>
                <select class="px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
                    <option value="">All Types</option>
                    <option value="safety_deposit">Safety Deposit</option>
                    <option value="storage">Storage</option>
                    <option value="vault">Vault</option>
                </select>
            </div>
            <div class="flex items-center space-x-2">
                <button class="px-3 py-2 text-sm text-gray-600 hover:text-gray-900">
                    <i class="fas fa-th-large mr-1"></i>
                    Tiles
                </button>
                <button class="px-3 py-2 text-sm text-gray-400 hover:text-gray-900">
                    <i class="fas fa-list mr-1"></i>
                    List
                </button>
            </div>
        </div>
    </div>

    <!-- Available Lockers Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        @forelse($lockers as $locker)
            <div class="bg-white rounded-lg shadow hover:shadow-lg transition-shadow duration-200 overflow-hidden border-2 border-green-200">
                <!-- Locker Header -->
                <div class="p-4 border-b border-gray-200 bg-green-50">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
                                <i class="fas fa-door-open text-green-600"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-medium text-gray-900">{{ $locker->locker_number }}</h3>
                                <p class="text-sm text-gray-500">{{ ucfirst($locker->locker_type) }}</p>
                            </div>
                        </div>
                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                            Available
                        </span>
                    </div>
                </div>

                <!-- Locker Details -->
                <div class="p-4 space-y-3">
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-500">Size:</span>
                        <span class="font-medium text-gray-900">{{ ucfirst($locker->locker_size) }}</span>
                    </div>
                    
                    @if($locker->location)
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">Location:</span>
                            <span class="font-medium text-gray-900">{{ $locker->location->name }}</span>
                        </div>
                    @endif
                    
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-500">Type:</span>
                        <span class="font-medium text-gray-900">{{ ucfirst($locker->locker_type) }}</span>
                    </div>
                    
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-500">Available Since:</span>
                        <span class="font-medium text-gray-900">{{ $locker->updated_at->format('M d, Y') }}</span>
                    </div>
                </div>

                <!-- Actions -->
                <div class="px-4 py-3 bg-gray-50 border-t border-gray-200">
                    <div class="flex items-center justify-between">
                        <div class="flex space-x-2">
                            <a href="{{ route('lockers.show', $locker) }}" class="inline-flex items-center px-2 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50">
                                <i class="fas fa-eye mr-1"></i>
                                View
                            </a>
                            <a href="{{ route('lockers.edit', $locker) }}" class="inline-flex items-center px-2 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50">
                                <i class="fas fa-edit mr-1"></i>
                                Edit
                            </a>
                        </div>
                        <!-- <button class="inline-flex items-center px-2 py-1 text-xs font-medium text-white bg-green-600 border border-transparent rounded hover:bg-green-700">
                            <i class="fas fa-key mr-1"></i>
                            Assign Now
                        </button> -->
                    </div>
                </div>
            </div>
        @empty
            <div class="col-span-full">
                <div class="text-center py-12">
                    <i class="fas fa-door-closed text-gray-400 text-4xl mb-4"></i>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">No available lockers</h3>
                    <p class="text-sm text-gray-500 mb-4">All lockers are currently occupied or under maintenance.</p>
                    <a href="{{ route('lockers.create') }}" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700">
                        <i class="fas fa-plus mr-2"></i>
                        Add New Locker
                    </a>
                </div>
            </div>
        @endforelse
    </div>

    <!-- Pagination -->
    @if($lockers->hasPages())
        <div class="bg-white rounded-lg shadow px-4 py-3 flex items-center justify-between border-t border-gray-200">
            <div class="flex-1 flex justify-between sm:hidden">
                {{ $lockers->links() }}
            </div>
            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                <div>
                    <p class="text-sm text-gray-700">
                        Showing <span class="font-medium">{{ $lockers->firstItem() }}</span> to 
                        <span class="font-medium">{{ $lockers->lastItem() }}</span> of 
                        <span class="font-medium">{{ $lockers->total() }}</span> available lockers
                    </p>
                </div>
                <div>
                    {{ $lockers->links() }}
                </div>
            </div>
        </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
// Search functionality
document.querySelector('input[placeholder="Search available lockers..."]').addEventListener('input', function(e) {
    // Implement search functionality here
    console.log('Searching for:', e.target.value);
});

// Filter functionality
document.querySelectorAll('select').forEach(select => {
    select.addEventListener('change', function(e) {
        // Implement filter functionality here
        console.log('Filter changed:', e.target.value);
    });
});
</script>
@endpush