@extends('layouts.frontend')
@section('content')
<div class="home-video wf-section">
    <div class="container-full w-container">
        <div class="home-video-b">
            <div class="home-video-black-fade"></div>
            <div class="home-scroll-b">
                <div class="home-scroll-text">SCROLL</div>
                <div class="position-relative">
                    <div data-w-id="f3fff2ab-0515-4bb5-f9a9-d211ffe73099" class="home-scroll"></div>
                    <div class="home-scroll-line"></div>
                </div>
            </div>
            <div class="home-video-desktop w-background-video w-background-video-atom">
                @if($video = $page->getMedia('video'))
                <video id="5c465c01-d663-ef4b-e0c2-fe0a06abcb31-video" autoplay="" loop="" style="" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
                    <source src="{{ $video->path }}" data-wf-ignore="true">
                </video>
                @endif
            </div>
            <div class="home-video-mobile w-embed">
                @if($video = $page->getMedia('video'))
                <video width="100%" autoplay="" loop="" muted="" playsinline="">
                    <source src="{{ $video->path }}" type="video/mp4">
                </video>
                @endif
            </div>
        </div>
    </div>
</div>
<div class="section home-data wf-section">
    <div class="container w-container" data-ix="fade-from-bottom">
        <div class="home-data-row">
            <div class="home-data-col">
                <div class="ttitle founded">1990</div>
                <div class="grey-text">@__('Founded')</div>
            </div>
            <div class="home-data-col">
                <div class="ttitle projects display-inline">0</div>
                <div class="ttitle display-inline">+</div>
                <div class="grey-text">@__('Projects Delivered')</div>
            </div>
            <div class="home-data-col">
                <div class="ttitle cities display-inline">0</div>
                <div class="ttitle display-inline">+</div>
                <div class="grey-text">@__('Cities Served')</div>
            </div>
        </div>
    </div>
</div>
<div class="section pattern-bg wf-section">
    <div class="container w-container" data-ix="fade-from-bottom">
        <div class="ttitle">{{ $about_us_page->title }}</div>
        <div class="grey-text">{{ $about_us_page->sub_title }}</div>
        <div class="content-b">
            <div data-delay="4000" data-animation="slide" class="common-slider w-slider" data-autoplay="false" data-easing="ease" data-hide-arrows="false" data-disable-swipe="false" data-autoplay-limit="0" data-nav-spacing="3" data-duration="500" data-infinite="true">
                <div class="home-slider-mask w-slider-mask">
                    @foreach($page->about_us_sliders as $key => $slide)
                    <div class="home-about-slide w-slide">
                        <div class="home-about-text-b align-center">
                            <div class="home-about-num-text green-text">0{{ $key + 1 }}</div>
                            <div class="ttitle white-text">{{ $slide['title'] }}</div>
                            <div class="content-text white-text">{!! textarea($slide['description']) !!}</div>
                        </div>
                        <div class="home-about-img-b">
                            <div class="black-fade"></div>
                            @if(isset($slide['medias']['image'][0]))
                            <img src="{{ $slide['medias']['image'][0]['path'] }}" alt="" class="home-about-img">
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="slider-arrow-l w-slider-arrow-left" data-ix="slider-arrow">
                    <div class="slider-arrow"><img src="{{ asset_frontend('images/icon-arrow-pink-left.svg') }}" loading="lazy" alt="" class="slider-arrow-img"><img src="{{ asset_frontend('images/icon-arrow-white-left.svg') }}" loading="lazy" alt="" class="slider-arrow-img-hover" data-ix="opacity-0"></div>
                </div>
                <div class="slider-arrow-r w-slider-arrow-right" data-ix="slider-arrow">
                    <div class="slider-arrow"><img src="{{ asset_frontend('images/icon-arrow-pink.svg') }}" loading="lazy" alt="" class="slider-arrow-img"><img src="{{ asset_frontend('images/icon-arrow-white.svg') }}" loading="lazy" alt="" class="slider-arrow-img-hover" data-ix="opacity-0"></div>
                </div>
                <div class="display-none w-slider-nav w-round"></div>
            </div>
        </div>
    </div>
</div>

<div class="section pink-pattern-bg wf-section">
    <div class="container w-container" data-ix="fade-from-bottom">
        <div class="ttitle white-text">{{ $portfolio_page->title }}</div>
        <div class="grey-text white-text">{{ $portfolio_page->sub_title }}</div>
        <div class="content-b">
            <div class="home-portfolio-row">
                @foreach($project_types as $project_type)
                <div class="home-portfolio-col">
                    <a href="{{ $portfolio_page->getDetailUrl(['type' => $project_type->url_slug]) }}" class="home-portfolio-lnnk-b w-inline-block" data-ix="home-portfolio-lnnk-b">
                        <div class="position-relative">
                            <div class="img-black-fade"></div>
                            @if($image = $project_type->projects[0]->getMedia('top_image'))
                                <img src="{{ $image->getResizedImage(303, 454) }}" alt="" class="home-portfolio-img-saturation-0">
                                <img src="{{ $image->getResizedImage(303, 454) }}" alt="" class="home-portfolio-img" data-ix="opacity-0">
                            @endif
                        </div>
                        <div class="home-portfolio-text-b">
                            <div>{{ $project_type->title }}</div>
                            <div class="home-portfolio-arrow" data-ix="home-portfolio-arrow"><img src="{{ asset_frontend('images/icon-arrow-pink.svg') }}" loading="lazy" alt=""></div>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
<div class="section wf-section">
    <div class="container w-container" data-ix="fade-from-bottom">
        <div class="ttitle">{{ $client_page->title }}</div>
        <div class="grey-text">{{ $client_page->sub_title }}</div>
    </div>
    <div class="content-b">
        <div class="carousel-row">
            <div class="hide-from-tablet">
                @foreach($client_page->getMedia('logos', true)->split(2) as $splits)
                <div class="content-b">
                    <div class="carousel">
                        @foreach($splits as $logo)
                        <div class="slide"><img src="{{ $logo->getResizedImage(456, 174) }}" height="" loading="lazy" alt="" class="img-slide"></div>
                        @endforeach
                        
                    </div>
                </div>
                @endforeach
            </div>
            <div class="show-from-tablet">
                @foreach($client_page->getMedia('logos', true)->split(4) as $splits)
                <div class="content-b">
                    <div class="carousel">
                        @foreach($splits as $logo)
                        <div class="slide"><img src="{{ $logo->getResizedImage(456, 174)  }}" height="" loading="lazy" alt="" class="img-slide"></div>
                        @endforeach
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
<div class="section grey-bg wf-section">
    <div class="container w-container" data-ix="fade-from-bottom">
        <div class="home-news-b">
            <div class="home-news-row">
                <div class="home-news-title">
                    <div class="ttitle">@__('Latest News')</div>
                    <div class="grey-text">{{ $news_page->sub_title }}</div>
                </div>
                <div class="home-news-content">
                    <div class="home-news-content-row">
                        @foreach($news as $key => $_news)
                        <div class="home-news-content-col {{ $key == 0 ? 'first' : ''}}">
                            <div class="home-news-content-col-b">
                                <div class="home-news-content-col-l">
                                    <div class="grey-text">{{ $_news->date }}</div>
                                    <a href="{{ $_news->getDetailUrl() }}" class="news-title"><strong>{{ $_news->title }}</strong></a>
                                    <div>@editor($_news->short_description)</div>
                                    <div class="content-b-20">
                                        <a href="{{ $_news->getDetailUrl() }}" class="pink-outline-btn w-inline-block" data-ix="pink-outline-btn">
                                            <div class="btn-text">@__('read more')</div>
                                            <div class="pink-outline-btn-arrow-b">
                                                <div class="pink-outline-btn-arrow"><img src="{{ asset_frontend('images/icon-arrow-pink.svg') }}" loading="lazy" alt="" class="btn-arrow-img"></div>
                                                <div class="pink-outline-btn-arrow-hover" data-ix="opacity-0"><img src="{{ asset_frontend('images/icon-arrow-white.svg') }}" loading="lazy" alt="" class="btn-arrow-img"></div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <a href="{{ $_news->getDetailUrl() }}" class="home-news-content-col-r">
                                    @if($image = $_news->getMedia('listing_image'))
                                        <img src="{{ $image->getResizedImage(400, 400) }}" loading="lazy" alt="" class="news-img desktop">
                                        <img src="{{ $image->getResizedImage(400, 200) }}" loading="lazy" alt="" class="news-img mobile">
                                    @endif
                                </a>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')

    
     <script src="https://cdn.jsdelivr.net/npm/@srexi/purecounterjs/dist/purecounter_vanilla.js"></script>
  <script>
      new PureCounter({
        // Setting that can't' be overriden on pre-element
        selector: '.founded', // HTML query selector for spesific element
        // Settings that can be overridden on per-element basis, by `data-purecounter-*` attributes:
        start: 1990, // Starting number [unit]
        end: {{ $page->founded }}, // End number [unit]
        duration: 1, // The time in seconds for the animation to complete [seconds]
        delay: 10, // The delay between each iteration (the default of 10 will produce 100 fps) [miliseconds]
        once: true, // Counting at once or recount when the element in view [boolean]
        repeat: false, // Repeat count for certain time [boolean:false|seconds]
        decimals: 0, // How many decimal places to show. [unit]
        legacy: true, // If this is true it will use the scroll event listener on browsers
        filesizing: false, // This will enable/disable File Size format [boolean]
        currency: false, // This will enable/disable Currency format. Use it for set the symbol too [boolean|char|string]
        separator: false, // This will enable/disable comma separator for thousands. Use it for set the symbol too [boolean|char|string]
      });
      new PureCounter({
        // Setting that can't' be overriden on pre-element
        selector: '.projects', // HTML query selector for spesific element
        // Settings that can be overridden on per-element basis, by `data-purecounter-*` attributes:
        start: 0, // Starting number [unit]
        end: {{ $page->projects_delivered }}, // End number [unit]
        duration: 1, // The time in seconds for the animation to complete [seconds]
        delay: 10, // The delay between each iteration (the default of 10 will produce 100 fps) [miliseconds]
        once: true, // Counting at once or recount when the element in view [boolean]
        repeat: false, // Repeat count for certain time [boolean:false|seconds]
        decimals: 0, // How many decimal places to show. [unit]
        legacy: true, // If this is true it will use the scroll event listener on browsers
        filesizing: false, // This will enable/disable File Size format [boolean]
        currency: false, // This will enable/disable Currency format. Use it for set the symbol too [boolean|char|string]
        separator: false, // This will enable/disable comma separator for thousands. Use it for set the symbol too [boolean|char|string]
      });
      new PureCounter({
        // Setting that can't' be overriden on pre-element
        selector: '.cities', // HTML query selector for spesific element
        // Settings that can be overridden on per-element basis, by `data-purecounter-*` attributes:
        start: 0, // Starting number [unit]
        end: {{ $page->cities_served }}, // End number [unit]
        duration: 1, // The time in seconds for the animation to complete [seconds]
        delay: 10, // The delay between each iteration (the default of 10 will produce 100 fps) [miliseconds]
        once: true, // Counting at once or recount when the element in view [boolean]
        repeat: false, // Repeat count for certain time [boolean:false|seconds]
        decimals: 0, // How many decimal places to show. [unit]
        legacy: true, // If this is true it will use the scroll event listener on browsers
        filesizing: false, // This will enable/disable File Size format [boolean]
        currency: false, // This will enable/disable Currency format. Use it for set the symbol too [boolean|char|string]
        separator: false, // This will enable/disable comma separator for thousands. Use it for set the symbol too [boolean|char|string]
      });
    </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
  <script>
      $(document).ready(function() {
        $('.carousel').each(function(){
            $(this).bxSlider({
              pager: false,
              controls: false,
              speed: $(this).find('>*').length * 4300,
              useCSS: false,
              ticker: true,
              tickerHover: false,
              slideWidth: 190,
              responsive: true,
              minSlides: 1,
              maxSlides: 100,
              adaptiveHeight: true,
              autoDirection: 'next',
            });
        })
        
      });
    </script>

@endsection