@extends('layouts.app')

@section('content')









<section class="our-listing bgc-f7 pb30-991">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="listing_sidebar">
                    <div class="sidebar_content_details style3">
                        <!-- <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> -->
                        <div class="sidebar_listing_list style2 mb0">
                            <div class="sidebar_advanced_search_widget">
                                <h4 class="mb25">Advanced Search <a class="filter_closed_btn float-right" href="#"><small>Hide Filter</small> <span class="flaticon-close"></span></a></h4>
                                <ul class="sasw_list style2 mb0">
                                    <li class="search_area">
                                        <div class="form-group">
                                            <input type="text" class="form-control" id="exampleInputName1" placeholder="keyword">
                                            <label for="exampleInputEmail"><span class="flaticon-magnifying-glass"></span></label>
                                        </div>
                                    </li>
                                    <li class="search_area">
                                        <div class="form-group">
                                            <input type="text" class="form-control" id="exampleInputEmail" placeholder="Location">
                                            <label for="exampleInputEmail"><span class="flaticon-maps-and-flags"></span></label>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="search_option_two">
                                            <div class="candidate_revew_select">
                                                <select class="selectpicker w100 show-tick">
                                                    <option>Status</option>
                                                    <option>Apartment</option>
                                                    <option>Bungalow</option>
                                                    <option>Condo</option>
                                                    <option>House</option>
                                                    <option>Land</option>
                                                    <option>Single Family</option>
                                                </select>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="search_option_two">
                                            <div class="candidate_revew_select">
                                                <select class="selectpicker w100 show-tick">
                                                    <option>Property Type</option>
                                                    <option>Apartment</option>
                                                    <option>Bungalow</option>
                                                    <option>Condo</option>
                                                    <option>House</option>
                                                    <option>Land</option>
                                                    <option>Single Family</option>
                                                </select>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="small_dropdown2">
                                            <div id="prncgs" class="btn dd_btn">
                                                <span>Price</span>
                                                <label for="exampleInputEmail2"><span class="fa fa-angle-down"></span></label>
                                            </div>
                                              <div class="dd_content2 w100">
                                                <div class="pricing_acontent">
                                                    <!-- <input type="text" class="amount" placeholder="$52,239"> 
                                                    <input type="text" class="amount2" placeholder="$985,14">
                                                    <div class="slider-range"></div> -->
                                                    <span id="slider-range-value1"></span>
                                                    <span class="mt0" id="slider-range-value2"></span>
                                                    <div id="slider"></div>
                                                </div>
                                              </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="search_option_two">
                                            <div class="candidate_revew_select">
                                                <select class="selectpicker w100 show-tick">
                                                    <option>Bathrooms</option>
                                                    <option>1</option>
                                                    <option>2</option>
                                                    <option>3</option>
                                                    <option>4</option>
                                                    <option>5</option>
                                                    <option>6</option>
                                                </select>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="search_option_two">
                                            <div class="candidate_revew_select">
                                                <select class="selectpicker w100 show-tick">
                                                    <option>Bedrooms</option>
                                                    <option>1</option>
                                                    <option>2</option>
                                                    <option>3</option>
                                                    <option>4</option>
                                                    <option>5</option>
                                                    <option>6</option>
                                                </select>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="search_option_two">
                                            <div class="candidate_revew_select">
                                                <select class="selectpicker w100 show-tick">
                                                    <option>Garages</option>
                                                    <option>Yes</option>
                                                    <option>No</option>
                                                    <option>Others</option>
                                                </select>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="search_option_two">
                                            <div class="candidate_revew_select">
                                                <select class="selectpicker w100 show-tick">
                                                    <option>Year built</option>
                                                    <option>2013</option>
                                                    <option>2014</option>
                                                    <option>2015</option>
                                                    <option>2016</option>
                                                    <option>2017</option>
                                                    <option>2018</option>
                                                    <option>2019</option>
                                                    <option>2020</option>
                                                </select>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="min_area style2 list-inline-item">
                                        <div class="form-group">
                                            <input type="text" class="form-control" id="exampleInputName2" placeholder="Min Area">
                                        </div>
                                    </li>
                                    <li class="max_area list-inline-item">
                                        <div class="form-group">
                                            <input type="text" class="form-control" id="exampleInputName3" placeholder="Max Area">
                                        </div>
                                    </li>
                                    <li>
                                          <div id="accordion" class="panel-group">
                                            <div class="panel">
                                                  <div class="panel-heading">
                                                      <h4 class="panel-title">
                                                        <a href="#panelBodyRating" class="accordion-toggle link" data-toggle="collapse" data-parent="#accordion"><i class="flaticon-more"></i> Advanced features</a>
                                                    </h4>
                                                  </div>
                                                <div id="panelBodyRating" class="panel-collapse collapse">
                                                    <div class="panel-body row">
                                                          <div class="col-lg-12">
                                                            <ul class="ui_kit_checkbox selectable-list float-left fn-400">
                                                                <li>
                                                                    <div class="custom-control custom-checkbox">
                                                                        <input type="checkbox" class="custom-control-input" id="customCheck1">
                                                                        <label class="custom-control-label" for="customCheck1">Air Conditioning</label>
                                                                    </div>
                                                                </li>
                                                                <li>
                                                                    <div class="custom-control custom-checkbox">
                                                                        <input type="checkbox" class="custom-control-input" id="customCheck4">
                                                                        <label class="custom-control-label" for="customCheck4">Barbeque</label>
                                                                    </div>
                                                                </li>
                                                                <li>
                                                                    <div class="custom-control custom-checkbox">
                                                                        <input type="checkbox" class="custom-control-input" id="customCheck10">
                                                                        <label class="custom-control-label" for="customCheck10">Gym</label>
                                                                    </div>
                                                                </li>
                                                                <li>
                                                                    <div class="custom-control custom-checkbox">
                                                                        <input type="checkbox" class="custom-control-input" id="customCheck5">
                                                                        <label class="custom-control-label" for="customCheck5">Microwave</label>
                                                                    </div>
                                                                </li>
                                                                <li>
                                                                    <div class="custom-control custom-checkbox">
                                                                        <input type="checkbox" class="custom-control-input" id="customCheck6">
                                                                        <label class="custom-control-label" for="customCheck6">TV Cable</label>
                                                                    </div>
                                                                </li>
                                                                <li>
                                                                    <div class="custom-control custom-checkbox">
                                                                        <input type="checkbox" class="custom-control-input" id="customCheck2">
                                                                        <label class="custom-control-label" for="customCheck2">Lawn</label>
                                                                    </div>
                                                                </li>
                                                                <li>
                                                                    <div class="custom-control custom-checkbox">
                                                                        <input type="checkbox" class="custom-control-input" id="customCheck11">
                                                                        <label class="custom-control-label" for="customCheck11">Refrigerator</label>
                                                                    </div>
                                                                </li>
                                                                <li>
                                                                    <div class="custom-control custom-checkbox">
                                                                        <input type="checkbox" class="custom-control-input" id="customCheck3">
                                                                        <label class="custom-control-label" for="customCheck3">Swimming Pool</label>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                            <ul class="ui_kit_checkbox selectable-list float-right fn-400">
                                                                <li>
                                                                    <div class="custom-control custom-checkbox">
                                                                        <input type="checkbox" class="custom-control-input" id="customCheck12">
                                                                        <label class="custom-control-label" for="customCheck12">WiFi</label>
                                                                    </div>
                                                                </li>
                                                                <li>
                                                                    <div class="custom-control custom-checkbox">
                                                                        <input type="checkbox" class="custom-control-input" id="customCheck14">
                                                                        <label class="custom-control-label" for="customCheck14">Sauna</label>
                                                                    </div>
                                                                </li>
                                                                <li>
                                                                    <div class="custom-control custom-checkbox">
                                                                        <input type="checkbox" class="custom-control-input" id="customCheck7">
                                                                        <label class="custom-control-label" for="customCheck7">Dryer</label>
                                                                    </div>
                                                                </li>
                                                                <li>
                                                                    <div class="custom-control custom-checkbox">
                                                                        <input type="checkbox" class="custom-control-input" id="customCheck9">
                                                                        <label class="custom-control-label" for="customCheck9">Washer</label>
                                                                    </div>
                                                                </li>
                                                                <li>
                                                                    <div class="custom-control custom-checkbox">
                                                                        <input type="checkbox" class="custom-control-input" id="customCheck13">
                                                                        <label class="custom-control-label" for="customCheck13">Laundry</label>
                                                                    </div>
                                                                </li>
                                                                <li>
                                                                    <div class="custom-control custom-checkbox">
                                                                        <input type="checkbox" class="custom-control-input" id="customCheck8">
                                                                        <label class="custom-control-label" for="customCheck8">Outdoor Shower</label>
                                                                    </div>
                                                                </li>
                                                                <li>
                                                                    <div class="custom-control custom-checkbox">
                                                                        <input type="checkbox" class="custom-control-input" id="customCheck15">
                                                                        <label class="custom-control-label" for="customCheck15">Window Coverings</label>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="search_option_button">
                                            <button type="submit" class="btn btn-block btn-thm">Search</button>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-lg-12">
                

                <div class="row">
                    <div class="col-md-8 col-lg-6">
                        <div class="breadcrumb_content style2">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                                <li class="breadcrumb-item active text-thm" aria-current="page">
                                    @if($city)
                                        Properties for {{ $type === 'sale' ? 'sale' : 'rent' }} in {{ $city->name }}
                                    @else
                                        Search Results
                                    @endif
                                </li>
                            </ol>
                            <h2 class="breadcrumb_title">
                                @if($city)
                                    Properties for {{ $type === 'sale' ? 'sale' : 'rent' }} in {{ $city->name }}
                                @else
                                    Search Results
                                    @if(isset($type))
                                        - Properties for {{ $type === 'sale' ? 'Sale' : 'Rent' }}
                                    @endif
                                @endif
                            </h2>
                        </div>
                    </div>
                    {{-- <div class="col-md-4 col-lg-6">
                        <div class="sidebar_switch text-right">
                            <div id="main2">
                                <span id="open2" class="flaticon-filter-results-button filter_open_btn"> Show Filter</span>
                            </div>
                        </div>
                    </div> --}}
                </div>
                
                <div class="row">
                    <div class="col-lg-12">
                        <div class="row">
                            <div class="grid_list_search_result style2">
                                <div class="col-sm-12 col-md-4 col-lg-3 col-xl-3">
                                    <div class="left_area">
                                        <p>{{ $properties->total() }} results</p>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-8 col-lg-9 col-xl-9">
                                    <div class="right_area style2 text-right">
                                        {{-- <ul>
                                            <li class="list-inline-item"><span class="shrtby">Sort by:</span>
                                                <select class="selectpicker show-tick">
                                                    <option>Featured First</option>
                                                    <option>Featured 2nd</option>
                                                    <option>Featured 3rd</option>
                                                    <option>Featured 4th</option>
                                                    <option>Featured 5th</option>
                                                </select>
                                            </li>
                                        </ul> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                
                        <div class="row">
                            @foreach($properties as $property)
                                @php
                                    // Thumbnail image
                                    $propertyImage = 'images/property/fp1.jpg';
                                    if ($property->images && $property->images->count() > 0) {
                                        $defaultImage = $property->images->where('is_default', true)->first();
                                        $imagePath = $defaultImage ? $defaultImage->image : $property->images->first()->image;
                                        if ($imagePath) {
                                            $filename = basename($imagePath);
                                            $propertyImage =asset( 'files/thumbnails/' . $filename );
                                        }
                                    }
                
                                    // Title from description
                                    $propertyTitle = 'Property';
                                    if ($property->descriptions && $property->descriptions->count() > 0) {
                                        $description = $property->descriptions->first();
                                        $text = $description->description ?? '';
                                        $propertyTitle = strlen($text) > 50 ? substr($text, 0, 50) . '...' : ($text ?: 'Property');
                                    }
                
                                    // Type
                                    $propertyTypeName = 'Apartment';
                                    if ($property->propertyType && $property->propertyType->texts && $property->propertyType->texts->count() > 0) {
                                        $propertyTypeName = $property->propertyType->texts->first()->name;
                                    }
                
                                    // Location
                                    $addressParts = [];
                                    if ($property->area && $property->area->name) $addressParts[] = $property->area->name;
                                    if ($property->city && $property->city->name) $addressParts[] = $property->city->name;
                                    if ($property->state && $property->state->name) $addressParts[] = $property->state->name;
                                    if ($property->country && $property->country->name) $addressParts[] = $property->country->name;
                                    $propertyLocation = $addressParts ? implode(', ', $addressParts) : 'Location';
                
                                    // Area
                                    $propertyArea = $property->area_built ?? $property->area_total ?? 0;
                                    $propertyArea = $propertyArea > 0 ? number_format($propertyArea, 0, '.', ',') : 0;
                
                                    $propertyUrl = route('property.show', $property->id);
                                @endphp
                
                                <div class="col-md-6 col-lg-4">
                                    <x-frontend.property-card
                                        :property="$property"
                                        :image="$propertyImage"
                                        :title="$propertyTitle"
                                        :type="$propertyTypeName"
                                        :location="$propertyLocation"
                                        :beds="$property->beds ?? 0"
                                        :baths="$property->baths ?? 0"
                                        :area="$propertyArea"
                                        :url="$propertyUrl"
                                    />
                                </div>
                            @endforeach
                
                            <div class="col-lg-12 mt20">
                                {{ $properties->links() }}
                            </div>
                        </div>
                    </div>
                </div>
                


            </div>
        </div>
    </div>
</section>

@endsection