@extends('layouts.app')

@section('content')
<div class="mb-6">
    <nav class="flex items-center gap-2 text-sm">
        <a href="{{ route('home') }}" class="text-gray-500 hover:text-[#0C951E]">Home</a>
        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
        <a href="{{ route('category.show', Str::slug($brandData->category)) }}" class="text-gray-500 hover:text-[#0C951E]">{{ $brandData->category }}</a>
        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
        <span class="text-gray-900 font-medium">{{ $brandData->brand }}</span>
    </nav>
</div>

<!-- Brand Header -->
<div class="bg-white rounded-2xl p-6 mb-8 shadow-sm border border-gray-100">
    <div class="flex items-center gap-6">
        <div class="w-24 h-24 rounded-xl overflow-hidden bg-gradient-to-br from-gray-100 to-gray-200 relative">
            @if($brandData->image_url)
            <img src="{{ $brandData->image_url }}" alt="{{ $brandData->brand }}" class="w-full h-full object-cover" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
            <div class="absolute inset-0 w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 hidden items-center justify-center">
                <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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
            </div>
            @else
            <div class="absolute inset-0 w-full h-full flex items-center justify-center">
                <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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
            </div>
            @endif
        </div>
        <div>
            <h1 class="text-3xl font-bold text-gray-900 mb-2">{{ $brandData->brand }}</h1>
            @if($brandData->developer)
            <p class="text-gray-600 mb-2">{{ $brandData->developer }}</p>
            @endif
            <p class="text-sm text-gray-500">{{ $products->count() }} produk tersedia</p>
        </div>
    </div>
</div>

<!-- Products Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    @foreach($products as $product)
    <div class="bg-white rounded-xl p-5 hover:shadow-lg transition-all border border-gray-100 group">
        <div class="flex items-start justify-between mb-3">
            <div class="flex-1">
                <h3 class="font-semibold text-gray-900 group-hover:text-[#0C951E] mb-1">{{ $product->name }}</h3>
                @if($product->description)
                <p class="text-sm text-gray-500">{{ $product->description }}</p>
                @endif
            </div>
        </div>
        
        <div class="flex items-center justify-between pt-3 border-t border-gray-100">
            <div>
                @if($product->discount_price && $product->discount_price < $product->price)
                <div class="flex items-center gap-2">
                    <span class="text-xs text-gray-400 line-through">Rp {{ number_format($product->price, 0, ',', '.') }}</span>
                    <span class="text-xs bg-red-100 text-red-600 px-2 py-0.5 rounded-full font-semibold">
                        {{ round((($product->price - $product->discount_price) / $product->price) * 100) }}%
                    </span>
                </div>
                <p class="text-lg font-bold text-[#0C951E]">Rp {{ number_format($product->discount_price, 0, ',', '.') }}</p>
                @else
                <p class="text-lg font-bold text-[#0C951E]">Rp {{ number_format($product->price, 0, ',', '.') }}</p>
                @endif
            </div>
            <form action="{{ route('products.checkout', $brandData->slug) }}" method="POST" class="inline">
                @csrf
                <input type="hidden" name="product_id" value="{{ $product->id }}">
                <button type="submit" class="px-5 py-2.5 bg-[#0C951E] hover:bg-[#0a7d18] text-white rounded-lg font-medium transition-colors">
                    Beli
                </button>
            </form>
        </div>
    </div>
    @endforeach
</div>

@if($products->isEmpty())
<div class="text-center py-12">
    <svg class="w-20 h-20 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
    </svg>
    <h3 class="text-xl font-semibold text-gray-900 mb-2">Belum ada produk</h3>
    <p class="text-gray-500">Produk untuk brand ini sedang dalam proses</p>
</div>
@endif
@endsection