Branding Form

<%= simple_form_for @account, url: account_branding_path(id: @account.branding.id), html: { 'data-provide': 'validation', 'data-disable': false } do |f| %>
            <div class="divider"><h4>Account Details</h4></div>
            <%= f.input :name, label: 'Account Name', required: true, input_html: { class: 'form-control' } %>
            <%= f.simple_fields_for :branding do |branding_form| %>
            <div class="divider"><h4>Company Address</h4></div>
            <div class="row">
              <div class="col-sm-12 col-md-6 form-group">
                <%= branding_form.input :address_1, label: 'Address 1', required: true, input_html: { class: 'form-control' } %>
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-sm-12 col-md-6 form-group">
                <%= branding_form.input :address_2, label: 'Address 2', input_html: { class: 'form-control' } %>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12 col-md-6 form-group">
                <%= branding_form.input :city, label: 'City', required: true, input_html: { class: 'form-control' } %>
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-sm-12 col-md-6 form-group">
                <%= branding_form.input :state, label: 'State', required: true, input_html: { class: 'form-control' } %>
                <div class="invalid-feedback"></div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12 col-md-6 form-group">
                <%= branding_form.input :postal_code, label: 'Postal Code', required: true, input_html: { class: 'form-control' } %>
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-sm-12 col-md-6 form-group">
                <%= branding_form.input :time_zone, collection: ActiveSupport::TimeZone::MAPPING.values, label: 'Time Zone', required: true, input_html: { class: 'form-control', 'data-provide': 'selectpicker', 'data-size': '10', 'data-live-search': true } %>
                <div class="invalid-feedback"></div>
              </div>
            </div>
            <div class="divider"><h4>Website, Logo, &amp; Colors</h4></div>
            <div class="row">
              <div class="col-sm-12 col-md-6 form-group">
                <%= branding_form.input :website, as: :url, label: 'Company Website', required: true, input_html: { class: 'form-control', 'data-error': 'Please enter a URL, including http://' } %>
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-sm-12 col-md-6 form-group">
                <label>Company Logo</label><br>
                <%= branding_form.uploadcare_field :logo, data: { clearable: true, crop: true} %>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12 col-md-6 form-group">
                <%= branding_form.input :primary_color, label: 'Primary Color', required: true, input_html: { class: 'full-width form-control', 'data-provide': 'colorpicker' } %>
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-sm-12 col-md-6 form-group">
                <%= branding_form.input :accent_color, label: 'Secondary Color', required: true, input_html: { class: 'full-width form-control', 'data-provide': 'colorpicker' } %>
                <div class="invalid-feedback"></div>
              </div>
            </div>
            <div class="divider"><h4>Social Media Accounts</h4></div>
            <div class="row">
              <div class="col-sm-12 col-md-6 form-group">
                <%= branding_form.input :facebook_url, label: 'Facebook URL', input_html: { class: 'form-control' } %>
              </div>
              <div class="col-sm-12 col-md-6 form-group">
                <%= branding_form.input :twitter_url, label: 'Twitter URL', input_html: { class: 'form-control' } %>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12 col-md-6 form-group">
                <%= branding_form.input :instagram_url, label: 'Instagram URL', input_html: { class: 'form-control' } %>
              </div>
              <div class="col-sm-12 col-md-6 form-group">
                <%= branding_form.input :youtube_url, label: 'YouTube URL', input_html: { class: 'form-control' } %>
              </div>
            </div>
            <% end %>
            <div class="row">
              <div class="col-sm-12 my-40 form-group">
                <%= f.submit 'Save Business Branding', type: 'submit', class: 'btn btn-primary float-right', id: 'submit-branding' %>
              </div>
            </div>
          <% end %>