{{--
  Template Name: Home
--}}

@extends('layouts.app')

@section('content')
  @while(have_posts()) @php the_post() @endphp

  <div class="container">
    <div class="home__hero">
      <a href="#" class="home__scrollto">Contact</a>

      <div class="home__intro">
        @content
      </div>

      <div class="home__hero-project">
        @php $index = 0 @endphp
        @fields('home_projects')
        @php
          $id = get_sub_field('project')->ID;
          $link = get_permalink($id);
          $title = get_the_title($id);
          $image_url = get_the_post_thumbnail_url($id, 'full');
        @endphp

        @if($index < 1)
          <a href="{!! $link !!}" style="background-image: url({!! $image_url !!})" data-title="{!! $title !!}"
             class="js-project"></a>
        @endif

        @php $index++ @endphp
        @endfields
      </div>
    </div>

    <div class="home__projects">
      @php $index = 0 @endphp
      @fields('home_projects')
      <div class="home__project home__project--@sub('alignment')">
        @php
          $id = get_sub_field('project')->ID;
          $link = get_permalink($id);
          $image_url = get_the_post_thumbnail_url($id, 'full');
          $title = get_the_title($id);
          $alignment = get_sub_field('alignment');

            // second project
          if(get_sub_field('project_two')){
              $id2 = get_sub_field('project_two')->ID;
              $link2 = get_permalink($id2);
              $image_url2 = get_the_post_thumbnail_url($id2, 'custom');
              $title2 = get_the_title($id2);
          }

        @endphp

        @if($index >= 1)
          <a href="{!! $link !!}" data-title="{!! $title !!}" class="js-project"><img src="{!! $image_url !!}"
                                                                                      alt="{!! $title !!}"></a>
          @if($alignment == "two")
            <a href="{!! $link2 !!}" data-title="{!! $title2 !!}" class="js-project"><img src="{!! $image_url2 !!}"
                                                                                          alt="{!! $title2 !!}"></a>
          @endif
        @endif

        @php $index++ @endphp
      </div>
      @endfields
    </div>

    <div class="home__services-awards">
      <div class="home__awards">
        <span class="home__awards-title">Awards</span>
        @fields('home_awards')
        @php
          $id = get_sub_field('project')->ID;
          $link = get_permalink($id);
        @endphp
        <a href="{!! $link !!}" class="home__awards-link"> @sub('title')</a>
        @endfields
      </div>

      <ul class="home__services">
        @fields('home_services')
        <li> @sub('service')</li>
        @endfields
      </ul>
    </div>

    @group('home_name_title')
    <div class="home__name-function">
      <span class="home__name">@sub('name')</span>
      <span class="home__function">@sub('title')</span>
    </div>
    @endgroup

    @group('home_contact')
    <div class="home__contact" id="home__contact">
      <div class="home__contact-title">@sub('title')</div>

      <a class="home__contact-email" href="mailto:@sub('email')">@sub('email')</a>
      <div class="home__contact-phone">T: @sub('phone')</div>
    </div>
    @endgroup
  </div>

  @endwhile
@endsection