@extends('frontend::layouts.master')

@section('content')
    @if (!empty($banners[0]))
        <div id="slider">
            <div class="rev_slider_wrapper fullscreen-container" id="rev_slider_18_1_wrapper" data-alias="polo-bar-caffe" style="background-color:transparent;padding:0px;">
                <div class="rev_slider fullscreenbanner" id="rev_slider_18_1" data-version="5.1">
                    <ul>
                        @foreach ($banners as $k => $b)
                            <li data-index="rs-{{ $k }}" data-transition="fade" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="{{ Module::asset('frontend:images/head-banner/1920x720.jpg') }}" data-rotate="0" data-saveperformance="off" data-title="{{ $b['type'] ?? '' }}_{{ $k }}" data-description="">
                                @if ($b['type'] == 'image')
                                    <img class="rev-slidebg" data-lazyload="{{ $b['src'] ?? '' }}" data-bgposition="center center" data-kenburns="on" data-duration="20000" data-ease="Power1.easeOut" data-scalestart="110" data-scaleend="100" data-rotatestart="0" data-rotateend="0" data-offsetstart="0 0" data-offsetend="0 0" data-no-retina src="{{ $b['src'] ?? '' }}" alt="{{ $b['name'] ?? '' }}" width="1900" height="1200">
                                    <div class="tp-caption tp-title  tp-resizeme" id="slide-88-layer-7" data-x="['left','left','left','left']" data-hoffset="['0','0','1','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-80','-80','-102','-102']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacity:0;s:1000;e:Power2.easeOut;" data-transform_out="opacity:0;s:1000;s:1000;" data-start="690" data-responsive_offset="on" style="z-index: 5; font-size: 40px; line-height: 40px;text-align:center;">
                                        {{ $b['name'] ?? '' }}
                                    </div>
                                    <div class="tp-caption tp-subtitle tp-resizeme" id="slide-88-layer-2" data-x="['left','left','left','left']" data-hoffset="['0','0','0','3']" data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" data-fontsize="['20','20','20','20']" data-width="['686','574','574','387']" data-height="none" data-whitespace="normal" data-transform_idle="o:1;" data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" data-transform_out="opacity:0;s:1000;s:1000;" data-mask_in="x:0px;y:0px;" data-start="700" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 6; max-width: 686px; white-space: normal; font-size: 16px; line-height: 30px; text-align:center;">
                                        {{ $b['desc'] ?? '' }}
                                    </div>
                                    @if (!empty($b['url']))
                                        <div class="tp-caption tp-link tp-resizeme" id="slide-88-layer-3" data-x="['left','left','left','left']" data-hoffset="['0','0','0','3']" data-y="['middle','middle','middle','middle']" data-voffset="['80','80','80','80']" data-fontsize="['20','20','20','20']" data-width="['686','574','574','387']" data-height="none" data-whitespace="normal" data-transform_idle="o:1;" data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" data-transform_out="opacity:0;s:1000;s:1000;" data-mask_in="x:0px;y:0px;" data-start="700" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 7; text-center">
                                            <a class="btn" href="{{ $b['url'] ?? 'javascript:void(0);' }}" target="_blank">
                                                Explore our complex and challenging projects
                                            </a>
                                        </div>
                                    @endif
                                @elseif ($b['type'] == 'youtube')
                                    <div class="rs-background-video-layer" data-ytid="{{ $b['src'] ?? '' }}" data-videowidth="100%" data-videoheight="100%" data-volume="mute" data-videopreload="preload" data-videoloop="loop" data-forceCover="1" data-aspectratio="16:9" data-autoplay="true" data-autoplayonlyfirsttime="false" data-nextslideatend="true" data-videoattributes="autoplay=1&mute=1&controls=0&showinfo=0&rel=0&loop=1&playlist={{ $b['src'] ?? '' }}&enablejsapi=1"></div>
                                @elseif ($b['type'] == 'video')
                                    <div class="rs-background-video-layer" data-volume="mute" data-videowidth="100%" data-videoheight="100%" data-videomp4="{{ asset($b['src'] ?? '') }}" data-videopreload="preload" data-videoloop="loop" data-forceCover="1" data-aspectratio="16:9" data-autoplay="true" data-autoplayonlyfirsttime="false" data-nextslideatend="true"></div>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                    <div class="tp-static-layers"></div>
                    <div class="tp-bannertimer" style="height: 5px; background-color: #ffffff;"></div>
                </div>
            </div>
        </div>
    @endif
    @if (!empty($about['detail']))
        <section class="sect-about" style="background: url('{{ Module::asset('frontend:images/bg-ab.png ') }}') no-repeat center center; background-size: cover;">
            <div class="container">
                <div class="row">
                    {!! $about['detail'] ?? '' !!}
                    @if (!empty($link_about['url']))
                        <div class="col-xs-12 col-sm-12 col-md-6"></div>
                        <div class="col-xs-12 col-sm-12 col-md-6 col-detail">
                            <a class="btn" data-animate="fadeInUp" href="{{ $link_about['url'] }}">
                                <span>{{ __('frontend::lang.btn.view_more') }}</span>
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </section>
    @endif
    @if (!empty($our_service_list[0]) || !empty($our_service['detail']))
        <section class="sect-service text-light" style="background: url('{{ Module::asset('frontend:images/bg-service.jpg') }}') no-repeat center center; background-size: cover;">
            <div class="container">
                <div class="row">
                    @if (!empty($our_service['detail']))
                        <div class="col-xs-12 col-sm-6 col-md-4 service-header">
                            {!! $our_service['detail'] ?? '' !!}
                            @if (!empty($link_our_service['url']))
                                <a class="btn" data-animate="fadeInUp" href="{{ $link_our_service['url'] }}">
                                    <span>{{ __('frontend::lang.btn.view_all') }}</span>
                                </a>
                            @endif
                        </div>
                    @endif
                    @if (!empty($our_service_list[0]))
                        @foreach ($our_service_list as $k => $s)
                            @php
                                $delay = ($k + 1) * 200;
                            @endphp
                            <div class="col-xs-12 col-sm-6 col-md-4 service-item" data-animate="fadeInUp" data-animate-delay="{{ $delay }}">
                                <div class="inner">
                                    <img class="service-icon" src="{{ $s['image'] ?? '' }}">
                                    <h4>{{ $s['name'] ?? '' }}</h4>
                                    <p>{{ $s['desc'] ?? '' }}</p>
                                    @if (!empty($link_our_service['url']))
                                        <a class="btn" href="{{ $link_our_service['url'] }}">
                                            <span>{{ __('frontend::lang.btn.view_more') }}</span>
                                        </a>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </section>
    @endif
    @if (!empty($statistics['status']) && (!empty($statistics['desc']) || !empty($statistics['text']) || !empty($statistics['detail']) || !empty($statistics['location'])))
        <section class="sect-statistic">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-4 cleft" data-animate="fadeInUp" data-animate-delay="200">
                        {!! $statistics['desc'] ?? '' !!}
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-8 cright">
                        <ul class="list list-statistic">
                            @if (!empty($statistics['text']))
                                <li data-animate="fadeInUp" data-animate-delay="400">
                                    <div class="counter-card-item">
                                        <div class="counter-card">
                                            <div class="counter bold">
                                                <span data-speed="1500" data-refresh-interval="10" data-to="{{ $statistics['count_experience'] ?? 0 }}" data-from="0" data-seperator="true"></span>
                                                <strong>+</strong>
                                            </div>
                                            {!! $statistics['text'] ?? '' !!}
                                        </div>
                                    </div>
                                </li>
                            @endif
                            @if (!empty($statistics['detail']))
                                <li data-animate="fadeInUp" data-animate-delay="600">
                                    <div class="counter-card-item">
                                        <div class="counter-card">
                                            <div class="counter bold">
                                                <span data-speed="3500" data-refresh-interval="50" data-to="{{ $statistics['count_customer'] ?? 0 }}" data-from="0" data-seperator="true"></span>
                                                <strong>+</strong>
                                            </div>
                                            {!! $statistics['detail'] ?? '' !!}
                                        </div>
                                    </div>
                                </li>
                            @endif
                            @if (!empty($statistics['location']))
                                <li data-animate="fadeInUp" data-animate-delay="800">
                                    <div class="counter-card-item">
                                        <div class="counter-card">
                                            <div class="counter bold">
                                                <span data-speed="2500" data-refresh-interval="50" data-to="{{ $statistics['count_team'] ?? 0 }}" data-from="100" data-seperator="true"></span>
                                                <strong>+</strong>
                                            </div>
                                            {!! $statistics['location'] ?? '' !!}
                                        </div>
                                    </div>
                                </li>
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    @endif
    @if (!empty($project_list[0]))
        <section class="sect-project">
            <div class="rev_slider_wrapper fullwidthbanner-container" id="rev_slider_477_1_wrapper" data-alias="clean-new-slider" data-source="gallery">
                <div class="rev_slider fullwidthabanner rev_slider_arrow-thin" id="rev_slider_477_1" data-version="5.4.1">
                    <ul>
                        @foreach ($project_list as $k => $p)
                            <li data-index="rs-{{ $k }}" data-transition="fadethroughtransparent" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="{{ $p['image'] ?? '' }}" data-rotate="0" data-saveperformance="off" data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
                                <img class="rev-slidebg" data-lazyload="{{ $p['image'] ?? '' }}" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="5" data-no-retina src="{{ $p['image'] }}" alt="{{ $p['name'] ?? '' }}">
                                <div class="tp-caption tp-shape tp-shapewrapper  tp-resizeme" id="slide-{{ $k }}-layer-1" data-x="['right','right','right','right']" data-hoffset="['30','30','30','20']" data-y="['top','top','top','top']" data-voffset="['30','30','30','20']" data-width="['430','430','350','250']" data-height="['540','540','540','410']" data-whitespace="nowrap" data-type="shape" data-responsive_offset="on" data-frames='[{"from":"z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacity:0;","speed":1400,"to":"o:1;","delay":500,"ease":"Power4.easeOut"},{"delay":"wait","speed":1000,"to":"auto:auto;","ease":"Power3.easeInOut"}]' data-textAlign="['left','left','left','left']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="z-index: 20;background-color: rgba(255, 255, 255, 0.79);border-color:rgba(0, 0, 0, 0);border-width:0px;"></div>
                                <div class="tp-caption PostSlider-Category   tp-resizeme" id="slide-{{ $k }}-layer-3" data-x="['right','right','right','right']" data-hoffset="['60','60','60','40']" data-y="['top','top','top','top']" data-voffset="['60','60','60','40']" data-fontsize="['15','15','13','13']" data-lineheight="['15','15','13','13']" data-width="['370','370','290','210']" data-height="none" data-whitespace="nowrap" data-type="text" data-responsive_offset="on" data-frames='[{"from":"y:20px;opacity:0;","speed":500,"to":"o:1;","delay":600,"ease":"Power3.easeOut"},{"delay":"wait","speed":1000,"to":"auto:auto;","ease":"Power3.easeInOut"}]' data-textAlign="['left','left','left','left']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="z-index: 21; min-width: 370px; max-width: 370px; white-space: nowrap;">
                                    {{ $p['categories'][0]['name'] ?? '' }}
                                </div>
                                <div class="tp-caption PostSlider-Title tp-resizeme" id="slide-{{ $k }}-layer-2" data-x="['right','right','right','right']" data-hoffset="['60','60','60','40']" data-y="['top','top','top','top']" data-voffset="['102','102','92','68']" data-fontsize="['40','40','30','20']" data-lineheight="['40','40','30','20']" data-width="['370','370','290','210']" data-height="none" data-whitespace="normal" data-type="text" data-responsive_offset="on" data-frames='[{"from":"y:20px;opacity:0;","speed":500,"to":"o:1;","delay":700,"ease":"Power3.easeOut"},{"delay":"wait","speed":1000,"to":"auto:auto;","ease":"Power3.easeInOut"}]' data-textAlign="['left','left','left','left']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="z-index: 22; min-width: 370px; max-width: 370px; white-space: normal;">
                                    {{ $p['name'] ?? '' }}
                                </div>
                                <div class="tp-caption PostSlider-Content tp-resizeme" id="slide-{{ $k }}-layer-4" data-x="['right','right','right','right']" data-hoffset="['60','60','60','40']" data-y="['top','top','top','top']" data-voffset="['265','265','215','154']" data-fontsize="['15','15','14','13']" data-lineheight="['23','23','21','20']" data-width="['370','370','290','210']" data-height="none" data-whitespace="normal" data-type="text" data-responsive_offset="on" data-frames='[{"from":"y:20px;opacity:0;","speed":500,"to":"o:1;","delay":800,"ease":"Power3.easeOut"},{"delay":"wait","speed":1000,"to":"auto:auto;","ease":"Power3.easeInOut"}]' data-textAlign="['left','left','left','left']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="z-index: 23; min-width: 370px; max-width: 370px; white-space: normal;">
                                    {{ $p['desc'] ?? '' }}
                                </div>
                                <a href="{{ $p['url'] ?? 'javascript:void(0);' }}">
                                    <div class="tp-caption PostSlider-Button rev-btn tp-resizeme" id="slide-{{ $k }}-layer-5" data-x="['left','left','left','left']" data-hoffset="['770','593','428','230']" data-y="['top','top','top','top']" data-voffset="['496','496','496','366']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="button" data-responsive_offset="on" data-frames='[{"from":"y:10px;opacity:0;","speed":500,"to":"o:1;","delay":900,"ease":"Power3.easeOut"},{"delay":"wait","speed":1000,"to":"y:10px;opacity:0;","ease":"Power3.easeInOut"},{"frame":"hover","speed":"200","ease":"Power1.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(0, 0, 0, 1.00);bg:rgba(238, 238, 238, 1.00);bw:1px 1px 1px 1px;"}]' data-textAlign="['left','left','left','left']" data-paddingtop="[1,1,1,1]" data-paddingright="[55,55,55,55]" data-paddingbottom="[1,1,1,1]" data-paddingleft="[23,23,23,23]" style="z-index: 24; white-space: nowrap;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;">
                                        <i class="pe-7s-comment" style="font-size:25px; float:left; margin-top:9px;margin-right:10px;"></i>
                                        {{ __('frontend::lang.btn.continue_reading') }}
                                    </div>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                    <div class="tp-bannertimer tp-bottom" style="height: 5px; background-color: rgba(255, 255, 255, 0.75);"></div>
                </div>
            </div>
        </section>
    @endif
@endsection