<?php $__env->startSection('content'); ?>
<div class="breadcrumbs en" typeof="BreadcrumbList" vocab="https://schema.org/">
  <span property="itemListElement" typeof="ListItem">
    <a property="item" typeof="WebPage" title="Go to multi-studio." href="<?php echo e(home_url('/')); ?>" class="home">
      <span property="name">HOME</span>
    </a><meta property="position" content="1">
  </span>・
  <span property="itemListElement" typeof="ListItem">
    <span property="item" typeof="WebPage" class="works-root post post-works">
      <span property="name">Works</span>
    </span><meta property="position" content="2">
  </span>
</div>

<h1 class="page-header">
  <span class="page-header__title en">Works</span>
  <span class="page-header__sub-title">制作&運用実績</span>
</h1>

<div class="page-content">
  <div class="bg-text en">Works Works Works</div>
  <div class="page-content__nav-wrap">
    <div class="page-content__nav" id="fix-element">
      <h3 class="page-content__nav-title"><img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat-title.svg'); ?>">カテゴリー</h3>
      <ul class="page-content__nav-cat-list">
        <li><a class="page-content__nav-link" href="<?php echo e(home_url('/')); ?>works"><img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat.svg'); ?>">All</a></li>

        <?php
          $categories = get_terms('works_cat');
          foreach($categories as $category) { ?>
            <li>
              <a class="page-content__nav-link" href="<?php echo get_term_link($category) ?>">
                <img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat.svg'); ?>">
              <?php echo $category->name ?>
              </a>
            </li>
        <?php  } ?>

      </ul>
    </div>
  </div>

  <div class="sp-accordion-nav">
    <a class="sp-accordion-nav__title" data-toggle="collapse" data-target="#sp-cat-list" aria-expand="false" aria-controls="sp-cat-list"><img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat-title.svg'); ?>">カテゴリー</a>
    <div class="collapse" id="sp-cat-list">
      <ul>
        <?php
          $categories = get_terms('works_cat');
          foreach($categories as $category) { ?>
            <li>
              <a class="sp-accordion-nav__item" href="<?php echo get_term_link($category) ?>">
                <img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat.svg'); ?>">
              <?php echo $category->name ?>
              </a>
            </li>
        <?php  } ?>
      </ul>
    </div>
  </div>

  <div class="page-content__cards cards">
    <?php
      $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
      $wp_query = new WP_Query( array(
        'post_status' => 'publish',
        'post_type' => array('works_url', 'works'), //カスタム投稿タイプ名
        'taxonomy' => 'works_cat',
        'paged' => $paged,
        'posts_per_page' => 12,
        'orderby'     => 'date',
        'order' => 'DESC'
      ) );

      if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post();
    ?>

    <?php $url = get_field('works_url'); if($url): ?>
      <a class="cards__item card card_link card_radius" href="<?php echo $url; ?>" target="_blank">
    <?php else: ?>
      <a class="cards__item card card_link card_radius" href="<?php the_permalink(); ?>">
    <?php endif; ?>
      <figure class="card__img-wrap">
      <?php if( has_post_thumbnail() ): ?>
        <img class="card__img lazyload" src="<?php echo get_the_post_thumbnail_url( get_the_ID(), 'thumbnail' ); ?>" data-src="<?php echo get_the_post_thumbnail_url( get_the_ID(), 'large' ); ?>">
      <?php elseif( get_field('works_url') ): ?>
      <?php
        $works_url = get_field('works_url');
        if (preg_match('/youtu/',$works_url)) {
          $data = $youtube_url = get_field('works_url');
          $data = htmlspecialchars($data, ENT_QUOTES);
          if (strpos($youtube_url, "watch") != false){
            $youtube_url = substr($youtube_url, (strpos($youtube_url, "=")+1));
          }else{
            $youtube_url = substr($youtube_url, (strpos($youtube_url, "youtu.be/")+9));
          }

          $src = "https://img.youtube.com/vi/${youtube_url}/maxresdefault.jpg";

          echo '<img class="card__img lazyload" data-src="'.$src.'">';

        } else { ?>
          <img class="card__img lazyload" data-src="<?= App\asset_path('images/no-image.jpg'); ?>">
        <?php
        }
        ?>
      <?php else: ?>
        <img class="card__img lazyload" data-src="<?= App\asset_path('images/no-image.jpg'); ?>">
      <?php endif; ?>
      </figure>
      <div class="card__body">
        <div class="card__meta">
          <ul>
            <?php $post_id = get_the_ID(); ?>
            <?php
              if ($terms = get_the_terms($post_id, 'works_cat')) {
                foreach ( $terms as $term ) {
                  echo '<li class="card__cat en">'.$term->name.'</li>';
                }
              }
            ?>
          </ul>
          <ul>
            <?php $post_id = get_the_ID(); ?>
            <?php
              if ($terms = get_the_terms($post_id, 'works_tag')) {
                foreach ( $terms as $term ) {
                  echo '<li class="card__cat en">'.$term->name.'</li>';
                }
              }
            ?>
          </ul>
        </div>
        <p class="card__text"><?php the_title(); ?></p>
      </div>
    </a>

    <?php endwhile; endif; ?>

    <div class="pagination">
      <div class="pagination__inner en">
        <?php global $wp_rewrite;
        $paginate_base = get_pagenum_link(1);
        if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
            $paginate_format = '';
            $paginate_base = add_query_arg('paged','%#%');
        }
        else{
            $paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
            user_trailingslashit('page/%#%/','paged');;
            $paginate_base .= '%_%';
        }
        echo paginate_links(array(
            'base' => $paginate_base,
            'format' => $paginate_format,
            'total' => $wp_query->max_num_pages,
            'mid_size' => 1,
            'current' => ($paged ? $paged : 1),
            'prev_text' => 'Prev',
            'next_text' => 'Next',
            'type' => 'plain'
        )); ?>
      </div>
    </div>


  </div><!-- /cards -->
</div>

<?php wp_reset_postdata(); ?>

<script>
jQuery(function(){
  jQuery(window).on('scroll resize', function() {
    let scroll = jQuery(document).scrollTop();
    let contenttop = jQuery(".page-content").offset().top;
    let sideheight = jQuery("#fix-element").outerHeight();
    let sidemargintop = 40;
    let sidemarginbottom = 90;
    let footertop = jQuery(".pagination").offset().top;

    if (scroll > (footertop - sidemarginbottom - sidemargintop - sideheight)) {
      // フッターにあたった場合
      jQuery("#fix-element").css({
        'position': 'absolute',
        'top': 'auto',
        'bottom': sidemarginbottom + 'px',
      });
    } else if (scroll > (contenttop - sidemargintop)) {
      // 追従時
      jQuery("#fix-element").css({
        'position': 'fixed',
        'top': sidemargintop + 'px',
        'bottom': 'auto',
      });
    } else {
      // 追従するまでスクロールされてないとき
      jQuery("#fix-element").css({
        'position': 'static',
        'top': 'auto',
        'bottom': 'auto',
      });
    }
  });
});
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>