@extends('layouts.app')

@section('content')
<style>
    /* Extra polish */
    .dewan-card {
        transition: all 0.3s ease;
        background: #fff;
        border-radius: 1rem;
        overflow: hidden;
        width: 100%;
        max-width: 22rem;
    }

    .dewan-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
    }

    .dewan-img {
        height: 180px;
        width: 100%;
        object-fit: cover;
    }

    @media (max-width: 1024px) {
        .dewan-img {
            height: 160px;
        }
    }

    @media (max-width: 640px) {
        .dewan-img {
            height: 150px;
        }
    }
</style>

<div class="max-w-6xl mx-auto px-8 sm:px-6 lg:px-4">
    
    <!-- 🔍 Search Bar -->
    <div class="flex justify-center mb-8">
        <form action="{{ route('dewans.index') }}" method="GET"
              class="flex items-center w-full sm:w-auto bg-white border border-gray-200 rounded-full shadow-sm px-3 sm:px-4 h-[44px] sm:h-[46px] max-w-md">
            
            <!-- Search Icon -->
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24"
                 stroke="currentColor" stroke-width="2" class="text-gray-400 flex-shrink-0">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M21 21l-4.35-4.35m0 0A7.5 7.5 0 104.5 4.5a7.5 7.5 0 0012.15 12.15z"/>
            </svg>

            <input
                type="text"
                name="search"
                placeholder="Find Dewan"
                value="{{ request('search') }}"
                autocomplete="off"
                class="flex-1 bg-transparent border-none outline-none ring-0 text-gray-700 placeholder-gray-400 text-sm pl-2 focus:ring-0"
            />

            <button
                type="submit"
                class="bg-indigo-500 hover:bg-indigo-600 text-white text-xs sm:text-sm font-medium px-4 sm:px-5 py-1.5 rounded-full transition">
                Search
            </button>
        </form>
    </div>

    <!-- 🏢 Dewan Cards Grid -->
    <div class="mt-6 sm:mt-10 grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 gap-8 sm:gap-8 justify-items-center">
        @forelse ($dewans as $dewan)
            <div class="dewan-card w-full sm:w-auto shadow-md hover:shadow-lg">
                <img src="{{ asset('storage/' . $dewan->image_path) }}" 
                     alt="{{ $dewan->name }}" 
                     class="dewan-img">

                <div class="p-5">
                    <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-1">{{ $dewan->name }}</h2>
                    <p class="text-sm text-gray-600 mb-4 line-clamp-2">{{ $dewan->description }}</p>

                    <a href="{{ route('dewans.choose', $dewan->id) }}" 
                       class="inline-flex justify-center items-center w-full sm:w-auto bg-indigo-600 text-white px-4 py-2 rounded-lg font-medium text-sm hover:bg-indigo-700 transition">
                        View Facilities
                    </a>
                </div>
            </div>
        @empty
            <p class="text-center text-gray-500 col-span-full py-8">No Dewans available at the moment.</p>
        @endforelse
        @if($dewans->isEmpty())
                <p class="text-center text-gray-500 mt-10">
                    No Dewan found matching "{{ request('search') }}"
                </p>
            @endif
    </div>
</div>
@endsection