@extends('front.layout.app')
@section('content')
    <div class="preLoader">
        <div class="line"></div>
        <div class="counter">
            <span>0</span>
        </div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>



    <section class="mainbanner"
             style="background-image: url('{{ !empty($pageData['banner_banner_image']) ? asset('uploads/pages/' . $pageData['banner_banner_image']) : '' }}');  background-size: cover;
                 background-position: center;
                 background-repeat: no-repeat;">

        <div class="container">
            <div class="row text-center">
                <div class="col-md-12">
                    <div class="main-content">
                        <h2>
                            {{$pageData['banner_header_one'] ?? ''}}
                        </h2>
                        <h3>{{$pageData['banner_header_two'] ?? ''}}</h3>
                        <h1>{!! $pageData['banner_header_three'] ?? '' !!}</h1>
                        <p>{!! $pageData['banner_banner_description'] ?? '' !!}</p>
                        <div class="btn-group">
                            <a href="{{url($pageData['banner_button_one_link'] ?? '')}}"
                               class="themeBtn">{{$pageData['banner_button_one'] ?? ''}}<i
                                    class="fal fa-long-arrow-right"></i></a>
                            <a href="{{url($pageData['banner_button_two_link'] ?? '')}}"
                               class="themeBtn">{{$pageData['banner_button_two'] ?? ''}}<i
                                    class="fal fa-long-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="about-sec">
        <div class="container">
            <div class="row">
                <div class="col-md-5" data-aos="fade-right" data-duration="3000">
                    <figure class="about-img">
                        <img
                            src="{{ !empty($pageData['about_side_image']) ? asset('uploads/pages/' . $pageData['about_side_image']) : '' }}"
                            class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-7" data-aos="fade-left" data-duration="3000">
                    <div class="about-content">
                        <h3 class="subHead">{{$pageData['about_sub_header'] ?? ''}}</h3>
                        <h4 class="subText">{{$pageData['about_sub_text'] ?? ''}}</h4>
                        <h2 class="mainHead">{{$pageData['about_main_header'] ?? ''}}</h2>
                        {!! $pageData['about_description'] ?? '' !!}
                        <a href="{{url($pageData['about_button_link'] ?? '')}}"
                           class="themeBtn">{{$pageData['about_button'] ?? ''}}<i
                                class="fal fa-long-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="services-sec"
             style="background-image: url('{{ !empty($pageData['service_banner_image']) ? asset('uploads/pages/' . $pageData['service_banner_image']) : '' }}');  background-size: cover;
                 background-position: center;
                 background-repeat: no-repeat;">
        <div class="container-fluid p-0">
            <div class="services-top" data-aos="fade-up" data-duration="3000">
                <h3 class="subHead"> {{$pageData['service_sub_header'] ?? ''}}</h3>
                <h4 class="subText">{{$pageData['service_sub_text'] ?? ''}}</h4>
                <h2 class="mainHead">{{$pageData['service_main_header'] ?? ''}}</h2>
            </div>
            <div class="row" data-aos="fade-up" data-duration="3000">
                @foreach($services->where('type','service')->take(4) as $service)
                    <div class="col-md-3">
                        <div class="services-wrapp">
                            <figure class="services-img">
                                <img src="{{!empty($service->image) ? asset('uploads/services/'.$service->image) : ''}}"
                                     class="img-fluid" alt="">
                            </figure>
                            <div class="services-content">
                                <h3>{{$service->header ?? ''}}</h3>
                                <p>{{ Str::limit(strip_tags($service->description), 200) }}</p>
                                <a href="{{route('front.services.detail',['id' => $service->id])}}">View More <i
                                        class="fal fa-long-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                @endforeach

                <div class="col-md-12 text-center">
                    <a href="{{url($pageData['service_button_link'] ?? '')}}"
                       class="themeBtn m-auto">{{$pageData['service_button'] ?? ''}}<i
                            class="fal fa-long-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </section>

    <section class="energy-sec">
        <div class="container">
            <div class="energy-top" data-aos="fade-up" data-duration="3000">
                <h3 class="subHead"> {{$pageData['p_service_sub_header'] ?? ''}}</h3>
                <h4 class="subText"> {{$pageData['p_sub_text_header'] ?? ''}}</h4>
                <h2 class="mainHead">{{$pageData['p_service_main_heading'] ?? ''}}</h2>
            </div>
            <div class="row" data-aos="fade-up" data-duration="3000">
                <div class="col-md-4">
                    <div class="energy-box">
                        <figure class="energy-img">
                            <img
                                src="{{!empty($pageData['p_service_image_one']) ? asset('uploads/pages/'.$pageData['p_service_image_one']) : '' }}"
                                class="img-fluid" alt="">
                        </figure>
                        <div class="energy-content">
                            <h4>{{$pageData['p_service_sub_text_one'] ?? ''}}</h4>
                            <p>{!! $pageData['p_service_description_one'] ?? '' !!}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <figure class="energy-imag">
                        <img
                            src="{{!empty($pageData['p_service_image_two']) ? asset('uploads/pages/'.$pageData['p_service_image_two']) : '' }}"
                            class="img-fluid"
                            alt="">
                    </figure>
                </div>
                <div class="col-md-4">
                    <div class="energy-box">
                        <figure class="energy-img">
                            <img
                                src="{{!empty($pageData['p_service_image_three']) ? asset('uploads/pages/'.$pageData['p_service_image_three']) : '' }}"
                                class="img-fluid" alt="">
                        </figure>
                        <div class="energy-content">
                            <h4> {{$pageData['p_service_sub_text_three'] ?? ''}}</h4>
                            <p>{!! $pageData['p_service_description_three'] ?? '' !!}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="services-sec project-sec"
             style="background-image: url('{{ !empty($pageData['project_banner_image']) ? asset('uploads/pages/' . $pageData['project_banner_image']) : '' }}');  background-size: cover;
                 background-position: center;
                 background-repeat: no-repeat;">
        <div class="container-fluid p-0">
            <div class="services-top" data-aos="fade-up" data-duration="3000">
                <h3 class="subHead">{{$pageData['project_sub_header'] ?? ''}}</h3>
                <h4 class="subText">{{$pageData['project_sub_text'] ?? ''}}</h4>
                <h2 class="mainHead">{{$pageData['project_main_heading'] ?? ''}}</h2>
            </div>
            <div class="row" data-aos="fade-up" data-duration="3000">

                @foreach($services->where('type','project')->take(4) as $project)

                    <div class="col-md-3">
                        <div class="services-wrapp">
                            <figure class="services-img">
                                <img src="{{!empty($project->image) ? asset('uploads/services/'.$project->image) : ''}}"
                                     class="img-fluid" alt="">
                            </figure>
                            <div class="services-content">
                                <h3>{{$project->header ?? ''}}</h3>
                                <p>{!! \Illuminate\Support\Str::limit($project->description, 200) !!}</p>
                                <a href="{{route('front.career')}}">View More <i class="fal fa-long-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="team-sec">
        <div class="container">
            <div class="row">
                <div class="col-md-5" data-aos="fade-right" data-duration="3000">
                    <figure class="team-imag">
                        <img
                            src="{{!empty($pageData['team_image']) ? asset('uploads/pages/'.$pageData['team_image']) : '' }}"
                            class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-7" data-aos="fade-left" data-duration="3000">
                    <div class="team-content">
                        <h3 class="subHead">{{$pageData['team_sub_header'] ?? ''}}</h3>
                        <h4 class="subText">{{$pageData['team_sub_text'] ?? ''}}</h4>
                        <h2 class="mainHead">{{$pageData['team_main_heading'] ?? ''}}</h2>
                        <p>{!! $pageData['team_description'] ?? '' !!}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="partner-sec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-7" data-aos="fade-right" data-duration="3000">
                    <div class="partner-content">
                        <h3 class="subHead">{{$pageData['partner_sub_header'] ?? ''}}</h3>
                        <h4 class="subText">{{$pageData['partner_sub_text'] ?? ''}}</h4>
                        <h2 class="mainHead">{{$pageData['partner_main_heading'] ?? ''}}</h2>
                        {!! $pageData['partner_description'] ?? '' !!}

                    </div>
                </div>
                <div class="col-md-5" data-aos="fade-left" data-duration="3000">
                    <figure class="partner-img">
                        <img
                            src="{{!empty($pageData['partner_image']) ? asset('uploads/pages/'.$pageData['partner_image']) : '' }}"
                            class="img-fluid"
                            alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>

    <section class="build-sec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-7" data-aos="fade-right" data-duration="3000">
                    <div class="build-content">
                        <h2 class="mainHead"> {!! $pageData['build_main_header'] ?? '' !!}</h2>
                        <p> {!! $pageData['build_description'] ?? '' !!}</p>
                        <a href="{{url($pageData['build_button_link'] ?? '')}}"
                           class="themeBtn">{{$pageData['build_button'] ?? ''}} <i
                                class="fal fa-long-arrow-right"></i> </a>
                    </div>
                </div>
                <div class="col-md-5" data-aos="fade-left" data-duration="3000">
                    <figure class="build-img">
                        <img
                            src="{{!empty($pageData['build_image']) ? asset('uploads/pages/'.$pageData['build_image']) : '' }}"
                            class="img-fluid" alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>

    <section class="faq-sec"
             style="background-image: url('{{ !empty($pageData['faq_banner_image']) ? asset('uploads/pages/'.$pageData['faq_banner_image']) : '' }}'); background-size: cover; background-position: center; background-repeat: no-repeat">
        <div class="container">
            <div class="faqt-top" data-aos="fade-up" data-duration="3000">
                <h3 class="subHead">{{$pageData['faq_sub_header'] ?? ''}}</h3>
                <h2 class="mainHead">{{$pageData['faq_main_heading'] ?? ''}}</h2>
            </div>
            <div class="row">
                <div class="col-md-5" data-aos="fade-right" data-duration="3000">
                    <div class="faq-images">
                        <ul>
                            <li><a href=""><img
                                        src="{{!empty($pageData['faq_image1']) ? asset('uploads/pages/'.$pageData['faq_image1']) : '' }}"
                                        alt=""></a>
                            </li>
                            <li><a href=""><img
                                        src="{{!empty($pageData['faq_image2']) ? asset('uploads/pages/'.$pageData['faq_image2']) : '' }}"
                                        alt=""></a>
                            </li>
                        </ul>
                        <ul>
                            <li><a href=""><img
                                        src="{{!empty($pageData['faq_image3']) ? asset('uploads/pages/'.$pageData['faq_image3']) : '' }}"
                                        alt=""></a>
                            </li>
                            <li><a href=""><img
                                        src="{{!empty($pageData['faq_image4']) ? asset('uploads/pages/'.$pageData['faq_image4']) : '' }}"
                                        alt=""></a>
                            </li>
                        </ul>
                        <figure class="faq-sub">
                            <img
                                src="{{!empty($pageData['faq_sub_image']) ? asset('uploads/pages/'.$pageData['faq_sub_image']) : '' }}"
                                class="img-fluid"
                                alt="">
                        </figure>
                    </div>
                </div>
                <div class="col-md-7" data-aos="fade-left" data-duration="3000">
                    <div class="faq-main">
                        <div id="accordion">
                            @foreach($faqs as $index => $faq)
                                <div class="card">
                                    <div id="heading{{$index}}">
                                        <h5 class="mb-0 ">
                                            <button class="btn btn-link {{$index === 0 ? '' :'collapsed'}}"
                                                    data-toggle="collapse" data-target="#collapse{{$index}}"
                                                    aria-expanded="{{$index === 0 ? 'true' : 'false'}}"
                                                    aria-controls="collapse{{$index}}">
                                                {!! $faq->question ?? '' !!}
                                                <i class="fas fa-plus"></i>
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="collapse{{$index}}" class="collapse {{$index === 0 ? 'show' : ''}}"
                                         aria-labelledby="heading{{$index}}"
                                         data-parent="#accordion">
                                        <div class="card-body">
                                            <p>{!! $faq->answer ?? '' !!}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="blog-sec">
        <div class="container">
            <div class="blog-top" data-aos="fade-up" data-duration="3000">
                <h3 class="subHead"> {{$pageData['blog_sub_header'] ?? ''}}</h3>
                <h4 class="subText">{{$pageData['blog_sub_text'] ?? ''}}</h4>
                <h2 class="mainHead">{{$pageData['blog_main_header'] ?? ''}}</h2>
            </div>
            <div class="row" data-aos="fade-up" data-duration="3000">
                <div class="col-md-4">
                    <div class="blog-wrapp">
                        <figure class="blog-img">
                            <img src="{{asset('assets/images/blogimg1.webp')}}" class="img-fluid" alt="">
                        </figure>
                        <div class="bog-content">
                            <h3>The Rising Demand for Renewable Energy Projects</h3>
                            <a href="">Read more<i class="fal fa-long-arrow-right"></i> </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="blog-wrapp">
                        <figure class="blog-img">
                            <img src="{{asset('assets/images/blogimg2.webp')}}" class="img-fluid" alt="">
                        </figure>
                        <div class="bog-content">
                            <h3>Importance of Project Management in Large-Scale Energy Projects</h3>
                            <a href="">Read more<i class="fal fa-long-arrow-right"></i> </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="blog-wrapp">
                        <figure class="blog-img">
                            <img src="{{asset('assets/images/blogimg3.webp')}}" class="img-fluid" alt="">
                        </figure>
                        <div class="bog-content">
                            <h3>The Role of Civil Engineering in Renewable Energy Projects</h3>
                            <a href="">Read more <i class="fal fa-long-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection