@extends('frontend.layouts.app')

@section('content')
<div class="breadcumb-area style2 bg-smoke4">
  <div class="breadcumb-wrapper" data-bg-src="{{ URL::asset('frontend/assets/img/bg/breadcumb-bg.jpg')}}">
    <div class="container">
      <div class="breadcumb-content">
        <h1 class="breadcumb-title">About Us</h1>
        <ul class="breadcumb-menu">
          <li><a href="{{ url('/')}}">Home</a></li>
          <li>About Us</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="about-area position-relative overflow-hidden space" id="about-sec" >
  <div class="container">
    <div class="row">
      <div class="col-xl-6">
        <div class="img-box1">
          @foreach($about_us_left_section->details as $key => $detail)
              <div class="img{{ $key + 1 }}">
                  <img src="{{ asset('uploads/pages/details/'.$detail->image) }}" alt="About">
              </div>
          @endforeach
      </div>
      </div>
      <div class="col-xl-6">
        <div class="ps-xl-4 ms-xxl-4">
          <div class="title-area about1-title-box mb-20 pe-xxl-5 me-xxl-5"><span class="sub-title style1 text-anime-style-2">{{ $about_us_right_section->title }}</span>
            <div class="mb-30 wow fadeInUp" data-wow-delay=".1s">{!! $about_us_right_section->description !!}</div>
          </div>
          <div class="about-item-wrap">
           @foreach($about_us_right_section->details as $key => $detail) 
            <div class="about-item wow fadeInUp" data-wow-delay=".3s">
              <div class="about-item_img">
                <img src="{{ asset('uploads/pages/details/'.$detail->image) }}" alt="">
              </div>
              <div class="about-item_centent">
                <h5 class="box-title">{{ $detail->title }}</h5>
                <p class="about-item_text">{{ $detail->description }}</p>
              </div>
            </div>
            @endforeach
          </div>
          <div class="mt-35 wow fadeInUp"><a href="{{ url('/about_us')}}" class="th-btn th-icon">Learn More <i class="fa-light fa-arrow-right-long"></i></a></div>
        </div>
      </div>
    </div>
    <div class="shape-mockup shape1 d-none d-xl-block" data-top="12%" data-right="-16%"><img src="{{ URL::asset('frontend/assets/img/shape/ab-1-shape-1.png')}}" alt="shape"></div>
    <div class="shape-mockup shape3 d-none d-xl-block" data-bottom="2%" data-left="-20%"><img src="{{ URL::asset('frontend/assets/img/shape/ab-1-shape-2.png')}}" alt="shape"></div>
    <div class="shape-mockup about-shape movingX d-none d-xxl-block" data-bottom="20%" data-right="-11%"><img src="{{ URL::asset('frontend/assets/img/normal/about-right-img.jpg')}}" alt="shape"></div>
  </div>
</div>

<div class="counter-area overflow-hidden">
  <div class="container">
    <div class="counter-wrap5">
      <div class="row gy-40">
        @foreach($counter->details as $key => $detail)
        <div class="col-sm-6 col-lg-3 counter-card-wrap5">
          <div class="counter-card5">
            <div class="media-body">
              <h3 class="box-number">{{ $detail->title }}</h3>
              <h6 class="counter-title">{{ $detail->description }}</h6>
            </div>
          </div>
        </div>
        @endforeach
      </div>
    </div>
  </div>
</div>

<section class="process-sec4 overflow-hidden space" id="process-sec"
    data-bg-src="{{ asset('frontend/assets/img/bg/process-4-1-bg.png') }}">
  <div class="shape-mockup process-bg-shape4-1" data-left="4%" data-top="13%">
    <img src="{{ asset('frontend/assets/img/process/process-thumbbg4-1.png') }}" alt="img">
  </div>
  <div class="container">
    <div class="row justify-content-center text-center">
      <div class="col-xl-7 col-lg-8">
        <div class="title-area">
          <span class="sub-title">
            <span class="squre-shape left me-3"></span>
            {{ $about_us_page_section->title }}
            <span class="squre-shape right ms-3"></span>
          </span>
          <h2 class="sec-title"><span class="scroll-text-ani">{{ strip_tags($about_us_page_section->description) }}</span></h2>
        </div>
      </div>
    </div>

    <div class="row gy-40 gx-100">
      <div class="col-xl-6">
        <div class="process-box-img-wrap">
          @foreach($about_us_page_section->details as $key => $detail)
            <div class="process-box-img {{ $key == 0 ? 'active-img' : '' }}">
              <img class="box-img"
                   src="{{ asset('uploads/pages/details/'.$detail->image) }}"
                   alt="img">
            </div>
          @endforeach
        </div>
      </div>

      <div class="col-xl-6">
        <div class="process-card-wrap4">
          @foreach($about_us_page_section->details as $key => $detail)
            <div class="process-card4 hover-item2 {{ $key == 0 ? 'item-active2' : '' }}">
              <div class="box-content">
                <h4 class="box-title">{{ $detail->title }}</h4>
                <p class="box-text">{{ $detail->description }}</p>
              </div>
              <div class="box-number">
                {{ str_pad($key + 1, 2, '0', STR_PAD_LEFT) }}
              </div>
            </div>
          @endforeach
        </div>
      </div>
    </div>
  </div>
</section>


<div class="faq-area4 position-relative z-index-common space-top overflow-hidden overflow-hidden" id="faq-sec">
  <div class="faq-area4-bg-gradient"></div>
  <div class="shape-mockup faq-bg-shape4-1 d-md-block d-none" data-top="-14%" data-right="2%"><img src="{{ URL::asset('frontend/assets/img/shape/faq-bg-shape4-1.png')}}" alt="img"></div>
  <div class="brand-area space-bottom">
    <div class="container">
      <div class="title-area"><span class="sub-title text-white"><span class="squre-shape left me-3"></span>Our Partners</span>
        <h2 class="sec-title text-white"><span class="scroll-text-ani2">{{ $client_section->title }}</span></h2>
      </div>
      <div class="swiper th-slider brandSlider1" id="brandSlider1" data-slider-options='{"breakpoints":{"0":{"slidesPerView":1},"576":{"slidesPerView":"2"},"768":{"slidesPerView":"3"},"992":{"slidesPerView":"3"},"1200":{"slidesPerView":"5"},"1400":{"slidesPerView":"6"}}}'>
        <div class="swiper-wrapper">
          @foreach($client_section->details as $key => $detail)
          <div class="swiper-slide">
            <div class="brand-box style2">
              <div class="brand-box-bg">
                <img src="{{ URL::asset('frontend/assets/img/shape/brand_box_bg_2_1.png')}}" alt="img">
              </div>
              <a href="#">
                <img class="original" src="{{ asset('uploads/pages/details/'.$detail->image) }}" alt="Brand Logo">
                <img class="gray" src="{{ asset('uploads/pages/details/'.$detail->image) }}" alt="Brand Logo"></a>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    </div>
  </div>

  <div class="faq-wrap4 bg-white space">
    <div class="container">
      <div class="row gy-50 justify-content-between">
        <div class="col-xl-4">
          <div class="title-area mb-30"><span class="sub-title"><span class="squre-shape left me-3"></span>FAQ</span>
            <h2 class="sec-title"><span class="scroll-text-ani">{{ $faq_section->title }}</span></h2>
          </div>
          <p class="mb-0">{!! $faq_section->description !!}</p>
          <div class="btn-wrap mt-35">
            <a href="contact" class="th-btn th-btn-sm th-radius style9 th-icon">Asked Questions<i class="fa-light fa-arrow-right-long"></i></a>
          </div>
          <div class="faq-img4 mt-30"><img class="spin" src="{{ URL::asset('frontend/assets/img/shape/faq-shape4-1.png')}}" alt="img"></div>
        </div>
        <div class="col-xl-7">
          <div class="accordion" id="faqAccordion">
            @foreach($faq_section->details as $key => $detail)
              @php
                $collapseId = 'collapse-'.$key;
                $headingId = 'heading-'.$key;
              @endphp
              <div class="accordion-card style5">
                <div class="accordion-header" id="{{ $headingId }}">
                  <button class="accordion-button {{ $key != 0 ? 'collapsed' : '' }}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $collapseId }}" aria-expanded="{{ $key == 0 ? 'true' : 'false' }}" aria-controls="{{ $collapseId }}">
                    {{ $detail->title }}
                  </button>
                </div>
                <div id="{{ $collapseId }}" class="accordion-collapse collapse {{ $key == 0 ? 'show' : '' }}" aria-labelledby="{{ $headingId }}" data-bs-parent="#faqAccordion">
                  <div class="accordion-body">
                    @if($detail->image)
                      <div class="faq-img-box4">
                        <div class="img1">
                          <img src="{{ asset('uploads/pages/details/'.$detail->image) }}" alt="img">
                        </div>
                      </div>
                    @endif
                    <p class="faq-text">
                      {{ $detail->description }}
                    </p>
                  </div>
                </div>
              </div>
            @endforeach
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<section class="testi-area overflow-hidden space" id="testi-sec" style="padding-top: 5px;">
  <div class="container-fluid p-0">
    <div class="title-area mb-20 text-center"><span class="sub-title text-anime-style-2">Testimonial</span>
      <h2 class="sec-title text-anime-style-3">What Client Say About us</h2>
    </div>
    <div class="slider-area">
      <div class="swiper th-slider testiSlider6 has-shadow" id="testiSlider1" data-slider-options='{"breakpoints":{"0":{"slidesPerView":1},"767":{"slidesPerView":"2","centeredSlides":"true"},"992":{"slidesPerView":"2","centeredSlides":"true"},"1200":{"slidesPerView":"2","centeredSlides":"true"},"1400":{"slidesPerView":"3","centeredSlides":"true"}}}'>
        <div class="swiper-wrapper">
          @foreach($testimonials as $testimonial)
          <div class="swiper-slide">
            <div class="testi-card style2">
              <div class="testi-card_wrapper">
                <div class="testi-card_profile" data-mask-src="{{ URL::asset('frontend/assets/img/shape/testi-shape.png')}}">
                  <div class="testi-card_avater"><img src="{{ asset('uploads/testimonial/images/'.$testimonial->image) }}" alt="testimonial"></div>
                  <div class="media-body">
                    <h3 class="box-title">{{ $testimonial->name }}</h3>
                  </div>
                </div>
                <div class="testi-card_review">
                  @for($i = 1; $i <= 5; $i++)
                    @if($i <= $testimonial->rating)
                      <i class="fa-solid fa-star"></i>
                    @else
                      <i class="fa-regular fa-star"></i>
                    @endif
                  @endfor
                </div>
              </div>
              <p class="testi-card_text">“{{ strip_tags($testimonial->description) }}”</p>
              <div class="testi-card-quote"><img src="{{ URL::asset('frontend/assets/img/icon/testi-quote.svg')}}" alt="img"></div>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    </div>
  </div>
  <div class="shape-mockup th-line-shape d-none d-xl-block" data-bottom="-2%" data-right="0%"><span><svg width="1920" height="775" viewBox="0 0 1920 775" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path class="line-1" d="M1922 761.516C1883.55 789.861 1799.69 764.276 1695.5 665.5C1565.26 542.03 1214 420.5 1168.91 537.637C1110.92 688.314 1382.3 703.384 1301.08 462.69C1219.86 221.996 727.193 406.687 337.011 313.758C40.4869 243.135 -26.3152 31.5872 -14.781 1" stroke="#F2F5FA" stroke-width="4" />
      </svg></span></div>
  <div class="shape-mockup movingX d-none d-xl-block" data-top="15%" data-left="5%"><img src="{{ URL::asset('frontend/assets/img/shape/shape_7.png')}}" alt="shape"></div>
</section>

@endsection

@section('custom_script')

@endsection