@extends('layouts.main')

@section('page-id', '60366c0955905185c15a1ad6')

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

@section('content')
  <div class="section transparent with-back-button">
    <div class="wide-container position--relative">
      <a href="{{ route('news') }}" class="back-button w-inline-block"><img src="{{ url('images/left-chevron.svg') }}" loading="lazy" width="36" height="13" alt="">
        <div>Back to all articles</div>
      </a>
      <div class="news-columns w-row">
        <div class="news-filter-column w-col w-col-2 w-col-stack">
          <aside 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="#" class="news-filter-link">All</a>
              </li>
@if ($categories)
@foreach ($categories as $category)
              <li>
                <a href="{{ route('news.category', ['category' => $category->slug]) }}" class="news-filter-link {{ (isset($mainCategory) && $mainCategory->id === $category->id) ? 'w--current' : '' }}">{{ $category->title }}</a>
              </li>
@endforeach
@endif
            </ul>
          </aside>
        </div>
        <div class="article-column w-col w-col-10 w-col-stack">
          <article class="article-sheet">
            <div class="page-heading-wrapper article">
              <div class="article-header-share-wrapper">
                <a href="javascript:fbshareCurrentPage()" class="article-social-icon-link w-inline-block"><img src="{{ url('images/facebook-icon.svg') }}" loading="lazy" width="24" height="24" alt="" class="article-social-icon"></a>
                <a href="javascript:twshareCurrentPage()" class="article-social-icon-link w-inline-block"><img src="{{ url('images/twitter-icon.svg') }}" loading="lazy" width="24" height="20" alt="" class="article-social-icon"></a>
                <a href="mailto:?Subject={{ $article->title }}&body={{ url()->current() }}" class="article-social-icon-link w-inline-block"><img src="{{ url('images/mail-icon.svg') }}" loading="lazy" width="21" height="17" alt="" class="article-social-icon"></a>
              </div>
              <div>{{ date('jS M Y', strtotime($article->updated_at)) }}</div>
            </div>
            <div class="article-category">{{ $mainCategory->title }}</div>
            <h1 class="mt-0">{{ $article->title }}</h1>
@if ($article->main_image)
            <div class="mt-40 mb-40">
              <figure class="article-figure full-width"><img src="{{ $article->asset_urls->main_image }}" loading="lazy" alt=""></figure>
            </div>
@endif
@if ($article->template_type === 'q-a')
@php
  $questions = json_decode($article->body);
@endphp
            <div class="collapses mb-40 mt-20">
@foreach ($questions as $question)
              <div class="collapse">
                <div class="collapse-header">
                  <div>{{ $question->title }}</div><img src="{{ url('images/down-arrow.svg') }}" loading="lazy" style="-webkit-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-moz-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-ms-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0)" alt="" class="collapse-arrow">
                </div>
                <div style="display:none" class="collapse-body">
                  <p class="pb-20 mb-0">{{ $question->content }}</p>
                </div>
              </div>
@endforeach
            </div>
@else
            <div class="article-content w-richtext">{!! $article->body !!}</div>
@endif
            <div class="article-footer">
              <div class="article-footer-share-wrapper">
                <a href="javascript:fbshareCurrentPage()" class="article-social-icon-link w-inline-block"><img src="{{ url('images/facebook-icon.svg') }}" loading="lazy" width="24" height="24" alt="" class="article-social-icon"></a>
                <a href="javascript:twshareCurrentPage()" class="article-social-icon-link w-inline-block"><img src="{{ url('images/twitter-icon.svg') }}" loading="lazy" width="24" height="20" alt="" class="article-social-icon"></a>
                <a href="mailto:?Subject={{ $article->title }}&body={{ url()->current() }}" class="article-social-icon-link w-inline-block"><img src="{{ url('images/mail-icon.svg') }}" loading="lazy" width="21" height="17" alt="" class="article-social-icon"></a>
              </div>
@if ($article->attached_document)
              <div class="divider mt-20 mb-20"></div>
              <div class="article-footer-download-wrapper">
                <a href="{{ $article->asset_urls->attached_document }}" target="_blank" class="article-footer-download-link w-inline-block">
                  <div class="article-footer-download-icon-wrapper"><img src="{{ url('images/download-icon.svg') }}" loading="lazy" alt=""></div>
                  <div>Download Attached Document</div>
                </a>
              </div>
@endif
              <div class="divider mt-20 mb-30"></div>
              <div class="article-footer-navigation">
                <a href="{{ route('news') }}" class="featured-text-link">Back to all articles</a>
              </div>
            </div>
          </article>
        </div>
      </div>
    </div>
  </div>
@if (count($article->relatedArticles) > 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 ($article->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>
    </div>
  </section>
@endif
@endsection

@section('custom_scripts')
<script>
    function fbshareCurrentPage() {
      window.open("https://www.facebook.com/sharer/sharer.php?u="+escape(window.location.href)+"&t="+document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
      return false;
    }
    function twshareCurrentPage() {
      window.open("https://twitter.com/share?url="+escape(window.location.href)+"&text="+document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbar=yes,height=300,width=600');
      return false;
    }
</script>
@endsection