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

    <header>
        <div class="container">
            <div class="row align-items-center justify-content-between">
                <div class="col-lg-5">
                    <div class="info">
                        <h2> {!! $compound->title !!} </h2>
                        <p class="small"> <i class="fas fa-map-marker-alt"></i> <span> {!! $compound->address !!} </span> </p>
                        <div class="text mt-3">
                            {!! $compound->description !!}
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="img img_cover mt-4 mt-lg-0">
                        <img src="{{asset($compound->image)}}" alt="" class="main_img">
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!--  end header  -->

    <main>


        <!-- ---------- compound_overview ----------- -->
        <section class="compound_overview">
            <div class="container">
                <!-- <div class="title"> Compound Overview </div> -->
                <div class="locations">
                    <div class="locations_content">
                        <div class="location_card">
                            <div class="locations_slider">
                                <div class="swiper-wrapper">
                                    @foreach($photos as $row)
                                        <div class="swiper-slide">
                                            <div class="img img_cover">
                                                <img src="{{asset($row->image)}}" alt="" class="main_img">
                                            </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>
                    </div>
                </div>

                <div class="content_box">
                    <div class="row">
                        <div class="col-lg-2">
                            <div class="title_box">
                                <h2 class="fw-light subColor2">{{__('web.features')}}</h2>
                            </div>
                        </div>
                        <div class="col-lg-10">
                            <div class="inner">
                                <div class="row">
                                    @foreach($features as $feature)
                                        <div class="col-lg-4">
                                            <div class="content">
                                                <h4 class="subColor2 mb-4 fw-light"> {{$feature->title}}:   </h4>
                                                <div class="">
                                                    @foreach($feature->values as $row)
                                                        <p> 
                                                            @if($row->image)
                                                                <img src="{{asset($row->image)}}" class="icon me-2" alt="">  
                                                            @endif
                                                            {{$row->currentDescription->title}}
                                                        </p>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content_box">
                    <div class="row">
                        <div class="col-lg-2">
                            <div class="title_box">
                                <h2 class="fw-light subColor2">{{__('web.details')}}</h2>
                            </div>
                        </div>
                        <div class="col-lg-10">
                            <div class="inner">
                                <div class="row">
                                    @foreach($details as $detail)
                                        <div class="col-lg-4">
                                            <div class="content">
                                                <h4 class="subColor2 mb-4 fw-light"> {{$detail->title}}:  </h4>
                                                <div class="">
                                                    @foreach($detail->values as $row)
                                                        <p> {{$row->currentDescription->title}} </p>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="location_card">
                    <div class="title fs-3"> {{__('web.location_address')}} </div>
                    <div class="map">
                        <iframe src="{{$compound->link}}" width="100%" height="650" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                        <a href="#" class="full_map"> <i class="far fa-expand-arrows"></i> </a>
                    </div>
                </div>
            </div>
        </section>



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