<hr class="clear" />
<div id="module-newsletter" class="module-newsletter top-margin-large">
  <div class="container-fluid vertical-padding-x-large">
    <div class="row">
      <div class="col-xs-12">
        <div class="content-box text-center">
          <b class="text-medium text-uppercase visible-block text-dark">
            {{text_mensagem}}
          </b>
          <span class="text-small visible-block bottom-margin-large text-dark">
            {{text_infomacao}}
          </span>
          {% if newsletter_name %}
          <div class="field-group field-group-inline field-newsletter margin-x-small vertical-top">
            <input type="text" class="input-text field-entry field-entry-medium input-newsletter bottom-margin-x-small" name="newsletter_name" value="" placeholder="{{text_placeholder_name}}">
            <input type="text" class="input-text field-entry field-entry-medium input-newsletter bottom-margin-small" name="newsletter_email" value="" placeholder="{{text_placeholder_email}}">
            <button type="button" class="btn-default btn-medium full-width js-btn-inscrever" title="{{button_add}}">
              <span>{{button_add}}</span>
            </button>
          </div>
          {% else %}
            <div class="field-group field-group-inline field-newsletter margin-x-small vertical-top">
              <input type="text" class="input-text field-entry field-entry-medium input-newsletter" name="newsletter_email" value="" placeholder="{{text_placeholder_email}}">
            </div>
            <div class="field-group field-group-inline margin-x-small vertical-top">
              <button type="button" class="btn-default btn-medium-square js-btn-inscrever" title="{{button_add}}">
                <span>{{button_add}}</span>
              </button>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
window.waitEvent('scripts_document', function() {
$('#module-newsletter .js-btn-inscrever').on('click', function(event) {

    event.preventDefault();
    $.ajax({
      url: 'index.php?route=common/module_newsletter/newsletter',
      type: 'POST',
      data: {
        email: $("#module-newsletter input[name='newsletter_email']").val(),
        {% if newsletter_name %} name: $("#module-newsletter input[name='newsletter_name']").val() {% endif %}
      },
      dataType: 'json',
      beforeSend: function(){
        $('#module-newsletter .js-btn-inscrever').addClass('btn-loading');
        $('#module-newsletter .js-btn-inscrever').attr('disabled', true);
      },
      complete: function(){
        $('#module-newsletter .js-btn-inscrever').removeClass('btn-loading');
        $('#module-newsletter .js-btn-inscrever').attr('disabled', false);
      },
      success: function(json) {

        $('#module-newsletter .input-newsletter').removeClass('field-entry-error');
        $('#module-newsletter .field-newsletter').removeClass('field-valid');

        if(json['error']){
          $('#module-newsletter .input-newsletter').addClass('field-entry-error');
          {% if newsletter_name %}
            $("#module-newsletter input[name='newsletter_name']").before('<span class="text-error visible-block">' + json['error'] + '</span>');
          {% else %}
            $("#module-newsletter input[name='newsletter_email']").after('<span class="text-error visible-block">' + json['error'] + '</span>');
          {% endif %}
        }

        if(json['success']){
          $('#module-newsletter .field-newsletter').addClass('field-valid');
          {% if newsletter_name %}
            $("#module-newsletter input[name='newsletter_name']").before('<span class="text-success visible-block">' + json['success'] + '</span>');
          {% else %}
            $("#module-newsletter input[name='newsletter_email ']").after('<span class="text-success visible-block">' + json['success'] + '</span>');
          {% endif %}
        }

        $('#module-newsletter .text-error, #module-newsletter .text-success').delay(5000).fadeOut(400,function(){
          $('#module-newsletter .text-error, #module-newsletter .text-success').remove();
          $('#module-newsletter .input-newsletter').removeClass('field-entry-error');
          $('#module-newsletter .field-newsletter').removeClass('field-valid');
        });

      }
    });

});
});
</script>
