@extends('layouts.main')

@section('page-id', '60390fd5fe1ae668a23f9e7b')
@section('body-class', 'pale-green')

@section('content')
<div class="section transparent">
  <div class="wide-container">
    <div class="mixtures-heading-columns w-row">
      <div class="mixtures-heading-thumbnail-column w-col w-col-5">
        <div class="learn-hero-ellipse castle-mixture-icon">
          <img src="{{ $category->asset_urls->thumbnail }}" loading="lazy" alt="">
        </div>
      </div>
      <div class="w-col w-col-7">
        <div class="introduction-wrapper">
          <div class="mixtures-heading-wrapper">
            <div>
              @if ($category->tagline)
              <h1 class="h1-2 mb-0 mt-0">{{ $category->name }}</h1>
              <div class="article-category mb-20">{{ $category->tagline }}</div>
              @else
              <h1 class="h1-2 mb-20 mt-0">{{ $category->name }}</h1>
              @endif
            </div>
            <div class="learn-hero-ellipse castle-mixture-icon mobile">
              <img src="{{ $category->asset_urls->thumbnail }}" loading="lazy" alt="" class="learn-hero-image">
            </div>
          </div>
          {!! $category->description !!}
        </div>
      </div>
    </div>
  </div>
</div>



<div class="section">
  <div class="wide-container">


    {{-- --- Products Section --- --}}
    @if ($category->products->isNotEmpty())
    <div class="text-center mt-50">
      <h2 class="h1-2 mt-0">Products</h2>
    </div>

    <div class="castle-mixtures">
      @foreach ($category->products as $product)
      @php
      $detailsType = $product->pivot->has_unique_details ? $product->pivot->type : $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>
    @endif




    {{-- --- Subcategories Section --- --}}
    @if($category->children->isNotEmpty())
    <div class="text-center">
      <h2 class="h1-2 mt-0">Categories</h2>
    </div>


    <div class="product-categories columned">
      @foreach ($category->children as $child)
      <div class="product-category-wrapper">
        <div class="product-category mb-0">
          <div class="product-category-thumbnail-wrapper"><img
              src="{{ $child->thumbnail ? $child->asset_urls->thumbnail : url('images/Perennial-Ryegrass.jpg') }}"
              alt="" class="product-category-thumbnail"></div>
          <div class="product-category-content-wrapper sub-category">
            <h2 class="mb-20 mt-0">{{ $child->name }}</h2>
            <p class="mb-0">{{ $child->short_description }}</p>
          </div>
          <a href="{{ route('products.category.child', ['parentCategory' => $category->slug, 'childCategory' => $child->slug]) }}"
            class="product-category-link sub-category w-inline-block"><img
              src="{{ url('images/right-arrow-white.svg') }}" loading="lazy" alt=""
              class="product-category-chevron"></a>
        </div>
      </div>
      @endforeach
    </div>



    @endif

  </div>
</div>


@if($category->children->isEmpty() && $category->products->isEmpty())
<div class="section">
  <div class="wide-container">


    <div class="text-center">
      <h2 class="h1-2 mt-0">All {{ $category->name }}</h2>
    </div>

    {{-- --- No Products/Subcategories --- --}}

    <p class="text-center mt-30 mb-0">
      There are currently no products in the {{ $category->name }} category.
    </p>


  </div>
</div>
@endif
@endsection