@extends('sg::layouts.main')

@section('content')
    @if(isset($videoHeader))
        <div class="container-fluid px-0 bg-dark">
            <div class="bl-video">
                <div class="relative">
                    <div class="left-bar">
                        <div class="relative-el d-flex align-items-center ">
                            <div class="content m-auto d-none d-md-block">
                                {!! isset($videoHeader->attributes['big-title'])?nl2br($videoHeader->attributes['big-title']):'' !!}
                            </div>
                            <div class="content m-auto d-md-none">{{$videoHeader->attributes['big-title']}}</div>
                            <span class="arrow toggleVideoArrow"></span>
                            <button class="button toggleVideo"></button>
                            <span class="middle-arrow"></span>
                            <div class="mute control off dis-none">
                                <i class="fa fa-volume-off d-none"></i><i class="fa fa-volume-up"></i>mute
                            </div>
                            <div class="stop control dis-none">
                                <i class="fa fa-stop"></i>stop
                            </div>
                        </div>
                    </div>
                    <div class="group-video flex-grow-1">
                        <div class="relative-el">
                            <img src="{{isset($videoHeader->attributes['image'])?$videoHeader->attributes['image']:''}}">
                            <div class="wrap-video">
                                @foreach($videoHeader->items as $item)
                                    <video id="video" src="{{$item[0]}}">

                                        <source src="{{$item[0]}}"
                                                type="video/webm">

                                        <source src="{{$item[1]}}"
                                                type="video/oog">

                                        Sorry, your browser doesn't support embedded videos.
                                    </video>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    <div class="container-fluid px-0 bg-white">
        <div class="bl-story" id="about">
            <div class="overview">
                <div class="container">
                    <div class="d-lg-flex flex-row">
                        <div class="big-title">
                            <h2 class="heading-h2">{{isset($ourStory->title)?$ourStory->title:''}}</h2>
                        </div>
                        <div class="detail flex-grow-1 regular text-justify" id="testElm">
                            {!! $ourStory->content !!}
                        </div>
                    </div>
                </div>
            </div>
            <div class="detail mt-5">
                <div class="container" id="ourStoryTrigger">
                    @foreach($ourStory->items as $key => $item)
                        <div class="item d-flex justify-content-end {{($key+1)%2 == 0?'justify-content-end':'justify-content-lg-start'}} {{$key+1}}" data-color="{{$item[2]}}">
                            <div class="child-bl bl-1">
                                <div>
                                    <div class="big-character">{{$item[0]}}</div>
                                    <div class="small-text">
                                        {!! nl2br($item[1]) !!}
                                    </div>
                                </div>
                                <div class="shape shape-{{$key+1}}"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid px-0 bl-structure">
        <div class="container">
            <div class="overview">
                <div class="big-title">
                    <h2 class="heading-h2" id="structureTrigger">{{$companyStructure->title}}</h2>
                </div>
                <div class="detail flex-grow-1 d-flex flex-column justify-content-center">
                    <div>
                        {!! $companyStructure->content !!}
                    </div>
                </div>
            </div>
            <div class="cards">
                <div class="d-lg-flex flex-row card-row">
                    @foreach($companyStructure->items as $key => $item)
                        <div class='cards__wrap' >
                            <div class="card" style="z-index:{{count($companyStructure->items) - $key}}" data-color="{{$item[0]}}" data-color-text="{{$item[1]}}">
                                <div class="content">
                                    <div class="logo pb-lg-3"><img src="{{$item[2]}}"></div>
                                    <div class="animate-height text-lg-right text-left">{!! isset($item[3])?nl2br($item[3]):'' !!}</div>
                                    <div class="link">
                                        <div style="position: relative; z-index: 1;">
                                            @if(isset($item[4]) && isset($item[5]))
                                                <a class="a" href="{{$item[4]}}" target="_blank" data-color="{{$item[1]}}">{{$item[5]}}</a>
                                            @endif
                                            @if(isset($item[6]) && isset($item[7]))<br/>
                                                <a class="a" href="{{$item[6]}}" target="_blank" data-color="{{$item[1]}}">{{$item[7]}}</a>
                                            @endif
                                        </div>
                                        <span class="circle">
                                            <span class="before"></span>
                                            <span class="after"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    @if(!empty($companyInvestment))
    <div class="container-fluid px-0 bl-investment">
        <div class="container">
            <div class="overview">
                <div class="big-title">
                    <h3 class='bl-investment__title' id="structureTrigger">{{$companyInvestment->title}}</h3>
                </div>
                <div class="detail flex-grow-1 d-flex flex-column justify-content-center">
                    <div>
                        {!! $companyInvestment->content !!}
                    </div>
                </div>
            </div>
            <div class="investment-row mt-lg-5 row">
                    @foreach($companyInvestment->items as $key => $item)
                    <div class='investment-col col-sm-6 col-lg-3'>
                        <div class="item">
                            <div class="content">
                                <div class="image">
                                    <img src="{{$item[0]}}">
                                </div>
                                <div style="min-height: 60px; display: flex; flex-direction: column; align-items: center;">
                                    @if(isset($item[1]) && isset($item[2]))
                                        <a class="title"  href="{{$item[1]}}" target="_blank">
                                            {{$item[2]}}
                                        </a>
                                    @endif
                                    @if(isset($item[3]) && isset($item[4]))
                                        <a class="title"  href="//{{$item[3]}}" target="_blank">
                                            {{$item[4]}}
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
            </div>
        </div>
    </div>
    @endif
    <div class="container-fluid px-0 bl-our-team py-5" id="our-team">
        <div class="container">
            <h2 class="heading-h2 mb-4">{{$ourTeam->title}}</h2>
            <div class="mb-4">
                {!! $ourTeam->content !!}
            </div>
            <div class="row px-5 px-sm-0" style="justify-content: center">
                @foreach($ourTeam->items as $key => $item)
                    <div class="col-sm-6 col-lg-3">
                        <div class="item">
                            <div class="wrap-image">
                                <div class="circle"></div>
                                <img class="lazy" data-src="{{$item[0]}}">
                                <div class="bottom"></div>
                            </div>
                            <div class="name mb-2 text-bold text-red">{{$item[1]}}</div>
                            <div class="position">{{$item[2]}}</div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <div class="container-fluid my-5 px-0 bl-moment" id="moments">
        <div class="container">
            <div class="d-lg-flex mb-5 ">
                <h2 class="heading-h2">{{$moment->title}}</h2>
                <div class="flex-grow-1"></div>
                <span class="view-full pr-5 d-lg-flex flex-column justify-content-center d-none d-lg-block" data-number="8">View full gallery</span>
            </div>
        </div>
        <div id="gallery">
            <div class="row">
                @foreach($moment->items as $key => $item)
                    @if($key < 10)
                        <div class="{{$item[0]}} mb-4 image-item d-none d-lg-block">
                            <div class="wrap-image">
                                <a href="{{$item[1]}}" data-lightbox="example-set" >
                                    <img class="lazy" data-src="{{$item[1]}}">
                                </a>
                            </div>
                        </div>
                    @else
                        <div class="{{$item[0]}} mb-4 image-item d-none">
                            <div class="wrap-image">
                                <a href="{{$item[1]}}" data-lightbox="example-set" >
                                    <img class="lazy" data-src="{{$item[1]}}">
                                </a>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
        <div class="d-lg-none">
            <div class="owl-carousel owl-theme owl-carousel-gallery">
                @foreach($moment->items as $key => $item)
                    <div class="wrap-image" data-index="{{$key}}">
                        <img class="lazy" data-src="{{$item[1]}}">
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <div class="container-fluid px-0 bl-core-value" id="core-value">
        <div class="container">
            <h2 class="heading-h2" id="coreValueTrigger">{{$coreValue->title}}</h2>
            <div class="core-values mt-3 mt-lg-5">
                @foreach($coreValue->items as $key => $item)
                    <div class="item">
                        <div class="bar d-flex">
                            <div class="number">{{$item[1]}}</div>
                            <div class="flex-grow-1"></div>
                            <div class="name">{{$item[0]}}</div>
                        </div>
                        <div class="square" data-color="{{$item[2]}}"></div>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="p-0 core-value-content py-4 p-xl-0">
            <div class="container d-flex flex-column">
                <div class="row flex-grow-1">
                    <div class="col-xl-6 d-flex flex-column justify-content-center py-xl-5 py-4">
                        <h2 class="heading-h2">{{isset($visionAndMission->attributes['vision-title'])?$visionAndMission->attributes['vision-title']:''}}</h2>
                        <div class="content">
                            {{isset($visionAndMission->attributes['vision-content'])?$visionAndMission->attributes['vision-content']:''}}
                        </div>
                    </div>
                </div>
                <div class="row flex-grow-1 justify-content-end">
                    <div class="col-xl-6 d-flex flex-column justify-content-start pb-4 pb-xl-5 pt-xl-3">
                        <h2 class="heading-h2">{{isset($visionAndMission->attributes['mission-title'])?$visionAndMission->attributes['mission-title']:''}}</h2>
                        <div class="content">
                            {{isset($visionAndMission->attributes['mission-content'])?$visionAndMission->attributes['mission-content']:''}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="h-space"></div>
        </div>
    </div>
    <div class="container-fluid px-0 bl-clients">
        <div class="block-title d-none d-lg-block">
        </div>
        <div class="container-fluid px-0">
            <div class="container">
                <h2 class="heading-h2">{{$bigClient->title}}</h2>
            </div>
        </div>
        <div class="map">
            <div class="container pb-5" id="serviceMap">
                <div class="map-box d-none d-lg-block">
                    <div>
                        <div id="groupLocation">
                            @foreach($bigClient->items as $key => $item)
                                <div class="location height-0">
                                    <div class="relative">
                                        <div class="f-30 dis-none btn-carousel carousel-{{$key}}" data-owl-filter=".group-{{$key}}">
                                            {{$item[0]}}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="my-3 d-lg-none">
                    <div class="client-mobile row">
                        @foreach($bigClient->items as $key => $item)
                            <div class="col-6 text-white client-group client-group-{{$key}} btn-carousel carousel-{{$key}}" data-owl-filter=".group-{{$key}}">{{$item[0]}}</div>
                        @endforeach
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-lg-8 col-12">
                        <div class="wrap-carousel">
                            <div class="owl-carousel owl-theme owl-carousel-client">
                                @foreach($bigClient->items as $key => $item)
                                    @foreach($item[1] as $img)
                                        @if(!empty($img))
                                            <div class="wrap-carousel-image group-{{$key}}">
                                                <img class="lazy" data-src="{{$img}}" height="100px">
                                            </div>
                                        @endif
                                    @endforeach
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid bl-service mt-5 px-0" id="service">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12">
                    <h2 class="heading-h2" id="serviceTrigger">{{$service->title}}</h2>
                    <div class="">
                        {!! $service->content !!}
                    </div>
                </div>
            </div>
        </div>
        <div class="gray mt-5 d-none d-lg-block">
            <div class="container">
                <div class="service-row">
                    @foreach($service->items as $key => $item)
                        <div class="item fake-active {{$key == 0?'active':''}} hover-svg">
                            <div class="content">
                                <div class="image">
                                    <div id="image-{{$key}}" class="image-svg" data-src="{{$item[1]}}">
                                    </div>
                                </div>
                                <div class="title d-flex">
                                    <div>{{$item[0]}}</div><div class="d-flex align-items-center">{{$item[2]}}</div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="service-tabs d-none d-lg-block">
            <div class="container">
                @foreach($service->items as $key => $item)
                    <div class="item {{$key == 0?'active':''}}">
                        <div class="title heading-h2">{{$item[2]}}</div>
                        <div class="content">
                            {!! nl2br(isset($item[3])?$item[3]:'') !!}
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="container px-0 pb-0 pb-lg-3 d-lg-none">
            <div class="mobile-service">
                <div id="accordion" class="service-row">
                    @foreach($service->items as $key => $item)
                        <div id="heading{{$key}}">
                            <h5 class="mb-0">
                                <div class="collapseTitle hover-svg" data-toggle="collapse" data-target="#collapse{{$key}}" aria-expanded="{{$key == 0?'true':'false'}}" aria-controls="collapse{{$key}}">
                                    <div class="image">
                                        <div id="imageM-{{$key}}" class="image-svg" data-src="{{$item[1]}}"></div>
                                    </div>
                                    <div class="title flex-grow-1 d-flex flex-column justify-content-center pl-3 pr-5">
                                        <div><div class="f-80-bold d-inline">{{$item[0]}}</div> {{$item[2]}}</div>
                                    </div>
                                </div>
                            </h5>
                        </div>

                        <div id="collapse{{$key}}" class="collapse {{$key == 0?'show':''}}" aria-labelledby="heading{{$key}}" data-parent="#accordion">
                            <div class="card-body">
                                <div class="title heading-h3 mb-2">{{$item[2]}}</div>
                                {!! nl2br($item[3]) !!}
                            </div>
                        </div>
                    @endforeach
                    @foreach($service->detailItems as $key => $item)
                            <div id="heading-{{$key}}" class="d-lg-none">
                                <h5 class="mb-0">
                                    <div class="collapseTitle hover-svg" data-toggle="collapse" data-target="#collapse-{{$key}}" aria-expanded="false" aria-controls="collapse-{{$key}}">
                                        <div class="image">
                                            <div id="image-svg-{{$key}}" class="image-svg" data-src="{{$item[3]}}"></div>
                                        </div>
                                        <div class="title flex-grow-1 d-flex flex-column justify-content-center pl-3 pr-5">
                                            <div><div class="f-80-bold d-inline">{{$item[0]}}</div> {{$item[1]}}</div>
                                        </div>
                                    </div>
                                </h5>
                            </div>

                            <div id="collapse-{{$key}}" class="d-lg-none collapse {{$key == 0?'show':''}}" aria-labelledby="heading-{{$key}}" data-parent="#accordion">
                                <div class="card-body">
                                    <div class="title heading-h3 mb-2">{{$item[1]}}</div>
                                    {!! nl2br($item[2]) !!}
                                </div>
                            </div>
                    @endforeach

                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid bl-trend px-0 d-none d-lg-block">
        <div class="container">
            <div class="row">
                @foreach($service->detailItems as $key => $item)
                    <div class="col-md-6 pr-md-5 text-justify mb-5">
                        <div class="row service-detail">
                            <div class="col-lg-4 col-4">
                                <div id="image--detail-{{$key}}" class="image-svg" data-src="{{isset($item[3])?$item[3]:''}}"></div>
                            </div>
                            <div class="col-12">
                                <div class="title my-3 my-lg-0 d-flex">
                                    <div>{{$item[0]}}</div>
                                    <div class="d-flex align-items-center">{{$item[1]}}</div>
                                </div>
                                <div class="content">{!! isset($item[2])?nl2br($item[2]):'' !!}</div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <div class="container-fluid bl-career px-0 mb-5" id="careers">
        <div class="d-flex flex-column">
            <div class="yellow flex-grow-1 d-flex flex-column justify-content-center">
                <div class="container">
                    <h2 class="text-white heading-h2">{{$careers->title}}</h2>
                    <div class="big-text text-white f-80-bold">{{$careers->content}}</div>
                </div>
            </div>
            <div class="red flex-grow-1 d-flex flex-column justify-content-center">
                <div class="container">
                    <div class="row justify-content-end">
                        <div class="col-md-6 text-white">
                            <div class="d-flex flex-column justify-content-end h-100">
                                <div class="mb-5 pt-3">
                                    <a class="view-careers-group" href="{{url('careers')}}">
                                        <span class="f-30-bold view-careers" style="position: relative">We are hiring! <span class="arrow">
                                                <span></span>
                                                <span></span>
                                                <span></span>
                                            </span></span>
{{--                                        <span style="position: relative">--}}
{{--                                            --}}
{{--                                        </span>--}}
{{--                                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 48 48">--}}
{{--                                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m19 12l12 12l-12 12"/>--}}
{{--                                        </svg>--}}
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 text-white">
                            <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5000">
                                <div class="carousel-inner">
                                    @foreach($careers->items as $key => $item)
                                        <div class="carousel-item {{$key == 0?'active':''}}">
                                            <div class="big-text text-white text-justify text-italic">{{$item[0]}}</div>
                                            <div class="f-30-bold mt-4">{{$item[1]}}</div>
                                        </div>
                                    @endforeach
                                </div>
                                <ol class="carousel-indicators">
                                    @foreach($careers->items as $key => $item)
                                        <li data-target="#myCarousel" data-slide-to="{{$key}}" class="{{$key == 0?'active':''}}"></li>
                                    @endforeach
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop