@extends('web.layouts.layout')

@section('content')

    <main>
        <!-- Start Header -->
        <header class="header section">
            <div class="container">
                <div class="col-lg-5">
                    <div class="text_box">
                        <h5 class="subtitle color-primary fw-bold mb-4 wow fadeInDown">{{ $bannerPage->currentDescription->page_title }}</h5>
                        <h1 class="title fw-bold mb-4 wow focus-in-expand-fwd">
                            {{ $bannerPage->currentDescription->title }}
                        </h1>
                        <p class="p wow fadeInUp">
                            {{ wordLimit($bannerPage->currentDescription->description, 50) }}
                        </p>
                    </div>
                </div>
                <div class="statics_wrapper mt-5">
                    <div class="static_row overflow_hidden row col-lg-11 m-auto">
                        <div class="col-lg-3 col-6">
                            <div class="static_card bg_primary wow fadeInUp">
                                <div class="zi-5">
                                    <h1 class="counter fw-bold color-secondary mb-4">{{ $bannerPage->meta['users']['statistics'] }}</h1>
                                    <h3 class="label color-secondary mb-0">{{ $bannerPage->meta['users'][getCurrentLocale()] }}</h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-6">
                            <div class="static_card mt-5 bg_gray wow fadeInDown" data-wow-delay=".2s">
                                <div class="zi-5">
                                    <h1 class="counter fw-bold color-primary mb-4">{{ $bannerPage->meta['services']['statistics'] }}</h1>
                                    <h3 class="label color-primary mb-0">{{ $bannerPage->meta['services'][getCurrentLocale()] }}</h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-6">
                            <div class="static_card bg_primary wow fadeInUp" data-wow-delay=".4s">
                                <div class="zi-5">
                                    <h1 class="counter fw-bold color-secondary mb-4">{{ $bannerPage->meta['employees']['statistics'] }}</h1>
                                    <h3 class="label color-secondary mb-0">{{ $bannerPage->meta['employees'][getCurrentLocale()] }}</h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-6">
                            <div class="static_card mt-5 bg_gray wow fadeInDown" data-wow-delay=".6s">
                                <div class="zi-5">
                                    <h1 class="counter fw-bold color-primary mb-4">{{ $bannerPage->meta['projects']['statistics'] }}</h1>
                                    <h3 class="label color-primary mb-0">{{ $bannerPage->meta['projects'][getCurrentLocale()] }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                    <img src="{{ getImage($bannerPage->image) }}"
                         alt="{{ $bannerPage->currentDescription->page_title }}" class="sec-img"/>
                    <a href="{{ $bannerPage->meta['banner_url'] }}" class="butn white_butn color-primary fs-6 fw-bold wow zoomIn">
                        <i class="bi bi-arrow-right ms-0 me-3"></i> {{ __('main.read_more') }}
                    </a>
                </div>
            </div>
            <img src="{{asset('assets/web/images/pattern-1.png')}}" alt="banner photo" class="pattern"/>
        </header>

        <!-- Start section -->
        <section class="about-sec section">
            <div class="container">
                <div class="main_inner">
                    <div class="row justify-content-around align-items-center">
                        <div class="col-lg-6">
                            <div class="text_box">
                                <h5 class="subtitle color-primary fw-bold mb-4 wow fadeInDown">{{ $aboutUsPage->currentDescription->page_title }}</h5>
                                <h1 class="title fw-bold mb-4 wow focus-in-expand-fwd">
                                    {{ $aboutUsPageTitleArr[0] }} <span class="color-primary">{{ $aboutUsPageTitleArr[1] }}</span>
                                </h1>
                                <p class="p wow fadeInUp">
                                    {{ wordLimit($aboutUsPage->currentDescription->description, 60) }}
                                </p>
                                <a href="{{ route('aboutUs') }}" class="butn white_butn color-primary fs-6 fw-bold wow zoomIn mt-5">
                                    <i class="bi bi-arrow-right ms-0 me-3"></i> {{ __('main.read_more') }}
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-5">
                            <div class="img_box">
                                <img src="{{ getImage($aboutUsPage->image) }}"
                                     alt="{{ $aboutUsPage->currentDescription->page_title }}" class="sec-img"/>
                                <a href="{{ $aboutUsPage->video_type == 'url' ? $aboutUsPage->video_url : asset($aboutUsPage->video_file) }}"
                                   class="vid_icon" data-fancybox>
                                    <i class="bi bi-play-fill"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main_inner py-5 mt-5">
                    <div class="row justify-content-around align-items-center overflow_hidden">
                        <div class="col-lg-7">
                            <p class="txt fw-bold mb-0 lh-base wow fadeInUp">
                                {!! changeWordStyleInText(
                                            ['T-Connect'],
                                            $settings['text'][getCurrentLocale()]['contact_us_home_text'] ?? "",
                                            '<b class="color-primary">%s</b>'
                                        ) !!}
                            </p>
                        </div>
                        <div class="col-lg-4">
                            <a href="{{ route('contact.index') }}" class="butn primary_butn m-auto py-3 fs-5 fw-bold wow zoomIn">
                                <i class="bi bi-arrow-right ms-0 me-3"></i> {{ __('main.ask_for_solutions') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="about-cards section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="text_box">
                            <h5 class="subtitle color-primary fw-bold mb-4 wow fadeInDown">{{ $page_10->currentDescription->page_title }}</h5>
                            <h1 class="title fw-bold mb-4 wow focus-in-expand-fwd">
                                {{ $page10TitleArr[0] }} <br> <span class="color-primary">{{ $page10TitleArr[1] }}</span>
                            </h1>
                            <p class="p wow fadeInUp">
                                {{ strip_tags($page_10->currentDescription->description) }}
                            </p>
                        </div>
                        <div class="about_card wow fadeInUp">
                            <img src="{{ getImage($page_2->image) }}" alt="{{ $page_2->currentDescription->page_title }}" class="icon"/>
                            <h5 class="title fw-bold color-dark mb-3">{{ $page_2->currentDescription->page_title }}</h5>
                            <p class="p">
                                {{ strip_tags($page_2->currentDescription->description) }}
                            </p>
                        </div>
                        <div class="about_card bg_lightblue4 wow fadeInRight">
                            <img src="{{ getImage($page_4->image) }}" alt="{{ $page_4->currentDescription->page_title }}" class="icon"/>
                            <h5 class="title fw-bold color-dark mb-3">  {{ $page_4->currentDescription->page_title }} </h5>
                            <p class="p">
                                {{ strip_tags($page_4->currentDescription->description) }}
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="about_card bg_lightblue col-lg-9 wow fadeInUp">
                            <img src="{{ getImage($page_3->image) }}" alt="{{ $page_3->currentDescription->page_title }}" class="icon"/>
                            <h5 class="title fw-bold color-dark mb-3"> {{ $page_3->currentDescription->page_title }} </h5>
                            <p class="p">
                                {{ strip_tags($page_3->currentDescription->description) }}
                            </p>
                        </div>
                        <div class="about_card wow fadeInRight">
                            <img src="{{ getImage($page_5->image) }}" alt="{{ $page_5->currentDescription->page_title }}" class="icon"/>
                            <h5 class="title fw-bold color-dark mb-3">{{ $page_5->currentDescription->page_title }}</h5>
                            <p class="p">
                                {{ strip_tags($page_5->currentDescription->description) }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="services-sec section">
            <div class="container">
                <div class="sec_text text-center mb-5">
                    <h5 class="subtitle color-primary fw-bold mb-4 wow fadeInDown">{{ __('services.our_services') }}</h5>
                    <h1 class="title fw-bold  wow focus-in-expand-fwd">
                        @php
                            $featuresTxtArr = splitStringToEqualParts(__('main.discover_more_features'), 2);
                        @endphp
                        {{ $featuresTxtArr[0] }}  <span class="color-primary">{{ $featuresTxtArr[1] }}</span>
                    </h1>
                </div>
                <div class="row">
                    @php $servicesSecClass = ['', 'bg_lightblue2', 'bg_lightblue', '']; @endphp

                    @foreach($services as $service)
                        <div class="col-lg-6">
                            <div class="serv_card {{ $servicesSecClass[$loop->index] ?? '' }} wow fadeInUp">
                                <div class="zi-5">
                                    <img src="{{ getImage($service->image) }}" alt="{{ $service->currentDescription->name }}" class="serv_img"/>
                                    @php $serviceNameArr = splitStringToEqualParts($service->currentDescription->name, 2) @endphp
                                    <h4 class="title mb-4 fw-bold">{{ $serviceNameArr[0] }} <span class="color-primary">{{ $serviceNameArr[1] }}</span> </h4>
                                    <p class="p">
                                        {{ wordLimit($service->currentDescription->description, 50) }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="projects-sec section">
            <div class="container">
                <div class="sec_text text-center mb-5">
                    <h5 class="subtitle color-primary fw-bold mb-4 wow fadeInDown"> {{ __('projects.projects') }} </h5>
                    @php $projectsHeadArr = splitStringToEqualParts(__('main.amazing_work_done'), 2) @endphp
                    <h1 class="title fw-bold  wow focus-in-expand-fwd">
                        {{ $projectsHeadArr[0] }}  <span class="color-primary">{{ $projectsHeadArr[1] }}</span>
                    </h1>
                </div>
            </div>

            @if(isset($projects[0]))
                <div class="proj_item st_child mt-0">
                    <div class="container-fluid px-0">
                        <div class="row align-items-center">
                            <div class="col-lg-6">
                                <img src="{{ getImage($projects[0]->image) }}" alt="{{ $projects[0]->currentDescription->name }}" class="sec-img wow fadeInUp"/>
                            </div>
                            <div class="col-lg-6">
                                <div class="text_box col-lg-7 mb-5 pb-5 m-auto">
                                    <h1 class="title text-white fw-bold mb-4 wow focus-in-expand-fwd">
                                        {{ $projects[0]->currentDescription->name }}
                                    </h1>
                                    <p class="p fs-6 text-white-50 wow fadeInUp">
                                        {{ wordLimit($projects[0]->currentDescription->description, 30) }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            @if(isset($projects[1]))
                <div class="proj_item nd_child">
                    <div class="container-fluid px-0">
                        <div class="row align-items-center">
                            <div class="col-lg-6">
                                <div class="text_box col-lg-7 mb-5 pb-5 m-auto">
                                    <h1 class="title color-primary fw-bold mb-4 wow focus-in-expand-fwd">
                                        {{ $projects[1]->currentDescription->name }}
                                    </h1>
                                    <p class="p fs-6 wow fadeInUp">
                                        {{ wordLimit($projects[1]->currentDescription->description, 30) }}
                                    </p>
                                </div>
                            </div>
                            <div class="col-lg-6 order_md_1">
                                <img src="{{ getImage($projects[1]->image) }}" alt="{{ $projects[1]->currentDescription->name }}" class="sec-img wow fadeInUp"/>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            @if(isset($projects[2]))
                <div class="proj_item rd_child">
                    <div class="container-fluid px-0">
                        <div class="row align-items-center">
                            <div class="col-lg-6">
                                <img src="{{ getImage($projects[2]->image) }}" alt="{{ $projects[2]->currentDescription->name }}" class="sec-img wow fadeInUp"/>
                            </div>
                            <div class="col-lg-6">
                                <div class="text_box col-lg-7 mb-5 pb-5 m-auto">
                                    <h1 class="title color-primary fw-bold mb-4 wow focus-in-expand-fwd">
                                        {{ $projects[2]->currentDescription->name }}
                                    </h1>
                                    <p class="p fs-6 wow fadeInUp">
                                        {{ wordLimit($projects[2]->currentDescription->description, 30) }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <a href="{{ route('project.index') }}" class="butn white_butn color-primary fs-6 fw-bold wow zoomIn m-auto mt-5">
                <i class="bi bi-arrow-right ms-0 me-3"></i> {{ __('main.read_more') }}
            </a>
        </section>

        <!-- Start section -->
        <section class="feedback-sec section">
            <div class="container">
                <div class="sec_text text-center mb-5">
                    <h5 class="subtitle color-primary fw-bold mb-4 wow fadeInDown"> {{ __('main.testimonial') }} </h5>
                    @php $testimonialHeadArr = splitStringToEqualParts(__('main.what_say_about_us'), 3) @endphp
                    <h1 class="title fw-bold  wow focus-in-expand-fwd">
                        {{ $testimonialHeadArr[0] }}  <span class="color-primary">{{ $testimonialHeadArr[1] }}</span> {{ $testimonialHeadArr[2] }}
                    </h1>
                </div>
                <div class="swiper-container feedback_swiper wow fadeInUp">
                    <div class="swiper-wrapper pb-5">
                        @foreach($reviews as $review)
                            <div class="swiper-slide">
                                <div class="feedback_card">
                                    <div class="head mb-4 d-flex align-items-center">
                                        <img src="{{ getImage($review->image) }}" alt="{{ $review->currentDescription->name }}" class="avatar"/>
                                        <h4 class="name fw-bold mb-0">{{ $review->currentDescription->name }}</h4>
                                    </div>
                                    <p class="p mb-0">
                                        {{ $review->currentDescription->review }}
                                    </p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="partners-sec section">
            <div class="container">
                <div class="sec_text text-center mb-5">
                    <h5 class="subtitle color-primary fw-bold mb-4 wow fadeInDown"> {{ __('main.our_partners') }} </h5>
                    @php $partnersHeadArr = splitStringToEqualParts(__('main.honored_partnership'), 2) @endphp
                    <h1 class="title fw-bold  wow focus-in-expand-fwd">
                        {{ $partnersHeadArr[0] }}   <span class="color-primary">{{ $partnersHeadArr[1] }}</span>
                    </h1>
                </div>
                <div class="swiper-container partners_swiper">
                    <div class="swiper-wrapper pb-5">
                        @foreach($chunkedPartners as $partners)
                            <div class="swiper-slide">
                                <div class="row">
                                    @foreach($partners as $partner)
                                        <div class="col-lg-4 col-6 px-0">
                                            <div class="partner_card">
                                                @if($partner['url'])
                                                    <a href="{{ $partner['url'] }}" target="_blank">
                                                        <img src="{{ getImage($partner['image']) }}"
                                                             alt="{{ $partner['current_description']['name'] }}" class="partner_logo wow zoomIn"/>
                                                    </a>
                                                @else
                                                    <img src="{{ getImage($partner['image']) }}"
                                                         alt="{{ $partner['current_description']['name'] }}" class="partner_logo wow zoomIn"/>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </section>
    </main>

@endsection