<?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 BitStar 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">
    <a property="item" typeof="WebPage" title="Go to Works." href="<?php echo e(home_url('/works')); ?>">
      <span property="item" typeof="WebPage" class="works-root post post-works">
        <span property="name">Works</span>
      </span>
    </a>
    <meta property="position" content="2">
  </span><br>
  <span property="itemListElement" typeof="ListItem">
    <span property="item" typeof="WebPage" class="works-root post post-works">
      <?php if (strstr($_SERVER['REQUEST_URI'], 'voice')) : ?>
        <span property="name">VOICE(インタビュー)</span>
      <?php elseif (strstr($_SERVER['REQUEST_URI'], 'sns-management')) : ?>
        <span property="name">SNSアカウント運用</span>
      <?php elseif (strstr($_SERVER['REQUEST_URI'], 'video-production')) : ?>
        <span property="name">映像制作</span>
      <?php endif; ?>
    </span>
    <meta property="position" content="3">
  </span>
</div>

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

<div class="page-content">
  <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 en" 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', array('parent' => 0));
        foreach ($categories as $category) { ?>
          <li>
            <a class="page-content__nav-link<?php if (strstr($_SERVER['REQUEST_URI'], $category->slug)) {
                                              echo ' heavy';
                                            } ?>" href="<?php
                                                        $link = get_term_link($category);
                                                        if (strpos($link, "works_url") !== false || strpos($link, "works_channel") !== false) {
                                                          $replace = str_replace(array("works_url", "works_channel"), "works", $link);
                                                          echo $replace;
                                                        } else {
                                                          echo $link;
                                                        }
                                                        ?>">
              <img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat.svg'); ?>">
              <?php echo $category->name ?>
            </a>
          </li>
        <?php  } ?>
      </ul>
    </div>
  </div>

  <label class="sp-menu-select">
    <select name="select" onChange="location.href=value;">
      <?php
      $categories = get_terms('works_cat', array('parent' => 0));
      $current_url = $_SERVER['REQUEST_URI'];
      foreach ($categories as $category) {
        if (strstr($current_url, $category->slug)) {
          echo '<option value="#">' . $category->name . '</option>';
        };
      };
      foreach ($categories as $category) {
        if (!strpos($current_url, $category->slug)) {
      ?>
          <option value="<?php
                          $link = get_term_link($category);

                          if (strpos($link, "works_url") !== false || strpos($link, "works_channel") !== false) {
                            $replace = str_replace(array("works_url", "works_channel"), "works", $link);
                            echo $replace;
                          } else {
                            echo $link;
                          }
                          ?>">
            <?php echo $category->name ?>
          </option>
      <?php  }
      } ?>
      <option value="<?php echo e(home_url('/works')); ?>">ALL</option>
    </select>
  </label>

  <div class="w-100">
    <?php if (strstr($_SERVER['REQUEST_URI'], 'voice')) : ?>
      <!-- voiceの一覧 -->
      <div class="works-section works-section_voice">
        <h3 class="page-content__section-title d-none d-md-block">VOICE(インタビュー)</h3>
        <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'),
            'posts_per_page' => 10,
            'paged' => $paged,
          ));

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

              <a class="cards__item card card_link" href="<?php the_permalink(); ?>">
                <p class="card__text mb-2"><?php echo get_field('voice_company'); ?></p>
                <p class="card__text mb-4"><?php echo get_field('voice_name'); ?></p>
                <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 else : ?>
                    <img class="card__img lazyload" data-src="<?= App\asset_path('images/no-image.jpg'); ?>">
                  <?php endif; ?>
                </figure>
                <div class="card__body">
                  <p class="card__time2 en mb-2"><?php echo get_the_date('Y/m/d'); ?></p>
                  <h4 class="card__text underline"><?php the_title(); ?></h4>
                </div>
              </a>


          <?php endwhile;
          endif; ?>
        </div>
      </div>

    <?php elseif (strstr($_SERVER['REQUEST_URI'], 'sns-management')) : ?>

      <!-- チャンネル運用の一覧 -->
      <div class="works-section works-section_channel">
        <h3 class="page-content__section-title d-none d-md-block">SNSアカウント運用</h3>

        <div class="channel-list2">
          <?php
          $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
          $wp_query = new WP_Query(array(
            'post_status' => 'publish',
            'post_type' => array('works_channel'),
            'posts_per_page' => 16,
            'paged' => $paged,
            'orderby' => 'menu_order',
            'order' => 'ASC',
          ));

          if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post();
          ?>
              <div class="channel-list2__item">
                <div class="channel-list2__media">
                  <div class="channel-list2__img-wrap">
                    <?php if (has_post_thumbnail()) : ?>
                      <img width="300" height="200" class="channel-list2__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 endif; ?>
                  </div>
                  <div>
                    <h4 class="channel-list2__title"><?php the_title(); ?></h4>
                    <?php $note = get_field('works_channel_text');
                    if ($note) {
                      echo '<p class="channel-list2__text">' . $note . '</p>';
                    }
                    ?>
                  </div>
                </div>
                <?php
                $youtube_url = get_field('youtube_url');
                $tiktok_url = get_field('tiktok_url');
                $instagram_url = get_field('instagram_url');
                $twitter_url = get_field('twitter_url');
                $facebook_url = get_field('facebook_url');

                $social_links = array(
                  'YouTube' => $youtube_url,
                  'TikTok' => $tiktok_url,
                  'Instagram' => $instagram_url,
                  'Twitter' => $twitter_url,
                  'Facebook' => $facebook_url,
                );

                $output = '<ul class="channel-list2__cat-list">';

                foreach ($social_links as $social => $link) {
                  if ($link) {
                    $output .= '<li class="channel-list2__cat"><a href="' . esc_url($link) . '" target="_blank"><svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.36364 1.86364H1.45455V10.0455H10.5455V5.04545H11V10.5H1V1.40909H7.36364V1.86364ZM11.9091 4.13636H11.4545V1.27591L6.16091 6.57L5.83909 6.24818L11.1332 0.954545H8.27273V0.5H11.9091V4.13636Z" fill="currentColor" stroke="currentColor" stroke-width="0.25"/>
                    </svg>' . esc_html($social) . '運用</a></li>';
                  }
                }
                $output .= '</ul>';
                echo $output;
                ?>
              </div>
          <?php endwhile;
          endif; ?>
        </div>

      </div>

    <?php elseif (strstr($_SERVER['REQUEST_URI'], 'video-production')) : ?>

      <!-- 映像制作実績の一覧 -->
      <div class="works-section works-section_url">
        <h3 class="page-content__section-title d-none d-md-block">映像制作</h3>
        <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'),
            'posts_per_page' => 10,
            'paged' => $paged,
            'orderby' => 'menu_order',
            'order' => 'ASC',
          ));

          if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post();
          ?>
              <a class="cards__item card card_link" href="<?php echo get_field('works_url'); ?>" target="_blank">
                <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 else : ?>
                    <img class="card__img lazyload" data-src="<?= App\asset_path('images/no-image.jpg'); ?>">
                  <?php endif; ?>
                  <?php
                  $terms = get_the_terms(get_the_ID(), 'works_url_cat');
                  if ($terms && !is_wp_error($terms)) {
                    echo '<div class="card__img-inner-tag-wrapper d-none d-md-block">';
                    foreach ($terms as $term) {
                      echo '<div class="card__img-inner-tag">' . esc_html($term->name) . '</div>';
                    }
                    echo '</div>';
                  }
                  ?>
                </figure>
                <div class="card__body">
                  <p class="card__text works_url_text mb-2"><?php echo get_field('works_url_text'); ?></p>
                  <h4 class="card__text"><?php the_title(); ?></h4>
                </div>

                <?php
                $terms = get_the_terms(get_the_ID(), 'works_url_cat');
                if ($terms && !is_wp_error($terms)) {
                  echo '<div class="card__img-inner-tag-wrapper d-md-none">';
                  foreach ($terms as $term) {
                    echo '<div class="card__img-inner-tag">' . esc_html($term->name) . '</div>';
                  }
                  echo '</div>';
                }
                ?>
              </a>

          <?php endwhile;
          endif; ?>
        </div>
      </div>

    <?php endif; ?>

    <div class="pagination">
      <div class="pagination__inner en">
        <?php
        $big = 9999999999;
        $arg = array(
          'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
          'current' => max(1, get_query_var('paged')),
          'total'   => $wp_query->max_num_pages,
          'mid_size' => 1,
          'prev_text' => 'Prev',
          'next_text' => 'Next',
          'type' => 'plain',
        );
        echo paginate_links($arg);
        ?>

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

    <div class="page-content__block page-cta page-cta_static">
      <div class="page-cta__container">
        <p class="page-cta__text">BitStar Studioまでお気軽にご連絡ください！</p>
        <a class="page-cta__btn page-cta__btn_fill" href="<?php echo e(home_url('/#contact')); ?>">まずは無料相談する</a>
        <a class="page-cta__btn" href="https://bitstar.tokyo/request/" target="_blank">資料請求をする</a>
      </div>
    </div>

  </div>
</div><!-- /page-content -->

<div class="sp-cta">
  <p class="sp-cta__text">BitStar Studioまでお気軽に<br>ご連絡ください！</p>
  <div class="sp-cta__link-unit">
    <a class="sp-cta__btn sp-cta__btn_purple" href="<?php echo e(home_url('/#contact')); ?>">まずは無料相談</a>
    <a class="sp-cta__btn sp-cta__btn_lime" href="https://bitstar.tokyo/request/" target="_blank">資料請求</a>
  </div>
</div>

<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 = 0;
      let footertop = jQuery(".footer-cta").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(); ?>