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

@if(Session::has('success'))
<div class="bs-toast" id="successmsgHomevana">
    <div class="toast-container position-fixed top-0 end-0 p-3">
        <div id="liveToast" class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header justify-content-end border-0 d-none">
                <!-- <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> -->
            </div>
            <div class="toast-body">
                <div class="box-wrapper">
                    <div class="img-box">
                        <img src="{{env('APP_URL')}}assets/images/green-tick.svg" draggable="false" class="img-fluid" alt="">
                    </div>
                    <div class="content-box">
                        <div class="max-235">
                            <h2 class="bs-heading typ-18 typ-500 typ-white">Successful</h2>
                            <p class="bs-para typ-12 typ-white">{{ Session::get('success') }}</p>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close">
                        <span class="icon icon-close"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endif
<style>
        .card-desc {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4; /* Limit to 4 lines */
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
<main class="main">
                    <div class="inner-app-main">
                        <section class="section lyt-section mt-18">
                            <div class="bs-flex-lyt upper-flex">
                                <div>
                                    <h2 class="bs-heading typ-27 typ-800">Property list</h2>                           
                                                                  <!-- <p class="bs-para typ-14 typ-medium">Showing <span class="typ-blue">1-6 of 10</span>
                                        Listings</p> -->
                                </div>
                                <a href="{{route('properties.create')}}" class="bs-button  typ-fill-blue">Add Property</a>
                            </div>
                        </section>
                        <section class="lyt-section typ-property">
                            <div class="property--height">
                                <div class="bs-grid-box typ-property-mobile">
                                    @foreach($properties as $property)
                                    <div class="bs-card">
                                        <div class="card typ-property">
                                            <div class="red-card">
                                                <p class="typ-text">{{$property->property_status}}</p>
                                            </div>
                                            <a href="{{route('properties.show',$property)}}">
                                                <div class="bs-swiper">
                                                    <div class="swiper propertySwiper">
                                                        <div class="swiper-wrapper">
                                                            @foreach($property->property_images as $property_image)
                                                            <div class="swiper-slide">
                                                            
                                                                    <img src="{{ asset('storage/'.$property_image->image) }}" class="img-fluid typ-w-100" alt="house">
                                                            </div>
                                                            @endforeach
                                                           
                                                        </div>
                                                        <div class="swiper-pagination"></div>
                                                    </div>
                                                </div>
                                            </a>
                                            <div class="card--body">
                                                <div class="card--flex">
                                                    <h2 class="card-city">{{$property->cityName->city_name}}, {{$property->state}}</h2>
                                                    <p class="card--dates">{{$property->updated_at->format('F j, Y')}}</p>
                                                </div>
                                                <h3 class="card-name">{{$property->property_name}}</h3>
                                                <h4 class="card-price"><span class="rs">₹</span> {{($property->property_for=="BUY") ?$property->amount:$property->rent_amount }}.00*</h4>
                                                <div>
                                                    <p class="card-desc">
                                                        {{$property->description}}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="card-footer">
                                                <div>
                                                    <div class="card--flex--bottom">
                                                        <div class="flex-item">
                                                            <span class="icon icon-bed"></span>
                                                            <h4 class="card--facility">Bed : {{$property->min_beds}}</h4>
                                                        </div>
                                                        <div class="flex-item">
                                                            <span class="icon icon-bath"></span>
                                                            <h4 class="card--facility">Bath : {{$property->min_bath}}</h4>
                                                        </div>
                                                        <div class="flex-item">
                                                            <span class="icon icon-sq-feet"></span>
                                                            <h4 class="card--facility">Sq Ft : {{$property->area}}</h4>
                                                        </div>
                                                    </div>


                                                    <div class="btn-flexes">
                                                        <a href="{{route('properties.edit',$property)}}" class="bs-btn typ-green-btn">Edit</a>
                                                        <a href="{{route('owner.paymentsList',['id'=>$property->id])}}" class="bs-btn typ-blue-border">Transactions</a>
                                                        <a href="{{route('owner.propertyVisitRequests',$property->id)}}" class="bs-btn typ-gry-border">My Visitors</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                    
                                    
                                </div>
                            </div>

                        
                            <div class="bs-pagination-strip">
                              <p class="bs-para typ-16 typ-black">
                                  Showing 
                                  <span>{{ $properties->firstItem() }}</span> 
                                  to 
                                  <span>{{ $properties->lastItem() }}</span> 
                                  of 
                                  <span>{{ $properties->total() }}</span> 
                                  Listings
                              </p>
                              
                              <nav aria-label="Page navigation">
                                {{ $properties->links('owner.properties.pagination') }}
                              </nav>
                            
                         </div>
                         
                        </section>
                       
                    </div>
                   
                </main>
@endsection
@section('script')    
 setTimeout(function() {
    $('#successmsgHomevana').fadeOut('fast');
}, 1000);
@endsection