.row
  .col-sm-12
    .box
      .box-header.dark-background
      .box-content
        = form_for @user, url: user_profile_path, html: { id: "profile_form", class: 'form form-horizontal'} do |f|
          = f.fields_for :profile do |profile|

            = profile.hidden_field :id

            = form_group(@user.profile, :first_name) do
              %label.col-md-2.control-label{for: :first_name} First Name
              .col-md-5
                = profile.text_field :first_name, class: 'form-control'

            = form_group(@user.profile, :last_name) do
              %label.col-md-2.control-label{for: :last_name} Last Name
              .col-md-5
                = profile.text_field :last_name, class: 'form-control'

            = form_group(@user.profile, :company) do
              %label.col-md-2.control-label{for: :company} Company
              .col-md-5
                = profile.text_field :company, class: 'form-control'

            = form_group(@user.profile, :country) do
              %label.col-md-2.control-label{for: :country} Country
              .col-md-5
                = profile.country_select :country, { priority_countries: ['US'] }, class: 'form-control'

            = form_group(@user.profile, :address) do
              %label.col-md-2.control-label{for: :address} Street Address
              .col-md-5
                = profile.text_field :address, class: 'form-control'

            = form_group(@user.profile, :secondary_address) do
              %label.col-md-2.control-label{for: :secondary_address} Address Line 2
              .col-md-5
                = profile.text_field :secondary_address, class: 'form-control'

            = form_group(@user.profile, :city) do
              %label.col-md-2.control-label{for: :city} City
              .col-md-5
                = profile.text_field :city, class: 'form-control'

            = form_group(@user.profile, :state) do
              %label.col-md-2.control-label{for: :state} State
              .col-md-5
                = profile.select :state, class: 'form-control'

            = form_group(@user.profile, :zip) do
              %label.col-md-2.control-label{for: :zip} Zip/Postal Code
              .col-md-5
                = profile.text_field :zip, class: 'form-control'

            = form_group(@user.profile, :phone) do
              %label.col-md-2.control-label{for: :phone} Phone Number
              .col-md-5
                = profile.text_field :phone, class: 'form-control'

          .form-actions.form-actions-padding-sm
            .row
              .col-md-10.col-md-offset-2
                = f.submit "Save", class: 'btn btn-primary'
:javascript
  $(document).ready(function(){
    var aus_states = ["", "NSW", "QLD", "SA", "TAS", "VIC", "WA", "ACT", "NT"]
    var ca_states  = ["", "AB", "BC", "MB", "NB", "NL", "NS", "ON", "PE", "QC", "SK", "NT", "NU", "YT"]
    var us_states  = ["", "AL","AK","AZ","AR","CA","CO","CT","DE","DC","FL","GA","HI","ID","IL","IN","IA","KS","KY","LA","ME","MD","MA","MI","MN","MS","MO","MT","NE","NV","NH","NJ","NM","NY","NC","ND","OH","OK","OR","PA","RI","SC","SD","TN","TX","UT","VT","VA","WA","WV","WI","WY"]

    function updateStates(){
         if($('#user_profile_attributes_country').val() == "US"){
              $('#user_profile_attributes_state').replaceWith("<select class='form-control' name='user[profile_attributes][state]' id='user_profile_attributes_state'><\/select>")
              for(var i = 0; i < us_states.length; i++){
                $('#user_profile_attributes_state').append($("<option></option>").attr("value",us_states[i]).text(us_states[i]));
              }
              $('#user_profile_attributes_state').prop('disabled', false);
          // Australia
          }else if($('#user_profile_attributes_country').val() == "AU"){
              $('#user_profile_attributes_state').replaceWith("<select class='form-control' name='user[profile_attributes][state]' id='user_profile_attributes_state'><\/select>")
              for(var i = 0; i < aus_states.length; i++){
                $('#user_profile_attributes_state').append($("<option></option>").attr("value",aus_states[i]).text(aus_states[i]));
              }
              $('#user_profile_attributes_state').prop('disabled', false);

          // Canada
          }else if($('#user_profile_attributes_country').val() == "CA"){
                $('#user_profile_attributes_state').replaceWith("<select class='form-control' name='user[profile_attributes][state]' id='user_profile_attributes_state'><\/select>")
                for(var i = 0; i < ca_states.length; i++){
                  $('#user_profile_attributes_state').append($("<option></option>").attr("value",ca_states[i]).text(ca_states[i]));
                }
                $('#user_profile_attributes_state').prop('disabled', false);
          }else{
              $('#user_profile_attributes_state').replaceWith("<input class='form-control valid' type='text' value='' name='user[profile_attributes][state]' id='user_profile_attributes_state' aria-invalid='false'>")
              $('#user_profile_attributes_state').prop('disabled', true);;
          }
    }

    updateStates();


    $('#user_profile_attributes_country').on('change', function(){ 
      updateStates();  
    });



    var $checkoutForm = $('#profile_form').validate({
        // Rules for form validation
        rules: {
            "user_profile_attributes_state": {
                required: function(element){
                    // US
                    if($('#user_profile_attributes_country').val() == "US"){
                        $('#user_profile_attributes_state').replaceWith("<select class='form-control' name='user[profile_attributes][state]' id='user_profile_attributes_state'><\/select>")
                        for(var i = 0; i < us_states.length; i++){
                          $('#user_profile_attributes_state').append($("<option></option>").attr("value",us_states[i]).text(us_states[i]));
                        }
                        return true;
                    // Australia
                    }else if($('#user_profile_attributes_country').val() == "AU"){
                        $('#user_profile_attributes_state').replaceWith("<select class='form-control' name='user[profile_attributes][state]' id='user_profile_attributes_state'><\/select>")
                        for(var i = 0; i < aus_states.length; i++){
                          $('#user_profile_attributes_state').append($("<option></option>").attr("value",aus_states[i]).text(aus_states[i]));
                        }

                        return true;
                    // Canada
                    }else if($('#user_profile_attributes_country').val() == "CA"){
                        $('#user_profile_attributes_state').replaceWith("<select class='form-control' name='user[profile_attributes][state]' id='user_profile_attributes_state'><\/select>")
                        for(var i = 0; i < ca_states.length; i++){
                          $('#user_profile_attributes_state').append($("<option></option>").attr("value",ca_states[i]).text(ca_states[i]));
                        }

                        return true;
                    }else{
                        return false;
                    }
                }
            },
            "user_profile_attributes_zip": {
                required: function(element){
                    // US
                    if($('#user_profile_attributes_country').val() == "US"){
                        return true;
                    // Australia
                    }else if($('#user_profile_attributes_country').val() == "AU"){
                        return true;
                    // Canada
                    }else if($('#user_profile_attributes_country').val() == "CA"){
                        return true;
                    }else{
                        return false;
                    }
                }
            }
        },
    })
  })