@extends('layouts.app')

@section('title') {{ $keyword }} @endsection

@section('content')
<div class="container py-5">
	<div class="heading-box">
		<h1 class="heading display-4">Searched for <u>{{ $keyword }}</u></h1>
		<p class="lead">{{ $products->count() }} results found.</p>
	</div>

	<div class="products grid gap-3 large-4 medium-3 small-2">
	    @foreach ($products as $product)
	    <div class="product"> 
	        <div class="overlay">
	            <img src="{{ $product->images->first()->image }}" class="overlay-image" alt="{{ $product->name }}">

	            <div class="overlay-body">
	                <a href="{{ route('products.show', ['slug' => $product->slug]) }}" class="btn btn-dark">View Details</a>
	            </div>
	        </div>

	        <div class="product-body">
	        	<small class="product-category">{{ $product->subcategory->name }}</small>

	            <h6 class="product-name">{{ Str::limit($product->name, 25, '...') }}</h6>
	            <span class="product-price">
	            	<span>{{ config('app.currency') }} @if ($product->discounted_price > 0){{ $product->discounted_price }}@else{{ $product->unit_price }}@endif</span>
	            	@if ($product->discounted_price > 0)
		        	<del class="product-price-discounted">{{ config('app.currency') }} {{ $product->unit_price }}</del>
		        	@endif
	            </span>
	        </div>
	    </div>
	    @endforeach
	</div>
</div>
@endsection