<div class="newsletter-overlay js-newsletter-overlay">
  <div class="newsletter-modal">
    <div class="newsletter-ads">
      <picture>
        <source media="(max-width: 880px)" srcset="catalog/view/theme/OPC070156/image/negociochina-mobile.jpg">
        <img src="catalog/view/theme/OPC070156/image/negociochina.jpg" alt="Mais de 8.500 variedades em produtos nacionais e importados!">
      </picture>
    </div>
    <div class="newsletter-form ft-padding-medium">
      <i class="fa fa-close newsletter-close js-newsletter-close"></i>
      <div>
        <h1><?php echo $title; ?></h1>
        <p style="margin-top: -10px;"><?php echo $subtitle; ?></p>
      </div>
      <div class="newsletter-content js-newsletter-content">
        <label>
          <b class="label-titulo" dp-label="name_newsletter"><span class="required">*</span> <?php echo $entry_name; ?></b>
          <input type="text" dp-input="name_newsletter" name="name_newsletter" value="" placeholder="<?php echo $entry_name_placeholder; ?>">
        </label>
        <label>
          <b class="label-titulo" dp-label="email_newsletter"><span class="required">*</span> <?php echo $entry_email; ?></b>
          <input type="text" dp-input="email_newsletter" name="email_newsletter" value="" placeholder="<?php echo $entry_email_placeholder; ?>">
        </label>
        <input type="button" value="<?php echo $button_continue; ?>" class="button js-newsletter-send">
      </div>
      <div id="frm_account" style="border-top: 1px solid #ccc;margin-top: 24px;">
        <span style="display: block;margin-top: 24px;font-size: 16px;font-weight: bold;"><?php echo $text_customer; ?></span>
        <label style="display: inline-block;width: 40%;vertical-align: top;">
          <b class="label-titulo" dp-label="email"><span class="required">*</span> <?php echo $entry_email; ?></b>
          <input type="text" dp-input="email" name="email" value="" placeholder="<?php echo $entry_email_placeholder; ?>">
        </label>
        <label style="display: inline-block;width: 35%;margin-left: 2%;margin-right:2%;">
          <b class="label-titulo" dp-label="password"><span class="required">*</span> <?php echo $entry_password; ?></b>
          <input type="password" dp-input="password" name="password" value="" placeholder="<?php echo $entry_password_placeholder; ?>">
        </label>
        <input type="button" value="<?php echo $button_login; ?>" class="button js-newsletter-login" style="display:inline-block;vertical-align: top;margin-top: 28px;">
        <div id="msg_user"></div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $('.js-newsletter-send').on('click', function(){

      $('.error').remove();

      var data = {};
          data['name_newsletter'] = $("input[type=text][name=name_newsletter]").val();
          data['email_newsletter'] = $("input[type=text][name=email_newsletter]").val();

  		$.ajax({
  			url: 'index.php?route=common/newsletter/send',
  			type: 'post',
        data: data,
  			dataType: 'json',
  			beforeSend: function() {
          $('.js-newsletter-content').addClass('loading');
  			},
  			complete: function() {
          $('.js-newsletter-content').removeClass('loading');
  			},
  			success: function(json) {

          if(json['error']){
            $.each(json['error'], function(index, value ) {
              $("input[type=text][name=" + index + "]").after("<span class='error'>" + value + "</span>");
            });
          }

          if(json['success']){
            $('.js-newsletter-content').append('<div class="newsletter-sucesso"><span>'+json['success']+'</span></div>');
          }

          $('.js-newsletter-send').blur();
  			},
  			error: function(xhr, ajaxOptions, thrownError) {
  				alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
  			}
  		});
    });

    $('.js-newsletter-close, .js-newsletter-overlay').on('click', function(e){
      if (!$(this).hasClass('js-newsletter-close') && $(e.target).closest('.newsletter-modal').length > 0) {
        return false;
      }
      $('.newsletter-overlay').remove();
      function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires="+d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
      }
      setCookie('close_newsletter', true, 10);
    });

  });
</script>
