<% provide(:page_name, 'register') %>
<% provide(:title, 'Register') %>
<% provide(:description, 'Sign up for your JamKazam account to play music with others online in real time and network with musicians.') %>
<% provide(:hero_title, 'JamKazam has spent the last 6 years building the best platform in the world to let musicians play together live and in sync over the Internet.') %>
    
<div class="row">
				
  <div class="col-md-8 col-sm-12">
    <strong>Today tens of thousands of musicians use JamKazam to:</strong>
    <ul>
      <li>Rehearse with their bands from home</li>
      <li>Join open sessions to meet &amp; play with new friends</li>
      <li>Co-write music live &amp; interactively vs. trading files</li>
      <li>Record session performances</li>
      <li>Live broadcast session performances thru YouTube &amp; Facebook</li>

    </ul>
  
    <p style="font-size:16px">Check out some examples of groups playing together on JamKazam:</p>
    <iframe width="625" height="400" src="https://www.youtube.com/embed/euxDykIqUdo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    
  </div>


  <div class="col-md-4 col-sm-12">
    
    <p>Sign up for a free account now and get <a href="https://jamkazam.freshdesk.com/support/solutions/articles/66000122535-what-are-jamkazam-s-free-vs-premium-features-">Gold premium subscription</a> features FREE for 30 days! After 30 days you can continue playing on our free plan or select a premium plan – whatever is right for you. When you sign up, we’ll send you an email with instructions on how to set up and play on the platform.</p>
    
    <%= errors_for @user %>
    <%= form_for(@user, :url => @signup_postback, :method => :post, html: { id: 'signup' }) do |f| %>
      
      <div class="row mb-2">
        <div class="col-md-6 col-sm-12">
          <%= f.label :first_name, "First Name:" %>
          <%= f.text_field :first_name %>
        </div>
        <div class="col-md-6 col-sm-12">
          <%= f.label :last_name, "Last Name:" %>
          <%= f.text_field :last_name %>
        </div>
      </div>
      <div class="row mb-2">
        <div class="col-12">
          <%= f.label :email, "Email Address:" %>
          <%= f.text_field :email %>
        </div>
      </div>
      <div class="row mb-2">
        <div class="col-md-12">
          <%= f.label :password, "Choose a Password:" %>
          <%= f.password_field :password %>
        </div>
      </div>
      <div class="row mb-2">
        <div class="col-md-12">
          <%= f.label :password_confirmation, "Verify Password:" %>
          <%= f.password_field :password_confirmation %>
        </div>
      </div>
      <div class="row mt-3">
        <div class="col-12">
          <%= f.check_box :terms_of_service %> <label for="user_terms_of_service" style="font-size: 90%">I agree to the JamKazam  <%= link_to "terms of service", corp_terms_path, :rel => "external" %></label>
        </div>
      </div>
      <div class="row mb-2">
        <div class="col-12 recaptcha">
          <% if Rails.application.config.recaptcha_enable %>
              <div id="recaptcha_select" name="recaptcha_response_field" class="g-recaptcha" data-sitekey="<%=Rails.application.config.recaptcha_public_key%>" data-callback="recaptcha_success" data-expired-callback="recaptcha_expired">
              </div>
            <% end %>
        </div>
      </div>
      <div class="row mb-2">
        <div class="col-12"><br />
          <button id="create-account-submit" onClick="$document.forms['signup'].submit()" style="width:100%">Sign Up for JamKazam</button>
        </div>
      </div>
    <% end %>
  
  </div>
</div>

<%= content_for(:scripts) do %>
<script type="text/javascript">
    //window.signup.handle_location_changes()

    // window.signup.handle_register_as_changes()

    function recaptcha_success(response) {
      //$("#create-account-submit").removeClass("disabled")
      $("#create-account-submit").prop("disabled", false)
    }

    function recaptcha_expired(response) {
      //$("#create-account-submit").addClass("disabled")
      $("#create-account-submit").prop("disabled", true)
    }

    function get_first_error(field) {
        if (errors[field] && errors[field].length > 0) {
            return errors[field][0]
        }
        else {
            return null;
        }
    }

    // populate musician instruments from previous submit, if applicable
    // if (window.gon && gon.musician_instruments) {
    //     $(gon.musician_instruments).each(function (index, value) {
    //         $('#' + value.instrument_id.replace(" ", "") + "_checkbox").attr("checked", true);
    //         $('#' + value.instrument_id.replace(" ", "") + "_proficiency").val(value.proficiency_level.toString())
    //     })
    // }
    // if(window.gon) {
    //   var $radios = $('input:radio[name="jam_ruby_user[desired_plan_code]"]');
    //   if(gon.plan_code) {
    //     $radios.filter(gon.plan_code, true)
    //   }
    //   else {
    //     $radios.filter('[value="<%= @plan_code %>"]').prop('checked', true)
    //   }
    // }

    // show signup errors, if any
    if (window.gon && gon.signup_errors) {
        var errors =
        <%= @user.errors.to_json.html_safe %>

        var email = get_first_error("email")
        var first_name = get_first_error("first_name")
        var last_name = get_first_error("last_name")
        var musician_instruments = get_first_error("musician_instruments")
        var password = get_first_error("password")
        var password_confirmation = get_first_error("password_confirmation")
        var terms_of_service = get_first_error("terms_of_service")
        var country = get_first_error("country")
        var state = get_first_error("state")
        var city = get_first_error("city")
        var recaptcha = get_first_error("recaptcha")


        if (email) {
            var emailInput = $('#jam_ruby_user_email');
            emailInput.closest('div.field').addClass('error')
            emailInput.after("<div class='error-text'>" + email + "</div>")
        }

        if (first_name) {
            var firstNameInput = $('#jam_ruby_user_first_name');
            firstNameInput.closest('div.field').addClass('error')
            firstNameInput.after("<div class='error-text'>" + first_name + "</div>")
        }

        if (last_name) {
            var lastNameInput = $('#jam_ruby_user_last_name');
            lastNameInput.closest('div.field').addClass('error')
            lastNameInput.after("<div class='error-text'>" + last_name + "</div>")
        }

        if (country) {
            var countryInput = $('#country_select');
            countryInput.closest('div.field').addClass('error')
            countryInput.after("<div class='error-text'>" + country + "</div>")
        }

        if (state) {
            var stateInput = $('#region_select');
            stateInput.closest('div.field').addClass('error')
            stateInput.after("<div class='error-text'>" + state + "</div>")
        }

        if (city) {
            var cityInput = $('#city_select');
            cityInput.closest('div.field').addClass('error')
            cityInput.after("<div class='error-text'>" + city + "</div>")
        }

        if (recaptcha) {
            var recaptchaInput = $('#recaptcha_select');
            recaptchaInput.closest('div.field').addClass('error')
            recaptchaInput.after("<div class='error-text'>" + recaptcha + "</div>")
        }

        if (musician_instruments) {
            var musicianInstrumentsInput = $('#instrument_selector');
            musicianInstrumentsInput.closest('div.ftue-instrumentlist-wrapper').addClass('error')
            musicianInstrumentsInput.closest('div.ftue-instrumentlist').after("<div class='error-text'>" + musician_instruments + "</div>")
        }

        if (password) {
            var passwordInput = $('#jam_ruby_user_password');
            passwordInput.closest('div.field').addClass('error')
            passwordInput.after("<div class='error-text'>" + password + "</div>")
        }

        if (password_confirmation) {
            var passwordConfirmationInput = $('#jam_ruby_user_password_confirmation');
            passwordConfirmationInput.closest('div.field').addClass('error')
            passwordConfirmationInput.after("<div class='error-text'>" + password_confirmation + "</div>")
        }

        if (terms_of_service) {
            var termsOfServiceInput = $('#jam_ruby_user_terms_of_service');
            termsOfServiceInput.closest('small').addClass('error')
            termsOfServiceInput.after("<div class='error-text'>" + terms_of_service + "</div>")
        }
    }

  </script>
<% end %>
