@extends('layouts.app')

@section('title', isset($searchTerm) ? 'Kết quả tìm kiếm: ' . $searchTerm : (isset($currentCategory) ? $currentCategory->name : 'Sản phẩm'))

@section('content')
<div class="bg-gray-50 py-8">
    <div class="container mx-auto px-4">
        <!-- Breadcrumb -->
        <div class="text-sm text-gray-500 mb-6 flex items-center gap-2">
            <a href="/" class="hover:text-blue-600">Trang chủ</a>
            <span>/</span>
            @if(isset($searchTerm))
                <span class="text-gray-900 font-medium">Tìm kiếm: "{{ $searchTerm }}"</span>
            @elseif(isset($currentCategory))
                <a href="{{ route('products.index') }}" class="hover:text-blue-600">Sản phẩm</a>
                <span>/</span>
                <span class="text-gray-900 font-medium">{{ $currentCategory->name }}</span>
            @else
                <span class="text-gray-900 font-medium">Tất cả sản phẩm</span>
            @endif
        </div>

        <div class="flex flex-col lg:flex-row gap-8">
            <!-- Sidebar -->
            <aside class="w-full lg:w-1/4 flex-shrink-0">
                <div class="bg-white rounded-lg shadow-sm p-6 sticky top-24">
                    <h3 class="text-lg font-bold text-gray-900 mb-4 pb-2 border-b border-gray-100">Danh mục</h3>
                    <ul class="space-y-2">
                        <li>
                            <a href="{{ route('products.index') }}" 
                               class="block px-3 py-2 rounded-md transition-colors {{ !isset($currentCategory) ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-blue-600' }}">
                                Tất cả sản phẩm
                            </a>
                        </li>
                        @foreach($categories as $cat)
                            <li>
                                <a href="{{ route('products.category', $cat->slug) }}" 
                                   class="block px-3 py-2 rounded-md transition-colors flex justify-between items-center group {{ (isset($currentCategory) && ($currentCategory->id == $cat->id || $currentCategory->parent_id == $cat->id)) ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-blue-600' }}">
                                    <span>{{ $cat->name }}</span>
                                    @if($cat->children->count() > 0)
                                        <svg class="w-4 h-4 text-gray-400 group-hover:text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                    @endif
                                </a>
                                
                                <!-- Sub Categories -->
                                @if($cat->children->count() > 0 && (isset($currentCategory) && ($currentCategory->id == $cat->id || $currentCategory->parent_id == $cat->id)))
                                    <ul class="pl-4 mt-1 space-y-1 mb-2 border-l-2 border-slate-100 ml-3">
                                        @foreach($cat->children as $child)
                                            <li>
                                                <a href="{{ route('products.category', $child->slug) }}" 
                                                   class="block px-3 py-1.5 text-sm rounded-md transition-colors {{ (isset($currentCategory) && $currentCategory->id == $child->id) ? 'text-blue-600 font-medium' : 'text-gray-500 hover:text-blue-600' }}">
                                                    {{ $child->name }}
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                </div>
            </aside>

            <!-- Main Content -->
            <div class="flex-1">
                <!-- Toolbar -->
                <div class="bg-white rounded-lg shadow-sm p-4 mb-6 flex flex-col sm:flex-row justify-between items-center gap-4">
                    <h1 class="text-xl font-bold text-gray-800">
                        {{ isset($currentCategory) ? $currentCategory->name : 'Tất cả sản phẩm' }}
                        <span class="text-sm font-normal text-gray-500 ml-2">({{ $products->total() }} sản phẩm)</span>
                    </h1>
                    
                    <div class="flex items-center gap-2">
                        <label class="text-sm text-gray-600 whitespace-nowrap">Sắp xếp:</label>
                        <select onchange="window.location.href=this.value" class="border-gray-300 text-sm rounded-md focus:ring-blue-500 focus:border-blue-500 py-1.5 px-3 bg-gray-50">
                            <option value="{{ request()->fullUrlWithQuery(['sort' => 'newest']) }}" {{ request('sort') == 'newest' ? 'selected' : '' }}>Mới nhất</option>
                            <option value="{{ request()->fullUrlWithQuery(['sort' => 'price_asc']) }}" {{ request('sort') == 'price_asc' ? 'selected' : '' }}>Giá tăng dần</option>
                            <option value="{{ request()->fullUrlWithQuery(['sort' => 'price_desc']) }}" {{ request('sort') == 'price_desc' ? 'selected' : '' }}>Giá giảm dần</option>
                        </select>
                    </div>
                </div>

                <!-- Product Grid -->
                @if($products->count() > 0)
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                        @foreach($products as $product)
                            <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden group border border-gray-100">
                                <div class="relative aspect-square overflow-hidden bg-gray-100">
                                    <a href="{{ route('products.show', $product->slug) }}">
                                        @if($product->image)
                                            <img src="{{ Storage::url($product->image) }}" alt="{{ $product->name }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                        @else
                                            <div class="w-full h-full flex items-center justify-center text-gray-400">
                                                <svg class="w-12 h-12" 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
                                    </a>
                                    
                                    @if(!$product->contact_for_price && $product->old_price && $product->old_price > $product->price)
                                        <div class="absolute top-3 left-3 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-md">
                                            -{{ round((($product->old_price - $product->price) / $product->old_price) * 100) }}%
                                        </div>
                                    @endif

                                    <div class="absolute bottom-3 right-3 flex flex-col gap-2 opacity-0 group-hover:opacity-100 translate-y-2 group-hover:translate-y-0 transition-all duration-300">
                                        <button type="button" class="bg-white text-slate-800 p-2 rounded-full shadow-lg hover:bg-red-500 hover:text-white toggle-wishlist {{ in_array($product->id, session('wishlist', [])) ? 'text-red-500' : '' }}" data-id="{{ $product->id }}" title="Yêu thích">
                                            <svg class="w-5 h-5 {{ in_array($product->id, session('wishlist', [])) ? 'fill-current' : 'fill-none' }}" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                                        </button>
                                        <a href="{{ route('products.show', $product->slug) }}" class="bg-white text-slate-800 p-2 rounded-full shadow-lg hover:bg-blue-600 hover:text-white" title="Xem chi tiết">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                                        </a>
                                    </div>
                                </div>
                                
                                <div class="p-4">
                                    <div class="text-xs text-gray-500 mb-1">
                                        {{ $product->category?->name }}
                                    </div>
                                    <h3 class="font-medium text-gray-900 mb-2 truncate group-hover:text-blue-600 transition-colors">
                                        <a href="{{ route('products.show', $product->slug) }}" title="{{ $product->name }}">{{ $product->name }}</a>
                                    </h3>
                                    <div class="flex items-center gap-2">
                                        @if($product->contact_for_price)
                                            <span class="font-bold text-blue-600 text-lg">Liên hệ</span>
                                        @else
                                            <span class="font-bold text-red-600 text-lg">{{ number_format($product->price, 0, ',', '.') }}đ</span>
                                            @if($product->old_price)
                                                <span class="text-sm text-gray-400 line-through">{{ number_format($product->old_price, 0, ',', '.') }}đ</span>
                                            @endif
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Layout Pagination -->
                    <div class="mt-8">
                        {{ $products->appends(request()->query())->links() }}
                    </div>
                @else
                    <div class="bg-white rounded-lg shadow-sm p-12 text-center">
                        <svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">
                            @if(isset($searchTerm))
                                Không tìm thấy kết quả cho "{{ $searchTerm }}"
                            @else
                                Không tìm thấy sản phẩm nào
                            @endif
                        </h3>
                        <p class="text-gray-500 mb-6">Thử thay đổi từ khóa tìm kiếm hoặc bộ lọc của bạn.</p>
                        <a href="{{ route('products.index') }}" class="inline-block bg-slate-900 text-white px-6 py-2 rounded-lg hover:bg-slate-800 transition-colors">Quay lại tất cả sản phẩm</a>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection