{{--
  Template Name: Impact Report 2022 People&Planet
--}}

@extends('layouts.app')
@section('content')
@php
  global $post;
  $classcategory = get_field('people_or_planet');
  $childrenArgs = array(
    'post_parent' => $post->ID,
    'post_type' => 'page',
    'orderby' => 'date',
    'order' => 'ASC',
    'numberposts' => -1,
  ); 
  $children = get_children($childrenArgs);
  error_log(json_encode($children));
  $pillar1ID = 0;
  $pillar2ID = 0;
  $pillar3ID = 0;
  $pillar4ID = 0;
    foreach ($children as $child) {
      if ($pillar1ID == 0) {
          $pillar1ID = $child->ID;
      } else if ($pillar2ID == 0) {
          $pillar2ID = $child->ID;
      } else if ($pillar3ID == 0) {
          $pillar3ID = $child->ID;
      } else if ($pillar4ID == 0) {
          $pillar4ID = $child->ID;
          break;
      }
    }
    
  
  
  $firstLink = get_permalink($pillar1ID);
  $secondLink = get_permalink($pillar2ID);
  $thirdLink = get_permalink($pillar3ID);
  $fourthLink = get_permalink($pillar4ID);
  
  $title = ($classcategory == 'people') ? 'PEOPLE' : 'PLANET';
  $description = ($classcategory == 'people') ? 'Our creative vision elevates our employees, our communities and our industry. Providing new opportunities upheld by deeply rooted values drives us forward, together.' : 'Our dedication to reduce our footprint while safeguarding and regenerating nature creates lasting positive change,  enriching vital ecosystems and uplifting communities. Through transparency, accountability and circular innovation we are acting for a better tomorrow.';
  $firstSquareTitle = ($classcategory == 'people') ? 'Empowering Equity,<br> Enhancing Community' : 'Transformation <br> through Reduction';
  $secondSquareTitle = ($classcategory == 'people') ? 'Chime In<br> for Gender Equality' : 'Materials Designed <br> for Disruption';
  $thirdSquareTitle = ($classcategory == 'people') ? 'Preserving Craft and Supporting <br> Suppliers for Tomorrow ' : 'Circularity Enhancing <br> a Modern Vision';
  $fourthSquareTitle = ($classcategory == 'people') ? 'Changemakers <br> Inspiring Change' : 'Regenerating <br> and Conserving Nature';


@endphp
<div class="container__impactreport2022 no-min-height">
  <div class="impactreport2022-wrapper">
    <div class="impactreport2022-grid">
      <div class="impactreport2022-left impactreport2022-{{ $classcategory }}">
          <div class="impactreport2022-left__title" role="heading" aria-level="1">
            {{ $title }}
          </div>
          <div class="impactreport2022-left__body">
            {{ $description }}
          </div>
      </div>
      <div class="impactreport2022-right">
        <div class="impactreport2022-right__top">
          <div class="pillarsquare first-pillar" data-js="box-link">
            <h2>
              @if ($classcategory == 'people')
                {!! $firstSquareTitle !!}
              @else
                {!! $thirdSquareTitle !!}
              @endif
            </h2>
            <a href="@if ($classcategory == 'people') {{ $firstLink }} @else {{ $thirdLink }} @endif" rel="link" aria-label="@if ($classcategory == 'people') Read more about {{ strip_tags($firstSquareTitle) }} @else Read more about {{ strip_tags($thirdSquareTitle) }} @endif" data-layer="Impact Report 2022;;{{ ucfirst($classcategory) }};;{{ $classcategory == 'people' ?  str_replace("<br>", "", $firstSquareTitle ) : str_replace("<br>", "", $thirdSquareTitle ) }}">
              Read more
              <div>
                <img class="arrow-read-more" src="/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/icons/arrow.svg" alt="" aria-hidden="true">
                <img class="arrow-read-more" src="/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/icons/arrow.svg" alt="" aria-hidden="true">
              </div> 
            </a>
          </div>
          <div class="pillarsquare second-pillar" data-js="box-link">
            <h2>
              {!! $secondSquareTitle !!} 
            </h2>
            <a href="{{ $secondLink }}" rel="link" aria-label="Read more about {{ strip_tags($secondSquareTitle) }}" data-layer="Impact Report 2022;;{{ ucfirst($classcategory) }};;{{ str_replace("<br>", "", $secondSquareTitle ) }}">
              Read more
              <div>
                <img class="arrow-read-more" src="/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/icons/arrow.svg" alt="" aria-hidden="true">
                <img class="arrow-read-more" src="/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/icons/arrow.svg" alt="" aria-hidden="true">
              </div>
            </a>
          </div>
        </div>
        <div class="impactreport2022-right__bottom">
          <div class="pillarsquare third-pillar" data-js="box-link">
            <h2>
              @if ($classcategory == 'people')
                {!! $thirdSquareTitle !!}
              @else
                {!! $fourthSquareTitle !!}
              @endif
            </h2>
            <a href="@if ($classcategory == 'people') {{ $thirdLink }} @else {{ $fourthLink }} @endif" rel="link" aria-label="@if ($classcategory == 'people') Read more about {{ strip_tags($thirdSquareTitle) }} @else Read more about {{ strip_tags($fourthSquareTitle) }} @endif" data-layer="Impact Report 2022;;{{ ucfirst($classcategory) }};;{{ $classcategory == 'people' ?  str_replace("<br>", "", $thirdSquareTitle ) : str_replace("<br>", "", $fourthSquareTitle ) }}">
              Read more
              <div>
                <img class="arrow-read-more" src="/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/icons/arrow.svg" alt="" aria-hidden="true">
                <img class="arrow-read-more" src="/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/icons/arrow.svg" alt="" aria-hidden="true">
              </div>
            </a>
          </div>
          <div class="pillarsquare fourth-pillar" data-js="box-link">
            <h2>
              @if ($classcategory == 'people')
                {!! $fourthSquareTitle !!}
              @else
                {!! $firstSquareTitle !!}
              @endif
            </h2>
            <a href="@if ($classcategory == 'people') {{ $fourthLink }} @else {{ $firstLink }} @endif" rel="link" aria-label="@if ($classcategory == 'people') Read more about {{ strip_tags($fourthSquareTitle) }} @else Read more about {{ strip_tags($firstSquareTitle) }} @endif" data-layer="Impact Report 2022;;{{ ucfirst($classcategory) }};;{{ $classcategory == 'people' ?  str_replace("<br>", "", $fourthSquareTitle ) : str_replace("<br>", "", $firstSquareTitle ) }}">
              Read more
              <div>
                <img class="arrow-read-more" src="/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/icons/arrow.svg" alt="" aria-hidden="true">
                <img class="arrow-read-more" src="/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/icons/arrow.svg" alt="" aria-hidden="true">
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection