<?php get_header(); ?>
<main>
    <div class="mainvisual">
        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/top/mv.jpg" alt="お子さまに「楽しい」と「安心」を" class="mv">
        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/top/mv_ipad.jpg" alt="お子さまに「楽しい」と「安心」を" class="ipad-mv">
        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/top/mv_sp.jpg" alt="お子さまに「楽しい」と「安心」を" class="sp-mv">
        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/menu_bg.png" alt="" class="menu-bg">
    </div>
    <!-- nav -->
    <?php get_template_part('template-parts/navigation'); ?>
    <!-- /nav -->
    <section class="availability">
        <div class="inner">
            <h2 class="section-title">空き状況</h2>
            <ul class="week-list">
                <li>
                    <p>月</p>
                    <?php
                    // 固定ページのポストIDを取得
                    $post_id = 42;

                    // 「月」カスタムフィールドの値を取得
                    $custom_field_value = get_field('月', $post_id);

                    // カスタムフィールドの値に応じて、画像を表示
                    if ($custom_field_value == '○') {
                        echo '<img src="' . get_template_directory_uri() . '/assets/img/maru.svg" />';
                    } elseif ($custom_field_value == '△') {
                        echo '<img src="' . get_template_directory_uri() . '/assets/img/sankaku.svg" />';
                    } elseif ($custom_field_value == '×') {
                        echo '<img src="' . get_template_directory_uri() . '/assets/img/batsu.svg" />';
                    }
                    ?>
                </li>
                <li>
                    <p>火</p>
                    <?php
                    // 「火」カスタムフィールドの値を取得
                    $custom_field_value = get_field('火', $post_id);

                    // カスタムフィールドの値に応じて、画像を表示
                    if ($custom_field_value == '○') {
                        echo '<img src="' . get_template_directory_uri() . '/assets/img/maru.svg" />';
                    } elseif ($custom_field_value == '△') {
                        echo '<img src="' . get_template_directory_uri() . '/assets/img/sankaku.svg" />';
                    } elseif ($custom_field_value == '×') {
                        echo '<img src="' . get_template_directory_uri() . '/assets/img/batsu.svg" />';
                    }
                    ?>
                </li>
                <li>
                    <p>水</p>
                    <?php
                    // 「水」カスタムフィールドの値を取得
                    $custom_field_value = get_field('水', $post_id);

                    // カスタムフィールドの値に応じて、画像を表示
                    if ($custom_field_value == '○') {
                        echo '<img src="' . get_template_directory_uri() . '/assets/img/maru.svg" />';
                    } elseif ($custom_field_value == '△') {
                        echo '<img src="' . get_template_directory_uri() . '/assets/img/sankaku.svg" />';
                    } elseif ($custom_field_value == '×') {
                        echo '<img src="' . get_template_directory_uri() . '/assets/img/batsu.svg" />';
                    }
                    ?>
                </li>
                <li>
                    <p>木</p>
                    <?php
                    // 「木」カスタムフィールドの値を取得
                    $custom_field_value = get_field('木', $post_id);

                    // カスタムフィールドの値に応じて、画像を表示
                    if ($custom_field_value == '○') {
                        echo '<img src="' . get_template_directory_uri() . '/assets/img/maru.svg" />';
                    } elseif ($custom_field_value == '△') {
                        echo '<img src="' . get_template_directory_uri() . '/assets/img/sankaku.svg" />';
                    } elseif ($custom_field_value == '×') {
                        echo '<img src="' . get_template_directory_uri() . '/assets/img/batsu.svg" />';
                    }
                    ?>
                </li>
                <li>
                    <p>金</p>
                    <?php
                    // 「金」カスタムフィールドの値を取得
                    $custom_field_value = get_field('金', $post_id);

                    // カスタムフィールドの値に応じて、画像を表示
                    if ($custom_field_value == '○') {
                        echo '<img src="' . get_template_directory_uri() . '/assets/img/maru.svg" />';
                    } elseif ($custom_field_value == '△') {
                        echo '<img src="' . get_template_directory_uri() . '/assets/img/sankaku.svg" />';
                    } elseif ($custom_field_value == '×') {
                        echo '<img src="' . get_template_directory_uri() . '/assets/img/batsu.svg" />';
                    }
                    ?>
                </li>
                <li>
                    <p>土</p>
                    <?php
                    // 「土」カスタムフィールドの値を取得
                    $custom_field_value = get_field('土', $post_id);

                    // カスタムフィールドの値に応じて、画像を表示
                    if ($custom_field_value == '○') {
                        echo '<img src="' . get_template_directory_uri() . '/assets/img/maru.svg" />';
                    } elseif ($custom_field_value == '△') {
                        echo '<img src="' . get_template_directory_uri() . '/assets/img/sankaku.svg" />';
                    } elseif ($custom_field_value == '×') {
                        echo '<img src="' . get_template_directory_uri() . '/assets/img/batsu.svg" />';
                    }
                    ?>
                </li>
            </ul>
            <div class="list-ex">
                <p><span>○</span>…空きあり</p>
                <p><span>△</span>…残りわずか</p>
                <p><span>✕</span>…要相談</p>
            </div>
        </div>
    </section>
    <section class="about">
        <div class="wrapper">
            <div class="inner">
                <div class="about-content">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/top/about02-kashihara2.png" class="kids p-top__aboutKidImg" alt="笑顔の子どもたち" width="540px">
                    <div class="about-content-right">
                        <h2 class="section-title about-section-title">ウィズ春日井柏原について</h2>
                        <div class="txt-wrap relative">
                            <h3 class="about-txt-title">お子様が自発的に活動できるように支援を行う
                                <br><span>放課後等デイサービス</span>です。
                            </h3>
                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/line.svg" class="line" width="488px">
                            <p class="about-txt">
                                愛知県春日井市柏原町にある発達障がい・知的障がいをお持ちの児童が通うデイサービスです。 集団生活で必要なスキルを友達と一緒に楽しく身につけられるように支援しています。
                                基本的な支援方針として「仲間活動を中心とした取り組み」「個別の課題への取り組み」 「お子さま、保護者様と共に取り組む」を掲げ一人一人に寄り添ったサービスを提供しています。
                            </p>
                            <a href="<?php echo home_url(); ?>/about" class="btn about-btn">
                                <p>詳しくはこちら</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="top-news">
        <div class="inner">
            <?php
            $paged = get_query_var('paged') ? get_query_var('paged') : 1;
            $loop = new WP_Query([
                'posts_per_page' => 4,
                'post_type' => 'post',
            ]);
            ?>
            <h2 class="section-title news-section-title">ニュース</h2>
            <?php if ($loop->have_posts()) :
                while ($loop->have_posts()) :
                    $loop->the_post(); ?>
                    <dl class="new-dl">
                        <a href="<?php the_permalink(); ?>">
                            <dt class="date-time"><?php the_time('Y年m月d日'); ?></dt>
                            <dd class="news-title"><?php the_title(); ?></dd>
                            <!-- <?php echo mb_substr($post->post_title, 0, 30) . ''; ?> -->
                        </a>
                        <!-- <dd><a href="<?php the_permalink(); ?>"><?php echo mb_substr($post->post_title, 0, 30) . ''; ?></a></dd> -->
                    </dl>
                <?php endwhile; ?>
                <?php else: ?>
                    <p class="p-preparationTxt">ただいま準備中です。</p>
            <?php endif; ?>

            <a href="<?php echo home_url(); ?>/category/news" class="btn news-btn">
                <p>もっと見る</p>
            </a>
        </div>
    </section>
    <section class="info">
        <div class="wrapper">
            <div class="inner-sh">
                <h2 class="section-title info-section-title">ご案内</h2>
                <ul class="info-list">
                    <li>
                        <a href="<?php echo home_url(); ?>/staff">
                            <p>スタッフ紹介</p>
                        </a>
                    </li>
                    <li>
                        <a href="<?php echo home_url(); ?>/qa">
                            <p>Q&amp;A</p>
                        </a>
                    </li>
                    <li>
                        <a href="<?php echo home_url(); ?>/institution">
                            <p>施設概要</p>
                        </a>
                    </li>
                    <li>
                        <a href="<?php echo home_url(); ?>/recruit">
                            <p>採用情報</p>
                        </a>
                    </li>
                </ul>
                <a href="<?php echo home_url(); ?>/contact" class="contact-bnr">
                    <div class="content-bnr-box">
                        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/mail_icon.svg" alt="メール" width="82px">
                        <p class="contact-bnr-txt">お気軽にお問い合わせください</p>
                    </div>
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/sp_contact_bnr.png" alt="お気軽にお問い合わせください" width="348" class="sp-contact-bnr">
                </a>
            </div>
    </section>
</main>
<?php get_footer(); ?>