<?php /*

Element label: Enter heart messages
Element name: element19

*/


$message_service = new dinamo_donator_messages_service();
$language = get_current_language();
$messages = $message_service->get_messages(10, $language);

?>


<section class="hearts-input p-t-2">
    <h2 class="text-normalcase m-t-8"><?= get_sub_field('headline'); ?></h2>
    <div class="hearts-input__about container">
      <div class="row hearts-input__wrapper">
        <div class="hearts-input__column hearts-input__column-left col-12 col-lg-6 text-align-center">
          <p><?= get_sub_field('description'); ?></p>
          <p><strong><?= get_sub_field('emphasized_text'); ?></strong></p> 
        </div>
        <div class="hearts-input__column col-12 col-lg-6">  
          <form id="create-message-form" class="hearts-input__form" action="<?= THEMEROOT ?>/validate.php">
          <label for="msg" class="hearts-input__form-label m-b-1" ><?= __('Vaša poruka', 'dinamo'); ?></label>
          <textarea class="hearts-input__form-textarea js-hearts-input-textarea m-b-4" name="msg" cols="30" rows="3" required></textarea>   
          <?php 
            // google reCaptcha for testing locally: 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
            // production key: 6LdEITsdAAAAAIKBQozYfM3FOEp3QIMWQF7sOtKc
          ?>
          <div class="hearts-input__recaptcha js-g-recaptcha g-recaptcha  m-b-4" data-sitekey="6LdEITsdAAAAAIKBQozYfM3FOEp3QIMWQF7sOtKc"></div>
            <div>
              <p class="hearts-input__response hearts-input__response--error js-hearts-input-verify-robot"><?= get_field('recaptcha_recheck','options'); ?></p>
              <p class="hearts-input__response hearts-input__response--error js-hearts-input-error"><?= get_field('recaptcha_error','options'); ?></p>
            </div>             
            <div class="align align--left">
              <button type="submit" class="hearts-input__form-submit js-hearts-input-button btn btn--dark m-b-4">
                <div class="custom-loader">
                  <span class="dot"></span>
                  <div class="dots">
                    <span></span>
                    <span></span>
                  </div>
                </div>
                <?= __('Pošalji', 'dinamo'); ?>
              </button>
            </div>
          </form>
          <div class="hearts-input__success text-align-center js-hearts-input-success p-t-7">
              <img src="<?php echo THEMEROOT; ?>frontend/img/icons/message-sent.svg" class="hearts-input__success-image m-b-4" alt="Message sent">
              <p class="h3 hearts-input__success-message"><?= get_field('recaptcha_success','options'); ?></p>
          </div>
        </div>
      </div>
    </div>

    <div class="hearts-input__messages">
      <div class="messages">
        <div class="messages__block">
          <?php
          $index = 1;
          foreach ($messages as $message){
            $heart_bg = "heart-1.svg";
            if(strlen($message->message) < 80){
              $heart_size = 3;
            }else if(strlen($message->message) < 160){
              $heart_size = 2;
            } else {
              $heart_size = 1;
              $heart_bg = "heart-rect-background.svg";
            }
            ?>
              <div class="messages__img-wrap heart-<?= $heart_size; ?> x<?= $index; ?>">
                <img data-src="<?php echo THEMEROOT; ?>frontend/img/hearts/<?= $heart_bg; ?>" class="lazyload messages__img" alt="Nema predaje">
                <span><?= $message->message ?></span>
              </div>
            <?php
              if ($index == 3) {
                $index = 1;
              } else {
                $index++;
              }
            } ?>
      </div>
    </div>
</section>