@extends('layouts.app')

@section('title', env('APP_NAME') . ' - ' . $query)

@section('content')
<div class="ht__bradcaump__area" style="background: rgba(0, 0, 0, 0) url({{ asset('assets/images/bg/2.jpg') }}) no-repeat scroll center center / cover ;">
    <div class="ht__bradcaump__wrap_small">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="bradcaump__inner text-center">
                        <h1 class="bradcaump-title">{{ __('shop.search_results') }} : <span class="text-primary">{{ $query }}</span></h1>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<section class="htc__product__area ptb--130 bg__white">
    <div class="container">
        <div class="row">
            @if ($products->isEmpty())
                <div class="col-md-12 text-center">
                    <h2>{{ __('shop.no_results_found') }}</h2>
                </div>
            @else
            
                @foreach ($products as $product)
                    <div class="col-md-3 mb-4">
                        <div class="card h-100">
                            @if ($product->mainImage)
                            <img src="{{ asset('storage/images/products/' . $product->id . '/thumb/' . $product->mainImage->image) }}"
                                class="card-img-top" alt="{{ $product->name }}">
                            @else
                            <img src="{{ asset('images/no-image.png') }}" class="card-img-top" alt="No image">
                            @endif
                            <div class="card-body">
                                <h5 class="card-title">{{ $product->name }}</h5>
                                <p class="card-text">{{ Str::limit($product->description, 80) }}</p>
                                <div class="contact-btn mt-3"><a href="{{ route('shop.product', $product->slug) }}" class="fv-btn btn btn-primary">Voir le produit</a></div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif

        </div>
    </div>
</section>

@endsection