@extends('layouts.frontend')

@section('title', $category->name . ' - Produk')
@section('meta_description', $category->description ?: 'Kategori produk ' . $category->name)

@section('content')
    <!-- Hero Section -->
    <section class="bg-gradient-to-br from-blue-50 to-indigo-100 py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Breadcrumb -->
            <nav class="mb-6" aria-label="breadcrumb">
                <ol class="flex space-x-2 text-sm">
                    <li><a href="{{ route('home') }}" class="text-blue-600 hover:text-blue-800">Beranda</a></li>
                    <li class="text-gray-500">/</li>
                    <li><a href="{{ route('products.index') }}" class="text-blue-600 hover:text-blue-800">Produk</a></li>
                    <li class="text-gray-500">/</li>
                    <li class="text-gray-900 font-medium">{{ $category->name }}</li>
                </ol>
            </nav>
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
                <div class="lg:col-span-2">
                    <h1 class="text-4xl font-bold text-gray-900 mb-4">{{ $category->name }}</h1>
                    @if($category->description)
                        <p class="text-xl text-gray-600 mb-6">{{ $category->description }}</p>
                    @endif
                    <div class="flex items-center space-x-4">
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                            <i class="fas fa-box mr-2"></i>
                            {{ $products->total() }} Produk
                        </span>
                    </div>
                </div>
                @if($category->image)
                    <div class="lg:col-span-1 text-center">
                        <img src="{{ Storage::url($category->image) }}" 
                             alt="{{ $category->name }}" 
                             class="w-48 h-48 mx-auto rounded-lg shadow-lg object-cover">
                    </div>
                @endif
            </div>
        </div>
    </section>

    <!-- Products Section -->
    <section class="py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Filter & Sort Bar -->
            <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-lg font-semibold text-gray-900">Produk {{ $category->name }}</h3>
                    <p class="text-sm text-gray-600">
                        Menampilkan {{ $products->firstItem() ?? 0 }}-{{ $products->lastItem() ?? 0 }} dari {{ $products->total() }} produk
                    </p>
                </div>
                <div class="flex items-center space-x-4">
                    <form method="GET" class="flex items-center space-x-2">
                        <label for="sort" class="text-sm font-medium text-gray-700">Urutkan:</label>
                        <select name="sort" 
                                id="sort"
                                onchange="this.form.submit()"
                                class="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                            <option value="name_asc" {{ request('sort') == 'name_asc' ? 'selected' : '' }}>Nama A-Z</option>
                            <option value="name_desc" {{ request('sort') == 'name_desc' ? 'selected' : '' }}>Nama Z-A</option>
                            <option value="price_asc" {{ request('sort') == 'price_asc' ? 'selected' : '' }}>Harga Terendah</option>
                            <option value="price_desc" {{ request('sort') == 'price_desc' ? 'selected' : '' }}>Harga Tertinggi</option>
                            <option value="newest" {{ request('sort') == 'newest' ? 'selected' : '' }}>Terbaru</option>
                            <option value="oldest" {{ request('sort') == 'oldest' ? 'selected' : '' }}>Terlama</option>
                        </select>
                    </form>
                </div>
            </div>

            <!-- Products Grid -->
            
            <!-- Products Grid -->
            @if($products->count() > 0)
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-12">
                    @foreach($products as $product)
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 hover:shadow-lg transition-shadow duration-300 group">
                            <!-- Product Image -->
                            <div class="relative overflow-hidden rounded-t-lg">
                                @if($product->featured_image)
                                    <img src="{{ $product->featured_image_url }}" 
                                         alt="{{ $product->name }}" 
                                         class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
                                @else
                                    <div class="w-full h-48 bg-gray-200 flex items-center justify-center">
                                        <i class="fas fa-shopping-cart text-gray-400 text-3xl"></i>
                                    </div>
                                @endif
                                
                                <!-- Badges -->
                                <div class="absolute top-2 left-2 space-y-1">
                                    @if($product->is_featured)
                                        <span class="inline-block bg-yellow-500 text-white text-xs px-2 py-1 rounded">
                                            <i class="fas fa-star"></i> Unggulan
                                        </span>
                                    @endif
                                    @if($product->has_discount)
                                        <span class="inline-block bg-red-500 text-white text-xs px-2 py-1 rounded">
                                            -{{ number_format($product->discount_percentage, 0) }}%
                                        </span>
                                    @endif
                                    @if($product->stock <= 0 && !$product->is_digital)
                                        <span class="inline-block bg-gray-500 text-white text-xs px-2 py-1 rounded">
                                            Habis
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <!-- Product Info -->
                            <div class="p-4">
                                <div class="mb-2">
                                    <span class="text-xs text-blue-600 font-medium">{{ $product->category->name }}</span>
                                </div>
                                
                                <h3 class="text-lg font-semibold text-gray-900 mb-2 line-clamp-2">
                                    <a href="{{ route('products.show', $product->slug) }}" class="hover:text-blue-600 transition-colors">
                                        {{ $product->name }}
                                    </a>
                                </h3>
                                
                                @if($product->brand)
                                    <p class="text-sm text-gray-500 mb-2">{{ $product->brand }}</p>
                                @endif
                                
                                <p class="text-sm text-gray-600 mb-3 line-clamp-2">{{ $product->short_description }}</p>
                                
                                <!-- Price -->
                                <div class="mb-4">
                                    @if($product->has_discount)
                                        <div class="flex items-center space-x-2">
                                            <span class="text-lg font-bold text-green-600">{{ $product->formatted_final_price }}</span>
                                            <span class="text-sm text-gray-500 line-through">{{ $product->formatted_price }}</span>
                                        </div>
                                    @else
                                        <span class="text-lg font-bold text-gray-900">{{ $product->formatted_final_price }}</span>
                                    @endif
                                </div>

                                <!-- Stock Info -->
                                @if(!$product->is_digital)
                                    <div class="mb-3">
                                        <span class="text-xs text-gray-500">Stok: {{ $product->stock_status }}</span>
                                    </div>
                                @endif

                                <!-- Action Buttons -->
                                <div class="space-y-3">
                                    <a href="{{ route('products.show', $product->slug) }}" 
                                       class="w-full inline-flex items-center justify-center px-4 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium">
                                        <i class="fas fa-eye mr-2"></i>
                                        Lihat Detail
                                    </a>
                                    
                                    @if(setting('contact_whatsapp'))
                                        <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', setting('contact_whatsapp')) }}?text={{ urlencode('Halo, saya tertarik dengan produk: ' . $product->name . ' - ' . route('products.show', $product->slug)) }}"
                                           target="_blank"
                                           class="w-full inline-flex items-center justify-center px-4 py-2.5 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-medium">
                                            <i class="fab fa-whatsapp mr-2"></i>
                                            Tanya via WhatsApp
                                        </a>
                                    @endif
                                    <!-- Marketplace Links -->
                                    @if($product->marketplace_links)
                                        <div class="grid grid-cols-2 gap-2 mt-3">
                                            @foreach($product->marketplace_links as $marketplace => $url)
                                                <a href="{{ $url }}" 
                                                   target="_blank"
                                                   class="inline-flex items-center justify-center px-2 py-1.5 border border-gray-300 text-gray-700 rounded-md text-xs font-medium hover:bg-gray-50 hover:border-gray-400 transition-all duration-200 group">
                                                    @if($marketplace == 'shopee')
                                                        <i class="fab fa-shopify mr-1.5 text-orange-500 group-hover:text-orange-600"></i>
                                                        <span class="truncate">Shopee</span>
                                                    @elseif($marketplace == 'tokopedia')
                                                        <i class="fas fa-store mr-1.5 text-green-500 group-hover:text-green-600"></i>
                                                        <span class="truncate">Tokopedia</span>
                                                    @elseif($marketplace == 'lazada')
                                                        <i class="fas fa-shopping-cart mr-1.5 text-blue-500 group-hover:text-blue-600"></i>
                                                        <span class="truncate">Lazada</span>
                                                    @elseif($marketplace == 'blibli')
                                                        <i class="fas fa-store-alt mr-1.5 text-blue-600 group-hover:text-blue-700"></i>
                                                        <span class="truncate">Blibli</span>
                                                    @elseif($marketplace == 'bukalapak')
                                                        <i class="fas fa-shopping-bag mr-1.5 text-red-500 group-hover:text-red-600"></i>
                                                        <span class="truncate">Bukalapak</span>
                                                    @else
                                                        <i class="fas fa-external-link-alt mr-1.5 text-gray-500 group-hover:text-gray-600"></i>
                                                        <span class="truncate">{{ ucfirst($marketplace) }}</span>
                                                    @endif
                                                </a>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                @if($products->hasPages())
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6 mt-12 p-6 bg-white rounded-xl border border-gray-100 shadow-sm">
                        <!-- Pagination Info -->
                        <div class="text-sm text-gray-600 order-2 sm:order-1">
                            Menampilkan 
                            <span class="font-semibold text-gray-900">{{ $products->firstItem() ?? 0 }}</span>
                            -
                            <span class="font-semibold text-gray-900">{{ $products->lastItem() ?? 0 }}</span>
                            dari 
                            <span class="font-semibold text-gray-900">{{ $products->total() }}</span>
                            produk
                        </div>
                        
                        <!-- Pagination Links -->
                        <div class="order-1 sm:order-2">
                            {{ $products->appends(request()->query())->links('pagination.custom') }}
                        </div>
                    </div>
                @endif
            @else
                <!-- No Products -->
                <div class="text-center py-16">
                    <i class="fas fa-search text-gray-400 text-6xl mb-4"></i>
                    <h3 class="text-xl font-semibold text-gray-900 mb-2">Tidak ada produk ditemukan</h3>
                    <p class="text-gray-600 mb-6">Coba ubah filter pencarian atau kata kunci yang digunakan.</p>
                    <a href="{{ route('products.index') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Lihat Semua Produk
                    </a>
                </div>
            @endif
        </div>
    </section>

    <!-- Other Categories -->
    @if($otherCategories->count() > 0)
        <section class="py-16 bg-gray-50">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold text-gray-900 mb-4">Kategori Lainnya</h2>
                    <p class="text-lg text-gray-600">Jelajahi kategori produk lainnya</p>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                    @foreach($otherCategories as $otherCategory)
                        <a href="{{ route('products.category', $otherCategory->slug) }}" class="group">
                            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 text-center hover:shadow-lg transition-shadow duration-300">
                                @if($otherCategory->image)
                                    <img src="{{ Storage::url($otherCategory->image) }}" 
                                         alt="{{ $otherCategory->name }}" 
                                         class="w-16 h-16 mx-auto mb-4 rounded-full object-cover">
                                @else
                                    <div class="w-16 h-16 mx-auto mb-4 bg-blue-100 rounded-full flex items-center justify-center">
                                        <i class="fas fa-tags text-blue-600 text-xl"></i>
                                    </div>
                                @endif
                                <h3 class="text-lg font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">{{ $otherCategory->name }}</h3>
                                <p class="text-sm text-gray-500 mt-1">{{ $otherCategory->products_count }} produk</p>
                            </div>
                        </a>
                    @endforeach
                </div>
                
                <div class="text-center mt-8">
                    <a href="{{ route('products.index') }}" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                        <i class="fas fa-th mr-2"></i>
                        Lihat Semua Produk
                    </a>
                </div>
            </div>
        </section>
    @endif
@endsection

@push('styles')
<style>
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>
@endpush