@extends('layouts.main')

@section('page-id', '606d765bf25abaf390c6262f')

@section('content')
  <section class="section peach">
    <div class="wide-container">
      <div class="text-center">
        <h1 class="h1-2 mt-0">Search Results for ‘{{ Request::get('s') }}’</h1>
      </div>
      <div class="search-results">
        <div class="search-results-heading">
          <div class="search-results-heading-item"><img src="{{ url('images/learn-icon.svg') }}" loading="lazy" alt="" class="search-results-heading-icon">
            <h2 class="h1-2 mb-0 mt-0">Products</h2>
          </div>
          <div class="search-results-heading-item end"><img src="{{ url('images/learn-icon.svg') }}" loading="lazy" alt="" class="search-results-heading-icon">
            <h2 class="h1-2 mb-0 mt-0">Learn</h2>
          </div>
        </div>
        <div class="search-results-body">
          <div class="search-results-body-column">
            <div class="search-results-heading-item mobile">
              <h2 class="h1-2 mb-0 mt-0">Products</h2>
            </div>
@if (count($products) > 0)
@foreach ($products as $product)
            <div class="search-results-product">
              <div class="search-results-product-thumbnail-wrapper"><img src="{{ $product->asset_urls->thumbnail }}" loading="lazy" alt="" class="search-results-product-thumbnail mixture"></div>
              <div class="search-results-product-content">
                <h2 class="mt-0 mb-0">{{ $product->name }}</h2>
                <a href="{{ $product->link }}" class="orange-link">View product</a>
              </div>
            </div>
@endforeach
@else
            <div class="search-results-product">No products found</div>
@endif
          </div>
          <div class="search-results-body-column end">
            <div class="search-results-heading-item mobile">
              <h2 class="h1-2 mb-0 mt-0">Learn</h2>
            </div>
@if (count($articles) > 0)
@foreach ($articles as $article)
@php
$category = $article->categories()->first();
@endphp
            <div class="search-results-learn-item">
              <div class="search-results-learn-thumbnail-wrapper"><img src="{{ $article->asset_urls->thumbnail }}" loading="lazy" alt="" class="search-result-thumbnail alt"></div>
              <div class="search-results-learn-content">
                <a href="{{ route('learn.technical-library.article', ['category' => $category->slug, 'article' => $article->slug]) }}" class="search-results-learn-link">{{ $article->title }}</a>
              </div>
              <a href="{{ route('learn.technical-library.article', ['category' => $category->slug, 'article' => $article->slug]) }}" class="w-inline-block"><img src="{{ url('images/right-circle-chevron-icon.svg') }}" loading="lazy" alt=""></a>
            </div>
@endforeach
@else
            <div>No articles found</div>
@endif
@if (count($species) > 0)
@foreach ($species as $specie)
            <div class="search-results-learn-item">
              <div class="search-results-product-thumbnail-wrapper"><img src="{{ $specie->asset_urls->seed_illustration }}" loading="lazy" alt="" class="search-results-product-thumbnail mixture"></div>
              <div class="search-results-learn-content">
                <a href="{{ route('learn.species-guide.species', ['category' => $specie->category->slug, 'species' => $specie->slug]) }}"
                  class="search-results-learn-link">Species guide - {{ $specie->name }}</a>
              </div>
              <a href="{{ route('learn.species-guide.species', ['category' => $specie->category->slug, 'species' => $specie->slug]) }}" class="w-inline-block"><img src="{{ url('images/right-circle-chevron-icon.svg') }}" loading="lazy" alt=""></a>
            </div>
@endforeach
@endif
          </div>
        </div>
      </div>
      <div>
        <div class="central-heading-wrapper mb-50">
          <h2>Didn’t find what you were looking for?<br>Try a different search term.</h2>
        </div>
        <div>
          <div class="mb-0 w-form">
            <form class="article-search-form center" action="{{ route('search') }}" method="GET">
              <div class="article-search-input-wrapper white"><img src="{{ url('images/search-icon-dark.svg') }}" loading="lazy" alt="" class="article-search-icon"><input type="text" class="article-search-input wide w-input" maxlength="256" name="s" placeholder="e.g. Kale sowing guide">
              </div><input type="submit" value="Search" class="featured-text-link submit w-button">
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
@endsection