{{--
    DS v2 Product Card
    Spec: foto 4:3, badge ⭐ pojok kanan atas, tombol + bulat oranye pojok kanan bawah
    Grid: 2col mobile | 3col sm | diatur parent
--}}
@php
    $outOfStock = $product->isOutOfStock();
    $isFeatured = $product->is_featured;
@endphp

<div @class([
    'bg-white rounded-xl border border-slate-100 shadow-sm overflow-hidden flex flex-col transition-all duration-200',
    'opacity-60'                                                  => $outOfStock,
    'hover:shadow-md hover:border-orange-100 active:scale-[0.98]' => !$outOfStock,
])>

    {{-- ── Foto ─────────────────────────────────────────────────────── --}}
    <a href="{{ route('store.products.show', $product->slug) }}"
       class="block relative overflow-hidden bg-slate-100"
       style="aspect-ratio:4/3">

        @if ($product->image)
            <img src="{{ Storage::url($product->image) }}"
                 alt="{{ $product->name }}"
                 loading="lazy"
                 class="w-full h-full object-cover {{ $outOfStock ? 'grayscale' : '' }}" />
        @else
            <div class="w-full h-full flex items-center justify-center bg-orange-50">
                <svg class="w-10 h-10 text-orange-200" 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>
        @endif

        {{-- Badge kiri atas: Habis --}}
        @if ($outOfStock)
            <span class="absolute top-2 left-2 px-1.5 py-0.5 bg-slate-800/75 text-white
                         text-[10px] font-bold rounded-md backdrop-blur-sm leading-none">
                Habis
            </span>
        @endif

        {{-- Badge kanan atas: Unggulan ⭐ --}}
        @if ($isFeatured && !$outOfStock)
            <span class="absolute top-2 right-2 w-6 h-6 bg-orange-500 rounded-full
                         flex items-center justify-center shadow-sm">
                <svg class="w-3.5 h-3.5 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                </svg>
            </span>
        @endif
    </a>

    {{-- ── Info ─────────────────────────────────────────────────────── --}}
    <div class="p-3 flex flex-col flex-1 gap-1 relative">

        {{-- Mitra --}}
        <p class="text-[11px] text-slate-400 truncate leading-none">
            {{ $product->partner->name ?? '' }}
        </p>

        {{-- Nama --}}
        <a href="{{ route('store.products.show', $product->slug) }}"
           class="text-sm font-semibold text-slate-800 leading-snug line-clamp-2
                  hover:text-orange-500 transition-colors duration-150 pr-8">
            {{ $product->name }}
        </a>

        {{-- Harga --}}
        <p class="text-sm font-bold text-orange-500 mt-1">
            Rp {{ number_format($product->sell_price, 0, ',', '.') }}
            <span class="text-[10px] font-normal text-slate-400">/ {{ $product->unit }}</span>
        </p>

        {{-- Qty control — pojok kanan bawah foto --}}
        @if (!$outOfStock)
            <div x-data="{
                    qty: 0,
                    loading: false,
                    init() {
                        // Cek qty dari server saat mount (opsional, mulai dari 0)
                    },
                    add() {
                        if (this.loading) return;
                        this.loading = true;
                        const csrf = document.querySelector('meta[name=csrf-token]');
                        fetch(window._cartAddUrl, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': csrf.content,
                                'Accept': 'application/json'
                            },
                            body: JSON.stringify({ product_id: {{ $product->id }}, qty: 1 })
                        })
                        .then(r => r.json())
                        .then(data => {
                            if (data.ok) {
                                this.qty++;
                                if (window.Livewire) window.Livewire.dispatch('cart-updated');
                            } else {
                                alert(data.message || 'Gagal.');
                            }
                            this.loading = false;
                        })
                        .catch(() => { this.loading = false; });
                    },
                    remove() {
                        if (this.loading || this.qty <= 0) return;
                        this.qty--;
                        if (window.Livewire) window.Livewire.dispatch('cart-updated');
                    }
                 }"
                 class="absolute right-2 bottom-2">

                {{-- Tombol + saja (belum pernah ditambah) --}}
                <template x-if="qty === 0">
                    <button type="button" @click="add()"
                        :disabled="loading"
                        class="w-8 h-8 rounded-full bg-orange-500 hover:bg-orange-600 active:scale-90
                               text-white flex items-center justify-center shadow-md shadow-orange-200
                               transition-all duration-150 disabled:opacity-70">
                        <svg x-show="!loading" class="w-4 h-4" fill="none" stroke="currentColor"
                             viewBox="0 0 24 24" stroke-width="2.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
                        </svg>
                        <svg x-show="loading" class="w-4 h-4 animate-spin" fill="none"
                             viewBox="0 0 24 24" style="display:none">
                            <circle class="opacity-25" cx="12" cy="12" r="10"
                                    stroke="currentColor" stroke-width="4"/>
                            <path class="opacity-75" fill="currentColor"
                                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                        </svg>
                    </button>
                </template>

                {{-- Kontrol qty [-] n [+] setelah ditambahkan --}}
                <template x-if="qty > 0">
                    <div class="flex items-center gap-1 bg-white rounded-full shadow-md
                                border border-orange-200 px-1 py-0.5">
                        <button type="button" @click="remove()"
                            class="w-7 h-7 rounded-full bg-orange-50 hover:bg-orange-100
                                   text-orange-600 flex items-center justify-center
                                   active:scale-90 transition-all text-sm font-bold leading-none">
                            −
                        </button>
                        <span class="w-5 text-center text-xs font-bold text-slate-800"
                              x-text="qty"></span>
                        <button type="button" @click="add()" :disabled="loading"
                            class="w-7 h-7 rounded-full bg-orange-500 hover:bg-orange-600
                                   text-white flex items-center justify-center
                                   active:scale-90 transition-all disabled:opacity-70">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                                 viewBox="0 0 24 24" stroke-width="2.5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                      d="M12 4.5v15m7.5-7.5h-15"/>
                            </svg>
                        </button>
                    </div>
                </template>
            </div>
        @endif
    </div>
</div>