@extends('admin.layouts.app')

@section('title', 'Amenities')

@section('content')
    <div class="flex items-center justify-between mb-6">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">Amenities</h2>
            <p class="text-gray-500">Manage property amenities</p>
        </div>
        <a href="{{ route('admin.amenities.create') }}" class="btn btn-primary">Add Amenity</a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        @foreach ($amenities->groupBy('category') as $category => $categoryAmenities)
            <div class="bg-white rounded-xl shadow-sm p-6">
                <h3 class="font-semibold text-gray-900 mb-4 uppercase text-sm tracking-wide">{{ ucfirst($category) }}</h3>
                <div class="space-y-3">
                    @foreach ($categoryAmenities as $amenity)
                        <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-lg group">
                            <div class="flex items-center gap-2">
                                @if (!$amenity->is_active)
                                    <span class="w-2 h-2 rounded-full bg-gray-300"></span>
                                @endif
                                <span
                                    class="text-sm {{ $amenity->is_active ? 'text-gray-700' : 'text-gray-400' }}">{{ $amenity->name }}</span>
                                <span class="text-xs text-gray-400">({{ $amenity->properties_count }})</span>
                            </div>
                            <div class="hidden group-hover:flex gap-1">
                                <a href="{{ route('admin.amenities.edit', $amenity) }}"
                                    class="text-gray-400 hover:text-primary-600">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>
@endsection