@extends('web.layouts.app')

@section('content')
<div class="prodetails-body">
    <div class="cus-container">
        <div class="row">
            <div class="col-lg-9 col-md-8 col-sm-12">
                <div class="detls-top">
                    <div class="lt-side">
                        {{-- <a href="#">{{ business_type($property) }}</a> --}}
                        <h2>{{ $property->name ?? '' }}</h2>
                        <p><img src="{{ asset('web/assets/images/address-icon.png') }}" alt="">
                            {{ $property->street_address ?? '' }} {{ $property->city ?? '' }} {{ $property->state ?? '' }}
                            {{ $property && $property->country ? $property->country->name : '' }}
                        </p>
                    </div>
                    {{-- <div class="rt-side">
                        <h3>AED {{ $property ? number_format($property->price) : '' }}</h3>
                    <h3>$ {{ $property ? number_format($property->dollar_price) : '' }}</h3>
                    <span>/month</span>
                </div> --}}
            </div>
            <div class="price-tab">
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">AED</button>
                    <button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">USD</button>
                </div>
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                        <div class="tab-price-box">
                            <h3>AED {{ $property ? number_format($property->price) : '' }}
                                <span>{{(business_type($property)== 'Rent') ? '/'.stay($property) : '' }}</span></h3>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                        <div class="tab-price-box">
                            <h3>$ {{ $property ? number_format($property->dollar_price) : '' }}
                                <span>{{(business_type($property)== 'Rent') ? '/'.stay($property) : '' }}</span></h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="product-slider destls-common">
                <h2 class="detls-ttl">Gallery</h2>
                @php
                $mediaItems = $property ? $property->getMedia('property-image') : [];
                @endphp

                @if($mediaItems)
                <div class="slider">
                    @foreach($mediaItems as $index => $mediaItem)
                    @php
                    $image_url = $mediaItems[$index]->getUrl() ;
                    @endphp
                    <figure>
                        <img src="{{ $image_url }}" alt="">
                    </figure>
                    @endforeach
                </div>

                <div class="slider-nav-thumbnails">
                    @foreach($mediaItems as $index => $mediaItem)
                    @php
                    //$image_url = config('kenzie.storage_url').$mediaItems[$index]->getUrl() ;
                    $image_url = $mediaItems[$index]->getUrl() ;
                    @endphp
                    <div>
                        <img src="{{ $image_url }}" alt="">
                    </div>
                    @endforeach
                </div>
                @else

                @endif
                <!-- MAIN SLIDES -->
            </div>
            @if($property->description)
            <div class="pro-desc destls-common">
                <h2 class="detls-ttl">Description</h2>
                <p>{!! $property->description ?? '' !!}</p>
            </div>
            @endif
            <div class="pr-detils ">
                <div class="pr-detils-box destls-common">
                    <h2 class="detls-ttl">Property Details</h2>
                    <ul class="cullom-list">
                        @if($property->property_id)
                        <li><strong>Property ID :</strong> {{ $property->property_id ?? '' }}</li>
                        @endif
                        @if($property->category)
                        <li><strong>Property Type :</strong> {{ $property->category ? $property->category->name : '' }}</li>
                        @endif
                        @if(business_type($property))
                        <li><strong>Property Status :</strong> For {{ business_type($property) }}</li>
                        @endif
                        @if($property->price)
                        <li><strong>Property Price :</strong> AED {{ $property ? number_format($property->price) : '' }}</li>
                        @endif
                        @if($property->rooms)
                        <li><strong>Rooms :</strong> {{ $property->rooms ?? '' }}</li>
                        @endif
                        @if($property->beds)
                        <li><strong>Bedrooms :</strong> {{ $property->beds ?? '' }}</li>
                        @endif
                        @if($property->baths)
                        <li><strong>Baths :</strong> {{ $property->baths ?? '' }}</li>
                        @endif
                        @if($property->garages)
                        <li><strong>Parking :</strong> {{ $property->garages ?? '' }}</li>
                        @endif
                        @if($property->year_build)
                        <li><strong>Year Built :</strong> {{ $property->year_build ?? '' }}</li>
                        @endif
                        @if($property->propertyarea)
                        <li><strong>Area :</strong> {{ $property && $property->propertyarea ? $property->propertyarea->name : ""}}</li>
                        @endif
                        @if($property->community)
                        <li><strong>Community :</strong> {{ $property && $property->community ? $property->community->name : ""}}</li>
                        @endif
                        @if($property->size)
                        <li><strong>Size : </strong>{{number_format ($property->size) }} Sqft</li>
                        @endif
                    </ul>
                </div>
                @if($property->amenities)
                @include('web.property.details.amenities')
                @endif
            </div>

            @include('web.property.details.design')

            {{--@include('web.property.details.nearby')--}}

            {{--@include('web.property.details.property_video')--}}

            @include('web.property.details.property_map')
        </div>
        @include('web.property.details.agent_information')
    </div>
</div>
</div>

@include('web.property.details.similar_properties')
@endsection

@push('page_script_footer')

<script>
    /*// unused code, element with #id is commented out
    // init
    var latlng = new google.maps.LatLng({
        {
            '22.572645'
        }
    }, {
        {
            '88.363892'
        }
    }); //@todo change property wise lat & long 
    var map = new google.maps.Map(document.getElementById('map'), {
        center: latlng
        , zoom: 11
        , mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker = new google.maps.Marker({
        position: latlng
        , map: map
        , title: 'Set lat/lon values for this property'
        , draggable: false
    });

    google.maps.event.addListener(marker, 'dragend', function(event) {

        document.getElementById("latitude").value = this.getPosition().lat();
        document.getElementById("longitude").value = this.getPosition().lng();
    });*/

</script>
@endpush