@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="#">Buy</a>
              <h2>Comfortable Villa in Green</h2>
              <p><img src="images/address-icon.png" alt=""> New South Wales, USA</p>
            </div>
            <div class="rt-side">
              <h3>$ 3200,00</h3>
              <span>/month</span>
            </div>
          </div>
          <div class="product-slider destls-common">
            <h2 class="detls-ttl">Gallery</h2>

            @php
              $mediaItems = $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 class="slider">
              <figure>
                <img src="images/details-slider1.png" alt="">
              </figure>
              <figure>
                <img src="images/details-slider1.png" alt="">
              </figure>
              <figure>
                <img src="images/details-slider1.png" alt="">
              </figure>
              <figure>
                <img src="images/details-slider1.png" alt="">
              </figure>
              <figure>
                <img src="images/details-slider1.png" alt="">
              </figure>
            </div>--}}
            <!-- THUMBNAILS -->             
            {{--<div class="slider-nav-thumbnails">
              <div>
                <img src="{{ asset('web/assets/images/slider-tham1.png') }}" alt="">
              </div>
              <div>
                <img src="{{ asset('web/assets/images/slider-tham1.png') }}" alt="">
              </div>
              <div>
                <img src="{{ asset('web/assets/images/slider-tham1.png') }}" alt="">
              </div>
              <div>
                <img src="{{ asset('web/assets/images/slider-tham1.png') }}" alt="">
              </div>
              <div>
                <img src="{{ asset('web/assets/images/slider-tham1.png') }}" alt="">
              </div>
            </div>--}}
          </div>
          <div class="pro-desc destls-common">
            <h2 class="detls-ttl">Description</h2>
            <p>{{ $property->description }}</p>
          </div>
          <div class="pr-detils ">
            <div class="pr-detils-box destls-common">
              <h2 class="detls-ttl">Property Details</h2>
              <ul>
                <li><strong>Property ID :</strong> V254680</li>
                <li><strong>Property Type :</strong> {{ $property->category->name }}</li>
                <li><strong>Property Status :</strong> For {{ business_type($property) }}</li>
                <li><strong>Property Price :</strong> $ {{ $property->price }}</li>
                <li><strong>Rooms :</strong> 6</li>
                <li><strong>Bedrooms :</strong> {{ $property->beds }}</li>
                <li><strong>Birth :</strong> {{ $property->baths }}</li>
                <li><strong>Garages :</strong> 2</li>
                <li><strong>Year Built :</strong> 10/6/2020</li>
              </ul>
            </div>
            <div class="pr-detils-box destls-common">
              <h2 class="detls-ttl">Amenities</h2>
              <ul>
                <li><img src="" alt=""> <span></span></li>
                <li><img src="" alt=""> <span></span></li>
                <li><img src="" alt=""> <span></span></li>
                <li><img src="" alt=""> <span></span></li>
                <li><img src="" alt=""> <span></span></li>
                <li><img src="" alt=""> <span></span></li>
                <li><img src="" alt=""> <span></span></li>
                <li><img src="" alt=""> <span></span></li>
                <li><img src="" alt=""> <span></span></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-12"></div>
      </div>
    </div>
  </div> 
@endsection