@extends('layouts.default')

@section('title', $advertisement->title . ' - Lécuyer')

@section('css')
<link href="{{ asset("css/owl.carousel.min.css") }}" rel="stylesheet" type="text/css" />
<link href="{{ asset("css/bien.css") }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')

<main class="bienPage">

    <!--========== Hero area ===========-->
    <div class="hero_area" style="background-image: url('{{ asset($advertisement->cover) }}');">
        <div class="hero_inner">
            <div class="bot_con_area row">
                <div class="col-4 pd-cont">
                    <img src="{{ asset('img/hero-logo-2.svg') }}" class="img-fluid w-100" alt="">
                </div>
                <div class="col-8 p-0">
                    <p>OFFICE DE GESTION ET DE <br> TRANSACTION IMMOBILIÈRE</p>
                </div>
            </div>
        </div>
    </div>

    <!--========== content area ===========-->
    <div class="full_content_area">
        <!--========== Content Top area ===========-->
        <div class="content_top_area">
            <div class="container">
                <div class="content_top_inner">
                    <div class="title_wrap d-md-flex justify-content-between ">
                        <h2 class="sec_title">{{ $advertisement->title }}</h2>
                        @if($advertisement->service->is_for_sale)
                            <h3 class="sec_title">{{ price_format($advertisement->service->price) }} <span>F.A.I</span></h3>
                        @elseif($advertisement->service->is_for_rental)
                            <h3 class="sec_title">{{ price_format($advertisement->service->rent) }} <span>/mois</span></h3>
                        @endif
                    </div>
                    <ul class="title_meta d-flex justify-content-between">
                        @if($advertisement->property->rooms_count > 0)
                            <li><span>{{ $advertisement->property->rooms_count }} </span> pièces</li>
                        @endif
                        @if($advertisement->property->bedrooms_count > 0)
                            <li><span>{{ $advertisement->property->bedrooms_count }} </span> chambres</li>
                        @endif
                        @if($advertisement->property->surface)
                            <li> <span>{{ $advertisement->property->surface }} </span> m<sup>2</sup></li>
                        @endif
                        @if($advertisement->property->step)
                            <li>Étage <span>{{ $advertisement->property->step }}<</span> </li>
                        @endif
                    </ul>
                    <p class="con">{{ $advertisement->property->address }}</p>
                    <p class="sub_con">{{ $advertisement->property->postal_code }} {{ $advertisement->property->district }}</sup></p>
                </div>
            </div>
        </div>

        <!--========== Content Bottom area ===========-->
        <div class="content_bot_area">
            <div class="container">
                <div class="row">
                    <div class="col-md-7 left_con_area">
                        <!-- new section -->
                        <div class="title_box d-flex">
                            <h2 class="sec_title">Description </h2>
                            <img src="{{ asset('img/document.svg') }}" alt="Icon feuille de papier">
                        </div>
                        <p class="con">{{ $advertisement->description }}</p>
                        <br>

                        <!-- new section -->
                        <div class="title_box d-flex">
                            <h2 class="sec_title">Caractéristique </h2>
                            <img src="{{ asset('img/stars.svg') }}" alt="Icone trois étoiles">
                        </div>
                        @if($advertisement->property->year_construction)
                            <p class="sp_con d-block">
                                <span>Année de construction : </span>{{ $advertisement->property->year_construction }}
                            </p>
                            <hr class="sp_devider">
                        @endif
                        @if($advertisement->property->steps)
                            <p class="sp_con d-block">
                                <span>Étage : </span>{{ $advertisement->property->steps }}
                            </p>
                            <hr class="sp_devider">
                        @endif
                        @if($advertisement->property->garage)
                            <p class="sp_con d-block">
                                <span>Garage : </span>Oui
                            </p>
                            <hr class="sp_devider">
                        @endif
                        @if($advertisement->property->lift || $advertisement->property->digicode)
                        <p class="sp_con d-block">
                            <span>Service et accessibilité : </span>
                            {{ $advertisement->property->lift ? 'Ascenseur' : '' }}
                            {{ $advertisement->property->lift || $advertisement->property->digicode? '-' : '' }}
                            {{ $advertisement->property->digicode ? 'Digicode' : '' }}
                            <hr class="sp_devider">
                        </p>
                        @endif
                        @if($advertisement->property->interior_state || $advertisement->property->kitchen_type || $advertisement->property->heating_type)
                        <p class="sp_con d-block">
                            <span>À l'intérieur : </span>{{ $advertisement->property->interior_state ?? '' }}
                            @if($advertisement->property->kitchen_type)
                            - Cuisine {{ $advertisement->property->kitchen_type }}
                            @endif
                            @if($advertisement->property->heating_type)
                            - {{ $advertisement->property->heating_type }}
                            @endif
                        </p>
                        @endif
                        <br>

                        <!-- new section -->
                        <div class="title_box d-flex">
                            <h2 class="sec_title">Diagnostique énergétique </h2>
                            <img src="{{ asset('img/search-title-icon.svg') }}" alt="Icone loupe recherche">
                        </div>
                        @if($advertisement->diagnostic->dpe_consumption_tag)
                        <p class="spp_conx">
                            <span class="a @if($advertisement->diagnostic->dpe_consumption_tag == 'A') big @endif">A</span>
                            <span class="b @if($advertisement->diagnostic->dpe_consumption_tag == 'B') big @endif">B</span>
                            <span class="c @if($advertisement->diagnostic->dpe_consumption_tag == 'C') big @endif">C</span>
                            <span class="d @if($advertisement->diagnostic->dpe_consumption_tag == 'D') big @endif">D</span>
                            <span class="e @if($advertisement->diagnostic->dpe_consumption_tag == 'E') big @endif">E</span>
                            <span class="f @if($advertisement->diagnostic->dpe_consumption_tag == 'F') big @endif">F</span>
                            <span class="g @if($advertisement->diagnostic->dpe_consumption_tag == 'G') big @endif">G</span>
                        @endif
                        @if($advertisement->diagnostic->dpe_consumption_value)
                            <br class="d-block d-lg-none">
                            <span class="last"><strong>{{ $advertisement->diagnostic->dpe_consumption_value }}</strong> kWh / m2.an</span>
                        @endif
                        </p>
                    </div>
                    <!-- contact from area -->
                    <div class="col-md-5">
                        <div class="contact_wrap">
                            <div class="contact_inner">
                                <h2 class="sec_title">Contactez-nous</h2>
                                <h3 class="sec_sub_title">en quelques clics</h3>
                                <hr class="sec_devider">
                                @include('elements.forms.contact')
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @if ($advertisement->photos)
                <div class="slider_area_wrap">
                    <div class="container">
                        <!-- slider title -->
                        <div class="title_box d-flex">
                            <h2 class="sec_title">Gallerie photo </h2>
                            <img src="{{ asset('img/gellary-icon-img.svg') }}" alt="Icone image">
                        </div>
                        <div class="row">
                            <div class="col-md-6 gallary_slider_wrap mb_20">
                                <div class="gallery_slider owl-carousel owl-theme">
                                    @foreach($advertisement->photos as $key => $photo)
                                        <img src="{{ asset($photo) }}" class="item" alt="{{ $advertisement->title }} photo {{ $key }}" data-hash="{{ $key }}">
                                    @endforeach
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    @foreach($advertisement->photos as $key => $photo)
                                        <div class="col-6">
                                            <a href="#{{ $key }}">
                                                <img src="{{ asset($photo) }}" class="mb_15 img-fluid w-100" alt="{{ $advertisement->title }} photo {{ $key}} miniature">
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
    <x-same-type-advertisements :advertisement=$advertisement/>

</main>

@include('elements.learn-more')

@endsection