@extends('owner.layouts.main')
@section('title')
<title>Property details</title>
@endsection
@section('content')



                <main class="main">
                    <section class="section lyt-section ">
                        <div class="property--height">
                            <div>
                                <h2 class="bs-heading typ-27 typ-800 mb-24 mt-18">
                                <a href="{{route('properties.index')}}" class="me-2">
                                    <span class="icon  icon-left-icon"></span>
                                    </a>
                                    Property
                                    details</h3>
                            </div>
                            <div class="row">
                                <div class="bs-property-grid mb-30">
                                    <div class="parent">


                                        <div class="left-parent">
                                        
                                            <a href="{{asset('storage/'.$property->property_images[0]->image)}}"
                                                data-fancybox="property-detail-img">
                                                <img src="{{asset('storage/'.$property->property_images[0]->image)}}"
                                                    class="img-fluid" alt="property">
                                            </a>
                                        </div>
                                     
                                        <div class="right-parent">

                                        @foreach($property->property_images as $index => $image)
                                              @if($index !=0)  
                                            <div class="img-box">
                                                <a href="{{asset('storage/'.$image->image)}}"
                                                    data-fancybox="property-detail-img">
                                                    <img src="{{asset('storage/'.$image->image)}}"
                                                        class="img-fluid" alt="property">
                                                        @if($property->property_images->count() > 5)
                                                         <div class="overlay">+{{ $property->property_images->count() - 5 }}</div>
                                                     @endif
                                                </a>
                                            </div>
                                            @endif
                                          
                                         @endforeach   
                                       
                                            
                                        </div>


                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xl-8 col-lg-7">
                                    <div class="bs-card property-card ">
                                        <h2 class="bs-heading typ-24 typ-500 mb-32">{{$property->address}}
                                            <span class="typ-block">{{$property->cityName->city_name}}, {{$property->state}}</span>
                                        </h2>
                                        <div class="bs-flex-lyt typ-gap-28 mb-38">
                                            <div class="d-flex align-items-center">
                                                <span class="icon icon-sq"></span>
                                                <p class="bs-para">{{$property->area}}</p>
                                            </div>
                                            <div class="d-flex align-items-center">
                                                <span class="icon icon-green-bed"></span>
                                                <p class="bs-para">{{$property->min_beds}} Beds</p>
                                            </div>
                                            <div class="d-flex align-items-center">
                                                <span class="icon icon-green-bath"></span>
                                                <p class="bs-para">{{$property->min_bath}} Baths</p>
                                            </div>
                                        </div>
                                        <p class="bs-para typ-16 typ-lh-140 mb-20">{{$property->description}}</p>
                                        <div class="bs-flex-lyt upper-flex mobile-col">
                                            <p class="bs-para typ-black typ-lh-140 typ-16"><span
                                                    class="typ-fw-700">Address:</span> {{$property->address}}<span class="typ-block">{{$property->landmark}} {{$property->localityName->locality_name}}, {{$property->cityName->city_name}}, {{$property->state}}
                                                    {{$property->zip_code}}</span></p>
                                            <a href="{{$property->location_link}}" class="bs-btn typ-blue-btn gap-10">Get Direction <span
                                                    class="icon icon-direction"></span></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-lg-5 mobile-mt-15">
                                    <div class="bs-flex-lyt typ-column-flex">
                                    @if($property->property_for=="RENT")
                                        <div class="bs-card property-card">
                                            <h3 class="bs-heading typ-24 typ-500 mb-16">Rent Price:</h3>
                                            <div class="d-flex justify-content-between">
                                                <p class="bs-para typ-20 typ-medium"><span class="rs">₹</span> {{$property->rent_amount}}/
                                                    Month</p>
                                                <div class="bs-progress-btn typ-complete">For Rent</div>
                                            </div>
                                        </div>
                                        @else
                                        <div class="bs-card property-card">
                                            <h3 class="bs-heading typ-24 typ-500 mb-16">Price:</h3>
                                            <div class="d-flex justify-content-between">
                                                <p class="bs-para typ-20 typ-medium"><span class="rs">₹</span> {{$property->amount}}</p>
                                                <div class="bs-progress-btn typ-complete">For Sell</div>
                                            </div>
                                        </div>
                                        @endif

                                        <!-- <div class="typ-btn-flex ">
                                            <a href="#" class="bs-btn typ-blue-btn">Schedule A Visit</a>
                                            <a href="#" class="bs-btn typ-transparent-btn">Rental Application</a>
                                        </div>
                                        <h3 class="bs-heading typ-20 typ-500  text-center">Have Question ? Get in touch!
                                        </h3>
                                        <a href="#" class="bs-btn typ-green-transparent"><span
                                                class="icon icon-contact"></span> Contact us</a> -->
                                        <div class="bs-card property-card">
                                            <h3 class="bs-heading typ-24 typ-500 mb-24">Additional features:</h3>
                                            <div class="bs-grid-box typ-two-grid">
                                            @php
                                                    $features=explode(", ",$property->features)

                                                @endphp
                                                @foreach($features as $feature)
                                                <div class="d-flex align-items-center">
                                                    <div class="typ-green-border">
                                                        <span class="icon icon-check"></span>
                                                    </div>
                                                    <p class="bs-para typ-14">{{$feature}}</p>
                                                </div>
                                                @endforeach

                                               
                                            </div>
                                        </div>
                                        @if($property->property_for=="RENT")
                                        <a href="{{route('owner.ownerRentalApplications',['propertyId'=>$property->id])}}" class="bs-button typ-fill-complete">Rent Applications </a>
                                       @else
                                        <a href="{{route('listPropertyOffer',['propertyId'=>$property->id])}}" class="bs-button typ-fill-complete">View Property Offers </a>
                                       @endif     
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </main>

@endsection