<div class="max-w-6xl mx-auto">
  <%= render 'header' %>
  <div class="bg-white rounded-lg shadow overflow-hidden">
    <%= render 'navigation', current_tab: 'location' %>
    <div class="p-6">
      <%= form_with model: @prop, url: site_admin_prop_path(@prop), method: :patch, local: true,
                    data: {
                      controller: "location-picker",
                      location_picker_lat_value: @prop.latitude || 0,
                      location_picker_lng_value: @prop.longitude || 0
                    } do |f| %>

        <!-- Search Bar -->
        <div class="mb-6">
          <label class="block text-sm font-medium text-gray-700 mb-2">Search for Address</label>
          <div class="flex gap-2">
            <input type="text"
                   data-location-picker-target="searchInput"
                   placeholder="Enter an address, city, or place name..."
                   class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
            <button type="button"
                    data-action="location-picker#search"
                    class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 text-sm font-medium">
              <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
              </svg>
              Search
            </button>
          </div>
          <p class="mt-1 text-xs text-gray-500">Search for an address to place the marker, or click directly on the map</p>
        </div>

        <!-- Status Message -->
        <div data-location-picker-target="status" class="mb-4 text-sm p-2 rounded" style="display: none;"></div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <!-- Left Column: Address Fields -->
          <div class="space-y-4">
            <h3 class="text-lg font-medium text-gray-900 border-b pb-2">Address Details</h3>

            <div class="grid grid-cols-3 gap-4">
              <div class="col-span-2">
                <label for="prop_street_name" class="block text-sm font-medium text-gray-700 mb-1">Street Name</label>
                <%= f.text_field :street_name,
                    data: { location_picker_target: "streetName" },
                    class: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" %>
              </div>
              <div>
                <label for="prop_street_number" class="block text-sm font-medium text-gray-700 mb-1">Number</label>
                <%= f.text_field :street_number,
                    data: { location_picker_target: "streetNumber" },
                    class: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" %>
              </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
              <div>
                <label for="prop_city" class="block text-sm font-medium text-gray-700 mb-1">City</label>
                <%= f.text_field :city,
                    data: { location_picker_target: "city" },
                    class: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" %>
              </div>
              <div>
                <label for="prop_postal_code" class="block text-sm font-medium text-gray-700 mb-1">Postal Code</label>
                <%= f.text_field :postal_code,
                    data: { location_picker_target: "postalCode" },
                    class: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" %>
              </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
              <div>
                <label for="prop_region" class="block text-sm font-medium text-gray-700 mb-1">Region / State</label>
                <%= f.text_field :region,
                    data: { location_picker_target: "region" },
                    class: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" %>
              </div>
              <div>
                <label for="prop_country" class="block text-sm font-medium text-gray-700 mb-1">Country</label>
                <%= f.text_field :country,
                    data: { location_picker_target: "country" },
                    class: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" %>
              </div>
            </div>

            <!-- Action: Find address on map -->
            <div class="pt-2">
              <button type="button"
                      data-action="location-picker#geocodeAddress"
                      class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                <svg class="w-4 h-4 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                </svg>
                Find Address on Map
              </button>
            </div>

            <!-- GPS Coordinates -->
            <div class="pt-4 border-t mt-4">
              <h3 class="text-lg font-medium text-gray-900 mb-3">GPS Coordinates</h3>
              <div class="grid grid-cols-2 gap-4">
                <div>
                  <label for="prop_latitude" class="block text-sm font-medium text-gray-700 mb-1">Latitude</label>
                  <%= f.number_field :latitude,
                      step: 'any',
                      data: {
                        location_picker_target: "latitude",
                        action: "change->location-picker#updateFromCoordinates"
                      },
                      class: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm font-mono" %>
                </div>
                <div>
                  <label for="prop_longitude" class="block text-sm font-medium text-gray-700 mb-1">Longitude</label>
                  <%= f.number_field :longitude,
                      step: 'any',
                      data: {
                        location_picker_target: "longitude",
                        action: "change->location-picker#updateFromCoordinates"
                      },
                      class: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm font-mono" %>
                </div>
              </div>
            </div>
          </div>

          <!-- Right Column: Interactive Map -->
          <div>
            <h3 class="text-lg font-medium text-gray-900 border-b pb-2 mb-4">Map Location</h3>
            <div class="rounded-lg overflow-hidden border border-gray-300 shadow-sm">
              <div data-location-picker-target="map"
                   class="w-full"
                   style="height: 400px; z-index: 1;">
              </div>
            </div>
            <div class="mt-3 flex flex-wrap gap-2">
              <button type="button"
                      data-action="location-picker#reverseGeocode"
                      class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                <svg class="w-4 h-4 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                </svg>
                Fill Address from Map
              </button>
              <button type="button"
                      data-action="location-picker#centerOnMarker"
                      class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                <svg class="w-4 h-4 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"></path>
                </svg>
                Center Map
              </button>
            </div>
            <p class="mt-3 text-sm text-gray-500">
              <strong>Tip:</strong> Click on the map or drag the marker to set the exact location. The coordinates will update automatically.
            </p>
          </div>
        </div>

        <!-- Form Actions -->
        <div class="flex justify-end items-center mt-8 pt-6 border-t border-gray-200">
          <div class="flex space-x-3">
            <%= link_to 'Cancel', site_admin_prop_path(@prop), class: 'px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50' %>
            <%= f.submit 'Save Changes', class: 'px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 cursor-pointer' %>
          </div>
        </div>
      <% end %>
    </div>
  </div>
</div>
