<? global $lang; \S::set_session('form-token', bin2hex(random_bytes(32))); ?>

<div class="contact-box">
  <div class="contact-head">
    <? if ($alert = \S::get_session('alert')) : ?>
      <div class="alert alert-success">
        <?= $alert; ?>
        <? unset($_SESSION['alert']); ?>
      </div>
    <? endif; ?>
  </div>

  <form action="" id="contact_form" method="POST">
    <input type="hidden" name="action" value="send_contact_form">
    <input type="hidden" name="token" value="<?= \S::get_session('form-token'); ?>">
    <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">

    <div class="form_group">
      <input type="text" name="name" id="form_name" placeholder="NAME *" required>
    </div>
    <div class="form_group">
      <input type="text" name="email" id="form_email" placeholder="E-MAIL *" required>
    </div>
    <div class="form_group">
      <input type="text" name="phone" id="form_phone" placeholder="PHONE">
    </div>
    <div class="form_group">
      <select name="country" id="country">
        <option value="" disabled selected>COUNTRY</option>
        <option value="IRELAND">IRELAND</option>
        <option value="UNITED STATES OF AMERICA">UNITED STATES OF AMERICA</option>
        <option value="CANADA">CANADA</option>
        <option value="UNITED KINGDOM">UNITED KINGDOM</option>
        <option value="OTHER COUNTRIES">OTHER COUNTRIES</option>
      </select>
    </div>
    <div class="form_group">
      <textarea name="your_message" id="form_message" placeholder="ASK A QUESTION"></textarea>
    </div>
    <div class="agreement">
      <div class="agreement-container">
        <div class="form_group_2">
          <input type="checkbox" name="form_check" id="form_check" class="checkbox" required>
          <label class="label_form_check" for="form_check">I agree to the processing of my personal data provided by me above in order to prepare an appropriate offer.</label>
        </div>
        <div class="form_group_2">
          <input type="checkbox" name="form_check2" id="form_check2" class="checkbox" required>
          <label class="label_form_check2" for="form_check2">I agree to the processing of my personal data provided by me above in order to receive advertising materials.</label>
        </div>
      </div>
      <div class="buttons-container">
        <!-- <div class="g-recaptcha" data-sitekey="6Lcil-sqAAAAAFZvSie7dNg5M_vkMsH0_QFpF_kb"></div> -->
        <button type="submit" class="btn btn-send">SEND</button>
      </div>
    </div>
  </form>
</div>

<!-- <script src="https://www.google.com/recaptcha/api.js" async defer></script> -->
<script class="footer">
  $(function() {
    $('body').on(click_event, '#contact_form .btn-send', function(e) {
      e.preventDefault()
      var form_name = $.trim($('#contact_form #form_name').val());
      var form_email = $.trim($('#contact_form #form_email').val());
      var form_phone = $.trim($('#contact_form #form_phone').val());
      var country = $.trim($('#contact_form #country').val());
      var form_message = $.trim($('#contact_form #form_message').val());
      var form_check = $('#contact_form #form_check').is(':checked');
      var form_check2 = $('#contact_form #form_check2').is(':checked');

      var form_messaform_checkge = $.trim($('#contact_form #form_check').val());

      if ( form_email === '' || form_name === '' ) {
        $.alert({
          title: 'Error',
          content: 'Please fill in the required information.',
          type: 'orange',
          closeIcon: true,
          closeIconClass: 'fa fa-close',
          typeAnimated: true,
          animation: 'opacity',
          autoClose: 'confirm|10000',
          boxWidth: '650px',
          useBootstrap: false,
          theme: 'modern',
          buttons: {
            confirm: {
              text: 'Close',
              btnClass: 'btn-blue',
              keys: ['enter'],
              action: function() {}
            }
          }
        });
        return false;
      }

      if ( !$( '#contact_form #form_check' ).is(':checked') ) {
        $.alert({
          title: 'Error',
          content: 'Please indicate your consent to receive a commercial offer.',
          type: 'orange',
          closeIcon: true,
          closeIconClass: 'fa fa-close',
          typeAnimated: true,
          animation: 'opacity',
          autoClose: 'confirm|10000',
          boxWidth: '650px',
          useBootstrap: false,
          theme: 'modern',
          buttons: {
            confirm: {
              text: 'Close',
              btnClass: 'btn-blue',
              keys: ['enter'],
              action: function() {}
            }
          }
        });
        return false;
      }

      // grecaptcha.ready(function() {
      //   grecaptcha.execute('6Lcil-sqAAAAAFZvSie7dNg5M_vkMsH0_QFpF_kb', { action: 'submit' }).then(function(token) {
          $.ajax({
            type: 'POST',
            cache: false,
            url: '/',
            data: {
              a: 'send_contact_form',
              name: form_name,
              email: form_email,
              phone: form_phone,
              country: country,
              message: form_message,
              form_check: form_check,
              form_check2: form_check2,
              'g-recaptcha-response': token
            },
            beforeSend: function() {
              alert1 = $.alert({
                title: 'Information',
                content: 'Please wait ...',
                type: 'blue',
                closeIcon: true,
                closeIconClass: 'fa fa-close',
                typeAnimated: true,
                animation: 'opacity',
                autoClose: 'confirm|60000',
                boxWidth: '650px',
                useBootstrap: false,
                theme: 'modern',
                buttons: {
                  confirm: {
                    text: 'Close',
                    btnClass: 'btn-blue',
                    keys: ['enter'],
                    action: function() {}
                  }
                }
              });
            },
            success: function(data) {
              response = jQuery.parseJSON(data);

              if (response.status === 'ok')
                var msg = 'The message has been sent. We will try to respond as soon as possible.';
              else
                var msg = 'An error occurred while sending the message. Please try again.';

              alert1.close();

              $('.contact_box input[type="text"], .contact_box input[type="email"], .contact_box textarea').val('');

              $.alert({
                title: '<?= ucfirst($lang['informacja']); ?>',
                content: msg,
                type: 'blue',
                closeIcon: true,
                closeIconClass: 'fa fa-close',
                typeAnimated: true,
                animation: 'opacity',
                autoClose: 'confirm|10000',
                boxWidth: '650px',
                useBootstrap: false,
                theme: 'modern',
                buttons: {
                  confirm: {
                    text: 'Close',
                    btnClass: 'btn-blue',
                    keys: ['enter'],
                    action: function() {}
                  }
                }
              });
            }
          });
      //   });
      // });
    });
  });
</script>