@extends('frontend.layouts.master')
@section('styles')
@parent
@stop
@section('content')
<main>

<section class="inner_banner">
    @if(!empty($aboutData) && !empty($aboutData->getData('about_banner_image')))
    <div class="bg_ p_img">
      <picture>
        <source srcset="{{webp($aboutData->getData('about_banner_image'))}}" type="image/webp">
        <source srcset="{{PP($aboutData->getData('about_banner_image'))}}" type="image/{{FT($aboutData->getData('about_banner_image'))}}">
        <img src="{{PP($aboutData->getData('about_banner_image'))}}" loading="lazy" alt="{{lang('about_us_banner_alt_keywords')}}">
      </picture>
    </div>
    @endif

    <div class="container">
      <div class="page_title">
        <h1>
          <span>{{lang('about')}}</span>
        </h1>
      </div>
	  @if(!empty($aboutData) && !empty($aboutData->getData('post_title')))
      <div class="intro">
        <div class="text_box lg_">
          <h3>{{$aboutData->getData('post_title')}}</h3>
          {!!$aboutData->getData('sub_title')!!}
        </div>
      </div>
	  @endif
    </div>


    <div class="b_social_box">
      <ul>
        <li>
          <a href="#" class="link_">

            <svg viewBox="0 0 19.313 19.313">
              <path
                d="M16.42,5.056A9.573,9.573,0,0,0,1.358,16.605L0,21.563l5.074-1.332a9.541,9.541,0,0,0,4.574,1.164h0a9.662,9.662,0,0,0,9.661-9.57A9.608,9.608,0,0,0,16.42,5.056ZM9.652,19.782A7.94,7.94,0,0,1,5.6,18.675L5.311,18.5,2.3,19.291l.8-2.936-.19-.3A7.97,7.97,0,1,1,17.7,11.825a8.043,8.043,0,0,1-8.044,7.958Zm4.363-5.958c-.237-.121-1.414-.7-1.634-.776s-.379-.121-.539.121-.616.776-.759.94-.28.181-.517.06a6.509,6.509,0,0,1-3.255-2.845c-.246-.422.246-.392.7-1.306A.443.443,0,0,0,7.992,9.6c-.06-.121-.539-1.3-.737-1.776s-.392-.4-.539-.41-.3-.009-.457-.009a.886.886,0,0,0-.638.3,2.687,2.687,0,0,0-.836,2,4.685,4.685,0,0,0,.974,2.474,10.686,10.686,0,0,0,4.087,3.613,4.679,4.679,0,0,0,2.871.6,2.449,2.449,0,0,0,1.612-1.138,2,2,0,0,0,.138-1.138C14.411,14,14.252,13.941,14.014,13.825Z"
                transform="translate(0 -2.25)" fill="#fff" />
            </svg>
          </a>
        </li>
        <li>
          <a href="#" class="link_">

            <svg viewBox="0 0 15.664 29.115">
              <path
                d="M13.257,15.635v-5.56h4.485v-2.8a7.317,7.317,0,0,1,1.964-5.153A6.249,6.249,0,0,1,24.466,0h4.455V5.561H24.466a.981.981,0,0,0-.785.48,1.951,1.951,0,0,0-.349,1.179v2.853h5.589v5.56h-5.59V29.115h-5.59V15.635Z"
                transform="translate(-13.257)" fill="#fff"></path>
            </svg>
          </a>
        </li>
        <li>
          <a href="#" class="link_">

            <svg viewBox="0 0 36.002 26.19">
              <g transform="translate(1.5 1.5)">
                <path
                  d="M33.81,9.63a4.17,4.17,0,0,0-2.91-3C28.32,6,18,6,18,6S7.68,6,5.1,6.69a4.17,4.17,0,0,0-2.91,3,43.5,43.5,0,0,0-.69,7.935,43.5,43.5,0,0,0,.69,8A4.17,4.17,0,0,0,5.1,28.5c2.58.69,12.9.69,12.9.69s10.32,0,12.9-.69a4.17,4.17,0,0,0,2.91-3,43.5,43.5,0,0,0,.69-7.875,43.5,43.5,0,0,0-.69-8Z"
                  transform="translate(-1.499 -6)" fill="none" stroke="#fff" stroke-linecap="round"
                  stroke-linejoin="round" stroke-width="3"></path>
                <path d="M14.625,22.53l8.625-4.905-8.625-4.9Z" transform="translate(-1.499 -6)" fill="none"
                  stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></path>
              </g>
            </svg>
          </a>
        </li>
        <li>
          <a href="#" class="link_">

            <svg viewBox="0 0 29.915 29.915">
              <g transform="translate(1.5 1.5)">
                <path
                  d="M9.729,3H23.186a6.729,6.729,0,0,1,6.729,6.729V23.186a6.729,6.729,0,0,1-6.729,6.729H9.729A6.729,6.729,0,0,1,3,23.186V9.729A6.729,6.729,0,0,1,9.729,3Z"
                  transform="translate(-3 -3)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"
                  stroke-width="3"></path>
                <path d="M22.773,16.528a5.383,5.383,0,1,1-4.535-4.535,5.383,5.383,0,0,1,4.535,4.535Z"
                  transform="translate(-3.932 -3.919)" fill="none" stroke="#fff" stroke-linecap="round"
                  stroke-linejoin="round" stroke-width="3"></path>
                <path d="M26.25,9.75h0" transform="translate(-5.391 -3.694)" fill="none" stroke="#fff"
                  stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></path>
              </g>
            </svg>
          </a>
        </li>
        <li>
          <a href="#" class="link_">

            <svg viewBox="0 0 34.775 29.203">
              <path
                d="M33.275,4.5a15.743,15.743,0,0,1-4.535,2.21,6.47,6.47,0,0,0-11.352,4.333v1.444a15.4,15.4,0,0,1-13-6.543s-5.777,13,7.221,18.776A16.812,16.812,0,0,1,1.5,27.608c13,7.222,28.886,0,28.886-16.61a6.5,6.5,0,0,0-.116-1.2,11.15,11.15,0,0,0,3-5.3Z"
                transform="translate(0 -2.872)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"
                stroke-width="3"></path>
            </svg>
          </a>
        </li>
      </ul>
    </div>
  </section>
  @if(!empty($aboutData) && !empty($aboutData->getData('about_video')))
  <section class="page-section">

    <div class="container-fluid no_pad">

      <div class="video_grid">
        <div class="over_lay p_img">
          <picture>
            <source srcset="{{webp($aboutData->getData('video_banner_image'))}}" type="image/webp">
            <source srcset="{{PP($aboutData->getData('video_banner_image'))}}" type="image/{{FT($aboutData->getData('video_banner_image'))}}">
            <img src="{{PP($aboutData->getData('video_banner_image'))}}" loading="lazy" alt="">
          </picture>
        </div>

        <div class="video_box">
          <video muted="" playsinline="">
            <source src="{{PP($aboutData->getData('about_video'))}}" type="video/mp4">
          </video>
        </div>

        <a href="#" class="play_btn" data-play>
          <div class="bg_">
                      <svg class="textcircle" viewBox="0 0 500 500">
              <title>{{lang('watch_showreel')}} {{lang('watch_showreel')}} {{lang('watch_showreel')}}</title>
              <defs>
                <path id="textcircle" d="M250,400 a150,150 0 0,1 0,-300a150,150 0 0,1 0,300Z"></path>
              </defs>
              <text>
                <textPath xlink:href="#textcircle" aria-label="watch showreel watch showreel watch showreel"
                  textLength="920">{{lang('watch_showreel')}} {{lang('watch_showreel')}} {{lang('watch_showreel')}}</textPath>
              </text>
            </svg>
          </div>

          <div class="icons_box">
            <svg class="play_" x="0px" y="0px" viewBox="0 0 163.861 163.861"
              style="enable-background:new 0 0 163.861 163.861;" xml:space="preserve">
              <g>
                <path d="M34.857,3.613C20.084-4.861,8.107,2.081,8.107,19.106v125.637c0,17.042,11.977,23.975,26.75,15.509L144.67,97.275
		c14.778-8.477,14.778-22.211,0-30.686L34.857,3.613z" />
              </g>
            </svg>

            <svg class="pause_" x="0px" y="0px" viewBox="0 0 47.607 47.607"
              style="enable-background:new 0 0 47.607 47.607;" xml:space="preserve">

              <path d="M17.991,40.976c0,3.662-2.969,6.631-6.631,6.631l0,0c-3.662,0-6.631-2.969-6.631-6.631V6.631C4.729,2.969,7.698,0,11.36,0
		l0,0c3.662,0,6.631,2.969,6.631,6.631V40.976z" />
              <path d="M42.877,40.976c0,3.662-2.969,6.631-6.631,6.631l0,0c-3.662,0-6.631-2.969-6.631-6.631V6.631
		C29.616,2.969,32.585,0,36.246,0l0,0c3.662,0,6.631,2.969,6.631,6.631V40.976z" />

            </svg>
          </div>

        </a>
      </div>
    </div>

  </section>
  @endif
  @if(!empty($aboutData))
  <section class="page-section">
    <div class="container-fluid no_pad">
      <div class="about_grid_content">
        <div class="c_box">
          <div class="text_box lg_">
          {!!$aboutData->getData('excerpt')!!}
          </div>
        </div>
        <div class="c_box">
          <div class="text_box">
            {!!$aboutData->getData('description')!!}
          </div>
        </div>
      </div>
    </div>
    <div class="text_marc_box">
      @include('frontend.partials.marquee')
    </div>
  </section>
  @endif
   @if(!empty($aboutData))
  <section class="page-section">
    <div class="container-fluid no_pad">
      <div class="about_grid_content">
        <div class="c_box">
          <h3 class="section-title">
            <span>{{lang('why_we_do_it')}}</span>
          </h3>
          <div class="text_box ">
             {!!$aboutData->getData('why_we_do_it')!!}
          </div>
        </div>
        <div class="c_box">
          <h3 class="section-title">
            <span>{{lang('what_we_offer')}}</span>
          </h3>
          <div class="text_box">
                 {!!$aboutData->getData('what_we_offer')!!}
          </div>
        </div>
        <div class="c_box">
          <h3 class="section-title">
            <span>{{lang('vision')}}</span>
          </h3>
          <div class="text_box ">
             {!!$aboutData->getData('vision')!!}
          </div>
        </div>
        <div class="c_box">
          <h3 class="section-title">
            <span>{{lang('mission')}}</span>
          </h3>
          <div class="text_box">
                {!!$aboutData->getData('mission')!!}
          </div>
        </div>
      </div>
    </div>
  </section>
  @endif
  @if(!empty($values) && $values->isNotEmpty())
  <section class="page-section">
    <div class="container-fluid no_pad">
      <div class="about_grid_content value_list">
        <div class="section-title">
          <span>{{lang('values')}}</span>
        </div>
        @foreach($values as $value)
        <div class="c_box">
          <div class="icons_box">
            {!!url_get_contents(PP($value->getData('value_image')))!!}
          </div>
          <div class="text_box">
            {!!$value->getData('sub_title')!!}
          </div>
        </div>
        @endforeach


      </div>
    </div>
  </section>
  @endif
  @if(!empty($executive) && $executive->isNotEmpty())
  <section class="page-section">
    <div class="container">
      <div class="title_box">
        <h3 class="section-title">
          <span>{{lang('about_us_page_executive')}} </span>
        </h3>
        <h5 class="small_title_">
          <span>{{lang('about_us_page_management')}}</span>
        </h5>

      </div>

      <div class="executive_wrap">
        <!-- Swiper -->
        <div class="swiper-container ">
          <div class="swiper-wrapper">
              @foreach($executive as $item)
                <div class="swiper-slide e_item">
                <a href="#pop{{$item->getData('post_id')}}" class="inner_" data-fancybox>
                    <div class="img_box p_img">
                    <picture>
                        <source srcset="{{webp($item->getData('executive_image'))}}" type="image/webp">
                        <source srcset="{{PP($item->getData('executive_image'))}}" type="image/{{FT($item->getData('executive_image'))}}">
                        <img src="{{PP($item->getData('executive_image'))}}" loading="lazy" alt="">
                    </picture>

                    </div>

                    <div class="content_box">
                    <div class="title_">
                        <span>{{$item->getData('post_title')}}</span>
                    </div>
                    <div class="meta_">
                       {{$item->getData('designation')}}
                    </div>
                    </div>
                </a>
                </div>
            @endforeach

          </div>
        </div>
           <div class="nav_tool ">
                <div class="swiper-pagination" id="slider_p_2"></div>
              </div>
      </div>
    </div>
  </section>



  @include('frontend.about.partials.our-group-of-companies')





  @foreach($executive as $item)
  <div class="popup_box md_box about-popup" id="pop{{$item->getData('post_id')}}" style="display: none;">
    <div class="inner_">
      <div class="content_box">
        <div class="popup-info">
	     <div class="img_box p_img">
		  <picture>
			<source srcset="{{webp($item->getData('executive_image'))}}" type="image/webp">
			<source srcset="{{PP($item->getData('executive_image'))}}" type="image/{{FT($item->getData('executive_image'))}}">
			<img src="{{PP($item->getData('executive_image'))}}" loading="lazy" alt="">
		  </picture>

		</div>
    <div class="info-title">
       <div class="title_ s_mb">
      {{$item->getData('post_title')}}
      </div>
      <div class="meta_box">{{$item->getData('designation')}}</div>
</div>
  </div>
        <div class="text_box">
        {!!$item->getData('description')!!}
        </div>
      </div>
    </div>
  </div>
  @endforeach
  @endif
 @if(!empty($aboutData))
    <section class="page-section" id="brochures">
    <div class="container">
      <div class="amenities_wrap">
        @if(!empty($aboutData->getData('corporate_brochure')))
        <a class="a_box" href="{{PP($aboutData->getData('corporate_brochure'))}}" target="_blank">
          <div class="icon_box">
            <img src="{{getFrontendAsset('images/reportage_graphics_brochure2.svg')}}" loading="lazy" alt="" />
          </div>
          <div class="name_">
          {{lang('corporate_brochure')}}
          </div>
       </a>
       @endif
      </div>
    </div>
  </section>
  @endif

</main>
@stop

@section('scripts')
@parent
<script>
    $(function () {
        $('.tool_wrap select').selectric({ disableOnMobile: false, nativeOnMobile: false });

        $('[data-play]').on('click', function (e) {
            e.preventDefault();
            var this_ = $(this),
                p_target_ = this_.closest('.video_grid'),
                video_ = p_target_.find('video'),
                pl_text = "{{lang('watch_showreel')}} {{lang('watch_showreel')}} {{lang('watch_showreel')}}",
                pa_text = "{{lang('pause_showreel')}} {{lang('pause_showreel')}} {{lang('pause_showreel')}}";


            p_target_.toggleClass('playing_');

            if (p_target_.hasClass('playing_')) {
                $(video_).trigger('play');
                this_.find('textPath').html(pa_text);
            } else {
                $(video_).trigger('pause');
                this_.find('textPath').html(pl_text);
            }


        });
    });
</script>
<script>
  $(function () {
    // Executive slider
    var project_slider = new Swiper(".executive_wrap .swiper-container", {
      slidesPerView: 4,
      spaceBetween: 20,
      /* navigation: {
           nextEl: ".projects_wrapper .nav_.right_",
           prevEl: ".projects_wrapper .nav_.left_",
       },*/
       autoplay: {
   delay: 3000,
 },
       pagination: {
          el: '#slider_p_2',
          clickable: true,
        },

      breakpoints: {
		 250: {
          slidesPerView: 1,
          spaceBetween: 10,
        },
        300: {
          slidesPerView: 1,
          spaceBetween: 10,
        },
        768: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        980: {
          slidesPerView: 3,
          spaceBetween: 20,
        },
        1025: {
          slidesPerView: 4,
          spaceBetween: 20,
        },
      },
       on: {
        init: function () {
          setTimeout(function() {
            if($('#slider_p_2').find('.swiper-pagination-bullet').length == 1) {
              $('#slider_p_2').closest('.nav_tool').hide();
            }
          },100)
        },
      },
    });

  })
</script>

@stop