@extends('layouts.app')

@section('title', 'Properties')

@section('content')
<!-- BREADCRUMB SECTION START -->
<div class="ul-breadcrumb">
    <div class="wow animate__fadeInUp">
        <h2 class="ul-breadcrumb-title">Our Properties</h2>
        <div class="ul-breadcrumb-nav">
            <a href="{{ url('/') }}">Home</a>
            <span class="separator"><i class="flaticon-aro-left"></i></span>
            <span class="current-page">Properties</span>
        </div>
    </div>
</div>
<!-- BREADCRUMB SECTION END -->

<div class="ul-inner-page-content-wrapper ul-projects-page-content-wrapper">
    <div class="ul-inner-page-container">
        <!-- search filters -->
        <form action="{{ route('properties.index') }}" method="GET" class="ul-projects-search-filters">
            <div class="row row-cols-lg-4 row-cols-sm-3 row-cols-2 row-cols-xxs-1 justify-content-center wow animate__fadeInUp">
                <div class="col">
                    <select name="keyword" id="keyword">
                        <option value="">Enter Keyword</option>
                        <option value="apartment" {{ request('keyword') == 'apartment' ? 'selected' : '' }}>Apartment</option>
                        <option value="villa" {{ request('keyword') == 'villa' ? 'selected' : '' }}>Villa</option>
                        <option value="house" {{ request('keyword') == 'house' ? 'selected' : '' }}>House</option>
                    </select>
                </div>
                <div class="col">
                    <select name="property_type" id="property_type">
                        <option value="">Property Type</option>
                        <option value="apartment" {{ request('property_type') == 'apartment' ? 'selected' : '' }}>Apartment</option>
                        <option value="villa" {{ request('property_type') == 'villa' ? 'selected' : '' }}>Villa</option>
                        <option value="office" {{ request('property_type') == 'office' ? 'selected' : '' }}>Office</option>
                        <option value="house" {{ request('property_type') == 'house' ? 'selected' : '' }}>House</option>
                        <option value="studio" {{ request('property_type') == 'studio' ? 'selected' : '' }}>Studio</option>
                    </select>
                </div>
                <div class="col">
                    <select name="location" id="location">
                        <option value="">Select Location</option>
                        @foreach($properties->pluck('location')->unique() as $location)
                            <option value="{{ $location }}" {{ request('location') == $location ? 'selected' : '' }}>{{ $location }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col">
                    <div class="ul-projects-search-filters-btns">
                        <button type="button" class="ul-projects-search-filters-expand-btn"><i class="flaticon-filter"></i></button>
                        <button type="submit" class="ul-projects-search-filters-btn ul-btn">Search Properties</button>
                    </div>
                </div>
            </div>

            <div class="ul-projects-search-filters-row-2 row row-cols-lg-4 row-cols-sm-3 row-cols-2 row-cols-xxs-1 justify-content-center wow animate__fadeInUp" style="display: none;">
                <div class="col">
                    <select name="max_price" id="max_price">
                        <option value="">Max Price</option>
                        <option value="1000" {{ request('max_price') == '1000' ? 'selected' : '' }}>$1,000</option>
                        <option value="2000" {{ request('max_price') == '2000' ? 'selected' : '' }}>$2,000</option>
                        <option value="3000" {{ request('max_price') == '3000' ? 'selected' : '' }}>$3,000</option>
                        <option value="5000" {{ request('max_price') == '5000' ? 'selected' : '' }}>$5,000</option>
                    </select>
                </div>
                <div class="col">
                    <select name="bedrooms" id="bedrooms">
                        <option value="">Beds</option>
                        <option value="1" {{ request('bedrooms') == '1' ? 'selected' : '' }}>1</option>
                        <option value="2" {{ request('bedrooms') == '2' ? 'selected' : '' }}>2</option>
                        <option value="3" {{ request('bedrooms') == '3' ? 'selected' : '' }}>3</option>
                        <option value="4" {{ request('bedrooms') == '4' ? 'selected' : '' }}>4</option>
                        <option value="5" {{ request('bedrooms') == '5' ? 'selected' : '' }}>5+</option>
                    </select>
                </div>
                <div class="col">
                    <select name="bathrooms" id="bathrooms">
                        <option value="">Bathrooms</option>
                        <option value="1" {{ request('bathrooms') == '1' ? 'selected' : '' }}>1</option>
                        <option value="2" {{ request('bathrooms') == '2' ? 'selected' : '' }}>2</option>
                        <option value="3" {{ request('bathrooms') == '3' ? 'selected' : '' }}>3</option>
                        <option value="4" {{ request('bathrooms') == '4' ? 'selected' : '' }}>4+</option>
                    </select>
                </div>
                <div class="col">
                    <select name="garages" id="garages">
                        <option value="">Garages</option>
                        <option value="0" {{ request('garages') == '0' ? 'selected' : '' }}>0</option>
                        <option value="1" {{ request('garages') == '1' ? 'selected' : '' }}>1</option>
                        <option value="2" {{ request('garages') == '2' ? 'selected' : '' }}>2</option>
                        <option value="3" {{ request('garages') == '3' ? 'selected' : '' }}>3+</option>
                    </select>
                </div>
            </div>
        </form>

        <!-- project cards grid -->
        <div class="row row-cols-md-3 row-cols-2 row-cols-xxs-1 ul-bs-row">
            @forelse($properties as $property)
                <div class="col wow animate__fadeInUp">
                    <div class="ul-project">
                        <div class="ul-project-img">
                            @if($property->main_image)
                                @if(Str::startsWith($property->main_image, 'http'))
                                    <img src="{{ $property->main_image }}" alt="{{ $property->title }}">
                                @elseif(Str::startsWith($property->main_image, 'assets/'))
                                    <img src="{{ asset($property->main_image) }}" alt="{{ $property->title }}">
                                @else
                                    <img src="{{ Storage::url($property->main_image) }}" alt="{{ $property->title }}">
                                @endif
                            @else
                                <img src="{{ asset('assets/img/sai-ganesh-elelist-img.jpg') }}" alt="{{ $property->title }}">
                            @endif
                        </div>
                        <div class="ul-project-txt">
                            <span class="ul-project-tag">{{ $property->featured ? 'Featured' : 'Popular' }}</span>
                            <div class="top">
                                <div class="left">
                                    <!-- <span class="ul-project-price">
                                        <span class="number">{{ $property->formatted_price }}</span>/{{ $property->price_type }}
                                    </span> -->
                                    <a href="{{ route('properties.show', $property->slug) }}" class="ul-project-title">{{ $property->title }}</a>
                                    <p class="ul-project-location">{{ $property->address }}</p>
                                </div>
                                <div class="right">
                                    <button class="ul-project-add-to-favorites-btn"><i class="flaticon-heart"></i></button>
                                </div>
                            </div>

                            <!-- bottom -->
                            <div class="ul-project-infos">
                                <!-- single info -->
                                <div class="ul-project-info">
                                    <span class="icon"><i class="flaticon-bed-color"></i></span>
                                    <span class="text">{{ $property->bedrooms }} Beds</span>
                                </div>
                                <!-- single info -->
                                <div class="ul-project-info">
                                    <span class="icon"><i class="flaticon-bath"></i></span>
                                    <span class="text">{{ $property->bathrooms }} Bathrooms</span>
                                </div>
                                <!-- single info -->
                                <div class="ul-project-info">
                                    <span class="icon"><i class="flaticon-scale"></i></span>
                                    <span class="text">{{ $property->formatted_area }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <div class="text-center py-5">
                        <h3 class="text-muted">No properties found</h3>
                        <p class="text-muted">Try adjusting your search criteria or check back later for new listings.</p>
                    </div>
                </div>
            @endforelse
        </div>

        <!-- Pagination -->
        @if($properties->hasPages())
            <div class="d-flex justify-content-center mt-5">
                {{ $properties->links() }}
            </div>
        @endif
    </div>
</div>

<script>
// Toggle advanced filters
document.querySelector('.ul-projects-search-filters-expand-btn').addEventListener('click', function() {
    const advancedFilters = document.querySelector('.ul-projects-search-filters-row-2');
    advancedFilters.style.display = advancedFilters.style.display === 'none' ? 'flex' : 'none';
});
</script>
@endsection