<?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" id="error_name"><?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" id="error_email"><?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" id= "error_phone"><?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" id = "error_text"><?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 = document.getElementById("error_name");

    
    if (!errorSpan) {
        errorSpan = document.createElement("span");
        errorSpan.className = "text-small text-error visible-block top-margin-x-small";
        errorSpan.id = "error_name";
        errorSpan.style.display = "none"; 
        nameInput.parentNode.appendChild(errorSpan);
    }

    
    function validateName() {
        var nameValue = nameInput.value;
        if (nameValue.length < 3 || nameValue.length > 32) {
            nameInput.classList.add("field-entry-error");
            errorSpan.textContent = "O nome deve ter entre 3 e 32 caracteres!";
            errorSpan.style.display = "block";
        } else {
            nameInput.classList.remove("field-entry-error");
            errorSpan.textContent = "";
            errorSpan.style.display = "none";
        }
    }

   
    

    
    nameInput.addEventListener("blur", validateName);
});




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

    
    if (!errorSpan) {
        errorSpan = document.createElement("span");
        errorSpan.className = "text-small text-error visible-block top-margin-x-small";
        errorSpan.id = "error_email";
        errorSpan.style.display = "none"; 
        emailInput.parentNode.appendChild(errorSpan);
    }

    
    function validateEmail() {
        var emailValue = emailInput.value;
        if (!emailValue.includes("@") || !emailValue.includes(".com")) {
            emailInput.classList.add("field-entry-error");
            errorSpan.textContent = "E-Mail inválido!";
            errorSpan.style.display = "block";
        } else {
            emailInput.classList.remove("field-entry-error");
            errorSpan.textContent = "";
            errorSpan.style.display = "none";
        }
    }

   
    

    
    emailInput.addEventListener("blur", validateEmail);
});

   
   


   document.addEventListener("DOMContentLoaded", function () {
    var messageInput = document.getElementById("message");
    var errorSpan = document.getElementById("error_text");

    
    if (!errorSpan) {
        errorSpan = document.createElement("span");
        errorSpan.className = "text-small text-error visible-block top-margin-x-small";
        errorSpan.id = "error_email";
        errorSpan.style.display = "none"; 
        messageInput.parentNode.appendChild(errorSpan);
    }

    
    function validateMessage() {
        var messageValue = messageInput.value;
        if (messageValue.length < 10 ||  messageValue.length > 3000) {
            messageInput.classList.add("field-entry-error");
            errorSpan.textContent = "A mensagem deve ter entre 10 e 3000 caracteres.";
            errorSpan.style.display = "block";
        } else {
            messageInput.classList.remove("field-entry-error");
            errorSpan.textContent = "";
            errorSpan.style.display = "none";
        }
    }

   
   

    
    messageInput.addEventListener("blur", validateMessage);
});

        
   document.addEventListener("DOMContentLoaded", function () {
    var phoneInput = document.getElementById("phone");
    var errorSpan = document.getElementById("error_phone");

    
    if (!errorSpan) {
        errorSpan = document.createElement("span");
        errorSpan.className = "text-small text-error visible-block top-margin-x-small";
        errorSpan.id = "error_email";
        errorSpan.style.display = "none"; 
        phoneInput.parentNode.appendChild(errorSpan);
    }

    
    function validateMessage() {
        var phoneValue = phoneInput.value;
        if (phoneValue.length < 14 ||  phoneValue.length > 15) {
            phoneInput.classList.add("field-entry-error");
            errorSpan.textContent = "Telefone inválido!";
            errorSpan.style.display = "block";
        } else {
            phoneInput.classList.remove("field-entry-error");
            errorSpan.textContent = "";
            errorSpan.style.display = "none";
        }
    }

   
   

    
    phoneInput.addEventListener("blur", validateMessage);
});


    
</script>

<?php echo $footer; ?>
