<?php

/**
 * Services Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during backend preview render.
 * @param   int $post_id The post ID the block is rendering content against.
 *          This is either the post ID currently being displayed inside a query loop,
 *          or the post ID of the post hosting this block.
 * @param   array $context The context provided to the block by the post or it's parent block.
 */

// Support custom "anchor" values.
$anchor = '';
if (! empty($block['anchor'])) {
  $anchor = 'id="' . esc_attr($block['anchor']) . '" ';
}

// Load values and assign defaults.
$class_name = 'olympus-services';
$style = '';

$theme = get_field('theme');
if ($theme) {
  $class_name .= ' ' . $theme;
}

$services_size = get_field('services_size');
if ($services_size) {
  $class_name .= ' ' . $services_size;
}

$wrapper_attributes = get_block_wrapper_attributes(
  [
    'class' => $class_name,
    'style' => $style
  ]
);

$num_services = (get_field('num_services')) ? get_field('num_services') : -1;
$filter_services = get_field('filter_services');
$filter_terms = (get_field('service_cat')) ? get_field('service_cat') : "";

// Color settings
$primary_color = (get_field('primary_color')) ? get_field('primary_color') : "var(--wp--preset--color--primary)";
$primary_contrast_color = (get_field('primary_contrast_color')) ? get_field('primary_contrast_color') : "var(--wp--preset--color--base)";
$secondary_color = (get_field('secondary_color')) ? get_field('secondary_color') : "var(--wp--preset--color--secondary)";
$secondary_contrast_color = (get_field('secondary_contrast_color')) ? get_field('secondary_contrast_color') : "var(--wp--preset--color--base)";
?>
<div <?php echo $anchor ?><?php echo $wrapper_attributes; ?>>
  <!-- setup query -->
  <?php
  if ($filter_services && $filter_terms != "") {
    $args = array(
      'post_type' => 'service',
      'posts_per_page' => $num_services,
      'tax_query' => array(
        array(
          'taxonomy' => 'service-category',
          'terms' => $filter_terms,
          'field' => 'id',
          'include_children' => true,
          'operator' => 'IN'
        )
      ),
      'post__not_in' => [get_the_ID()]
    );
  } else {
    $args = array(
      'post_type' => 'service',
      'posts_per_page' => $num_services,
      'post__not_in' => [get_the_ID()]
    );
  }
  ?>

  <!-- print services -->
  <div class="olympus-services-wrapper">
    <?php
    $counter = 0;
    $query = new WP_QUERY($args);
    if ($query->have_posts()):
      while ($query->have_posts()) : $query->the_post();
        $book_online = (get_field('book_online', get_the_ID()))
          ? get_field('book_online', get_the_ID()) : ((get_field('book_online_default', 'option')) ? get_field('book_online_default', 'option') : __("Book online", "_os"));
        $learn_more = (get_field('learn_more', get_the_ID()))
          ? get_field('learn_more', get_the_ID()) : ((get_field('learn_more_default', 'option')) ? get_field('learn_more_default', 'option') : __("Learn more", "_os"));
        $booking_page = (get_field('booking_page', get_the_ID())) ? get_field('booking_page', get_the_ID())['url'] : get_permalink();
        $learn_more_page = get_permalink();
        $counter++;
        $row_reverse = "row";
        $img_styling = "border-top-left-radius: 5px;border-bottom-left-radius: 5px;";
        if (!is_long($counter / 2) && $theme == "accelerator") {
          $row_reverse = "row-reverse";
          $img_styling = "border-top-right-radius: 5px;border-bottom-right-radius: 5px;";
        }
    ?>

        <?php if ($services_size == 'service-card'): ?>
          <?php if ($theme == 'accelerator'): ?>
            <div class="c-service-card">
              <div class="c-service-card__img" style="background-image:url(<?php echo get_the_post_thumbnail_url(get_the_id(), 'large') ?>);">
                <a href="<?php echo $booking_page ?>" class="c-service-card__overlay w-inline-block" aria-label="Click to book <?php echo the_title() ?>">
                  <div class="c-service-overlay" style="background:<?php echo $primary_color ?>;"></div>
                </a>
              </div>
              <div class="c-service-card__content">
                <div class="service-tags-container floating left" style="top:-20px;">
                  <?php
                  $posttags = get_the_terms(get_the_ID(), 'service-label');
                  if ($posttags) {
                    foreach ($posttags as $tag) {
                      echo '<a href="' . $booking_page . '" class="service-tag">' . $tag->name . '</a>';
                    }
                  }
                  ?>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512" class="service-card-chevron-up">
                  <path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z" />
                </svg>
                <h3 style="margin:10px 0;font-size:1.4em;line-height:1.2em;"><?php echo the_title() ?></h3>
                <div class="small-service-card-info-appear">
                  <div class="olympus-services-btn-group">
                    <?php if ($booking_page != $learn_more_page): ?>
                      <div class="wp-block-button">
                        <a href="<?php echo $booking_page ?>" class="wp-block-button__link wp-element-button" style="background:<?php echo $primary_color ?>;color:<?php echo $primary_contrast_color ?>;border-color:<?php echo $primary_color ?>;"><?php echo $book_online ?></a>
                      </div>
                    <?php endif; ?>
                    <a href="<?php echo $learn_more_page ?>" class="learn-more-link"><?php echo $learn_more ?></a>
                  </div>
                </div>
              </div>
            </div>
          <?php endif; ?>
          <?php if ($theme == 'ace'): ?>
            <div class="c-service-card ace">
              <div class="service-tags-container floating">
                <?php
                $posttags = get_the_terms(get_the_ID(), 'service-label');
                if ($posttags) {
                  foreach ($posttags as $tag) {
                    echo '<a href="' . $booking_page . '" class="service-tag">' . $tag->name . '</a>';
                  }
                }
                ?>
              </div>
              <div class="c-service-card__content">
                <div class="c-service-card__img" style="background-image:url(<?php echo get_the_post_thumbnail_url(get_the_id(), 'large') ?>);">
                  <div>
                    <a href="<?php echo $booking_page ?>" class="c-service-card__overlay" style="background:<?php echo $primary_color ?>;color:<?php echo $primary_contrast_color ?>;">
                      <div class="book-online-overlay-cta"><?php echo $book_online ?></div>
                    </a>
                  </div>
                </div>
                <h3><?php echo the_title() ?></h3>
                <p><?php the_excerpt() ?></p>
              </div>
              <div class="olympus-services-btn-group">
                <?php if ($booking_page != $learn_more_page): ?>
                  <div class="wp-block-button">
                    <a href="<?php echo $booking_page ?>" class="wp-block-button__link wp-element-button" style="background:<?php echo $primary_color ?>;color:<?php echo $primary_contrast_color ?>;border-color:<?php echo $primary_color ?>;"><?php echo $book_online ?></a>
                  </div>
                <?php endif; ?>
                <a href="<?php echo $learn_more_page ?>" class="learn-more-link"><?php echo $learn_more ?></a>
              </div>
            </div>
          <?php endif; ?>
          <?php if ($theme == "triumph"): ?>
            <div class="c-service-card-triumph" style="background:<?php echo $primary_color ?>;color:<?php echo $primary_contrast_color ?>;">
              <div class="service-tags-container floating">
                <?php
                $posttags = get_the_terms(get_the_ID(), 'service-label');
                if ($posttags) {
                  foreach ($posttags as $tag) {
                    echo '<a href="' . $booking_page . '" class="service-tag">' . $tag->name . '</a>';
                  }
                }
                ?>
              </div>
              <a href="<?php echo $learn_more_page ?>" class="c-service-card-triumph__img" style="background-image:url(<?php echo get_the_post_thumbnail_url(get_the_id(), 'large') ?>);"></a>
              <div class="c-service-card-triumph__content">
                <a href="<?php echo $learn_more_page ?>" style="color:inherit;text-decoration:none;">
                  <h3><?php echo the_title() ?></h3>
                </a>
                <div class="olympus-services-btn-group">
                  <?php if ($booking_page != $learn_more_page): ?>
                    <div class="wp-block-button">
                      <a href="<?php echo $booking_page ?>" class="wp-block-button__link wp-element-button" style="background:<?php echo $secondary_color ?>;color:<?php echo $secondary_contrast_color ?>;border-color:<?php echo $primary_color ?>;"><?php echo $book_online ?></a>
                    </div>
                  <?php endif; ?>
                  <a href="<?php echo $learn_more_page ?>" class="learn-more-link" style="color:<?php echo $primary_contrast_color ?>;"><?php echo $learn_more ?></a>
                </div>
              </div>
            </div>
          <?php endif; ?>
        <?php elseif ($services_size == 'service-description'): ?>
          <?php if ($theme == "triumph"): ?>
            <div class="service-card-big-triumph">
              <div class="service-tags-container floating">
                <?php
                $posttags = get_the_terms(get_the_ID(), 'service-label');
                if ($posttags) {
                  foreach ($posttags as $tag) {
                    echo '<a href="' . $booking_page . '" class="service-tag">' . $tag->name . '</a>';
                  }
                }
                ?>
              </div>
              <div class="service-card-big-triumph__img" style="background-image:url(<?php echo get_the_post_thumbnail_url(get_the_id(), 'large') ?>);">
                <a href="<?php echo $booking_page ?>" class="service-card-big-triumph__overlay" style="background:<?php echo $primary_color ?>;color:<?php echo $primary_contrast_color ?>;">
                  <?php echo $book_online ?>
                </a>
              </div>
              <div class="service-card-big-triumph__content">
                <a href="<?php echo $learn_more_page ?>">
                  <h3><?php echo the_title() ?></h3>
                  <p><?php the_excerpt() ?></p>
                </a>
                <div class="olympus-services-btn-group">
                  <?php if ($booking_page != $learn_more_page): ?>
                    <div class="wp-block-button">
                      <a href="<?php echo $booking_page ?>" class="wp-block-button__link wp-element-button" style="background:<?php echo $primary_color ?>;color:<?php echo $primary_contrast_color ?>;border-color:<?php echo $primary_color ?>;"><?php echo $book_online ?></a>
                    </div>
                  <?php endif; ?>
                  <a href="<?php echo $learn_more_page ?>" class="learn-more-link"><?php echo $learn_more ?></a>
                </div>
              </div>
            </div>
          <?php else: ?>
            <div class="service-card-big <?php echo $row_reverse ?>" style="flex-direction:<?php echo $row_reverse ?>">
              <div class="service-card-big__img" style="<?php echo $img_styling ?>background-image:url(<?php echo get_the_post_thumbnail_url(get_the_id(), 'large') ?>);"></div>
              <div class="service-card-big__content" style="background:<?php echo $secondary_color ?>;color:<?php echo $secondary_contrast_color ?>;">
                <div class="service-tags-container">
                  <?php
                  $posttags = get_the_terms(get_the_ID(), 'service-label');
                  if ($posttags) {
                    foreach ($posttags as $tag) {
                      echo '<a href="' . $booking_page . '" class="service-tag">' . $tag->name . '</a>';
                    }
                  }
                  ?>
                </div>
                <h2><?php echo the_title() ?></h2>
                <p><?php the_excerpt() ?><br></p>
                <div class="olympus-services-btn-group">
                  <?php if ($booking_page != $learn_more_page): ?>
                    <div class="wp-block-button">
                      <a href="<?php echo $booking_page ?>" class="wp-block-button__link wp-element-button" style="background:<?php echo $primary_color ?>;color:<?php echo $primary_contrast_color ?>;border-color:<?php echo $primary_color ?>;"><?php echo $book_online ?></a>
                    </div>
                  <?php endif; ?>
                  <a href="<?php echo $learn_more_page ?>" class="learn-more-link" style="color:<?php echo $secondary_contrast_color ?>;"><?php echo $learn_more ?></a>
                </div>
              </div>
            </div>
          <?php endif; ?>
        <?php else: ?>
          <a href="<?php echo $learn_more_page ?>" class="pod-services-list-item" style="background-image:url(<?php echo get_the_post_thumbnail_url(get_the_id(), 'large') ?>);">
            <div class="pod-services-list-overlay"></div>
            <h3 class="has-dark-color-color"><?php echo the_title() ?></h3>
            <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512">
              <path d="M448 256c0-106-86-192-192-192c-17.7 0-32-14.3-32-32s14.3-32 32-32C397.4 0 512 114.6 512 256s-114.6 256-256 256c-17.7 0-32-14.3-32-32s14.3-32 32-32c106 0 192-86 192-192zM230.6 121.4l112 112c12.5 12.5 12.5 32.8 0 45.3l-112 112c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 288H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H242.7l-57.4-57.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0z" />
            </svg>
          </a>
        <?php endif; ?>

    <?php
      endwhile;
    endif;
    wp_reset_postdata();
    ?>
  </div>
</div>