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

@extends('layouts.app')

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

   <div data-scroll-section>
      <section class="home-hero">
      <div class="hero_background">
        <div class="hero_overlay"></div>
        <div class="hero_image" data-scroll>
          @hasfield('hero_background')
          <img id="teste" src="{{ get_field('hero_background')['sizes']['xlarge']}}" alt="@field('hero_background', 'alt')" />
          @endfield
        </div>
      </div>

      <div class="hero_logo"> @include('svg.logo')  @include('svg.logo-small') </div>
      <span class="hero_scroll"></span>
    </section>

    <section class="home-mission bg-black" id="mission">
      <div class="grid-container">
        <div class="grid-x grid-margin-x">
          <div class="cell small-12 medium-6 large-5 large-offset-1">
            <div class="parallax-wrapper image">
              <div class="image-container" >
                <div class="inner-image-container">
                @hasfield('mission_image')
                <img src="{{ get_field('mission_image')['sizes']['large']}}" alt="@field('mission_image', 'alt')" data-scroll data-scroll-speed="-1"/>
                @endfield
                </div>
              </div>
            </div>
          </div>

          <div class="cell small-12 medium-6 large-4 large-offset-1">
            <div class="mission__info">
              @hasfield('mission_uppertitle')
              <span class="uppertitle">@field('mission_uppertitle')</span>
              @endfield

              @hasfield('mission_title')
              <h2 class="title white" data-scroll data-scroll-call="animateText">@field('mission_title')</h2>
              @endfield

              @hasfield('mission_text')
              <p class="white" data-scroll data-scroll-call="animateText">@field('mission_text')</h2>
              @endfield
            </div>
          </div>

        </div>
      </div>
    </section>
   </div>

    <section class="home-factory bg-grey" id="factory" data-scroll-section> 
      <div class="grid-container">
        <div class="rotating-text" data-scroll data-scroll-repeat="true"> @include('svg.rotating-text') </div>
        
        <div class="grid-x grid-margin-x">
          <div class="cell medium-6 large-4 large-offset-1">
            <div class="factory__info">
              @hasfield('factory_uppertitle')
              <span class="uppertitle">@field('factory_uppertitle')</span>
              @endfield

              @hasfield('factory_title')
              <h2 class="title black" data-scroll data-scroll-call="animateText">@field('factory_title')</h2>
              @endfield

              @hasfield('factory_text')
              <p class="black" data-scroll data-scroll-call="animateText">@field('factory_text')</p>
              @endfield

              @hasfield('factory_link')
                <a class="btn" href="@field('factory_link', 'url')" target="@field('factory_link', 'target')"> @field('factory_link', 'title')  @include('svg.arrow-link') </a>
              @endfield
            </div>
          </div>

          <div class="cell medium-6 large-5 large-offset-1">
            <div class="parallax-wrapper image">
              <div class="image-container" >
                <div class="inner-image-container">
                  @hasfield('factory_image')
                  <img src="{{ get_field('factory_image')['sizes']['large']}}" alt="@field('factory_image', 'alt')" data-scroll data-scroll-speed="-1"/>
                  @endfield
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="home-production" id="production" data-scroll-section>
      <div class="grid-container">
        <div class="grid-x grid-margin-x">
          <div class="cell small-12 medium-10 medium-offset-1 large-9 large-offset-1">
            <div class="production__slideshow" data-scroll>
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  @hasfield('production_gallery')
                    @foreach (get_field('production_gallery') as $image)
                      <div class="swiper-slide prod-slide">
                        <div class="image-wrapper">
                          <img src="{{ $image['sizes']['large'] }}" alt="{{ $image['alt'] }}"/>
                        </div>
                        <span class="slide-caption"></span>
                      </div>
                    @endforeach
                  @endfield
                </div>

                <div class="prod-swiper-nav">
                  <div class="swiper-button-prev pro-nav-prev"> @include('svg.prev') </div>
                  <div class="swiper-button-next pro-nav-next">  @include('svg.next') </div>
                </div>
              </div>

            </div>
          </div>
        </div>

        <div class="grid-x grid-margin-x grid-absolute pe-none">
          <div class="cell small-12 medium-8 medium-offset-1 large-5 large-offset-6">
            <div class="production__info bg-black">
              @hasfield('production_uppertitle')
              <span class="uppertitle">@field('production_uppertitle')</span>
              @endfield

              @hasfield('production_title')
              <h2 class="title white" data-scroll data-scroll-call="animateText">@field('production_title')</h2>
              @endfield

              @hasfield('production_text')
              <p class="white" data-scroll data-scroll-call="animateText">@field('production_text')</h2>
              @endfield
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="home-services bg-grey" id="services" data-scroll-section>
      <div class="grid-container">
        <div class="grid-x grid-margin-x align-middle">
          <div class="cell medium-8 medium-offset-1 large-4 large-offset-1 float-center">
            <div class="services__info">
              @hasfield('services_uppertitle')
              <span class="uppertitle">@field('services_uppertitle')</span>
              @endfield

              @hasfield('services_title')
              <h2 class="title black" data-scroll data-scroll-call="animateText">@field('services_title')</h2>
              @endfield

              @hasfield('services_text')
              <p class="black" data-scroll data-scroll-call="animateText">@field('services_text')</h2>
              @endfield
            </div>
          </div>

          <div class="cell medium-10 medium-offset-1 large-5 large-offset-1">
            <div class="services__slideshow" data-scroll>
              <div class="swiper-pagination">
                <span class="active"></span> @include('svg.line') <span class="total"></span>
              </div>

              <div class="swiper-container">
                <div class="swiper-wrapper">
                  @hasfield('services_gallery')
                    @foreach (get_field('services_gallery') as $image)
                      <div class="swiper-slide ser-slide">
                        <div class="image-wrapper">
                          <img src="{{ $image['sizes']['large'] }}" alt="{{ $image['alt'] }}"/>
                        </div>
                        <span class="slide-caption"></span>
                      </div>
                    @endforeach
                  @endfield
                </div>

                <div class="ser-swiper-nav">
                  <div class="swiper-button-prev"> @include('svg.prev') </div>
                  <div class="swiper-button-next">  @include('svg.next') </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="home-testimonials bg-black" id="testimonials" data-scroll-section>
      <div class="grid-container">
        <div class="grid-x grid-margin-x">
          <div class="cell medium-8 medium-offset-2 large-10 large-offset-1">
            @hasfield('testimonials_uppertitle')
              <span class="uppertitle" data-scroll>@field('testimonials_uppertitle')</span>
            @endfield

            @hasfield('testimonials_title')
              <h2 class="title white" data-scroll data-scroll-call="animateText">@field('testimonials_title')</h2>
            @endfield

            <div class="testimonials__slideshow" data-scroll>
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  @fields('testimonials')
                  <div class="swiper-slide bg-white">
                    <span class="testimonials-icon">@include('svg.quote')</span>
                    <p class="black">@sub('text')</p>
                    <div class="testimonials-info">
                      <span class="testimonials-picture"><img src="{{ get_sub_field('picture')['sizes']['thumbnail']}}" /></span>
                      <span class="black">@sub('name')</span>
                      <span class="testimonials-label black">@sub('label')</span>
                    </div>
                  </div>
                  @endfields
                </div>

                <div class="swiper-pagination"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="home-contacts" id="contacts" data-scroll-section>
      <div class="grid-container">
        <div class="grid-x grid-margin-x">
          <div class="cell medium-5 medium-offset-1 large-3 large-offset-0">
            <div class="contacts__info">
              @hasfield('contacts_uppertitle')
              <span class="uppertitle">@field('contacts_uppertitle')</span>
              @endfield

              @hasfield('contacts_address')
              <span class="address black">@field('contacts_address')</span>
              @endfield

              @hasfield('contacts_email')
              <a class="email black" href="mailto:@field('contacts_email')"> @field('contacts_email') </a>
              @endfield

              @hasfield('contacts_phone')
              <a class="phone black" href="tel:@field('contacts_phone')"> @field('contacts_phone') </a>
              @endfield

              @hasfield('contacts_link')
              <a class="btn" href="@field('contacts_link', 'url')" target="@field('contacts_link', 'target')"> @field('contacts_link', 'title')  @include('svg.arrow-link') </a>
              @endfield
            </div>
          </div>

          <div class="cell medium-5 large-8 large-offset-1">
            <div class="contacts__maps" data-scroll>
              <div id="map" class="map"></div>
            </div>
          </div>
        </div>
      </div>
    </section>

    @include ('partials.map.gmaps')
    @include('partials.content-page')
  @endwhile
@endsection



