@extends('web.layouts.app')

@section('title', transWord('من نحن'))
@description(Str::limit(strip_tags(getSetting('desc_seo', app()->getLocale())), 160))
@keywords(implode(',', json_decode(getSetting('keyword', app()->getLocale()))))
@image(asset('storage/' . getSetting('logo')))

@section('sub_header')
    <div class="sub-header">
        <div class="main-container">
            <div class="text-about-header">
                <h2>{{ transWord('من نحن') }}</h2>
                <h6> <a href="{{ route('web.solutions.home') }}"> {{ transWord('الرئيسية') }}</a> <i
                        class="bi bi-chevron-double-left"></i>
                    {{ transWord('من نحن') }} </h6>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <section class="aboutus-page">

        <!-- start about us :) -->
        <div class="about-us  mr-section">
            <div class="details-aboutus">
                <div class="main-container">
                    <div class="row align-items-center">

                        <!-- text-about == -->
                        <div class="col-lg-7">
                            <div data-aos="fade-left" class="text-about">
                                <div class="title-start">
                                    <h2>{{ transWord('من نحن') }}</h2>
                                </div>
                                <p>
                                    {!! getSetting('about_us', app()->getLocale()) !!}
                                </p>
                                <h3>
                                    {{ transWord('وتتميز شركة رتام بخبرة واسعة في مجالات تكنولوجيا المعلومات ومنها') }} :
                                </h3>
                                <ul>
                                    @foreach ($features as $feature)
                                        <li>
                                            <img src="{{ asset('storage/' . $feature->image) }}" alt="{{ $feature->name }}">
                                            {{ $feature->name }}
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>

                        <!-- images about us -->
                        <div class="col-lg-5">
                            <div class="img-aboutus-index">
                                <img src="{{ asset('storage/' . getSetting('about_us_first_image')) }}" alt="">
                                <img src="{{ asset('storage/' . getSetting('about_us_second_image')) }}" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end about us -->

        <!-- start advantages-index :) -->
        <div class="advantages-index mr-div mr-section">
            <div class="main-container">
                <div class="main-advantages-index" id="scroll2">
                    <div class="row row-gap">
                        <div class="col-lg-4">
                            <div class="sub-advantages-index" data-aos="flip-down" data-aos-easing="linear"
                                data-aos-duration="700">
                                <div class="img-advantages-index">
                                    <img src="{{ url('web') }}/imges/frame1.png" alt="">
                                </div>
                                <div class="text-advantages-index">
                                    <h2>{{ transWord('رؤيتنا') }}</h2>
                                    <p>
                                        {!! getSetting('our_vision', app()->getLocale()) !!}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="sub-advantages-index" data-aos="flip-down" data-aos-easing="linear"
                                data-aos-duration="700">
                                <div class="img-advantages-index">
                                    <img src="{{ url('web') }}/imges/frame2.png" alt="">
                                </div>
                                <div class="text-advantages-index">
                                    <h2>{{ transWord('رسالتنا') }}</h2>
                                    <p>
                                        {!! getSetting('our_message', app()->getLocale()) !!}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="sub-advantages-index" data-aos="flip-down" data-aos-easing="linear"
                                data-aos-duration="700">
                                <div class="img-advantages-index">
                                    <img src="{{ url('web') }}/imges/frame3.png" alt="">
                                </div>
                                <div class="text-advantages-index">
                                    <h2>{{ transWord('قيمنا') }}</h2>
                                    <p>
                                        {!! getSetting('our_values', app()->getLocale()) !!}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end advantages-index -->

        <!-- start Chairman's Message -->
        <div class="chairman-message">
            <div class="main-container">
                <div class="titel-chairman">
                    <h2>{{ transWord('كلمة رئيس مجلس الادارة') }}</h2>
                    <img src="{{ url('web') }}/imges/f11.png" alt="">
                </div>
                <div class="sub-message">
                    {{-- <div class="img-chairman">
                        <img src="imges/chairman.png" alt="">
                    </div> --}}
                    <div class="text-message">

                        <!-- text editor -->
                        <div>
                            <p>
                                {!! getSetting('Chairman_of_Board_of_Directors', app()->getLocale()) !!}
                            </p>
                        </div>


                        <!-- he should h5  -->
                        <!-- <h5>Eng. Bander Al Rashidi</h5> -->
                    </div>
                </div>
            </div>
        </div>
        <!-- end Chairman's Message -->


        <!-- start customer-index  -->
        <div class="customer-index pg-section">
            <div class="main-container">
                <div class="title-start">
                    <h2> {{ transWord('اراء عملاءنا') }}</h2>
                </div>

                <div class="owl-carousel owl-theme" id="slider-customer">

                    @foreach ($feedbacks as $feedback)
                        <div class="item">
                            <div class="sub-customer-index">
                                <div class="img-customer-index">
                                    <img src="{{ url('web') }}/imges/feedback.png" alt="{{ $feedback->name }}">
                                </div>
                                <div class="text-customer-index">
                                    <p>{{ $feedback->review }}</p>
                                    <h2>{{ $feedback->name }} </h2>
                                    <h4>{{ $feedback->job_title }}</h4>
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
        <!-- end customer-index  -->

    </section>

@endsection