@extends('web.layouts.layout')
@section('content')

    <header class="about_header">
        <div class="row align-items-center justify-content-between zi_5">
            <div class="col-lg-6">
                <div class="content">
                    <div class="info">
                        <h6 >{!! $pages[0]->title !!}</h6>
                        <h1> {!! $pages[0]->title_2 !!}</h1>
                        <div class="text">
                            {!! $pages[0]->description !!}
                        </div>
               
                    </div>
                </div>
            </div>
        </div>
        <img src="{{asset($pages[0]->image)}}" class="bg" alt="" />
    </header>
    <!--  end header  -->

    <main>
        <!-- ---------- services_sec ----------- -->
        <section class="services_sec">
            <div class="container">
                <div class="row">
                    <div class="col-lg-2">
                        <div class="props_sec">
                            <div class="txt">
                                <h2 class="sec_title fw-regular">{{__('web.our_core_services')}}</h2>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-10">
                        <div class="box">
                            <div class="swiper-container services_swiper">
                                <div class="swiper-wrapper">
                                    @foreach($services as $row)
                                        <div class="swiper-slide">
                                            <div class="service_card">
                                                <img src="{{asset($row->image)}}" class="img" alt="" />
                                                <div class="card-body">
                                                    <h5 class="title mb-3 subColor2 fw-regular text-uppercase">{!! $row->name !!}</h5>
                                                    <p class="p">
                                                        {!! $row->description !!}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ---------- location_pg_card ----------- -->
        <section class="properties_sec">
            <div class="container">
                <div class="inner">
                    <div class="row zi-5">
                        <div class="col-lg-8 m-auto">
                            <div class="text_box text-center">
                                <h2 class="title fw-bold text-white mb-4">
                                    {!! $pages[1]->title !!}
                                </h2>
                                <p class="text-white">
                                    {!! $pages[1]->description !!}
                                </p>
                                @if($pages[1]->link)
                                    <a href="{{$pages[1]->link}}" class="butn mt-4 fw-bold"> <span>{{__('web.discover_more')}}</span> </a>
                                @endif
                            </div>
                        </div>
                    </div>
                    <img src="{{url('')}}/assets/web/images/properties_bg.png" class="bg" alt=""/>
                </div>
            </div>
        </section>

        <!-- ---------- location_pg_card ----------- -->
        @foreach($cities as $city)
            <section class="location_pg_card">
                <div class="container">
                    <h2 class="mb-3"> {{$city->title}} </h2>
                    <div class="swiper-container loc_swiper">
                        <div class="swiper-wrapper">
                            @foreach($city->compounds as $row)
                                <div class="swiper-slide">
                                    <div class="location_card">
                                        <div class="img img_cover">
                                            <img src="{{asset($row->image)}}" alt="" class="main_img">
                                        </div>
                                        <div class="info">
                                            <div class="title"> {!! $row->currentDescription->title !!} </div>
                                            <p> {!! $row->currentDescription->description !!}  </p>
                                            <div class="text-center mt-5">
                                                <a href="{{route('compound',$row->id)}}" class="butn butn_borderd me-3"> <span> {{__('web.explore')}} </span> </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="arrows">
                            <span class="swiper_next"> <img src="{{url('')}}/assets/web/images/icons/prev.svg" alt=""> </span>
                            <span class="swiper_prev"> <img src="{{url('')}}/assets/web/images/icons/next.svg" alt=""> </span>
                        </div>
                    </div>
              
                </div>
        
            </section>
        @endforeach


        <!-- <div class="img_pattern1">
        </div> -->
    </main>
    

@stop