@extends('layouts.app')

@push('page-styles')
<link href="{{ asset('frontend/css/properties.css') }}" rel="stylesheet">
@endpush
    
@section('content')

@include('partials.page-banner', [
    'bannerTitle' => 'Property',
    'breadcrumbs' => [['label' => 'Property']],
])

<section class="property-listing py-5">
    <div class="container">

        <form method="GET" action="{{ route('properties.index') }}" class="property-toolbar d-flex flex-wrap justify-content-between align-items-center gap-3">
            <div class="sort-box">
                <span>Sort by</span>
                <select name="sort" class="form-select" onchange="this.form.submit()">
                    <option value="featured" {{ request('sort', 'featured') === 'featured' ? 'selected' : '' }}>Featured Properties</option>
                    <option value="newest" {{ request('sort') === 'newest' ? 'selected' : '' }}>Newest</option>
                    <option value="price_low" {{ request('sort') === 'price_low' ? 'selected' : '' }}>Price Low to High</option>
                    <option value="price_high" {{ request('sort') === 'price_high' ? 'selected' : '' }}>Price High to Low</option>
                </select>
            </div>

            @foreach(['category', 'property_type', 'bedrooms', 'bathrooms', 'lot_width'] as $field)
                @if(request()->filled($field))
                    <input type="hidden" name="{{ $field }}" value="{{ request($field) }}">
                @endif
            @endforeach
        </form>

        <div class="row g-4 mt-2">
            @forelse($properties as $property)
            <div class="col-lg-4">
                <div class="property-card">
                    <div class="property_list-image">
                        <img src="{{ \App\Helpers\ImageHelper::url($property->main_image) }}" alt="{{ $property->title }}">
                        @if($property->is_featured)<span class="featured">Featured</span>@endif
                        <span class="sale-tag">{{ $property->status_label }}</span>
                    </div>

                    <div class="property-content">
                        <span class="property-type">{{ $property->property_type }}</span>
                        <h3>{{ $property->title }}</h3>
                        <p class="location">
                            <i class="bi bi-geo-alt-fill"></i>
                            {{ $property->location }}
                        </p>

                        <div class="property-meta">
                            @if($property->bedrooms)
                            <div><span>Beds</span><strong><i class="fa fa-bed"></i> {{ $property->bedrooms }}</strong></div>
                            @endif
                            @if($property->bathrooms)
                            <div><span>Baths</span><strong><i class="fa fa-bath"></i> {{ $property->bathrooms }}</strong></div>
                            @endif
                            @if($property->cars)
                            <div><span>Car</span><strong><i class="fa fa-car"></i> {{ $property->cars }}</strong></div>
                            @endif
                            @if($property->area)
                            <div><span>Area</span><strong><i class="fa fa-area-chart"></i> {{ $property->area }}</strong></div>
                            @endif
                        </div>
                    </div>

                    <div class="property-footer">
                        @if($property->show_price && $property->price)
                        <h4>${{ number_format($property->price, 0) }}</h4>
                        @endif
                        <div class="agent">
                            <a href="{{ route('properties.show', $property->slug) }}">
                                <div class="btn btn-more">View Details</div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-12 text-center py-5">
                <p>No properties found matching your search. Try adjusting your filters.</p>
            </div>
            @endforelse
        </div>

        <div class="mt-5">
            {{ $properties->links() }}
        </div>

    </div>
</section>

@endsection