@extends('layouts.site')

@section('content')
    @php

        $lang = app()->getLocale();
        $name = 'name_' . $lang;
        $details = 'details_' . $lang;
        $type = 'type_' . $lang;
        $description = 'description_' . $lang;
        $title = 'title_' . $lang;
        $our_mission = 'our_mission_' . $lang;
        $our_vision = 'our_vision_' . $lang;
        $our_values = 'our_values_' . $lang;
        $our_goals = 'our_goals_' . $lang;
        $type = 'type_' . $lang;
        $img_alt = 'img_alt_' . $lang;

    @endphp

    <!--Start Page Header-->
    <section class="page-header">
        <div class="page-header__bg" style="background-image: url({{ asset('assets/front/img/pages/visim.webp') }} )">
        </div>
        <div class="container">
            <div class="page-header__inner text-center">
                <h2>{{ __('About Us') }}</h2>
                <ul class="thm-breadcrumb">
                    <li><a href="{{ route('home_index') }}">{{ __('Home') }}</a></li>
                    <li><span class="icon-right-arrow-5"></span></li>
                    <li>{{ __('vision - mission - goals') }}</li>
                </ul>
            </div>
        </div>
        <svg class="wave" viewBox="0 0 1440 40" xmlns="http://www.w3.org/2000/svg">
            <path fill="#fff" fill-opacity="1" d="M0,40 Q360,10 720,30 T1440,40 L1440,50 L0,50Z">
            </path>
        </svg>
    </section>

    <!--vision-->
    @php
        $page = \App\Models\Page::where('id', 6)->first();
    @endphp
    @if ($page != '')
        <section class="about-three about-padding">
            <div class="container">
                <div class="row align-items">
                    <!--Start vision  Img-->
                    <div class="col-xl-5 wow fadeInDown" data-wow-delay=".5s">
                        <div class="about1">
                            <div class="aboutimg1 visinpage"
                                style="background-image: url({{ asset('assets/images/pages/' . $page['img']) ?? '' }});"
                                alt="{{ $page->$img_alt ?? 'vision img' }}"></div>

                        </div>
                    </div>
                    <!--Start About -->
                    <div class="col-xl-7">
                        <div class="about-three__content ">
                            <div class="sec-title-two wow fadeInDown" data-wow-delay=".2s">
                                <h2> {{ $page->$title }}</h2>
                            </div>
                            <div class="about-three__content-text vision-pargraph wow fadeInDown" data-wow-delay=".3s">
                                <div class="read-more-text">
                                   {!! $page->$description !!}

                                </div>

                                <button class="read-more-btn">{{ __('Read More') }}</button>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif


    @php
        $page = \App\Models\Page::where('id', 7)->first();
    @endphp
    @if ($page != '')
        <!--Our goal-->
        <section class="about-three about-padding">
            <div class="container">
                <div class="row  align-items flex-direction">
                    <!--Start About -->
                    <div class="col-xl-7">
                        <div class="about-three__content ">
                            <div class="sec-title-two wow fadeInDown" data-wow-delay=".2s">
                                <h2>{{ $page->$title }}</h2>
                            </div>
                            <div class="about-three__content-text vision-pargraph wow fadeInDown" data-wow-delay=".3s">
                                <div class="read-more-text">
                                   {!! $page->$description !!}
                                </div>

                                <button class="read-more-btn">{{ __('Read More') }}</button>
                            </div>
                        </div>
                    </div>
                    <!--goals  Img-->
                    <div class="col-xl-5 wow fadeInDown" data-wow-delay=".5s">
                        <div class="about1">
                            <div class="aboutimg2 visinpage"
                                style="background-image: url({{ asset('assets/images/pages/' . $page['img']) ?? '' }});"
                                alt="{{ $page->$img_alt ?? 'goals img' }}"></div>

                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif



    @php
        $page = \App\Models\Page::where('id', 8)->first();
    @endphp
    @if ($page != '')
        <!--mission-->
        <section class="about-three about-paddinglast">
            <div class="container">
                <div class="row align-items">
                    <!--Start mission Img-->
                    <div class="col-xl-5 wow fadeInDown" data-wow-delay=".5s">
                        <div class="about1">
                            <div class="aboutimg1 visinpage"
                                style="background-image: url({{ asset('assets/images/pages/' . $page['img']) ?? '' }});"
                                alt="{{ $page->$img_alt ?? 'mission img' }}"></div>

                        </div>
                    </div>
                    <!--Start About -->
                    <div class="col-xl-7">
                        <div class="about-three__content ">
                            <div class="sec-title-two wow fadeInDown" data-wow-delay=".2s">
                                <h2>{{ $page->$title }}</h2>
                            </div>
                            <div class="about-three__content-text vision-pargraph wow fadeInDown" data-wow-delay=".3s">
                                <div class="read-more-text">
                                   {!! $page->$description !!}
                                </div>

                                <button class="read-more-btn">{{ __('Read More') }}</button>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <script>
        document.addEventListener("DOMContentLoaded", function() {

            const readMoreText = "{{ __('Read More') }}";
            const readLessText = "Read Less";

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

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

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



@stop

@section('scripts')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>

@stop