@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> {!! $compound->descriptions()->title !!} </h2>
                        <p class="small"> <i class="fas fa-map-marker-alt"></i> <span> {!! $compound->descriptions()->address !!} </span> </p>
                        <div class="text mt-3">
                            {!! $compound->descriptions()->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>


        @if(count($compound->photos) > 0)
        <!-- ---------- compound_overview ----------- -->
        <section class="compound_overview">
            <div class="container">
                <div class="title"> {{__('web.compound_overview')}} </div>
                <div class="locations">
                    <div class="locations_content">
                        <div class="location_card">
                            <div class="locations_slider">
                                <div class="swiper-wrapper">
                                    @foreach($compound->photos as $photo)
                                    <div class="swiper-slide">
                                        <div class="img img_cover">
                                            <img src="{{asset($photo->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>
                @endif
                @if(count($compound->units) > 0)
                <div class="det_box mt-5">
                    <div class="compound_swiper">
                        <div class="swiper-wrapper">
                            @foreach($compound->units as $unit)
                            <div class="swiper-slide">
                                <div class="compound_card">
                                    <div class="img_box">
                                        <img src="{{asset($unit->image)}}" alt="" class="main_img"/>
                                        <a href="{{asset($unit->image)}}" data-fancybox="{{url('')}}/assets/web/images" class="expand_butn">
                                            <i class="bi bi-fullscreen"></i>
                                        </a>
                                    </div>
                                    <div class="card-body">
                                        <h1 class="title fw-bold">{{$unit->descriptions()->title}}</h1>
                                        <ul>
                                            <li>
                                                <b>{{__('web.units')}}:</b> {{$unit->units}}
                                            </li>
                                            <li>
                                                <b>{{__('web.rooms')}}:</b> {{$unit->rooms}}
                                            </li>
                                            <li>
                                                <b>{{__('web.type')}}:</b> {{__('web.'.$unit->type)}}
                                            </li>
                                            <li>
                                                <b>{{__('web.area')}}:</b> {{$unit->area}}
                                            </li>
                                            <li>
                                                <b>{{__('web.capacity')}}:</b> {{$unit->adult + $unit->child}} <small>({{$unit->adult}} Adult {{$unit->child}} Child)</small>
                                            </li>
                                        </ul>
                                    </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>
                @endif
                
                @if((count($compound->details('features')) +  count($compound->details('details'))) > 0)
                <div class="compound_info">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="box">
                                <div class="title"> {{__('web.features')}} </div>
                                <div class="">
                                    @foreach($compound->details('features') as $features)
                                    <div class="">
                                        <div class="colomn_item">
                                        @foreach($features as $feature)
                                            <div class="item">
                                                <h6 class="sub_title"> {{$feature->descriptions()->title}}: </h6>
                                                @foreach($feature->values as $value)
                                                <p> 
                                                    <span class="icon me-2"> <img src="{{asset($value->image)}}" alt=""> </span>
                                                    <span> {{$value->descriptions()->title}} </span>    
                                                </p>
                                                @endforeach
                                            </div>
                                          @endforeach
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        
                        </div>
                        <div class="col-lg-6">
                            <div class="box">
                                <div class="title"> {{__('web.details')}} </div>
                                <div class="colomn_item">
                                        @foreach($compound->details('details') as $details)
                                            @foreach($details as $detail)
                                            <div class="item">
                                                <h6 class="sub_title"> {{$detail->descriptions()->title}}: </h6>
                                                @foreach($feature->values as $value)
                                                <p> 
                                                    <span> {{$value->descriptions()->title}} </span>    
                                                </p>
                                                @endforeach
                                            </div>
                                            @endforeach
                                        @endforeach

                                </div>
                            </div>
                        </div>
           
                    </div>
                    <!-- <a href="#0" class="cart_icon"> <img src="{{url('')}}/assets/web/images/icons/7.svg" alt=""> </a> -->
                </div>
                @endif
                <div class="location_card">
                    <div class="title"> {{__('web.location_address')}} </div>
                    <div class="map">
                        <iframe src="https://maps.google.com/maps?q={{$compound->link}}&hl=es&z=14&amp;output=embed" 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