@extends('website.layouts.layouts')
@section('customized_meta')
    <!------ page meta tag ------->
    <meta name="description" content="{{$og->description?$og->description:$mainOpenGraph->description}}">
    <meta name="keywords" content="{{$og->key_words?$og->key_words:$mainOpenGraph->key_words}}">
    <!--------------------------->
    <!------ open graph meta tag ------->

    <meta property="og:type"content="{{$og->openGraph->og_type?$og->openGraph->og_type:$mainOpenGraph->openGraph->og_type}}">
    <meta property="og:title"content="{{$og->openGraph->og_title?$og->openGraph->og_title:$mainOpenGraph->openGraph->og_title}}">
    <meta property="og:description"content="{{$og->openGraph->og_description?$og->openGraph->og_description:$mainOpenGraph->openGraph->og_description}}">
    <meta property="og:url"content="{{$og->openGraph->og_url?$og->openGraph->og_url:$mainOpenGraph->openGraph->og_url}}">
    <meta property="og:site_name"content="{{$og->openGraph->og_site_name?$og->openGraph->og_site_name:$mainOpenGraph->openGraph->og_site_name}}">


    @if($og->openGraph->image_url)
        <meta property="og:image"content="{{$og->openGraph->image_url}}">
    @elseif($mainOpenGraph->openGraph->image_url)
        <meta property="og:image"content="{{$mainOpenGraph->openGraph->image_url}}">
    @elseif($og->openGraph->og_image_id)
        <meta property="og:image"content="{{asset("/storage/uploads/".$og->openGraph->image->dir_name.'/'.$og->openGraph->image->name)}}">
    @elseif($mainOpenGraph->openGraph->og_image_id)
        <meta property="og:image"content="{{asset("/storage/uploads/".$mainOpenGraph->openGraph->image->dir_name.'/'.$mainOpenGraph->openGraph->image->name)}}">
    @endif

    <!------------->
@endsection
@section('content')
    <!-- start about page -->
    <div class="about-page">
        <div class="page-heading">
            <p>
                {{--About Power Block--}}
                {{trans("trans.about_about")}}
            </p>
        </div>

        <div class="page-body">
            <div class="container">
                <div class="about-wrapper">
                    <ul class="main-section-ul">
                        <li>
                            <div class="about-drop-div" data-img="vision-img">
                                <div class="about-drop-heading">
                                    <p>
                                        {{--Our Vision--}}
                                        {{trans("trans.about_vision")}}
                                    </p>
                                </div>
                                <div class="about-drop-icon">
                                    <div class="v-line"></div>
                                    <i class="linearicons-plus"></i>
                                </div>
                            </div>
                            <ul class="about-dropped">
                                {{--<li>
                                    <i class="ion-lightbulb"></i>
                                    <span>
                                       Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione accusantium aliquam
                                    </span>
                                </li>--}}
                                <li>
                                    {{--<i class="ion-lightbulb"></i>
                                    <span>

                                    </span>--}}
                                    {!! $about?$about->{'about_'.HelperClass::currentLang()}->vision:'' !!}
                                </li>

                            </ul>
                        </li>
                        <li>
                            <div class="about-drop-div" data-img="mission-img">
                                <div class="about-drop-heading">
                                    <p>
                                        {{--Our Mission--}}
                                        {{trans("trans.about_mission")}}
                                    </p>
                                </div>
                                <div class="about-drop-icon">
                                    <div class="v-line"></div>
                                    <i class="linearicons-plus"></i>
                                </div>
                            </div>
                            <ul class="about-dropped">
                                {{--<li>
                                    <i class="ion-lightbulb"></i>
                                    <span>
                                       Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione accusantium aliquam
                                    </span>
                                </li>--}}
                                <li>
                                    {{--<i class="ion-lightbulb"></i>
                                    <span>

                                    </span>--}}
                                     {!! $about?$about->{'about_'.HelperClass::currentLang()}->mission:'' !!}
                                </li>

                            </ul>
                        </li>
                        <li>
                            <div class="about-drop-div" data-img="values-img">
                                <div class="about-drop-heading">
                                    <p>
                                        {{--Our Values--}}
                                        {{trans("trans.about_values")}}
                                    </p>
                                </div>
                                <div class="about-drop-icon">
                                    <div class="v-line"></div>
                                    <i class="linearicons-plus"></i>
                                </div>
                            </div>
                            <ul class="about-dropped">
                                {{--<li>
                                    <i class="ion-lightbulb"></i>
                                    <span>
                                       Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione accusantium aliquam
                                    </span>
                                </li>--}}
                                <li>
                                    {{--<i class="ion-lightbulb"></i>--}}
                                    {{--<span>

                                     </span>--}}
                                      {!! $about?$about->{'about_'.HelperClass::currentLang()}->our_values:'' !!}
                                </li>

                            </ul>
                        </li>
                    </ul>

                    <div class="images-wrapper">
                        <ul>
                            <li class="vision-img active-li-img">
                                <div class="img-div">
                                    @if($about)
                                    <img src="/storage/uploads/about/{{$about->visionImage->name}}" alt="">
                                        @else
                                    @endif
                                </div>
                            </li>
                            <li class="mission-img">
                                <div class="img-div">
                                    @if($about)
                                    <img src="/storage/uploads/about/{{$about->missionImage->name}}" alt="">
                                        @else
                                    @endif
                                </div>
                            </li>
                            <li class="values-img">
                                <div class="img-div">
                                    @if($about)
                                    <img src="/storage/uploads/about/{{$about->valuesImage->name}}" alt="">
                                        @else
                                    @endif
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end about page -->
@endsection