@extends('layouts.main')

@section('page-id', '603684864271cfeec08f81ad')

@section('content')
<section class="section">
  <div class="wide-container">
    <div class="learn-hero-columns w-row">
      <div class="pl-0 pr-70 pr-sm-0 w-col w-col-6">
        <div class="article-category">Learn</div>
        <div class="mt-10 mb-10">
          <div class="vertical-divider"></div>
        </div>
        <h1 class="h1-2 mb-20">Learn with Watson Seeds</h1>
        <p class="mb-50">Established in 1991, we have spent over 30 years specialising in grass seed and forage,
          building a wealth of knowledge along the way. We continue to source from a wide range of suppliers to offer
          the best solutions for our customers. Through our technical library and species guide, we aim to share this
          expertise and help answer any questions, always with the goal of improving field and livestock performance.
        </p>
        <div>
          <div class="mb-0 w-form">
            <form class="article-search-form" action="{{ route('learn.search') }}" method="GET">
              <div class="article-search-input-wrapper"><img src="{{ url('images/search-icon-dark.svg') }}"
                  loading="lazy" alt="" class="article-search-icon"><input type="text"
                  class="article-search-input w-input" name="s" placeholder="Search All Articles"></div><button
                class="featured-text-link submit w-button">Search</button>
            </form>
          </div>
        </div>
      </div>
      <div class="hide-wide-mobile w-col w-col-6">
        <div class="learn-hero-ellipse"><img src="{{ url('images/thumbnail_image1_1.png') }}" loading="lazy" width="410"
            alt="" class="learn-hero-species"></div>
      </div>
    </div>
    <div class="mt-60 mb-60 hide-mobile">
      <div class="divider"></div>
    </div>
    <div class="w-row">
      <div class="technical-library-thumbnail-column w-col w-col-6"><img src="{{ url('images/learn-thumbnail.jpg') }}"
          loading="lazy" alt=""></div>
      <div class="pl-100 pl-md-0 pr-sm-0 w-col w-col-6">
        <div class="contained-content-wrapper">
          <h2 class="mt-md-0">Visit our Technical Library</h2>
          <div class="mt-20 mb-20 hide-tablet">
            <div class="vertical-divider"></div>
          </div>
          <p class="mb-50 mb-md-30">Find out more information about how to select, prepare soil for, and sow our various
            grass and crop seeds and mixtures, plus more.</p>
          <a href="{{ route('learn.technical-library') }}" class="button basket w-button">Find Out More</a>
        </div>
      </div>
    </div>
  </div>
</section>
<div class="section peach no-overflow pt-100 pb-100">
  <div class="wide-container">
    <div class="species-guide-columns w-row">
      <div class="w-col w-col-4 w-col-stack">
        <div class="species-left-ellipse"><img src="{{ url('images/thumbnail_image2.png') }}" loading="lazy" alt=""
            class="species-image left"></div>
      </div>
      <div class="text-center w-col w-col-4 w-col-stack">
        <div class="species-central-text-wrapper">
          <h2 class="h1-2 mt-0 mb-20">Species Guide</h2>
          <p class="mb-40">This page shows the fine details of the plants the seeds grow into.</p>
          <a href="{{ route('learn.species-guide') }}" class="featured-text-link">View Our Guide</a>
        </div>
      </div>
      <div class="w-col w-col-4 w-col-stack">
        <div class="species-right-ellipse"><img src="{{ url('images/thumbnail_image1_1.png') }}" loading="lazy"
            width="438" alt="" class="species-image"></div>
      </div>
    </div>
  </div>
</div>
<div class="section transparent">
  <div class="wide-container">
    <div class="page-heading-wrapper with-icon mb-30">
      <div class="page-heading-icon-wrapper"><img src="{{ url('images/video-icon.svg') }}" loading="lazy" alt=""
          class="page-heading-icon"></div>
      <div class="page-heading-text-wrapper">
        <h2 class="mt-0">Video Library</h2>
        <div>Educational &amp; Product based Videos from Watson Seeds</div>
      </div>
    </div>
    @if (count($videos) > 0)
    <div class="articles-row">
      @foreach ($videos as $video)
      <div class="articles-column quarter">
        <div class="article-inner-wrapper no-shadow" onclick="openVideo('{{ $video->template_fields->id }}')">
          <div class="video-thumbnail"><img src="{{ url('images/Group-2223.svg') }}" loading="lazy" alt=""
              class="video-thumbnail-icon"><img src="{{ $video->asset_urls->thumbnail }}" loading="lazy" alt=""></div>
          <div class="article-content-wrapper video no-link">
            <div class="article-category">{{ $video->template_fields->length }}</div>
            <h2 class="mt-0">{{ $video->title }}</h2>
          </div>
        </div>
      </div>
      @endforeach
    </div>
    @endif
    <div class="header-wrapper">
      <div class="header-line"></div>
      <div class="header-text-wrapper">
        <a href="{{ route('learn.videos') }}" class="button w-button">Go To Videos</a>
      </div>
      <div class="header-line"></div>
    </div>
  </div>
</div>
<div class="article-lightbox" id="article-lightbox">
  <div class="article-lightbox-background"></div>
  <div class="article-light-content">
    <div class="wide-container">
      <div class="w-row">
        <div class="w-col w-col-2"></div>
        <div class="w-col w-col-10">
          <div class="video-close-row"><img src="{{ url('images/green-close-icon.svg') }}" loading="lazy" alt=""
              class="video-close-icon" onclick="closeVideo()"></div>
          <div class="video-thumbnail">
            <iframe id="youtube-iframe" src="https://www.youtube.com/embed/ScMzIvxBSi4" title="YouTube video player"
              frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen class="youtube-iframe"></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('custom_scripts')
<script>
  function openVideo(id) {
  document.getElementById('youtube-iframe').src = "https://www.youtube.com/embed/" + id;
  document.getElementById('article-lightbox').style.display = 'block';
}

function closeVideo() {
  document.getElementById('youtube-iframe').src = "";
  document.getElementById('article-lightbox').style.display = 'none';
}
</script>
@endsection