@props(['type' => 'buy']) {{-- 'buy' or 'rent' --}}

@php
    use App\Models\PropertyType;
    use App\Models\Language;
    use App\Models\City;
    use Illuminate\Support\Facades\App;
    use Illuminate\Support\Str;
    
    // Get current language ID
    $currentLocale = App::getLocale();
    $language = Language::where('iso2', $currentLocale)->first();
    $languageId = $language ? $language->id : 1;
    
    // Get main property types (parent_id = 0) with localized names
    $propertyTypes = PropertyType::where('parent_id', 0)
        ->where('status', 'Y')
        ->with(['texts' => function($query) use ($languageId) {
            $query->where('language_id', $languageId);
        }])
        ->get()
        ->map(function($type) {
            return [
                'id' => $type->id,
                'name' => $type->texts->first()->name ?? 'N/A'
            ];
        })
        ->filter(function($type) {
            return $type['name'] !== 'N/A';
        });
@endphp

<div class="home_adv_srch_opt">
    <ul class="nav nav-pills" id="pills-tab" role="tablist">
        <li class="nav-item">
            <a class="nav-link {{ $type === 'buy' ? 'active' : '' }}" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="{{ $type === 'buy' ? 'true' : 'false' }}">Buy</a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ $type === 'rent' ? 'active' : '' }}" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="{{ $type === 'rent' ? 'true' : 'false' }}">Rent</a>
        </li>
    </ul>
    <div class="tab-content home1_adsrchfrm" id="pills-tabContent">
        <!-- Buy Tab -->
        <div class="tab-pane fade {{ $type === 'buy' ? 'show active' : '' }}" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
            <form action="{{ route('search.results') }}" method="GET" id="search-form-buy">
                <input type="hidden" name="type" value="sale">
                <div class="home1-advnc-search">
                    <ul class="h1ads_1st_list mb0">
                        <li class="list-inline-item">
                            <div class="form-group">
                                <input type="text" class="form-control" name="keyword" id="keyword-buy" placeholder="Enter keyword..." value="{{ request('keyword') }}">
                            </div>
                        </li>
                        <li class="list-inline-item">
                            <div class="search_option_two">
                                <div class="candidate_revew_select">
                                    <select class="selectpicker w100 show-tick" name="property_type_id" id="property-type-buy">
                                        <option value="">Property Type</option>
                                        @foreach($propertyTypes as $propertyType)
                                            <option value="{{ $propertyType['id'] }}" {{ request('property_type_id') == $propertyType['id'] ? 'selected' : '' }}>
                                                {{ $propertyType['name'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </li>
                        <li class="list-inline-item">
                            <div class="form-group">
                                <input type="text" class="form-control city-autocomplete" name="city" id="city-buy" placeholder="Location" autocomplete="off" value="{{ request('city') }}">
                                <input type="hidden" name="city_id" id="city-id-buy" value="{{ request('city_id') }}">
                                <label for="city-buy"><span class="flaticon-maps-and-flags"></span></label>
                            </div>
                        </li>
                        <li class="list-inline-item">
                            <div class="search_option_button">
                                <button type="submit" class="btn btn-thm">Search</button>
                            </div>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        
        <!-- Rent Tab -->
        <div class="tab-pane fade {{ $type === 'rent' ? 'show active' : '' }}" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
            <form action="{{ route('search.results') }}" method="GET" id="search-form-rent">
                <input type="hidden" name="type" value="rent">
                <div class="home1-advnc-search">
                    <ul class="h1ads_1st_list mb0">
                        <li class="list-inline-item">
                            <div class="form-group">
                                <input type="text" class="form-control" name="keyword" id="keyword-rent" placeholder="Enter keyword..." value="{{ request('keyword') }}">
                            </div>
                        </li>
                        <li class="list-inline-item">
                            <div class="search_option_two">
                                <div class="candidate_revew_select">
                                    <select class="selectpicker w100 show-tick" name="property_type_id" id="property-type-rent">
                                        <option value="">Property Type</option>
                                        @foreach($propertyTypes as $propertyType)
                                            <option value="{{ $propertyType['id'] }}" {{ request('property_type_id') == $propertyType['id'] ? 'selected' : '' }}>
                                                {{ $propertyType['name'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </li>
                        <li class="list-inline-item">
                            <div class="form-group">
                                <input type="text" class="form-control city-autocomplete" name="city" id="city-rent" placeholder="Location" autocomplete="off" value="{{ request('city') }}">
                                <input type="hidden" name="city_id" id="city-id-rent" value="{{ request('city_id') }}">
                                <label for="city-rent"><span class="flaticon-maps-and-flags"></span></label>
                            </div>
                        </li>
                        <li class="list-inline-item">
                            <div class="search_option_button">
                                <button type="submit" class="btn btn-thm">Search</button>
                            </div>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
(function($) {
    'use strict';
    
    // City autocomplete functionality
    function initCityAutocomplete(inputId, hiddenId) {
        var $input = $('#' + inputId);
        var $hidden = $('#' + hiddenId);
        var autocompleteTimeout;
        
        // Create autocomplete dropdown
        var $dropdown = $('<ul class="city-autocomplete-dropdown"></ul>').css({
            'position': 'absolute',
            'z-index': '1000',
            'background': '#fff',
            'border': '1px solid #ddd',
            'border-radius': '4px',
            'max-height': '200px',
            'overflow-y': 'auto',
            'width': $input.outerWidth(),
            'display': 'none',
            'list-style': 'none',
            'padding': '0',
            'margin': '0',
            'box-shadow': '0 2px 5px rgba(0,0,0,0.2)'
        });
        
        $input.parent().css('position', 'relative').append($dropdown);
        
        $input.on('input', function() {
            var query = $(this).val();
            
            clearTimeout(autocompleteTimeout);
            
            if (query.length < 2) {
                $dropdown.hide().empty();
                $hidden.val('');
                return;
            }
            
            autocompleteTimeout = setTimeout(function() {
                $.ajax({
                    url: '{{ route("api.cities.autocomplete") }}',
                    method: 'GET',
                    data: { q: query },
                    success: function(cities) {
                        $dropdown.empty();
                        
                        if (cities.length === 0) {
                            $dropdown.hide();
                            return;
                        }
                        
                        cities.forEach(function(city) {
                            var $item = $('<li></li>').css({
                                'padding': '10px 15px',
                                'cursor': 'pointer',
                                'border-bottom': '1px solid #eee'
                            }).text(city.name);
                            
                            $item.hover(
                                function() { $(this).css('background', '#f5f5f5'); },
                                function() { $(this).css('background', '#fff'); }
                            );
                            
                            $item.on('click', function() {
                                $input.val(city.name);
                                $hidden.val(city.id);
                                $dropdown.hide();
                            });
                            
                            $dropdown.append($item);
                        });
                        
                        $dropdown.show();
                    },
                    error: function() {
                        $dropdown.hide();
                    }
                });
            }, 300);
        });
        
        // Hide dropdown when clicking outside
        $(document).on('click', function(e) {
            if (!$(e.target).closest($input.parent()).length) {
                $dropdown.hide();
            }
        });
    }
    
    // Initialize autocomplete for both tabs
    $(document).ready(function() {
        initCityAutocomplete('city-buy', 'city-id-buy');
        initCityAutocomplete('city-rent', 'city-id-rent');
    });
    
})(jQuery);
</script>
@endpush