@extends('layouts.main')

@section('page-id', '60392bf840371584d548bb20')

@section('content')
  <div class="section">
    <div class="wide-container">
      <div class="straight-heading-columns w-row">
        <div class="pl-0 w-col w-col-5 w-col-stack"><img src="{{ $category->asset_urls->thumbnail }}" loading="lazy" alt="" class="straight-thumbnail"></div>
        <div class="straight-heading-content w-col w-col-7 w-col-stack">
          <div>
            <div class="straight-heading-title-wrapper">
              <div>
@if ($category->tagline)
                <div class="article-category">{{ $category->tagline }}</div>
@endif
                <h1 class="h1-2 mt-0 mb-20">{{ $category->name }}</h1>
              </div>
            </div><img src="{{ $category->asset_urls->thumbnail }}" loading="lazy" alt="" class="straight-thumbnail mobile">
            {!! $category->description !!}
          </div>
        </div>
      </div>
@if ($category->benefits)
      <div class="category-benefits">
        <h2 class="article-category larger green text-center">Benefits of Growing {{ $category->name }}</h2>
        <div class="benefits-columns">
          <div class="benefits-column">
@foreach ($category->benefits as $key => $benefit)
@if ($key % 2 != 0)
  @continue
@endif
            <div class="benefit"><img src="{{ url('images/checkmark-icon.svg') }}" loading="lazy" alt="" class="benefit-icon">
              <div>{{ $benefit }}</div>
            </div>
@endforeach
          </div>
          <div class="benefits-column">
@foreach ($category->benefits as $key => $benefit)
@if ($key % 2 == 0)
  @continue
@endif
            <div class="benefit"><img src="{{ url('images/checkmark-icon.svg') }}" loading="lazy" alt="" class="benefit-icon">
              <div>{{ $benefit }}</div>
            </div>
@endforeach
          </div>
        </div>
      </div>
@endif
@if ($category->sowing_rates || $category->sowing_period || $category->utilisation_period)
      <div class="species-info-row category">
@if ($category->sowing_rates)
        <div class="species-info-item category">
          <div>
            <div class="species-info-icon-wrapper sowing"><img src="{{ url('images/sowing-icon.svg') }}" loading="lazy" width="41" height="93" alt=""></div>
          </div>
          <h3 class="species-info-title">Sowing Rates</h3>
          <p>{!! nl2br(e($category->sowing_rates)) !!}</p>
        </div>
@endif
@if ($category->sowing_period)
        <div class="species-info-item category">
          <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>{{ $category->sowing_period }}</p>
        </div>
@endif
@if ($category->utilisation_period)
        <div class="species-info-item category">
          <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">Utilisation Period</h3>
          <p>{{ $category->utilisation_period }}</p>
        </div>
@endif
      </div>
@endif
    </div>
  </div>
@if (count($category->varietyTypes) > 0)
  <div class="section pale-green position--relative variety-section">
@if ($category->seed_illustration)
    <div class="variety-background-decoration"><img src="{{ $category->asset_urls->seed_illustration }}" loading="lazy" alt="" class="variety-background-decoration-image"></div>
    <div class="variety-background-decoration _2"><img src="{{ $category->asset_urls->seed_illustration }}" loading="lazy" alt="" class="variety-background-decoration-image _2"></div>
@endif
    <div class="wide-container text-center">
@if ($category->seed_illustration)
      <div class="variety-background-decoration mobile-title"><img src="{{ $category->asset_urls->seed_illustration }}" loading="lazy" alt="" class="variety-background-decoration-image"></div>
@endif
      <h2 class="article-category larger green mt-0">Which variety of {{ strtolower($category->name) }} is best for you?</h2>
      <div class="variety-tree-wrapper">
        <div class="variety-tree-title">{{ $category->name }}</div>
        <div class="variety-tree-top-line-wrapper">
@if (count($category->varietyTypes) % 2 == 0)
          <div class="variety-tree-top-line"></div>
@endif
        </div>
        <div class="variety-tree">
@foreach ($category->varietyTypes as $type)
          <div class="variety-branch">
            <div class="variety-description-outer-wrapper">
@if (count($category->varietyTypes) > 1)
              <div class="variety-branch-line horizontal @if($loop->last) left @elseif($loop->first === false) full @endif"></div>
@endif
              <div class="variety-description-wrapper">
                <div class="variety-description-heading">{{ $type->name }}</div>
                <div class="variety-description-inner-wrapper">
                  <div>{{ $type->description }}</div>
                </div>
              </div>
              <div class="variety-branch-line @if (count($category->varietyTypes) === 1 || (floor(count($category->varietyTypes) / 2) == $loop->index && $loop->last !== true)) middle @endif"></div>
            </div>
@if (count($type->products))
              <ul role="list" class="variety-list w-list-unstyled">
@foreach ($type->products as $product)
                <li class="variety-list-item">
                  <a href="{{ route('products.individual', ['parentCategory' => $parentCategory, 'childCategory' => $category->slug, 'product' => $product->slug]) }}" class="orange-link">{{ $product->name }}</a>
                </li>
@endforeach
              </ul>
@endif
          </div>
@endforeach
        </div>
      </div>
    </div>
  </div>
@endif
  <div class="section">
    <div class="wide-container">
      <div class="text-center">
        <h2 class="h1-2 mt-0">All {{ $category->name }} Varieties</h2>
      </div>
      <div class="castle-mixtures">
@foreach ($category->products as $product)
@php
  if ($product->pivot->has_unique_details) {
    $detailsType = $product->pivot->type;
  } else {
    $detailsType = $product->type;
  }
@endphp
@if ($detailsType === 'mixtures')
        <x-tables.mixture :product="$product" :category="$category" :parentCategory="$parentCategory" />
@elseif ($detailsType === 'flower')
        <x-tables.flower :product="$product" :category="$category" :parentCategory="$parentCategory" />
@elseif ($detailsType === 'cover_mixture')
        <x-tables.cover-mixture :product="$product" :category="$category" :parentCategory="$parentCategory" />
@elseif ($detailsType === 'agri_enviro')
        <x-tables.agri-enviro :product="$product" :category="$category" :parentCategory="$parentCategory" />
@elseif ($detailsType === 'herb_legume')
        <x-tables.herb-legume :product="$product" :category="$category" :parentCategory="$parentCategory" />
@else
        <x-tables.straight :product="$product" :category="$category" :parentCategory="$parentCategory" />
@endif
@endforeach
      </div>
@if ($category->show_crop_suitability)
      <div class="mt-80">
        <h2 class="h1-2 text-center">Crop Suitability</h2>
        <div class="mt-30 mb-30">
          <div class="vertical-divider small center"></div>
        </div>
        <div class="crop-suitability">
          <div class="crop-suitability-item-wrapper">
            <div class="crop-suitability-item">
              <div>Dairy</div>
@if ($category->suitable_for_dairy)
              <img src="{{ url('images/checkmark-icon.svg') }}" loading="lazy" alt="" class="crop-suitability-check">
@endif
            </div>
          </div>
          <div class="crop-suitability-item-wrapper">
            <div class="crop-suitability-item">
              <div>Sheep</div>
@if ($category->suitable_for_sheep)
              <img src="{{ url('images/checkmark-icon.svg') }}" loading="lazy" alt="" class="crop-suitability-check">
@endif
            </div>
          </div>
          <div class="crop-suitability-item-wrapper">
            <div class="crop-suitability-item">
              <div>Graze in Situ</div>
@if ($category->suitable_for_graze_in_situ)
              <img src="{{ url('images/checkmark-icon.svg') }}" loading="lazy" alt="" class="crop-suitability-check">
@endif
            </div>
          </div>
          <div class="crop-suitability-item-wrapper">
            <div class="crop-suitability-item">
              <div>Zero Grazing</div>
@if ($category->suitable_for_zero_grazing)
              <img src="{{ url('images/checkmark-icon.svg') }}" loading="lazy" alt="" class="crop-suitability-check">
@endif
            </div>
          </div>
          <div class="crop-suitability-item-wrapper">
            <div class="crop-suitability-item">
              <div>Beef</div>
@if ($category->suitable_for_beef)
              <img src="{{ url('images/checkmark-icon.svg') }}" loading="lazy" alt="" class="crop-suitability-check">
@endif
            </div>
          </div>
          <div class="crop-suitability-item-wrapper">
            <div class="crop-suitability-item">
              <div>Pig</div>
@if ($category->suitable_for_pig)
              <img src="{{ url('images/checkmark-icon.svg') }}" loading="lazy" alt="" class="crop-suitability-check">
@endif
            </div>
          </div>
          <div class="crop-suitability-item-wrapper">
            <div class="crop-suitability-item">
              <div>Ensile</div>
@if ($category->suitable_for_ensile)
              <img src="{{ url('images/checkmark-icon.svg') }}" loading="lazy" alt="" class="crop-suitability-check">
@endif
            </div>
          </div>
          <div class="crop-suitability-item-wrapper">
            <div class="crop-suitability-item">
              <div>Lift &amp; Store</div>
@if ($category->suitable_for_lift_and_store)
              <img src="{{ url('images/checkmark-icon.svg') }}" loading="lazy" alt="" class="crop-suitability-check">
@endif
            </div>
          </div>
        </div>
      </div>
@endif
    </div>
  </div>
@endsection