@extends('layout1')
@section('title')
    <title>{{ $seoSetting->seo_title }}</title>
@endsection
@section('meta')
    <meta name="description" content="{{ $seoSetting->seo_description }}">
@endsection

@section('frontend-content')

  <!--===BREADCRUMB PART START====-->
  <section class="wsus__breadcrumb" style="background: url({{ $setting->breadcrumb_image ? asset($setting->breadcrumb_image) : '' }});">
    <div class="wsus_bread_overlay">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <h4>{{ __('About Us') }}</h4>
                    <nav style="--bs-breadcrumb-divider: '-';" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('Home') }}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ __('About Us') }}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>
<!--===BREADCRUMB PART END====-->


<!--=========ABOUT US START============-->
<section class="wsus__about_page mt_45 mb_45">
  <div class="container">
    <div class="row">
      <div class="col-xl-5 col-lg-5">
        <div class="wsus__about_img about_page_img">
          <img src="{{ asset($aboutUs->image) }}" alt="about images" class="img-fluid w-100" loading="lazy">
        </div>
      </div>
      <div class="col-xl-7 col-lg-7">
        <div class="col-12">
          <div class="wsus__about_tab">
            <ul class="nav nav-pills" id="pills-tab" role="tablist">
              <li class="nav-item" role="presentation">
                <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">{{ __('About Us') }}</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">{{ __('Service') }}</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">{{ __('History') }}</button>
              </li>
            </ul>
            <div class="tab-content" id="pills-tabContent">
              <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                {!! clean($aboutUs->translation->about_us) !!}
              </div>
              <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                {!! clean($aboutUs->translation->service) !!}
              </div>
              <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
                {!! clean($aboutUs->translation->history) !!}
              </div>
            </div>

          </div>
        </div>



        <div class="wsus__about_counter">
            <div class="row">
                @foreach ($counters as $counter)
                    <div class="col-xl-6 col-md-6">
                        <div class="wsus__about_counter_single text-center">
                            <div class="wsus__about_counter_icon">
                                <i class="{{ $counter->icon }}"></i>
                            </div>
                            <div class="wsus__about_counter_text">
                                <h3 class="counter m-0">{{ $counter->qty }}</h3>
                                <p>{{ $counter->translation->title }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

        </div>

      </div>
    </div>



  @php
    $our_team_section = $sectionControls->where('section_name', 'our_team')->first();
  @endphp
  
  @if ($our_team_section->status == 1 && $ourTeams->count() > 0)
    <div class="wsus__team_area mt_35">
      <div class="row">
        <div class="col-12">
          <div class="wsus__section_heading text-center mb_15">
            <h2>{{ __('Our Team') }}</h2>
            <span>{{ __('Meet our dedicated real estate experts, here to help you every step of the way.') }}</span>
          </div>
        </div>
      </div>
      <div class="row">
        @foreach ($ourTeams->take($our_team_section->qty) as $team)
        <div class="col-xl-3 col-sm-6 col-lg-4">
          <div class="wsus__single_team">
            <div class="wsus__single_team_img">
              <img src="{{ asset($team->image) }}" alt="team images" class="imf-fluid w-100" loading="lazy">
              <ul class="team_link">
                @if ($team->facebook)
                <li><a href="{{ $team->facebook }}"><i class="fab fa-facebook"></i></a></li>
                @endif

                @if ($team->twitter)
                <li><a href="{{ $team->twitter }}"><i class="fab fa-twitter"></i></a></li>
                @endif

                @if ($team->linkedin)
                <li><a href="{{ $team->linkedin }}"><i class="fab fa-linkedin"></i></a></li>
                @endif

                @if ($team->instagram)
                <li><a href="{{ $team->instagram }}"><i class="fab fa-instagram"></i></a></li>
                @endif
              </ul>
            </div>
            <h4>{{ $team->name }}</h4>
            <p>{{ $team->designation }}</p>
          </div>
        </div>
        @endforeach
      </div>
    </div>
  </div>
  @endif
</section>
<!--=========ABOUT US END==========-->
@endsection