<?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">
    <span property="item" typeof="WebPage" class="works-root post post-works">
      <span property="name">Works</span>
    </span>
    <meta property="position" content="2">
  </span>
</div>

<div class="page-header-with-block">
  <h1 class="page-header page-header-with-block__header page-header_sp-border">
    <span class="page-header__title en">Works</span>
    <span class="page-header__sub-title">運用実績&制作実績</span>
  </h1>
  <div class="page-header-with-block__block">
    <h2 class="page-header-with-block__title">動画制作・映像制作・マーケティング支援実績一覧</h2>
    <p class="page-header-with-block__text">BitStar Studioの実績一覧です。<br class="d-md-none">YouTubeやTikTok・InstagramをはじめとするSNSアカウント運用から動画制作・動画マーケティングまで幅広く支援しています。</p>
  </div>
</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 heavy" 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" 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;">
      <option value="#">ALL</option>
      <?php
      $categories = get_terms('works_cat', array('parent' => 0));
      foreach ($categories as $category) { ?>
        <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  } ?>
    </select>
  </label>

  <div class="w-100">
    <!-- voiceの一覧 -->
    <div class="works-section works-section_voice">
      <h3 class="works-section__title">VOICE(インタビュー)</h3>
      <div class="page-content__cards cards">

        <?php
        $wp_query = new WP_Query(array(
          'post_status' => 'publish',
          'post_type' => array('works'),
          'posts_per_page' => 4,
        ));

        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__voice-title"><?php the_title(); ?></h4>
              </div>
            </a>


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

      </div>

      <a class="works-section__btn" href="<?php echo e(home_url('/works/voice')); ?>"><span class="d-none d-md-inline">Voiceを</span>もっと見る</a>
    </div>

    <!-- チャンネル運用の一覧 -->
    <div class="works-section works-section_channel">
      <h3 class="works-section__title">SNSアカウント運用</h3>

      <div class="channel-list">
        <?php
        $wp_query = new WP_Query(array(
          'post_status' => 'publish',
          'post_type' => array('works_channel'),
          'posts_per_page' => 8,
          'orderby' => 'menu_order',
          'order' => 'ASC',
        ));

        if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post();
        ?>
            <div class="channel-list__item">
              <div class="channel-list__img-wrap">
                <?php if (has_post_thumbnail()) : ?>
                  <img width="300" height="200" class="channel-list__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>
              <h4 class="channel-list__title"><?php the_title(); ?></h4>
              <?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>';

              foreach ($social_links as $social => $link) {
                if ($link) {
                  $output .= '<li class="channel-list__cat"><a href="' . esc_url($link) . '" target="_blank">' . esc_html($social) . '</a></li>';
                }
              }
              $output .= '</ul>';
              echo $output;
              ?>
            </div>
        <?php endwhile;
        endif; ?>
        <?php wp_reset_postdata(); ?>
      </div>

      <a class="works-section__btn" href="<?php echo e(home_url('/works/sns-management')); ?>"><span class="d-none d-md-inline">SNSアカウント運用を</span>もっと見る</a>
    </div>

    <!-- 映像制作実績の一覧 -->
    <div class="works-section works-section_url">
      <h3 class="works-section__title">映像制作</h3>
      <div class="page-content__cards cards">

        <?php
        $wp_query = new WP_Query(array(
          'post_status' => 'publish',
          'post_type' => array('works_url'),
          'posts_per_page' => 4,
          '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; ?>
        <?php wp_reset_postdata(); ?>

      </div>

      <a class="works-section__btn" href="<?php echo e(home_url('/works/video-production')); ?>"><span class="d-none d-md-inline">映像制作を</span>もっと見る</a>
    </div>

  </div>
</div>

<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(); ?>