@extends('site.layouts.master')

@section('seoTags')
  @seoTags()
@endsection

    @php
        $seo = SEO\Models\Page::where('path',URL::full())->first();
    @endphp
        @section('title')
            <title>@lang('site.About_us')</title>
        @endsection
@section('metatags')
 @if(!empty($seo))
    <meta name="title" content="{{ $seo->meta_title ?? $seo->title }}">
    <meta name="keywords" content="{{ $seo->meta_keywords }}">
 <meta name="description" content="{{ $seo->description }}">
 @endif
 <link rel="canonical" href="{{str_replace('public/','',url()->current())}}">
<link rel="alternate" hreflang="@if(app()->getLocale() == 'ar'){{'en'}}@else{{'ar'}}@endif"
href="@if(app()->getLocale() == 'en' && str_contains(url()->current(),'/en/')){{str_replace('/en/','/ar/',str_replace('public/','',url()->current()))}}@else{{str_replace('/ar/','/en/',str_replace('public/','',url()->current()))}}@endif">
<link rel="alternate" hreflang="@if(app()->getLocale() == 'ar'){{'ar'}}@else{{'en'}}@endif" href="{{str_replace('public/','',url()->current())}}">
@endsection
@section('content')
<div class="d-none">
    {{ Breadcrumbs::render('About US') }}
</div>
{!! $breadcrumbSchema !!}
    <div class="px-3">
        <div class="d-flex justify-content-between justify-content-lg-center align-items-center">
            <div class="col-3 col-lg-2 mx-lg-2">
                <img loading="lazy" src="{{ asset('new_theme/logo-balloon.svg') }}" alt="logo-balloon">
            </div>
            <div class="col-8 col-lg-5 mx-lg-2">
                <p class="SF14_26Medium SF22_30Medium-lg text-white mb-0">@lang('site.weare')</p>
                <h1 class="SF30_34Black SF70_90Black-lg text-white">@lang('site.REMAX') <sup>&reg;</sup></h1>
                <p class="SF14_26Medium SF22_30Medium-lg text-white">@lang('site.A Business That Builds Businesses')</p>
            </div>
        </div>
    </div>
@endsection
@section('about_content')
    <div class="bg-f9f9f9">
        <div class="customWidth">
            <div>
                <p class="SF22_50Medium SF40_50Medium-lg my-3 text-center text-red">@lang('site.Our History')</p>
                <div class="owl-carousel d-flex justify-content-center">
                    @foreach ($histories as $j => $history)
                        <p class="my-0 mx-2 py-2 @if ($loop->first) SF22_30Bold px-3 text-blue border-blue rounded-3 @else SF22_30Regular text-707070 @endif historyDates"
                            id="{{ $j }}">{{ $history->date }}</p>
                    @endforeach
                </div>
                @foreach ($histories as $i => $history)
                    <div class="@if (!$loop->first) d-none @endif my-3" id="hisDes{{ $i }}">
                        <div class="d-lg-flex justify-content-lg-between align-items-lg-center">
                            <img loading="lazy" src="{{ asset('new_theme/roof.webp') }}" class="col-12 col-lg-5 rounded-3" alt="history-img">
                            <div class="col-lg-6">
                                <p class="SF40_43Bold SF90_100Bold-lg text-blue my-3">{{ $history->date }}</p>
                                <div class="SF14_20Regular SF22_30Regular-lg my-2 col-lg-10 text-3b3b3b">{!! $history->desc !!}</div>
                            </div>
                        </div>
                    </div>
                @endforeach
                <div class="d-flex justify-content-around my-2">
                    @isset($company_profile_path)
                        <a target="_blank" href="{{ request()->root() . $company_profile_path }}"
                            class="btn bg-red w-100 text-white SFBold14_16 SF18_21Bold-lg py-3">@lang('site.Campany Profile') <i class="fa fa-download mx-2"
                                aria-hidden="true"></i></a>
                    @endisset
                </div>
            </div>
            <div class="my-3">
                <p class="SFBlack22_26 SFBlack40_48-lg mb-0 text-3b3b3b">@lang('site.weare')</p>
                <p class="SF22_26Medium SF40_48Medium-lg text-3b3b3b">@lang('site.about_numberOne')</p>
                {{-- <p class="SF18_30Medium text-red">@lang('site.REMAX')</p> --}}
                @foreach ($about_us_globaly as $item)
                    <div>
                        <p class="SF18_30Medium SF22_30Medium-lg text-red">{{ $item->title }}</p>
                        <div class="SF14_20Regular SF18_30Regular-lg text-9b9b9b">{!! $item->description !!}</div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <div class="my-4 bg-f9f9f9">
        <img loading="lazy" class="w-100" src="{{ asset('new_theme/world.webp') }}" alt="world">
    </div>
    <div class="py-3 py-lg-5 light-blue-background bg-f9f9f9">
        <div class="customWidth">
            <p class="SF22_40Black SFBlack40_48-lg text-white mb-0">@lang('site.weown')</p>
            <p class="SF22_40Medium SF40_48Medium-lg text-white mb-0 text-uppercase">@lang('site.trademark')</p>
            <div class="SF18_30Regular SF22_30Regular-lg text-white">
                {!! App\Statics::getWithCurrentLang('trade_mark_description') !!}
            </div>
        </div>
    </div>
    <div class="py-3 py-lg-5 bg-f9f9f9">
        <div class="customWidth d-lg-flex justify-content-lg-between align-items-lg-center">
            <div class="col-lg-6">
                <img loading="lazy" class="w-100 rounded-3" src="{{ asset('new_theme/houses.webp') }}" alt="houses">
            </div>
            <div class="col-lg-6 px-lg-3">
                <p class="d-inline-block SF22_40Black SFBlack40_48-lg text-3b3b3b mb-0">@lang('site.weare')</p>
                <p class="d-inline-block SF22_40Medium SF40_48Medium-lg text-3b3b3b mb-0">@lang('site.worldwide')</p>
                <p class="SF22_26Bold SF40_48Bold-lg text-blue">@lang('site.benefits')</p>
                <div class="SF18_30Regular SF22_30Regular-lg text-9b9b9b">
                    <ul style="list-style: disc">
                        <li> {{ App\Statics::getWithCurrentLang('ww_first_point') }}</li>
                        <li> {{ App\Statics::getWithCurrentLang('ww_second_point') }}</li>
                        <li> {{ App\Statics::getWithCurrentLang('ww_third_point') }}</li>
                        <li> {{ App\Statics::getWithCurrentLang('ww_fourth_point') }}</li>
                    </ul>
                </div>
                <div class="text-uppercase my-5">
                    <a href="https://global.remax.com" class="text-red SF18_30Regular SF22_30Regular-lg" title="View the RE/MAX Global Network">
                        <strong>global.remax.com</strong>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="py-3 py-lg-5 bg-3b3b3b">
        <div class="customWidth">
            <p class="SF22_40Black SFBlack40_48-lg text-white mb-0">@lang('site.weare')</p>
            <p class="SF22_40Regular SF40_48Medium-lg text-white mb-0">@lang('site.luxury')</p>
            <div class="SF18_30Medium SF22_30Medium-lg text-e2e2e2">
                {!! App\Statics::getWithCurrentLang('are_luxury') !!}
            </div>
            <div class="my-3">
                <img loading="lazy" class="w-100 rounded-3" src="{{ asset('new_theme/room.webp') }}" alt="room">
            </div>
        </div>
    </div>
    <div class="py-3 pt-lg-5 bg-f9f9f9">
        <div class="customWidth">
            <p class="SF22_40Black SFBlack40_48-lg text-3b3b3b mb-0">@lang('site.demand')</p>
            <p class="SF22_40Medium SF40_48Medium-lg text-3b3b3b mb-0">@lang('site.education')</p>
            <p class="SF18_30Regular SF22_30Regular-lg text-9b9b9b">@lang('site.Average commission income for RE/MAX designees in the U.S.') <strong>$120,400*</strong></p>
            <div class="d-lg-none bg-blue">
                <img loading="lazy" class="w-100" src="{{ asset('new_theme/education-chart.webp') }}" alt="education chart">
            </div>
        </div>
    </div>
    <div class="d-none d-lg-block p-lg-5 bg-blue">
        <img loading="lazy" class="w-100" src="{{ asset('new_theme/education-chart.webp') }}" alt="education chart">
    </div>
    <div class="py-3 bg-f9f9f9">
        <div class="customWidth">
            <p class="home_request_price SF60_78Bold-lg text-red mb-0 text-center">@lang('site.seefor') @lang('site.yourself')</p>
            {{-- <p class="SF18_30Regular SF22_30Regular-lg text-9b9b9b text-center my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Assumenda, labore. Nihil, doloremque eveniet impedit</p> --}}
            <div class="d-flex justify-content-around my-2">
                <a target="_blank" href="{{route('careers.all')}}" class="btn bg-red col-12 col-lg-4 text-white SF18_21Bold SF20_24Bold-lg py-3">@lang('site.joinus')</a>
            </div>
        </div>
    </div>
    {{-- <div class="py-3 bg-f9f9f9">
        <div class="customWidth">
            <div class="d-flex flex-wrap justify-content-center justify-content-lg-between">
                @if(!empty($gov_IDS[0]))
                <div class="col-11 w-lg-24 bg-white rounded-3 p-3 my-2 shadow-sm">
                    <div id="seeDIV22" class="seemore2">
                        <p class="text-3b3b3b SF21_30Bold my-2">@lang('site.Search For') @lang('site.Property') @lang('site.By Governorates')</p>
                        <div class="line"></div>
                        @foreach ($gov_IDS as $link)
                            <div class="my-2">
                                <a class="text-decoration-underline text-blue small SF22_30Regular" target="_blank" href="{{ url('/'.app()->getLocale().'/govs/'.urlencode(str_replace(' ','-',$link->governorate->name)))}}">@lang('site.Property') @lang('site.In') {{ $link->governorate->name }}</a>
                            </div>
                        @endforeach
                    </div>
                    <div class="text-center my-4">
                        <a class="SF18_40Regular text-3b3b3b d-flex justify-content-between align-items-center text-decoration-none" href="" id="see22"><small>{{__('site.see_more')}}</small> <i class="fa fa-angle-down"></i></a>
                    </div>
                </div>
                @endif
                @if(!empty($city_IDS[0]))
                <div class="col-11 w-lg-24 bg-white rounded-3 p-3 my-2 shadow-sm">
                    <div id="seeDIV3" class="seemore2">
                        <p class="text-3b3b3b SF21_30Bold my-2">@lang('site.Search For') @lang('site.Property') @lang('site.By Cities')</p>
                        <div class="line"></div>
                        @foreach ($city_IDS as $link)
                            <div class="my-2">
                                <a class="text-decoration-underline text-blue small SF22_30Regular" target="_blank" href="{{ url('/'.app()->getLocale().'/'.urlencode(str_replace(' ','-',$link->city->governorate->name)).'/'.urlencode(str_replace(' ','-',$link->city->name)))}}">@lang('site.Property') @lang('site.In') {{ $link->city->name }}</a>
                            </div>
                        @endforeach
                    </div>
                    <div class="text-center my-4">
                        <a class="SF18_40Regular text-3b3b3b d-flex justify-content-between align-items-center text-decoration-none" href="" id="see3"><small>{{__('site.see_more')}}</small> <i class="fa fa-angle-down"></i></a>
                    </div>
                </div>
                @endif
                @if(!empty($district_IDS[0]))
                <div class="col-11 w-lg-24 bg-white rounded-3 p-3 my-2 shadow-sm">
                    <div id="seeDIV4" class="seemore2">
                        <p class="text-3b3b3b SF21_30Bold my-2">@lang('site.Search For') @lang('site.Property') @lang('site.By Districts')</p>
                        <div class="line"></div>
                        @foreach ($district_IDS as $link)
                            <div class="my-2">
                                <a class="text-decoration-underline text-blue small SF22_30Regular" target="_blank" href="{{ url('/'.app()->getLocale().'/'.urlencode(str_replace(' ','-',$link->district->city->name)).'/'.urlencode(str_replace(' ','-',$link->district->name)))}}">@lang('site.Property') @lang('site.In') {{ $link->district->name }}</a>
                            </div>
                        @endforeach
                    </div>
                    <div class="text-center my-4">
                        <a class="SF18_40Regular text-3b3b3b d-flex justify-content-between align-items-center text-decoration-none" href="" id="see4"><small>{{__('site.see_more')}}</small> <i class="fa fa-angle-down"></i></a>
                    </div>
                </div>
                @endif
                @if(!empty($compound_IDS[0]))
                <div class="col-11 w-lg-24 bg-white rounded-3 p-3 my-2 shadow-sm">
                    <div id="seeDIV5" class="seemore2">
                        <p class="text-3b3b3b SF21_30Bold my-2">@lang('site.Search For') @lang('site.Property') @lang('site.By Compounds')</p>
                        <div class="line"></div>
                        @foreach ($compound_IDS as $link)
                            <div class="my-2">
                                <a class="text-decoration-underline text-blue small SF22_30Regular" target="_blank" href="{{ url('/'.app()->getLocale().'/'.urlencode(str_replace(' ','-',$link->compound->city->name)).'/'.urlencode(str_replace(' ','-',$link->compound->name)))}}">@lang('site.Property') @lang('site.In') {{ $link->compound->name }}</a>
                            </div>
                        @endforeach
                    </div>
                    <div class="text-center my-4">
                        <a class="SF18_40Regular text-3b3b3b d-flex justify-content-between align-items-center text-decoration-none" href="" id="see5"><small>{{__('site.see_more')}}</small> <i class="fa fa-angle-down"></i></a>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div> --}}
@endsection
@section('script')
    <script>
        $(".owl-carousel").owlCarousel({
            margin: 20,
            autoWidth: true,
        });
        $('.historyDates').click(function() {
            $('.historyDates').removeClass('SF22_30Bold px-3 text-blue border-blue rounded-3');
            $('.historyDates').addClass('SF22_30Regular text-707070');
            $(this).removeClass('SF22_30Regular text-707070');
            $(this).addClass('SF22_30Bold px-3 text-blue border-blue rounded-3');
            $('[id^=hisDes]').addClass('d-none');
            id = $(this).attr("id");
            $('[id^=hisDes' + id + ']').removeClass('d-none');
        });
        $("#see22").on("click", function(e) {
            e.preventDefault();
            $("#seeDIV22").toggleClass('seemore2');
            if($("#seeDIV22").hasClass('seemore2')){
                $(this).children('small').html('{{ __("site.see_more") }}');
                $(this).children('i').removeClass('fa-angle-up');
                $(this).children('i').addClass('fa-angle-down');
            }else{
                $(this).children('small').html('{{ __("site.see_less") }}');
                $(this).children('i').removeClass('fa-angle-down');
                $(this).children('i').addClass('fa-angle-up');
            }
        });
        $("#see3").on("click", function(e) {
            e.preventDefault();
            $("#seeDIV3").toggleClass('seemore2');
            if($("#seeDIV3").hasClass('seemore2')){
                $(this).children('small').html('{{ __("site.see_more") }}');
                $(this).children('i').removeClass('fa-angle-up');
                $(this).children('i').addClass('fa-angle-down');
            }else{
                $(this).children('small').html('{{ __("site.see_less") }}');
                $(this).children('i').removeClass('fa-angle-down');
                $(this).children('i').addClass('fa-angle-up');
            }
        });
        $("#see4").on("click", function(e) {
            e.preventDefault();
            $("#seeDIV4").toggleClass('seemore2');
            if($("#seeDIV4").hasClass('seemore2')){
                $(this).children('small').html('{{ __("site.see_more") }}');
                $(this).children('i').removeClass('fa-angle-up');
                $(this).children('i').addClass('fa-angle-down');
            }else{
                $(this).children('small').html('{{ __("site.see_less") }}');
                $(this).children('i').removeClass('fa-angle-down');
                $(this).children('i').addClass('fa-angle-up');
            }
        });
        $("#see5").on("click", function(e) {
            e.preventDefault();
            $("#seeDIV5").toggleClass('seemore2');
            if($("#seeDIV5").hasClass('seemore2')){
                $(this).children('small').html('{{ __("site.see_more") }}');
                $(this).children('i').removeClass('fa-angle-up');
                $(this).children('i').addClass('fa-angle-down');
            }else{
                $(this).children('small').html('{{ __("site.see_less") }}');
                $(this).children('i').removeClass('fa-angle-down');
                $(this).children('i').addClass('fa-angle-up');
            }
        });
    </script>
@endsection