@extends('member.layouts.default')
@section('page_title', 'Our Partners' . config('default.page_title_delimiter') . config('default.app_name'))

@section('content')
<div class="w-full max-w-7xl mx-auto px-4 md:px-6 py-12">
    
    <div class="text-center mb-12">
        <h1 class="text-3xl md:text-4xl font-extrabold text-secondary-900 dark:text-white tracking-tight">Our Partners</h1>
        <p class="text-secondary-500 dark:text-secondary-400 mt-2 text-sm md:text-base">Discover and explore our trusted business partners</p>
    </div>

    <div class="mb-10 flex flex-wrap justify-center gap-2 border-b dark:border-secondary-800 pb-6">
        <a href="{{ request()->fullUrlWithQuery(['category' => '']) }}" 
           class="px-4 py-2 rounded-xl text-xs font-bold transition-all {{ !request('category') ? 'bg-primary-600 text-white shadow-md' : 'bg-secondary-100 dark:bg-secondary-800 text-secondary-600 dark:text-secondary-400 hover:bg-secondary-200' }}">
            All Categories
        </a>

        @foreach($categories as $cat)
            <a href="{{ request()->fullUrlWithQuery(['category' => $cat->id]) }}" 
               class="px-4 py-2 rounded-xl text-xs font-bold transition-all {{ request('category') == $cat->id ? 'bg-primary-600 text-white shadow-md' : 'bg-secondary-100 dark:bg-secondary-800 text-secondary-600 dark:text-secondary-400 hover:bg-secondary-200' }}">
                {{ $cat->name }}
            </a>
        @endforeach
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        @forelse($partners as $partner)
            <div class="bg-white dark:bg-secondary-900 border border-secondary-100 dark:border-secondary-800/60 rounded-3xl p-5 shadow-sm hover:shadow-md transition-all duration-300 flex flex-col items-center text-center group">
                
                <div class="w-24 h-24 rounded-2xl overflow-hidden mb-4 bg-secondary-50 dark:bg-secondary-800 p-1 border border-secondary-100 dark:border-secondary-700 shadow-sm group-hover:scale-105 transition-transform duration-300">
                    @if($partner->avatar)
                        <img src="{{ $partner->avatar }}" alt="{{ $partner->business_name }}" class="w-full h-full object-cover rounded-xl">
                    @else
                        <div class="w-full h-full flex items-center justify-center bg-primary-50 dark:bg-primary-500/10 text-primary-600 font-black text-xl">
                            {{ mb_substr($partner->business_name, 0, 1) }}
                        </div>
                    @endif
                </div>

                <h3 class="font-bold text-secondary-900 dark:text-white text-base tracking-tight mb-1 group-hover:text-primary-500 transition-colors">
                    {{ $partner->business_name ?? $partner->name }}
                </h3>

                <div class="mt-2 mb-4">
                    @if($partner->category)
                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-[11px] font-bold bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-100/50 dark:border-blue-500/10">
                            {{ $partner->category->name }}
                        </span>
                    @else
                        <span class="text-[11px] text-secondary-400 italic">General</span>
                    @endif
                </div>

					<a href="{{ route('member.show.partner', ['partner_id' => $partner->id]) }}" 
   class="inline-flex items-center gap-2 px-4 py-2.5 
                               text-sm font-medium text-white 
                               bg-primary-600 hover:bg-primary-500
                               rounded-xl shadow-sm hover:shadow-md
                               focus:outline-none focus:ring-2 focus:ring-primary-500/20
                               transition-all duration-200 active:scale-[0.98]">
    View Details
</a>

            </div>
        @empty
            <div class="col-span-full py-20 text-center text-secondary-400 italic">
                No partners found in this category.
            </div>
        @endforelse
    </div>

    <div class="mt-12 flex justify-center">
        {{ $partners->appends(request()->query())->links() }}
    </div>

</div>
@endsection