@extends('layout.app')
@section('content')
{{-- @dd($slides) --}}
<div class="page-content">
    @if($slides != null && count($slides)>0)
    <!-- Slider -->
    <div class="main-slider style-two default-banner">
        <div class="tp-banner-container">
            <div class="tp-banner">
                <!-- START REVOLUTION SLIDER 5.4.1 -->
                <div id="rev_slider_1014_1_wrapper" class="rev_slider_wrapper fullscreen-container"
                    data-alias="typewriter-effect" data-source="gallery">
                    <div id="rev_slider_1014_1" class="rev_slider fullscreenbanner" style="display:none;"
                        data-version="5.4.1">
                        <ul>
                            <!-- SLIDE 1 -->
                            @foreach($slides as $key => $slide)

                            <li data-index="rs-{{$key+1}}000" data-transition="slidingoverlayhorizontal"
                                data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"
                                data-easein="default" data-easeout="default" data-masterspeed="default"
                                data-thumb="data:image/png;base64," 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="">

                                <!-- MAIN IMAGE -->
                                <img src="data:image/png;base64," alt=""
                                    data-bgposition="center bottom" data-bgfit="cover" data-bgrepeat="no-repeat"
                                    class="rev-slidebg" data-no-retina>
                                <!-- LAYERS -->

                                <!-- LAYER NR. 1 [ for overlay ] -->
                                <div class="tp-caption tp-shape tp-shapewrapper " id="slide-100-layer-1"
                                    data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                                    data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
                                    data-width="full" data-height="full" data-whitespace="nowrap" data-type="shape"
                                    data-basealign="slide" data-responsive_offset="off" data-responsive="off"
                                    data-frames='[
                                    {"from":"opacity:0;","speed":1000,"to":"o:1;","delay":0,"ease":"Power4.easeOut"},
                                    {"delay":"wait","speed":1000,"to":"opacity:0;","ease":"Power4.easeOut"}
                                    ]' 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: 12;background-color:rgba(0, 0, 0, 0.5);border-color:rgba(0, 0, 0, 0);border-width:0px;">
                                </div>

                                <!-- LAYER NR. 2 [ for title ] -->
                                <div class="tp-caption   tp-resizeme" id="slide-100-layer-2"
                                    data-x="['left','left','left','left']" data-hoffset="['47','60','60','100']"
                                    data-y="['top','top','top','top']" data-voffset="['180','180','180','180']"
                                    data-fontsize="['60','60','60','50']" data-lineheight="['70','70','70','60']"
                                    data-width="['700','700','700','700']" data-height="['none','none','none','none']"
                                    data-whitespace="['normal','normal','normal','normal']" data-type="text"
                                    data-responsive_offset="on" data-frames='[
                                    {"from":"y:100px(R);opacity:0;","speed":2000,"to":"o:1;","delay":500,"ease":"Power4.easeOut"},
                                    {"delay":"wait","speed":1000,"to":"y:-50px;opacity:0;","ease":"Power2.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: 13; 
                                    white-space: normal; 
                                    font-weight: 700; 
                                    color: rgba(255, 255, 255, 1.00);
                                    border-width:0px;">
                                    <span class="text-uppercase" style="font-family:'Roboto' ;"><span
                                            class="site-text-primary">{{$slide->text1}}</span>
                                </div>

                                <!-- LAYER NR. 3 [ for paragraph] -->
                                <div class="tp-caption  tp-resizeme" id="slide-100-layer-3"
                                    data-x="['left','left','left','left']" data-hoffset="['47','60','60','100']"
                                    data-y="['top','top','top','top']" data-voffset="['350','350','350','350']"
                                    data-fontsize="['18','18','18','30']" data-lineheight="['30','30','30','40']"
                                    data-width="['650','650','650','650']" data-height="['none','none','none','none']"
                                    data-whitespace="['normal','normal','normal','normal']" data-type="text"
                                    data-responsive_offset="on" data-frames='[
                                    {"from":"y:100px(R);opacity:0;","speed":2000,"to":"o:1;","delay":1000,"ease":"Power4.easeOut"},
                                    {"delay":"wait","speed":1000,"to":"y:-50px;opacity:0;","ease":"Power2.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: 13; 
                                    font-weight: 500; 
                                    color: rgba(255, 255, 255, 0.85);
                                    border-width:0px;">
                                    <span style="font-family:'Roboto';">{{$slide->text2}}</span>
                                </div>

                                <!-- LAYER NR. 4 [ for readmore botton ] -->
                                <div class="tp-caption tp-resizeme" id="slide-100-layer-4"
                                    data-x="['left','left','left','left']" data-hoffset="['48','60','60','100']"
                                    data-y="['top','top','top','top']" data-voffset="['430','430','450','500']"
                                    data-lineheight="['none','none','none','none']"
                                    data-width="['300','300','300','300']" data-height="['none','none','none','none']"
                                    data-whitespace="['normal','normal','normal','normal']" data-type="text"
                                    data-responsive_offset="on" data-frames='[ 
                                    {"from":"y:100px(R);opacity:0;","speed":2000,"to":"o:1;","delay":1500,"ease":"Power4.easeOut"},
                                    {"delay":"wait","speed":1000,"to":"y:-50px;opacity:0;","ease":"Power2.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:13; text-transform:uppercase; font-weight:700;">
                                    <a href="about-1.html" class="site-button button-lg  m-r15">Read more <i
                                            class="fa fa-angle-double-right"></i></a>
                                </div>

                            </li>
                            @endforeach


                        </ul>
                        <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
                    </div>
                </div>
                <!-- END REVOLUTION SLIDER -->
            </div>
        </div>
    </div>
    <!-- Slider END -->

    @endif


    @if($info)
    <!-- ABOUT COMPANY SECTION START -->
    <div class="section-full p-t80 p-b50 bg-gray">
        <div class="container">
            <div class="section-head text-center">
                <h2 class="text-uppercase">About Company </h2>
                <div class="wt-separator-outer">
                    <div class="wt-separator style-square">
                        <span class="separator-left site-bg-primary"></span>
                        <span class="separator-right site-bg-primary"></span>
                    </div>
                </div>
                <p>
                    {!!$info->fr_presentation_title!!}
                </p>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-5 col-md-12 m-b30">
                    <div class="about-com-pic-2">
                        <img src="data:image/png;base64," alt="">
                    </div>
                </div>
                <div class="col-lg-7 col-md-12">
                    <div class="about-types row">
                        @if($sectors != null && count($sectors)>0)
                        @foreach($sectors as $key => $sector)
                        <div class="col-lg-6 col-md-6 m-b30">
                            <div class="wt-icon-box-wraper bx-style-1 p-a30 center bg-white">
                                <div class="icon-lg site-text-primary m-b20">
                                    <span class="icon-cell site-text-primary"><img
                                            src="data:image/png;base64,"
                                            alt=""></span>
                                </div>
                                <div class="icon-content">
                                    <h5 class="wt-tilte text-uppercase">{{$sector->fr_name}}</h5>
                                    <p>{{$sector->fr_description}}</p>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @endif


                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ABOUT COMPANY SECTION END -->
    @endif

    @if($services)
    <!-- SERVICES START  -->
    <div class="section-full bg-white p-t80 p-b40 scale-bg-top scale-bg-bottom">
        <div class="container">
            <!-- IMAGE CAROUSEL START -->

            <!-- TITLE START -->
            <div class="section-head text-center">
                <h2 class="text-uppercase">Nos Services</h2>
                <div class="wt-separator-outer">
                    <div class="wt-separator style-square">
                        <span class="separator-left site-bg-primary"></span>
                        <span class="separator-right site-bg-primary"></span>
                    </div>
                </div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s.</p>
            </div>
            <!-- TITLE END -->

            <!-- CAROUSEL -->
            <div class="section-content">

                <div class="owl-carousel Home-services-carousel owl-btn-vertical-center">
                    @foreach($services as $key => $service)
                    <div class="item">
                        <div class="wt-box bg-white">
                            <div class="wt-media">
                                <a href="{{route('service',['id'=>$service->Items_Numbers])}}"><img
                                        src="data:image/png;base64," alt=""></a>
                            </div>
                            <div class="wt-info p-tb30">
                                <h4 class="wt-title m-t0 m-b5"><a
                                        href="{{route('service',['id'=>$service->Items_Numbers])}}">{{$service->fr_Name}}</a>
                                </h4>
                                <p>{!!$service->fr_overview!!}</p>
                            </div>
                        </div>
                    </div>
                    @endforeach



                </div>

            </div>
        </div>
    </div>
    <!-- SERVICES CONTENT END -->
    @endif

    @if($faqs != null && count($faqs)>0)
    <!-- SECTION CONTENT START -->
    <div class="section-full  p-t80 p-b50 bg-no-repeat bg-cover "
        style="background-image:url({{asset('pics/background/bg5.jpg')}});">

        <div class="container">

            <div class="row">
                <div class="col-lg-6 col-md-12">
                    <div class="wt-box graph-tabing tw-acd-wrap">
                        <div class="wt-accordion acc-site-bg-primary acc-has-bg" id="accordion6">
                            @foreach($faqs as $key => $faq)
                            <div class="panel wt-panel">

                                <div class="acod-head acc-actives">
                                    <h6 class="acod-title text-uppercase">
                                        <a data-bs-toggle="collapse" href="javascript:;"
                                            data-bs-target="#collapseOne{{$key}}"><i class="fa fa-globe"></i>
                                            {{$faq->fr_question}}
                                            <span class="indicator"><i class="fa fa-plus"></i></span>
                                        </a>
                                    </h6>
                                </div>

                                <div id="collapseOne{{$key}}" class="acod-body collapse show"
                                    data-bs-parent="#accordion6">
                                    <div class="acod-content p-tb15">{!!$faq->fr_answer!!}</div>
                                </div>

                            </div>
                            @endforeach

                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-12">
                    <div class="wt-box graph-part-right text-white">
                        <strong class="text-uppercase title-first display-block">Construction</strong>
                        <span class="text-uppercase site-text-primary display-block title-second">What are you looking
                            for?</span>
                        <p><strong>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                unknown printer took a galley of
                                type and scrambled it to make a type specimen book.</strong></p>
                        <ul class="list-check-circle primary">
                            <li>Simply dummy text of the Lorem Ipsum is printing and type setting. </li>
                            <li>Dummy text of the printing and typesetting industry. Text of the printing</li>
                            <li>And typesetting industry Lorem Ipsum has been. Ipsum has been the </li>
                            <li>Industry's standard dummy since the 1500s, </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- SECTION CONTENT  END -->
    @endif


    <!-- COMPANY DETAIL SECTION End -->
    @if($equipments != null && count($equipments)>0)
    <!-- WHY CHOOSE US SECTION START  -->
    <div class="section-full bg-gray p-t80 p-b50 bg-no-repeat bg-left-center"
        style="background-image:url({{asset('pics/background/why-choose-pic-2.png')}});">
        <div class="container">
            <!-- TITLE START-->
            <div class="section-head text-center">
                <h2 class="text-uppercase">Why Choose us</h2>
                <div class="wt-separator-outer">
                    <div class="wt-separator style-square">
                        <span class="separator-left site-bg-primary"></span>
                        <span class="separator-right site-bg-primary"></span>
                    </div>
                </div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s.</p>
            </div>
            <!-- TITLE END-->
            <div class="section-content">
                <div class="row">

                    @foreach($equipments as $key => $equipment)
                    <div class="col-lg-4 col-md-6 col-sm-6 m-b10 animate_line h-auto">
                        <div class="wt-icon-box-wraper  p-a30 center bg-white h-100">
                            <div class="icon-lg site-text-primary m-b20">
                                <a href="#" class="icon-cell"><img
                                        src="data:image/png;base64," alt=""></a>
                            </div>
                            <div class="icon-content">
                                <h5 class="wt-tilte text-uppercase">{{$equipment->fr_title}}</h5>
                                <p>{!!$equipment->fr_text!!}</p>
                            </div>
                        </div>
                    </div>
                    @endforeach


                </div>
            </div>
        </div>
    </div>
    <!-- WHY CHOOSE US SECTION END  -->
    @endif

    <!-- TESTIMONIAL SECTION START -->
    @if($avis != null && count($avis)>0)
        
        <div class="section-full p-t80 p-b50 overlay-wraper bg-parallax" data-stellar-background-ratio="0.5"
            style="background-image:url(images/background/bg9.jpg)">
            <div class="overlay-main bg-black opacity-07"></div>
            <div class="container">
                <!-- TITLE START -->
                <div class="section-head text-center text-white">
                    <h2 class="text-uppercase">Ce que nos clients disent</h2>
                    <div class="wt-separator-outer">
                        <div class="wt-separator style-square has-bg">
                            <span class="separator-left site-bg-primary"></span>
                            <span class="separator-right site-bg-primary"></span>
                        </div>
                    </div>

                </div>
                <!-- TITLE END -->

                <!-- TESTIMONIAL 1 START ON BACKGROUND -->
                <div class="section-content">
                    <div class="owl-carousel testimonial-one m-b30">
                        @foreach($avis as $key => $msg)
                            
                        <div class="item">
                            <div class="testimonial-1 testimonial-bg">
                                <div class="testimonial-pic  radius shadow"><img src="data:image/png;base64,"
                                        width="100" height="100" alt=""></div>
                                <div class="testimonial-detail">
                                    <strong class="testimonial-name">{{$msg->Name}}</strong>
                                    <span class="testimonial-position">{{$msg->City}}</span>
                                </div>
                                <div class="testimonial-text">
                                    <p> {!!$msg->fr_Message!!}</p>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        
                    </div>
                </div>
            </div>
        </div>
    @endif
    <!-- LATEST BLOG SECTION START -->
    @if(count($blogs)>0 && $blogs != null)
        <!-- LATEST BLOG SECTION START -->
        <div class="section-full latest-blog bg-gray p-t80 p-b50 ">
            <div class="container">
                <!-- TITLE -->
                <div class="section-head text-center">
                    <h2 class="text-uppercase">Derniers posts de notre blog</h2>
                    <div class="wt-separator-outer">
                        <div class="wt-separator style-square">
                            <span class="separator-left site-bg-primary"></span>
                            <span class="separator-right site-bg-primary"></span>
                        </div>
                    </div>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                        industry's standard dummy text ever since the 1500s.</p>
                </div>
                <!-- TITLE -->

                <div class="section-content ">
                    <div class="row equal-wraper">
                        @foreach($blogs as $key => $blog)
                        @php
                        $date_time = $blog->creation_date;
                        $nouveau_format = \Carbon\Carbon::parse($date_time);
                        @endphp
                        <div class="col-lg-6 col-md-12">
                            @if ($key==0)
                            <div class="blog-post latest-blog-3 overlay-wraper post-overlay date-style-2 bg-cover bg-no-repeat bg-top-center"
                                style="background-image:url(data:image/png;base64,);">
                                <div class="overlay-main opacity-03 bg-secondry"></div>
                                <div class="wt-post-info p-a30 p-b20 text-white">
                                    <div class="post-overlay-position">
                                        <div class="wt-post-title ">
                                            <h3 class="post-title"><a href="{{route('blog.detail',['id'=>$blog->id_article])}}"
                                                    class="text-white text-capitalize">{{$blog->article_tittle}}</a></h3>
                                        </div>
                                        <div class="wt-post-meta ">
                                            <ul>
                                                <li class="post-date"><i class="fa fa-calendar"></i><span>{{ $nouveau_format->isoFormat('MMMM D, YYYY', 'fr') }}</span>
                                                </li>
                                                <li class="post-author"><i class="fa fa-user"></i>By <a
                                                        href="{{route('blog.detail',['id'=>$blog->id_article])}}">{{$blog->created_by}}</a> </li>
                                                
                                            </ul>
                                        </div>
                                        <div class="wt-post-text">
                                            {!! Str::limit($blog->article, 100) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @else
                            <div class="blog-post latest-blog-3 blog-md date-style-2 clearfix">
                                <div class="wt-post-media wt-img-effect zoom-slow">
                                    <a href="{{route('blog.detail',['id'=>$blog->id_article])}}"><img src="data:image/png;base64," alt=""></a>
                                </div>
                                <div class="wt-post-info">
                                    <div class="wt-post-title ">
                                        <h4 class="post-title font-weight-800"><a href="{{route('blog.detail',['id'=>$blog->id_article])}}">{{$blog->article_tittle}}</a></h4>
                                    </div>
                                    <div class="wt-post-meta ">
                                        <ul>
                                            <li class="post-date"> <i class="fa fa-calendar"></i><span>{{ $nouveau_format->isoFormat('MMMM D, YYYY', 'fr') }}</span>
                                            </li>
                                            <li class="post-author"><i class="fa fa-user"></i><a href="{{route('blog.detail',['id'=>$blog->id_article])}}">By
                                                    <span>{{$blog->created_by}}</span></a> </li>
                                            
                                        </ul>
                                    </div>
                                    <div class="wt-post-text">
                                        {!! Str::limit($blog->article, 100) !!}
                                    </div>

                                </div>
                            </div>
                            @endif

                        </div>
                        @endforeach

                    </div>
                </div>
            </div>
        </div>
    @endif
    <!-- LATEST BLOG SECTION END -->

    <!-- OUR TEAM MEMBER SECTION START -->
    @if($teams != null && count($teams)>0)
        
        <div class="section-full text-center wt-our-team bg-white p-t80 p-b50 bg-no-repeat bg-bottom-center"
            style="background-image:url({{asset('pics/background/bg-8.jpg')}});">
            <div class="container">

                <!-- TITTLE START -->
                <div class="section-head text-center">
                    <h2 class="text-uppercase">Notre équipe</h2>
                    <div class="wt-separator-outer">
                        <div class="wt-separator style-square">
                            <span class="separator-left site-bg-primary"></span>
                            <span class="separator-right site-bg-primary"></span>
                        </div>
                    </div>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                        industry's standard dummy text ever since the 1500s.</p>
                </div>
                <!-- TITLE END -->

                <div class="section-content">
                    <div class="row">

                        @foreach($teams as $key => $team)
                            
                            <div class="col-md-4 col-sm-4  m-tb15">
                                <div class="wt-team-one bg-gray-light">
                                    <div class="wt-team-media">
                                        <a href="#"><img src="data:image/png;base64," class="" alt="" style="height: 366px;width:366px;object-fit:contain"></a>
                                    </div>
                                    <div class="wt-team-info text-center bg-gray-light-1 p-a20">
                                        <h4 class="wt-team-title"><a href="our-team-detail.html">{{$team->name}}</a></h4>
                                        <p>{{$team->role}}</p>
                                        <ul class="social-icons social-square social-dark">
                                            <li><a href="{{$team->facebook_link}}" class="fa fa-facebook"></a></li>
                                            <li><a href="{{$team->twitter_link}}" class="fa fa-twitter"></a></li>
                                            <li><a href="{{$team->linkedin_link}}" class="fa fa-linkedin"></a></li>
                                            <li><a href="{{$team->google_link}}" class="fa-brands fa-google"></a></li>
                                            <li><a href="{{$team->email}}" class="fa-regular fa-envelope"></a></li>
                                            <li><a href="{{$team->phone}}" class="fa-solid fa-phone"></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        

                    </div>
                </div>

            </div>
        </div>
    @endif
    <!-- OUR TEAM MEMBER SECTION END -->

    <!-- OUR CLIENT SLIDER START -->
    @if($partners != null && count($partners)>0)
        
        <div class="section-full overlay-wraper bg-cover bg-repeat-x site-bg-primary"
            style="background-image:url({{asset('pics/background/bg7.png')}})">
            <div class="container">

                <!-- IMAGE CAROUSEL START -->
                <div class="section-content">
                    <div class="owl-carousel home4-logo-carousel">

                        @foreach($partners as $key => $partner)
                            <div class="item">
                                <div class="ow-client-logo">
                                    <div class="client-logo wt-img-effect on-color">
                                        <a href="#"><img src="data:image/png;base64," alt="" style="height: 79px;width:144px;display: inline-block;"></a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <!-- IMAGE CAROUSEL START -->
            </div>

        </div>
    @endif
    <!-- OUR CLIENT SLIDER END -->

</div>
@endsection