<%# 
  This partial expects the following variables:
  - form: the form object
  
  You can call it like this:
  <%= render 'return_addresses/picker', form: form %>
<!--%>-->

<div class="return-address-picker">
  <div class="form-group">
    <%= form.label :return_address_id, "Return Address", class: "form-label" %>
    
    <div class="return-address-select">
      <%= form.collection_select :return_address_id,
                               ReturnAddress.shared.or(ReturnAddress.owned_by(current_user)),
                               :id,
                               :display_name,
                               { prompt: "Select a return address...", selected: 1 },
                               { class: "form-control" } %>
      
      <button type="button" class="btn btn-secondary" data-action="click->return-address#toggleNewForm">
        Add New
      </button>
    </div>
  </div>

  <div class="new-address-form" data-return-address-target="newForm" style="display: none;">
    <%= form.fields_for :return_address, ReturnAddress.new do |ra| %>
      <%= ra.hidden_field :user_id, value: current_user.id %>
      <%= ra.hidden_field :from_letter, value: true if params[:from_letter].present? %>
      
      <div class="grid md:grid-cols-2 gap-4">
        <div class="form-group">
          <%= ra.label :name, class: "form-label" %>
          <%= ra.text_field :name, class: "form-control", placeholder: "Organization or Personal Name" %>
        </div>
        
        <div class="form-group">
          <%= ra.label :line_1, "Address Line 1", class: "form-label" %>
          <%= ra.text_field :line_1, class: "form-control", placeholder: "Street address, P.O. box, etc." %>
        </div>
      </div>
      
      <div class="form-group">
        <%= ra.label :line_2, "Address Line 2", class: "form-label" %>
        <%= ra.text_field :line_2, class: "form-control", placeholder: "Apartment, suite, unit, etc. (optional)" %>
      </div>
      
      <div class="grid md:grid-cols-3 gap-4">
        <div class="form-group">
          <%= ra.label :city, class: "form-label" %>
          <%= ra.text_field :city, class: "form-control" %>
        </div>
        
        <div class="form-group">
          <%= ra.label :state, class: "form-label" %>
          <%= ra.text_field :state, class: "form-control" %>
        </div>
        
        <div class="form-group">
          <%= ra.label :postal_code, "Postal Code", class: "form-label" %>
          <%= ra.text_field :postal_code, class: "form-control" %>
        </div>
      </div>
      
      <div class="form-group">
        <%= ra.label :country, class: "form-label" %>
        <%= ra.collection_select :country,
                               ReturnAddress.countries_for_select,
                               :first,
                               :last,
                               { include_blank: "Select a country" },
                               { class: "form-control" } %>
      </div>
      
      <div class="form-group">
        <label class="checkbox-label">
          <%= ra.check_box :shared, class: "form-checkbox" %>
          <span>Make this address available to everyone</span>
        </label>
      </div>
    <% end %>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const returnAddressController = {
      toggleNewForm: function(event) {
        const newForm = document.querySelector('[data-return-address-target="newForm"]');
        if (newForm) {
          newForm.style.display = newForm.style.display === 'none' ? 'block' : 'none';
        }
      }
    };

    const toggleButton = document.querySelector('[data-action="click->return-address#toggleNewForm"]');
    if (toggleButton) {
      toggleButton.addEventListener('click', returnAddressController.toggleNewForm);
    }
  });
</script> 