.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"]
    var aus_states = ["", "Ashmore and Cartier Islands", "Australian Antarctic Territory", "Australian Capital Territory", "Christmas Island", "Cocos Islands", "Coral Sea Islands","Heard Island and McDonald Islands", "Jervis Bay Territory", "New South Wales", "Norfolk Island", "Northern Territory", "Queensland", "South Australia", "Tasmania", "Victoria", "Western Australia"]
    var ca_states  = ["", "Alberta", "British Columbia", "Manitoba", "New Brunswick", "Newfoundland and Labrador", "Nova Scotia", "Ontario", "Prince Edward Island", "Quebec", "Saskatchewan"]
    var us_states  = ["", "Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","District of Columbia","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]
    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;
                    }
                }
            }
        },
    })
  })