<?php echo $header; ?>
  <section class="container-fluid">
    <?php if ($error_warning) { ?>
      <script>
      window.waitEvent('scripts_document', function() {
        notificationMsg('<?php echo $error_warning; ?>','error');
      });
      </script>
    <?php } ?>
    <?php echo $breadcrumbs; ?>
    <?php echo $content_top; ?>
    <div class="row small-space-xs">
      <?php if ($column_left) { ?>
        <div class="col-xs-12 col-sm-4 col-md-3">
          <div class="content-box hidden-md-down">
            <?php echo $column_left; ?>
          </div>
        </div>
    <?php } ?>
    <div class="col-xs-12<?php echo $column_left ? ' col-sm-8 col-md-9' : '' ?>">
      <div class="row">
        <div class="col-xs-12">
          <div class="content-box">
            <h2 class="heading-1"><?php echo $heading_title; ?></h2>
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md">
          <div class="content-box page-contact-form">
            <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data">
              <label class="field field-medium bottom-margin-medium">
                <span class="field-label"><?php echo $entry_name; ?></span>
                <input type="text" class="field-entry <?php if ($error_name) {echo 'field-entry-error';} ?>" name="name" id="name" value="<?php echo $name; ?>" placeholder="<?php echo $entry_name_placeholder; ?>" />
                <?php if ($error_name) { ?><span class="text-small text-error visible-block top-margin-x-small"><?php echo $error_name; ?></span> <?php } ?>
              </label>
              <div class="row small-space-xs">
                <div class="col-xs-12 col-sm-7">
                  <label class="field field-medium">
                    <span class="field-label"><?php echo $entry_email; ?></span>
                    <input type="text" class="field-entry <?php if ($error_email) {echo 'field-entry-error';} ?>" name="email" id="email" value="<?php echo $email; ?>" placeholder="<?php echo $entry_email_placeholder; ?>" />
                    <?php if ($error_email) { ?><span class="text-small text-error visible-block top-margin-x-small"><?php echo $error_email; ?></span><?php } ?>
                  </label>
                </div>
                <div class="col-xs-12 col-sm-5">
                  <label class="field field-medium">
                    <span class="field-label"><?php echo $entry_telephone_form; ?></span>
                    <input type="text" class="field-entry telephone mask-celular <?php if ($error_telephone_form) {echo 'field-entry-error';} ?>" name="telephone_form" id="phone" value="<?php echo $telephone_form; ?>" placeholder="<?php echo $entry_telephone_form_placeholder; ?>" />
                    <?php if ($error_telephone_form) { ?><span class="text-small text-error visible-block top-margin-x-small"><?php echo $error_telephone_form; ?></span><?php } ?>
                  </label>
                </div>
              </div>
              <label class="field field-medium vertical-margin-medium">
                <span class="field-label"><?php echo $entry_enquiry; ?></span>
                <textarea name="enquiry" id="message" rows="10" class="field-entry <?php if ($error_enquiry) {echo 'field-entry-error';} ?>" placeholder="<?php echo $entry_enquiry_placeholder; ?>"><?php echo $enquiry; ?></textarea>
                <?php if ($error_enquiry) { ?><span class="text-small text-error visible-block top-margin-x-small"><?php echo $error_enquiry; ?></span><?php } ?>
              </label>
                <?php if ($google_captcha) { ?>
                  <div id="g-recaptcha" class="g-recaptcha" data-sitekey="<?php echo $site_key ?>"></div>
                  <?php if($error_google_captcha){ ?>
                    <span class="error"><?php echo $error_google_captcha; ?></span>
                  <?php } ?>
                <?php } else { ?>
                  <label class="field field-medium">
                    <span for="captcha" class="field-label"><?php echo $entry_captcha; ?></span>
                    <input type="text" class="field-entry <?php if ($error_captcha) {echo 'field-entry-error';} ?>" name="captcha" id="captcha" value="<?php echo $captcha; ?>"  placeholder="<?php echo $entry_captcha_placeholder; ?>" />
                    <?php if ($error_captcha) { ?><span class="text-small text-error visible-block text-margin-x-small"><?php echo $error_captcha; ?></span><?php } ?>
                    <img src="index.php?route=information/contact/captcha" alt="" class="visible-block top-margin-small" />
                  </label>
                <?php } ?>
              <button type="submit" value="<?php echo $button_continue; ?>" class="btn-default btn-medium btn-submit-contact vertical-margin-medium">
                <span><?php echo $button_continue; ?></span>
              </button>
            </form>
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md">
          <div class="content-box">
            <?php
              if ($exibe_endereco == 'yes') { ?>
                <?php if($config_telephone){ ?>
                  <?php foreach($config_telephone as $key => $telefone){ ?>

                    <div class="flex middle-xs vertical-padding-small">
                      <div class="contact-icon">
                        <?php
                            switch ($key) {
                                case Type_Phone::Tp_Telefone: ?>
                                  <i class="fas fa-phone"></i>
                                <?php     break;
                                case Type_Phone::Tp_Fax: ?>
                                  <i class="fas fa-fax"></i>
                                <?php     break;
                                case Type_Phone::Tp_Celular:
                                case Type_Phone::Tp_Whatsapp: ?>
                                  <i class="fab fa-whatsapp"></i>
                                <?php     break;
                            }
                        ?>
                      </div>
                      <div class="contact-description left-padding-medium">
                        <?php foreach($telefone as $numero){ ?>
                          <span class="text-medium visible-block"><?php echo $numero; ?></span>
                        <?php } ?>
                      </div>
                    </div>

                  <?php } ?>
                <?php } ?>
                <?php if ($address) { ?>
                  <div class="flex middle-xs vertical-margin-small">
                    <div class="contact-icon">
                      <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <div class="contact-description left-padding-small">
                      <span class="text-medium visible-block"><?php echo $address; ?></span>
                    </div>
                  </div>
                <?php } ?>
              <?php } ?>
              <?php if ( ( $config_exibe_map ) && ( $config_contact_googlemaps != '' ) && ( $exibe_endereco ) ) {
                echo '<div class="page-contact-map vertical-margin-medium">' . html_entity_decode($config_contact_googlemaps) . '</div>';
              }
            ?>
          </div>
        </div>
      </div>
    </div>
      <?php if ($column_right) { ?>
        <div class="col-md">
          <div class="content-box">
            <?php echo $column_right; ?>
          </div>
        </div>
      <?php } ?>
    </div>
    <?php if ($content_bottom) { ?>
      <div class="top-padding-large top-margin-x-large">
        <?php echo $content_bottom; ?>
      </div>
    <?php } ?>
  </section>
  <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script>
    function onloadCallback() {
        var element = document.querySelector('#g-recaptcha');
        if (element) {
            var site_key = element.getAttribute('data-sitekey');

            if (element.innerHTML === "") {
                grecaptcha.render(element, {
                    'sitekey': site_key
                });
            }
        }
    }
</script>


<script>

  document.addEventListener("DOMContentLoaded", function () {
    var nameInput = document.getElementById("name");
    var errorSpan = null;
   
        nameInput.addEventListener("blur", function () {
          var nameValue = this.value;
            if (nameValue.length < 3 || nameInput.length > 32) {
                this.classList.add("field-entry-error");
                if(errorSpan == null){
                  errorSpan= document.createElement("span");
                  errorSpan.className = "text-small text-error visible-block top-margin-x-small";
                  errorSpan.textContent = "O Nome deve conter de 3 à 32 caracteres!";
                  this.parentNode.appendChild(errorSpan);
                }
            } else {
                this.classList.remove("field-entry-error");

                if(errorSpan){
                   this.parentNode.removeChild(errorSpan);
                   errorSpan = null;
                }
            }
        });
    });



   document.addEventListener("DOMContentLoaded", function () {
    var emailInput = document.getElementById("email");
    var errorSpan = null;

    emailInput.addEventListener("blur", function () {
        var emailValue = this.value;

        if (!emailValue.includes("@")) {
            this.classList.add("field-entry-error");
  
            if (errorSpan == null) {
                errorSpan = document.createElement("span");
                errorSpan.className = "text-small text-error visible-block top-margin-x-small";
                errorSpan.textContent = "Email inválido!";
                this.parentNode.appendChild(errorSpan);
            }
        } else {
            this.classList.remove("field-entry-error");

            if (errorSpan) {
                this.parentNode.removeChild(errorSpan);
                errorSpan = null;
            }
        }
    });
});
   
   


    document.addEventListener("DOMContentLoaded", function () {
    var mensagemInput = document.getElementById("message");
    var errorSpan = null;
   
        mensagemInput.addEventListener("blur", function () {
          var nameValue = this.value;
            if (nameValue.length < 10 || mensagemInput.length > 3000) {
                this.classList.add("field-entry-error");
                if(errorSpan == null){
                  errorSpan= document.createElement("span");
                  errorSpan.className = "text-small text-error visible-block top-margin-x-small";
                  errorSpan.textContent = "A mensagem deve conter no mínimo 10 caracteres!";
                  this.parentNode.appendChild(errorSpan);
                }
            } else {
                this.classList.remove("field-entry-error");

                if(errorSpan){
                   this.parentNode.removeChild(errorSpan);
                   errorSpan = null;
                }
            }
        });
    });


    
</script>

<?php echo $footer; ?>
