@if($category && $category->products->count() > 0)
    @foreach($category->products as $product)
        <div class="bg-white border border-gray-200 rounded-xl p-4 hover:shadow-md transition-shadow {{ !$product->is_active ? 'opacity-60' : '' }}">
            {{-- 헤더 --}}
            <div class="flex items-start justify-between mb-3">
                <div class="flex-1">
                    <div class="flex items-center gap-2">
                        <h4 class="font-semibold text-gray-900">{{ $product->name }}</h4>
                        @if($product->is_required)
                            <span class="px-1.5 py-0.5 text-xs font-medium bg-red-100 text-red-600 rounded">필수</span>
                        @endif
                        @if(!$product->is_active)
                            <span class="px-1.5 py-0.5 text-xs font-medium bg-gray-100 text-gray-500 rounded">비활성</span>
                        @endif
                    </div>
                    <p class="text-xs text-gray-500 mt-0.5">{{ $product->code }}</p>
                </div>
                <button type="button"
                        x-on:click="openProductModal({{ $product->toJson() }})"
                        class="p-1 text-gray-400 hover:text-indigo-600 transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                    </svg>
                </button>
            </div>

            {{-- 설명 --}}
            @if($product->description)
                <p class="text-sm text-gray-600 mb-3 line-clamp-2">{{ $product->description }}</p>
            @endif

            {{-- 가격 정보 --}}
            <div class="space-y-2 pt-3 border-t border-gray-100">
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-500">개발비</span>
                    <div class="text-right">
                        <span class="text-sm text-gray-400 line-through">{{ $product->formatted_development_fee }}</span>
                        <span class="ml-2 font-bold text-indigo-600">{{ $product->formatted_registration_fee }}</span>
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-500">월 구독료</span>
                    <span class="font-semibold text-gray-900">{{ $product->formatted_subscription_fee }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-500">수당</span>
                    <span class="text-sm text-green-600">
                        <span class="font-medium">파트너</span> {{ number_format($product->partner_commission_rate, 0) }}%
                        <span class="text-gray-300 mx-1">|</span>
                        <span class="font-medium">매니저</span> {{ number_format($product->manager_commission_rate, 0) }}%
                    </span>
                </div>
            </div>

            {{-- 하단 태그 --}}
            <div class="flex items-center justify-between mt-3 pt-3 border-t border-gray-100">
                <div class="flex items-center gap-2">
                    @if($product->allow_flexible_pricing)
                        <span class="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded-full">재량권 허용</span>
                    @else
                        <span class="px-2 py-0.5 text-xs bg-gray-100 text-gray-500 rounded-full">고정가</span>
                    @endif
                </div>
                <button type="button"
                        x-on:click="deleteProduct({{ $product->id }})"
                        class="p-1 text-gray-400 hover:text-red-600 transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                </button>
            </div>
        </div>
    @endforeach
@else
    <div class="col-span-full text-center py-12">
        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
            </svg>
        </div>
        <p class="text-gray-600 font-medium mb-1">등록된 상품이 없습니다</p>
        <p class="text-sm text-gray-400">상품 추가 버튼을 클릭하여 새 상품을 등록하세요</p>
    </div>
@endif
