@extends('layouts.main')

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

@section('content')
  <section class="section">
    <div class="wide-container">
      <div class="species-slider-wrapper">
        <div class="species-slider-back-link-wrapper">
          <a href="{{ route('learn.species-guide') }}" class="orange-link">Back to list view</a>
        </div>
        <div class="species-slider">
          <div class="species-slide w-slide">
            <div class="species-slide-column w-row">
              <div class="species-slide-thumbnail-column w-col w-col-5">
                <div class="species-slider-thumbnail-wrapper"><img src="{{ $species->asset_urls->seed_illustration }}"
                    loading="lazy" alt="" class="species-thumbnail"></div>
              </div>
              <div class="species-slide-content-column w-col w-col-7">
                <h1 class="h1-2 mt-md-0">{{ $species->name }}</h1>
                <div class="species-category">{{ $species->category->name }}</div>
                <div class="species-alt-name">({{ $species->scientific_name }})</div>
                <p>{{ $species->description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="header-wrapper">
        <div class="header-line"></div>
      </div>
      <div class="w-container">
      <div class="species-info-row">
        <div class="species-info-item">
          <div>
            <div class="species-info-icon-wrapper"><img src="{{ url('images/help-icon.svg') }}" loading="lazy" width="41"
                height="41" alt=""></div>
          </div>
          <h3 class="species-info-title">Uses</h3>
          <p>{{ $species->uses }}</p>
        </div>
        <div class="species-info-item">
          <div>
            <div class="species-info-icon-wrapper"><img src="{{ url('images/scales-icon.svg') }}" loading="lazy"
                width="50" height="50" alt=""></div>
          </div>
          <h3 class="species-info-title">Sowing Rate</h3>
          {!! $species->sowing_rate_advice !!}
        </div>
        <div class="species-info-item end-of-row">
          <div>
            <div class="species-info-icon-wrapper"><img src="{{ url('images/refresh-icon.svg') }}" loading="lazy"
                width="36" height="36" alt=""></div>
          </div>
          <h3 class="species-info-title">Persistence</h3>
          <p>{{ $species->persistence }}</p>
        </div>
        <div class="species-info-item end-of-column">
          <div>
            <div class="species-info-icon-wrapper"><img src="{{ url('images/time-icon.svg') }}" loading="lazy" width="44"
                height="44" alt=""></div>
          </div>
          <h3 class="species-info-title">Sowing Period</h3>
          <p>{!! nl2br(e($species->ideal_sowing_time)) !!}</p>
        </div>
        <div class="species-info-item end-of-column">
          <div>
            <div class="species-info-icon-wrapper"><img src="{{ url('images/kg-icon.svg') }}" loading="lazy" width="41"
                height="41" alt=""></div>
          </div>
          <h3 class="species-info-title">Yield Potential</h3>
          <p>{{ $species->yield }}</p>
        </div>
        <div class="species-info-item end-of-row end-of-column">
          <div>
            <div class="species-info-icon-wrapper"><img src="{{ url('images/tractor-icon.svg') }}" loading="lazy"
                width="80" height="57" alt=""></div>
          </div>
          <h3 class="species-info-title">Management</h3>
          <p>{{ $species->management }}</p>
        </div>
      </div>
</div>
@if (count($species->testimonials) > 0)
      <div class="header-wrapper mb-100">
        <div class="header-line"></div>
      </div>
      <div data-animation="slide" data-duration="500" data-infinite="1" class="home-slider w-slider">
        <div class="home-slider-mask w-slider-mask">
@foreach ($species->testimonials as $testimonial)
          <div class="home-slide w-slide">
            <div class="home-slider-columns w-row">
              <div class="home-slide-left-column w-col w-col-6">
                <div>
                  <div class="article-category">What Our Customers Say</div>
                  <div class="mt-20 mb-20">
                    <div class="vertical-divider"></div>
                  </div>
                  <h1 class="mb-20 mt-0">{{ $testimonial->title }}</h1>
                  <p class="mb-20">“{{ $testimonial->body }}”</p>
                </div>
                <div>- {{ $testimonial->by }}</div>
              </div>
              <div class="w-col w-col-6"><img src="{{ $testimonial->asset_urls->image }}" loading="lazy" alt=""></div>
            </div>
          </div>
@endforeach
        </div>
@if (count($species->testimonials) > 1)
        <div class="home-slider-arrow-wrapper w-slider-arrow-left">
          <div class="home-slider-arrow-icon w-icon-slider-left"></div><img
            src="{{ url('images/slider-left-arrow.svg') }}" loading="lazy" alt="" class="home-slider-arrow">
        </div>
        <div class="home-slider-arrow-wrapper w-slider-arrow-right">
          <div class="home-slider-arrow-icon w-icon-slider-right"></div><img
            src="{{ url('images/slider-right-arrow.svg') }}" loading="lazy" alt="" class="home-slider-arrow">
        </div>
        <div class="home-slider-nav w-slider-nav w-round"></div>
@endif
      </div>
@endif
    </div>
  </section>
  <section class="section species-additional-info hide-background-on-tablet"
    style="background-image:url({{ $species->asset_urls->seed_illustration }})">
    <div class="wide-container">
      <div class="species-additional-info-row">
        <div class="species-additional-info-column">
          <h2 class="mt-0 mb-30">Additional Info</h2>
          <p>{{ $species->additional_information }}</p>
        </div>
@if ($species->works_well_with)
        <div class="species-additional-info-column end">
          <h2 class="mt-0 mb-30">Works well with</h2>
          <p>{{ $species->works_well_with }}</p>
        </div>
@endif
      </div>
    </div>
  </section>
@if (count($species->products) > 0 || count($species->relatedArticles) > 0)
  <section class="section">
    <div class="wide-container">
@if (count($species->products) > 0)
      <div>
        <h2 class="h1-2 text-center">You can buy {{ $species->name }} or in the following Mixtures:</h2>
        <div data-animation="slide" data-duration="500" data-infinite="1" class="mixtures-slider w-slider">
          <div class="w-slider-mask">
@foreach ($species->products as $product)
@php
$childCategory = $product->categories()->where('is_parent', '=', 0)->first();
$parentCategory = $childCategory->parents()->first();
@endphp
            <div class="mixtures-slide w-slide">
              <div>
                <div class="mixtures-slide-thumbnail-wrapper"><img src="{{ $product->asset_urls->thumbnail }}"
                    loading="lazy" alt=""></div>
              </div>
              <h2 class="mb-20">{{ $product->name }}</h2>
              <div class="mb-30">{{ $product->sub_title }}</div>
              <a href="{{ route('products.individual', ['parentCategory' => $parentCategory->slug, 'childCategory' => $childCategory->slug, 'product' => $product->slug]) }}"
                class="button w-button">View Product</a>
            </div>
@endforeach
          </div>
          <div class="mixtures-slider-arrow-wrapper w-slider-arrow-left"><img
              src="{{ url('images/left-arrow-gold.svg') }}" loading="lazy" alt="" class="mixtures-slider-arrow"></div>
          <div class="mixtures-slider-arrow-wrapper w-slider-arrow-right"><img
              src="{{ url('images/right-arrow-gold.svg') }}" loading="lazy" alt="" class="mixtures-slider-arrow"></div>
          <div class="mixtures-slider-nav w-slider-nav w-round"></div>
        </div>
      </div>
@endif
@if (count($species->relatedArticles) > 0)
      <div class="header-wrapper mt-40 mb-40">
        <div class="header-text-wrapper alt">
          <h3 class="mt-0 mb-0">Related Articles</h3>
        </div>
        <div class="header-line"></div>
      </div>
      <div class="articles-row">
@foreach ($species->relatedArticles as $relatedArticle)
@php
$articleCategory = $relatedArticle->categories()->first();
@endphp
        <div class="articles-column">
          <a href="{{ route('news.article', ['category' => $articleCategory->slug, 'article' => $relatedArticle->slug]) }}"
            class="article-inner-wrapper w-inline-block"><img src="{{ $relatedArticle->asset_urls->thumbnail }}"
              loading="lazy" alt="" class="article-thumbnail">
            <div class="article-content-wrapper">
              <div class="article-category">{{ $articleCategory->title }}</div>
              <h2 class="mt-0">{{ $relatedArticle->title }}</h2>
              <p>{{ $relatedArticle->short_description }}</p>
            </div>
            <div class="article-button">
              <div class="featured-text-link white">Learn More</div>
              <div class="article-button-chevron-button"><img src="{{ url('images/right-arrow-white.svg') }}"
                  loading="lazy" alt="" class="article-button-chevron"></div>
            </div>
          </a>
        </div>
@endforeach
      </div>
@endif
    </div>
  </section>
@endif
@endsection