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

  <header>
        <div class="container">
            <div class="row align-items-center justify-content-between">
                <div class="col-lg-5">
                    <div class="info">
                        <h2> {!! $page->descriptions()->title !!} </h2>
                        <div class="text mt-3">
                            {!! $page->descriptions()->description !!}
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="img img_cover mt-4 mt-lg-0">
                        <img src="{{asset($page->image)}}" alt="" class="main_img">
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!--  end header  -->

    <main>


        <!-- ---------- location_pg_card ----------- -->
        @foreach($cities as $city)
        <section class="location_pg_card" id="city{{$city->id}}">
            <div class="container">
                <h2 class="mb-3"> {{$city->descriptions()->title}} </h2>
                @if(count($city->compounds) > 2)
                    <div class="swiper-container loc_swiper">
                        <div class="swiper-wrapper">
                            @foreach($city->compounds as $compound)
                            <div class="swiper-slide">
                                <div class="location_card">
                                    <div class="img img_cover">
                                        <img src="{{asset($compound->image)}}" alt="" class="main_img">
                                    </div>
                                    <div class="info">
                                        <div class="title"> {!! $compound->descriptions()->title !!} </div>
                                        <p>{{strip_tags($compound->descriptions()->description)}}</p>
                                        <div class="text-center mt-5">
                                            <a href="{{url('compound/'.$compound->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>
                @else
                
                    <div class="swiper-container loc_swiper2">
                        <div class="swiper-wrapper">
                            @foreach($city->compounds as $compound)
                            <div class="swiper-slide">
                                <div class="location_card">
                                    <div class="img img_cover">
                                        <img src="{{asset($compound->image)}}" alt="" class="main_img">
                                    </div>
                                    <div class="info">
                                        <div class="title"> {!! $compound->descriptions()->title !!} </div>
                                        <p>{{strip_tags($compound->descriptions()->description)}}</p>
                                        <div class="text-center mt-5">
                                            <a href="{{url('compound/'.$compound->id)}}" class="butn butn_borderd me-3"> <span> {{__('web.explore')}} </span> </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            
                        </div>
                        <div class="arrows d-none">
                            <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>
                @endif
          
            </div>
        </section>
        @endforeach
        <!-- ---------- location_pg_card ----------- -->
        



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

@stop