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

    {{-- Back --}}
    <a href="{{ route('store.partners') }}"
       class="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-orange-500 mb-4 transition-colors">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/>
        </svg>
        Semua Mitra
    </a>

    {{-- Header Mitra --}}
    <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-4 flex items-center gap-4 mb-5">
        @if ($partner->logo)
            <img src="{{ Storage::url($partner->logo) }}" alt="{{ $partner->name }}"
                 class="w-16 h-16 rounded-full object-cover shrink-0 ring-2 ring-orange-100" />
        @else
            <div class="w-16 h-16 rounded-full bg-orange-100 flex items-center justify-center shrink-0 ring-2 ring-orange-50">
                <span class="text-orange-600 font-black text-2xl leading-none">
                    {{ strtoupper(substr($partner->name, 0, 1)) }}
                </span>
            </div>
        @endif

        <div class="min-w-0 flex-1">
            <h1 class="text-base font-bold text-slate-800">{{ $partner->name }}</h1>
            @if ($partner->address)
                <p class="text-xs text-slate-400 mt-0.5">{{ $partner->address }}</p>
            @endif
            <div class="flex items-center gap-2 mt-2 flex-wrap">
                <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() ? 'Sedang Buka' : 'Sedang Tutup' }}
                </span>
                @if ($partner->open_time && $partner->close_time)
                    <span class="text-xs text-slate-400">
                        {{ \Illuminate\Support\Carbon::parse($partner->open_time)->format('H:i') }}
                        –
                        {{ \Illuminate\Support\Carbon::parse($partner->close_time)->format('H:i') }}
                    </span>
                @endif
            </div>
        </div>
    </div>

    {{-- Produk --}}
    <div class="flex items-center justify-between mb-3">
        <h2 class="text-base font-semibold text-slate-800">Produk</h2>
    </div>

    @if ($products->isEmpty())
        <div class="py-12 flex flex-col items-center text-center">
            <div class="w-12 h-12 bg-slate-100 rounded-full flex items-center justify-center mb-3">
                <svg class="w-6 h-6 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0H3"/>
                </svg>
            </div>
            <p class="text-sm text-slate-400">Belum ada produk tersedia</p>
        </div>
    @else
        <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-4">
            @foreach ($products as $product)
                @include('livewire.store.partials.product-card', ['product' => $product])
            @endforeach
        </div>
        {{ $products->links() }}
    @endif
</div>
