<?php $__env->startSection('content'); ?>

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

$wp_query = new WP_Query(array(
  'post_status' => 'publish',
  'post_type' => array('works', 'works_others'), //カスタム投稿タイプ名
  'taxonomy' => 'works_cat',
  'paged' => $paged,
  'posts_per_page' => 15,
  // 'posts_per_page' => 6,
  'orderby'     => 'date',
  'order' => 'DESC'
));

$post_types = array('works', 'works_others');
foreach ($post_types as $post_type) {
  $all_post_count += wp_count_posts($post_type)->publish;
}
?>

<?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 .= '%_%';
}

$current_pgae = get_query_var('paged');
$current_pgae = $current_pgae == 0 ? '1' : $current_pgae;
$max_pages = $wp_query->max_num_pages;
?>



<div class="works-header">
  <div class="d-none d-md-flex align-items-center justify-content-between mb-5 pb-2">
    <div>
      <h1 class="en">Works</h1>
      <img class="works-logo" src="<?= App\asset_path('images/works-logo.png'); ?>">
    </div>

    <div class="d-none d-md-flex">
      <a class="btn-black" href="/contact/">お問い合わせ</a>
      <a class="btn-white ml-3" href="/request/">資料ダウンロード <svg xmlns="http://www.w3.org/2000/svg" width="9.5" height="9.5" viewBox="0 0 9.5 9.5">
          <g transform="translate(-4 -4)">
            <path d="M11.273,17.563H6.227A2.229,2.229,0,0,1,4,15.336v-.891a.445.445,0,0,1,.891,0v.891a1.338,1.338,0,0,0,1.336,1.336h5.047a1.338,1.338,0,0,0,1.336-1.336v-.891a.445.445,0,0,1,.891,0v.891A2.23,2.23,0,0,1,11.273,17.563Z" transform="translate(0 -4.063)" fill="#122a37" />
            <path d="M11.7,10.531a.445.445,0,0,1-.445-.445V4.445a.445.445,0,0,1,.891,0v5.641A.445.445,0,0,1,11.7,10.531Z" transform="translate(-2.945)" fill="#122a37" />
            <path d="M10.375,12.969a.448.448,0,0,1-.327-.142l-1.93-2.079a.445.445,0,0,1,.653-.606l1.6,1.726,1.6-1.726a.445.445,0,1,1,.653.606L10.7,12.827A.448.448,0,0,1,10.375,12.969Z" transform="translate(-1.625 -2.438)" fill="#122a37" />
          </g>
        </svg></a>
    </div>
  </div>

  <h1 class="d-md-none mt-3">最新の実績</h1>
  <div class="d-md-none sp-post-num my-3">掲載数 :<?php echo $all_post_count; ?>本</div>

  <div class="d-none d-md-flex align-items-center justify-content-between mb-4">
    <div class="works-header-info">
      <h2 class="d-inline-block"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="10" viewBox="0 0 10 10">
          <defs>
            <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
              <stop offset="0" stop-color="#b760f4" />
              <stop offset="1" stop-color="#5f2ab3" />
            </linearGradient>
          </defs>
          <circle cx="5" cy="5" r="5" fill="url(#linear-gradient)" />
        </svg>&nbsp;&nbsp;最新の実績</h2>
      <p class="d-inline-block ml-3">掲載実績数 : <?php echo $all_post_count; ?></p>
    </div>

    <div class="pagination">
      <ul class="d-flex">
        <li><svg class="mb-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
            <path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z" />
          </svg><?php previous_posts_link('<svg class="mb-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg>') ?></li>
        <li><span class="current-page"><?php echo $current_pgae; ?></span></li>
        <li><svg class="mb-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
            <path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" />
          </svg><?php next_posts_link('<svg class="mb-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>', $max_pages) ?></li>
        <li><span class="max-pages">&frasl;&nbsp;&nbsp;<?php echo $max_pages; ?></span></li>
      </ul>
    </div>

  </div>
</div>

<div class="works-list-wrap mb-5">
  <ul class="works-list d-flex flex-wrap">

    <?php
    if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post();
    ?>
        <li>
          <?php $url = get_field('works_url');
          if ($url) : ?>
            <a href="<?php echo $url; ?>" target="_blank">

              <div class="works-list-image">
                <div class="works-list-link-info">
                  <div class="works-list-link-info__inner">
                    動画を再生
                    <svg class="works-list-link-info__arrow-rotate" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
                      <g>
                        <polygon class="st0" points="243.253,0 202.714,40.539 389.5,227.335 12.736,227.335 12.736,284.665 389.5,284.665
                  202.714,471.461 243.253,512 499.264,256" fill="currentColor"></polygon>
                      </g>
                    </svg>
                  </div>
                </div>

              <?php else: ?>

                <a href="<?php the_permalink(); ?>">

                  <div class="works-list-image">
                    <div class="works-list-link-info">
                      <div class="works-list-link-info__inner">
                        記事詳細
                        <svg class="works-list-link-info__arrow" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
                          <g>
                            <polygon class="st0" points="243.253,0 202.714,40.539 389.5,227.335 12.736,227.335 12.736,284.665 389.5,284.665
                  202.714,471.461 243.253,512 499.264,256" fill="currentColor"></polygon>
                          </g>
                        </svg>
                      </div>
                    </div>
                  <?php endif; ?>

                  <?php if (has_post_thumbnail()) : ?>
                    <img data-src="<?php the_post_thumbnail_url(); ?>" class="lazyload img-transform">
                  <?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 data-src="' . $src . '" class="lazyload img-transform">';
                    } else { ?>
                      <img data-src="<?= App\asset_path('images/no-image.jpg'); ?>" class="lazyload img-transform">
                    <?php
                    }

                    ?>
                  <?php else: ?>
                    <img data-src="<?= App\asset_path('images/no-image.jpg'); ?>" class="lazyload img-transform">
                  <?php endif; ?>
                  </div>

                  <div class="works-list-text">
                    <div class="works-list-meta">
                      <div>
                        <?php $post_id = get_the_ID(); ?>
                        <?php
                        if ($terms = get_the_terms($post_id, 'works_cat')) {
                          foreach ($terms as $term) {
                            echo '<span class="cat-' . $term->slug . ' en">' . $term->name . '</span>';
                          }
                        }
                        ?>
                      </div>
                      <?php $name = get_field('works_client_name');
                      if ($name) : ?>
                        <p class="client-name"><?php echo $name; ?></p>
                      <?php endif; ?>
                    </div>
                    <h3><?php the_title(); ?></h3>
                    <div>

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


  <div class="works-list-footer-nav d-flex justify-content-center py-5">
    <?php if ($current_pgae != 1) : ?>
      <div class="btn-transparent"><?php previous_posts_link('前へ') ?></div>
    <?php endif; ?>
    <?php if ($current_pgae != $max_pages) : ?>
      <div class="btn-transparent"><?php next_posts_link('次へ', $max_pages) ?></div>
    <?php endif; ?>
    <div class="d-none d-md-block pagination">
      <ul class="d-flex">
        <li><svg class="mb-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
            <path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z" />
          </svg><?php previous_posts_link('<svg class="mb-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg>') ?></li>
        <li><span class="current-page"><?php echo $current_pgae; ?></span></li>
        <li><svg class="mb-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
            <path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" />
          </svg><?php next_posts_link('<svg class="mb-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>', $max_pages) ?></li>
        <li><span class="max-pages">&frasl;&nbsp;&nbsp;<?php echo $max_pages; ?></span></li>
      </ul>
    </div>
  </div>


  <div class="d-md-none pagination-sp">
    <ul class="d-flex justify-content-center">
      <li><svg class="mb-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
          <path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z" />
        </svg><?php previous_posts_link('<svg class="mb-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg>') ?></li>
      <li><span class="current-page"><?php echo $current_pgae; ?></span></li>
      <li><svg class="mb-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
          <path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" />
        </svg><?php next_posts_link('<svg class="mb-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>', $max_pages) ?></li>
    </ul>
  </div>

</div>


<?php $__env->stopSection(); ?>

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