@extends('web_site.layouts.master')
@section('css')
   zz
@endsection
@section('content')
    <!--Page Header Start-->
    <section class="page-header">
        <div class="page-header__bg" style="background-image: url({{asset('assets_web/img/newbaner/aboutus.webp')}})"></div>
        <div class="container">
            <div class="page-header__inner">
                <h2>{{trans('web_site.About_Us')}}</h2>
                <div class="thm-breadcrumb__box">
                    <ul class="thm-breadcrumb list-unstyled">
                        <li><a href="{{route('home')}}">{{trans('web_site.Home')}}</a></li>
                        <li><span>-</span></li>
                        <li>{{trans('web_site.profile')}}</li>
                    </ul>
                </div>
            </div>
        </div>

    </section>

   <!-- <div class="flex items-center gap-2 bg-white px-5 py-3 rounded-md shadow-sm border hover">
        <div class="container">
            <a href="{{route('home')}}">{{trans('web_site.Home')}}</a>
            <span class="text-gray-400">/</span>
              <a href="#" class="hover:text-primary font-medium transition-colors duration-200">title</a>
             <span class="text-gray-400">/</span>
            <span class="text-gray-800 font-semibold">{{trans('web_site.About_Us')}}</span>
        </div>
    </div>
    -->
    <!--About------------------------------------------------------------------>
    <section class="about-three">

        <div class="container">
            <div class="row">
            <div class="col-xl-5 auto">
                <div class="section-title text-center mb-20">
                    <h2 class="section-title__about">{{trans('web_site.About_us_title')}}</h2>
                    <div class="section-title__tagline-box">
                        <div class="section-title__shape"></div>
                        <span class="section-title__spanabout">  {{optional($about)->title}}</span>
                    </div>

                </div>
            </div>
            </div>
            <div class="row flex-direction1">


                <div class="col-xl-5">
                    <div class="cs_about_thumb wow  slideInLeft" data-wow-delay="200ms" data-wow-duration="2500ms">
                        <img src="{{optional($about)->image_url}}" class="border-radius15" width="100%" alt="img about" loading="lazy">
                    </div>
                </div>
                <div class="col-xl-7">
                    <div class="about-three__right vision-pargraph1 wow slideInRight" data-wow-delay="200ms"
                         data-wow-duration="2500ms">
                        <div class="read-more-text">
                             <div class="about-three__text">
                                <div class="text">{!! optional($about)->description !!} </div>
                            </div>

                        </div>

                        <!--<button class="read-more-btn clrbtn">{{trans('web_site.read_more')}}</button>-->

                    </div>
                </div>


            </div>
        </div>
    </section>

    <!--Vision - mission - goals -->
    <section class="about-three   wow fadeInUp" data-wow-delay="400ms" style="background: #4f4d50;">
        <div class="container">
            <div class="row ">
                <div class="col-xl-6">
                    <div class="text-center paad233 border-bottomvis">
                        <div class="read-more-text1">
                            <h3 class="text-white mb-20 ">
                                 {{trans('web_site.Our_Vision')}}
                            </h3>
                            <div class="fntabut clrabb"><div class="text text-white">{!! optional($about)->vision !!} </div></div>
                        </div>
                     </div>

                </div>
                <div class="col-xl-6">
                    <div class="text-center paad233">
                        <div class="read-more-text1">
                            <h3 class="text-white mb-20 ">
                                 {{trans('web_site.Our_Mission')}}
                            </h3>
                            <div class="fntabut clrabb"><div class="text text-white">{!! optional($about)->mission !!} </div></div>
                        </div>
                     </div>
                </div>

            </div>
        </div>
    </section>


    <!---Our_story-->
    <section class="about-three">
        <div class="container">
            <div class="col-xl-9 auto">
                <div class="section-title text-center ">
                    <div class="section-title__tagline-box">
                        <div class="section-title__shape"></div>
                        <span class="section-title__tagline"> {{trans('web_site.Our_Story')}}</span>
                    </div>
                    <!-- <h2 class="section-title__title">{{ trans('web_site.section_about_page') }}</h2> -->
                </div>
            </div>
            <div class="row flex-direction">
                <div class="col-xl-7">
                    <div class="about-three__right wow fadeInLeft " data-wow-delay="100ms">

                        <div class="titfirabout">
                            {!! optional($story)->story !!}
                        </div>

                    </div>
                </div>
                <div class="col-xl-5">
                    <div class=" wow slideInRight" data-wow-delay="200ms" data-wow-duration="2500ms">
                        <div class="imgbackgroundab1 borderblr" style="background-image: url({{optional($story)->image_story_url}});"></div>
                    </div>
                </div>

            </div>


        </div>
    </section>


    <!-----OUR VALUES---->
     @if(isset($value)&&(!empty($value)))
   <section class="about-three" style="background: #f3f4f5;">
    <div class="container">
        <div class="col-xl-9 auto">
            <div class="about-three__right text-center">
                <div class="section-title text-center">
                    <h2 class="section-title__title mb25-main">
                        {{ trans('web_site.Our_Values') }}
                    </h2>
                </div>
            </div>
        </div>

        <div class="row flex-direction1 justify-content">
            @foreach($value as $item)
                <div class="col-md-4">
                    <div class="divwhat mbinabout-25 backdivwait heihtt-valses">
                        <h2 class="divwhattitle1">
                            <img src="{{ asset($item->image_url ?? 'assets_web/img/team.png') }}" alt="img">
                            {{ $item->title }}
                        </h2>

                        <div>
                            {!! $item->details !!}
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
    @endif

    @if(isset($staff)&&(!empty($staff)))

        <!-- our teams-->
        <section class="  clientback">
            <div class="container wow fadeInUp" data-wow-delay="400ms">
                <div class="section-title text-center">
                    <div class="section-title__tagline-box">
                        <span class="section-title__tagline">{{trans('web_site.Our_Teamms')}}</span>
                    </div>
                    <h2 class="section-title__title ">{{trans('web_site.Meet_Our_Team')}} </h2>
                </div>
                <div class="services-carousel thm-owl__carousel owl-theme owl-carousel carousel-dot-style"
                     data-owl-options='{
            "items": 1,
            "margin": 20,
            "smartSpeed": 700,
            "loop":false,
            "autoplay": 2000,
            "nav":false,
            "dots":true,
            "navText": ["<span class=\"fa fa-angle-left\"></span>","<span class=\"fa fa-angle-right\"></span>"],
            "responsive":{
                "0":{
                    "items":1
                },
                "768":{
                    "items":2
                },
                "992":{
                    "items": 2
                },
                "1200":{
                    "items": 4
                }
            }
        }'>
                @foreach($staff as $item)
                    <!--item-->
                        <div class="item">
                            <div class="services-two__single tmsingle">
                                <div class="services-two__img-box">
                                    <div class="services-two__img testmonialimg"
                                         style="background-image: url({{$item->image_url}});"
                                         alt="Testimonials img" loading="lazy"></div>
                                </div>
                                <div class="services-two__content content2">
                                    <div class="services-two__icon-and-title"><h3 class="services-two__title cmpnametm">
                                            {{$item->name}} </h3></div>
                                    <div class="services-two__icon-and-title"><h3
                                                class="services-two__title text-white fnnametm"> {{$item->jop_title}} </h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </section>
    @endif
@endsection
<!--Our Story ------------------------------------------------------------------>
<!--OUR STORY-->



@section('js')
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const readMoreText = "read more";
            const readLessText = "Read Less";
            const maxHeight = 350;

            const buttons = document.querySelectorAll(".read-more-btn");

            buttons.forEach(btn => {
                const container = btn.closest(".vision-pargraph");
                const text = container.querySelector(".read-more-text");

                // Hide button if text doesn't overflow
                if (text.scrollHeight <= maxHeight) {
                    btn.style.display = "none";
                }

                btn.addEventListener("click", function () {
                    text.classList.toggle("expanded");
                    btn.textContent = text.classList.contains("expanded") ? readLessText : readMoreText;
                });
            });
        });
    </script>


@endsection