@extends('layouts.main')

@section('page-id', '60367876c84f51302147d147')

@section('body-class', 'sand')

@section('content')
  <div class="section transparent">
    <div class="wide-container">
      <div class="page-heading-wrapper no-border">
        <h1 class="page-heading">SeedVision</h1>
      </div>
@if ($featuredVideo)
      <div class="featured-video">
        <div class="featured-video-thumbnail-wrapper" onclick="openVideo('{{ $featuredVideo->template_fields->id }}')">
          <img src="{{ url('images/Group-2223.svg') }}" loading="lazy" alt="" class="featured-video-thumbnail-play-icon"><img src="{{ $featuredVideo->asset_urls->thumbnail }}" loading="lazy" alt="" class="featured-video-thumbnail"></div>
        <div class="featured-video-content-wrapper">
          <div class="article-category">{{ $featuredVideo->template_fields->length }}</div>
          <h2 class="h1-2 mt-10">{{ $featuredVideo->title }}</h2>
          <div class="featured-text-link mt-60" onclick="openVideo('{{  $featuredVideo->template_fields->id }}')">Play Video</div>
        </div>
      </div>
@endif
      <div class="page-heading-wrapper with-icon">
        <div class="page-heading-icon-wrapper"><img src="{{ url('images/video-icon.svg') }}" loading="lazy" alt=""></div>
        <div class="page-heading-text-wrapper">
          <h2 class="mt-0">Video Library</h2>
          <div>Video guides and updates from your Watson’s team.</div>
        </div>
      </div>
      <div class="news-columns w-row">
        <div class="news-filter-column w-col w-col-2 w-col-stack">
          <div class="news-filter">
            <div class="news-filter-heading">
              <div>Filter By</div>
            </div>
            <ul role="list" class="news-filter-list w-list-unstyled">
              <li>
                <a href="{{ route('learn.videos') }}" class="news-filter-link {{ isset($mainCategory) === false ? 'w--current' : '' }}">All</a>
              </li>
@foreach ($categories as $category)
              <li>
                <a href="{{ route('learn.videos.category', ['category' => $category->slug]) }}" class="news-filter-link {{ (isset($mainCategory) && $mainCategory->id === $category->id) ? 'w--current' : '' }}">{{ $category->title }}</a>
              </li>
@endforeach
            </ul>
          </div>
        </div>
        <div class="w-col w-col-10 w-col-stack">
          <div class="articles-row">
@if (count($videos) > 0)
@foreach ($videos as $video)
            <div class="articles-column">
              <div class="article-inner-wrapper no-shadow">
                <div class="video-thumbnail" onclick="openVideo('{{ $video->template_fields->id }}')"><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">
                  <div class="article-category">{{ $video->template_fields->length }}</div>
                  <h2 class="mt-0">{{ $video->title }}</h2>
                  <div class="featured-text-link" onclick="openVideo('{{ $video->template_fields->id }}')">Play Video
                  </div>
                </div>
              </div>
            </div>
@endforeach
@else
            <div class="articles-column" style="width: 100%;">
              <div>No videos can be found.</div>
            </div>
@endif
          </div>
        </div>
      </div>
    </div>
  </div>
@if (count($articles) > 0)
  <section class="section">
    <div class="wide-container">
      <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 ($articles as $article)
@php
  $articleCategory = $article->categories()->first();
@endphp
        <div class="articles-column">
          <a href="{{ route('news.article', ['category' => $articleCategory->slug, 'article' => $article->slug]) }}" class="article-inner-wrapper w-inline-block">
            <div class="article-image" style="background-image: url({{ $article->asset_urls->thumbnail }})"></div>
            <div class="article-content-wrapper">
              <div class="article-category">News</div>
              <h2 class="mt-0">{{ $article->title }}</h2>
              <p>{{ $article->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>
    </div>
  </section>
@endif
  <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="#" 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