<!-- Bristol Theme Search Results - Tailwind CSS -->
<div id="resp_buscar_inmuebles">
  <% unless @properties && (@properties.size > 0) %>
    <div class="bg-white rounded-lg shadow-sm p-10 text-center my-6 border border-gray-200">
      <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4">
        <%= icon(:search, size: :lg, class: "text-gray-400") %>
      </div>
      <h4 class="text-xl font-medium text-gray-900 mb-2">
        <%= I18n.t "noResultsForSearch" %>
      </h4>
      <p class="text-gray-500 mb-6">
        <%= I18n.t "tryChangingFilters", default: "Try changing your filters" %>
      </p>
      <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" onclick="clearSearchFilters()">
        <%= icon(:refresh, size: :sm, class: "mr-2") %> <%= I18n.t "clearFilters", default: "Clear Filters" %>
      </button>
      <script>
        function clearSearchFilters() {
          // Reset all hidden inputs in the search form
          var form = document.querySelector('form.simple_form');
          if (form) {
            // Reset hidden inputs (flowbite selects)
            form.querySelectorAll('input[type=hidden]').forEach(function(input) {
              if (input.name.startsWith('search[')) {
                input.value = '';
              }
            });
            // Reset checkboxes
            form.querySelectorAll('input[type=checkbox]').forEach(function(cb) {
              cb.checked = false;
            });
            // Reset select labels to default
            form.querySelectorAll('[id$="_label"]').forEach(function(label) {
              label.textContent = 'Any';
            });
            // Submit the form
            form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
          }
        }
      </script>
    </div>
  <% end %>

  <div class="grid grid-cols-1 gap-6" id="ordered-properties">
    <% @properties.each_with_index do |property, index| %>
      <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow property-item"
           data-price="<%= property.contextual_price @operation_type %>">
        <div class="flex flex-col md:flex-row">
          <!-- Property Image -->
          <div class="md:w-1/3">
            <%= link_to property.contextual_show_path(@operation_type) do %>
              <%= opt_image_tag((property.ordered_photo 1), quality: "auto",
                  height: 240, crop: "scale", class: "w-full h-48 md:h-full object-cover", loading: "lazy",
                  use_picture: true, alt: property.title.presence || "Property listing") %>
            <% end %>
          </div>

          <!-- Property Details -->
          <div class="md:w-2/3 p-4 md:p-6 flex flex-col">
            <% if property.highlighted %>
              <span class="inline-block bg-blue-600 text-white text-xs font-semibold px-2 py-1 rounded mb-2 w-fit">
                <%= I18n.t "property.highlightedProperty" %>
              </span>
            <% end %>

            <h3 class="text-lg font-semibold text-gray-800 mb-2">
              <%= link_to property.title, property.contextual_show_path(@operation_type),
                  class: "hover:text-blue-600" %>
            </h3>

            <p class="text-sm text-gray-500 mb-3"><%= property.reference %></p>

            <div class="flex-grow"></div>

            <!-- Property Features -->
            <div class="flex flex-wrap items-center gap-4 text-sm text-gray-600 mb-4">
              <span class="flex items-center">
                <%= icon(:bed, size: :sm, class: "mr-1 text-blue-500") %>
                <%= format_bedroom_count(property.count_bedrooms) %> <%= I18n.t("property.bedrooms", count: property.count_bedrooms) rescue "Beds" %>
              </span>
              <span class="flex items-center">
                <%= icon(:shower, size: :sm, class: "mr-1 text-blue-500") %>
                <%= format_bathroom_count(property.count_bathrooms) %> <%= I18n.t("property.bathrooms", count: property.count_bathrooms) rescue "Baths" %>
              </span>
              <span class="flex items-center">
                <%= icon(:fullscreen, size: :sm, class: "mr-1 text-blue-500") %>
                <%= property.constructed_area %><%= area_unit property %>
              </span>
              <% if property.count_garages && property.count_garages > 0 %>
                <span class="flex items-center">
                  <%= icon(:directions_car, size: :sm, class: "mr-1 text-blue-500") %>
                  <%= property.count_garages %>
                </span>
              <% end %>
            </div>

            <!-- Price and Action -->
            <div class="flex flex-wrap items-center justify-between gap-4 pt-4 border-t border-gray-200">
              <span class="text-xl font-bold text-blue-600">
                <%= property_price(property, @operation_type) %>
              </span>
              <%= link_to property.contextual_show_path(@operation_type),
                  class: "inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition" do %>
                <%= I18n.t "property.goToProperty" %>
                <%= icon(:chevron_right, size: :sm, class: "ml-2") %>
              <% end %>
            </div>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>

