<div class="px-4 pt-3">

    <div class="mb-5">
        <h1 class="text-lg font-bold text-slate-800">Daftar Mitra</h1>
        <p class="text-xs text-slate-400 mt-0.5">Toko dan warung yang bermitra dengan kami</p>
    </div>

    @if ($partners->isEmpty())
        <div class="py-16 flex flex-col items-center text-center">
            <div class="w-14 h-14 bg-slate-100 rounded-full flex items-center justify-center mb-3">
                <svg class="w-7 h-7 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M13.5 21v-7.5a.75.75 0 01.75-.75h3a.75.75 0 01.75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349m-16.5 11.65V9.35m0 0a3.001 3.001 0 003.75-.615A2.993 2.993 0 009.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 002.25 1.016c.896 0 1.7-.393 2.25-1.016a3.001 3.001 0 003.75.614m-16.5 0a3.004 3.004 0 01-.621-4.72L4.318 3.44A1.5 1.5 0 015.378 3h13.243a1.5 1.5 0 011.06.44l1.19 1.189a3 3 0 01-.621 4.72m-13.5 8.65h3.75a.75.75 0 00.75-.75V13.5a.75.75 0 00-.75-.75H6.75a.75.75 0 00-.75.75v3.75c0 .415.336.75.75.75z"/>
                </svg>
            </div>
            <p class="font-semibold text-slate-600 text-sm">Belum ada mitra</p>
        </div>
    @else
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            @foreach ($partners as $partner)
                <a href="{{ route('store.partners.show', $partner->id) }}"
                   class="bg-white rounded-xl border border-slate-100 shadow-sm p-4
                          flex items-center gap-3 hover:border-orange-200 hover:shadow-md
                          active:scale-[0.98] transition-all duration-200">

                    {{-- Logo bulat --}}
                    @if ($partner->logo)
                        <img src="{{ Storage::url($partner->logo) }}" alt="{{ $partner->name }}"
                             class="w-14 h-14 rounded-full object-cover shrink-0 ring-2 ring-slate-100" />
                    @else
                        <div class="w-14 h-14 rounded-full bg-orange-100 flex items-center justify-center shrink-0 ring-2 ring-slate-100">
                            <span class="text-orange-600 font-black text-xl leading-none">
                                {{ strtoupper(substr($partner->name, 0, 1)) }}
                            </span>
                        </div>
                    @endif

                    <div class="min-w-0 flex-1">
                        <p class="font-semibold text-slate-800 text-sm">{{ $partner->name }}</p>
                        @if ($partner->address)
                            <p class="text-xs text-slate-400 truncate mt-0.5">{{ $partner->address }}</p>
                        @endif
                        <div class="flex items-center gap-2 mt-1.5">
                            <span @class([
                                'inline-flex items-center gap-1 text-xs font-semibold px-2 py-0.5 rounded-full',
                                'bg-green-50 text-green-700' => $partner->isOpenNow(),
                                'bg-red-50 text-red-600'    => !$partner->isOpenNow(),
                            ])>
                                <span @class(['w-1.5 h-1.5 rounded-full shrink-0',
                                    'bg-green-500' => $partner->isOpenNow(),
                                    'bg-red-400'   => !$partner->isOpenNow()])></span>
                                {{ $partner->isOpenNow() ? 'Buka' : 'Tutup' }}
                            </span>
                            <span class="text-xs text-slate-400">{{ $partner->products_count }} produk</span>
                        </div>
                    </div>

                    <svg class="w-4 h-4 text-slate-300 shrink-0" fill="none" stroke="currentColor"
                         viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
                    </svg>
                </a>
            @endforeach
        </div>
    @endif
</div>
