@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="display-4 mb-2">Search Results</h1>
            <p class="text-muted">Search query: <strong>"{{ $search }}"</strong></p>
        </div>
    </div>

    @if($products->count() > 0)
        <div class="row g-4">
            @foreach($products as $product)
                <div class="col-md-6 col-lg-4">
                    <div class="card h-100 product-card shadow-sm transition">
                        <!-- Product Image -->
                        <div class="position-relative overflow-hidden" style="height: 250px; background: #f8f9fa;">
                            <img src="{{ $product->image ? asset($product->image) : asset('uploads/no-image.png') }}" class="card-img-top w-100 h-100" 
                                 alt="{{ $product->name }}" style="object-fit: cover;">
                            
                            <!-- Stock Badge -->
                            @if($product->inventory && $product->inventory->quantity > 0)
                                <span class="badge bg-success position-absolute top-0 end-0 m-2">
                                    In Stock ({{ $product->inventory->quantity }})
                                </span>
                            @else
                                <span class="badge bg-danger position-absolute top-0 end-0 m-2">
                                    Out of Stock
                                </span>
                            @endif
                        </div>

                        <div class="card-body d-flex flex-column">
                            <!-- Category Badge -->
                            <small class="text-muted mb-1">
                                {{ $product->category?->name ?? 'Uncategorized' }}
                            </small>

                            <!-- Product Name -->
                            <h5 class="card-title mb-2">
                                <a href="{{ route('user.products.show', $product) }}" class="text-decoration-none text-dark">
                                    {{ Str::limit($product->name, 60) }}
                                </a>
                            </h5>

                            <!-- Brand -->
                            @if($product->brand)
                                <small class="text-muted mb-2">
                                    <strong>Brand:</strong> {{ $product->brand->name }}
                                </small>
                            @endif

                            <!-- Description -->
                            <p class="card-text text-muted small mb-3">
                                {{ Str::limit($product->description, 80) }}
                            </p>

                            <!-- Rating (if available) -->
                            @if($product->rating && $product->rating > 0)
                                <div class="mb-3">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <small class="text-warning">
                                                @for($i = 0; $i < floor($product->rating); $i++)
                                                    <i class="fas fa-star"></i>
                                                @endfor
                                                @if($product->rating % 1 != 0)
                                                    <i class="fas fa-star-half-alt"></i>
                                                @endif
                                                <span class="text-muted">({{ number_format($product->rating, 1) }})</span>
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <!-- Price -->
                            <div class="mb-3 mt-auto">
                                <h4 class="text-primary mb-0">
                                    {{ \App\Support\Currency::symbol() }}{{ number_format($product->price, 2) }}
                                </h4>
                                @if($product->cost_price && $product->cost_price < $product->price)
                                    <small class="text-muted text-decoration-line-through">
                                        {{ \App\Support\Currency::symbol() }}{{ number_format($product->cost_price, 2) }}
                                    </small>
                                    <span class="badge bg-danger ms-2">
                                        Save {{ round(((($product->price - $product->cost_price) / $product->price) * 100)) }}%
                                    </span>
                                @endif
                            </div>

                            <!-- Actions -->
                            <a href="{{ route('user.products.show', $product) }}" class="btn btn-primary btn-sm w-100">
                                <i class="fas fa-shopping-cart me-2"></i>View Details
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="row mt-4">
            <div class="col-12">
                {{ $products->appends(request()->query())->links() }}
            </div>
        </div>
    @else
        <!-- No Products Found -->
        <div class="alert alert-info text-center py-5">
            <img src="{{ asset('uploads/no-product.png') }}" alt="No products found" style="max-width: 200px; max-height: 200px; margin-bottom: 1rem;">
            <h5>No products found</h5>
            <p class="mb-3">No products match your search for "<strong>{{ $search }}</strong>"</p>
            <a href="{{ route('user.products.index') }}" class="btn btn-primary">
                <i class="bi bi-arrow-left"></i> Back to All Products
            </a>
        </div>
    @endif
</div>

<style>
    .product-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    }

    .transition {
        transition: opacity 0.3s ease;
    }
</style>
@endsection