<?php
/**
 *  The template for displaying single Prototype post
 *
 *
 * @package Felicityhealth
 * @since Felicityhealth 1.0
 */
?>
<?php  get_header(); ?>
<?php  if ( have_posts() ) : ?>
    <?php while ( have_posts() )  : the_post(); ?> 
    <?php if( get_field('block_1')['show_block'] ): ?>
        <div class="wyn-hero-two-thirds-component wyn-component">
            <div class="info">
                <span class="category"> DISTINCTIVE </span>
                <h1>
                    <picture class="logo">
                        <img
                            srcset="<?= get_field('block_1')['logo']?>, <?= get_field('block_1')['logo']?> 2x"
                            alt="<?= get_field('block_1')['description']?> <?php echo __( 'by', 'felicityhealth' );?> <?php bloginfo( 'name' ); ?>"
                            title="<?= get_field('block_1')['description']?> <?php echo __( 'by', 'felicityhealth' );?> <?php bloginfo( 'name' ); ?>"
                            style=""
                        />
                    </picture>
                </h1>
                <p class="description"><?= get_field('block_1')['description']?><sup>®</sup></p>
            </div>
            <div class="hero-image">
                <div class="masked-image">
                    <picture>
                        <source
                            srcset="
                            <?= get_field('block_1')['hero_image']?>,
                            <?= get_field('block_1')['hero_image']?> 2x
                            "
                            media="(max-width: 400px)"
                        />
                        <source
                            srcset="
                            <?= get_field('block_1')['hero_image']?>,
                            <?= get_field('block_1')['hero_image']?> 2x
                            "
                            media="(max-width: 768px)"
                        />
                        <img srcset=", <?= get_field('block_1')['hero_image']?> 2x" alt="<?= get_field('block_1')['hero_image_caption']?>" title="<?= get_field('block_1')['hero_image_caption']?>" draggable="false" />
                    </picture>
                </div>
                <div class="caption"><?= get_field('block_1')['hero_image_caption']?></div>
            </div>
        </div>
    <?php endif; ?>
    <?php if( get_field('block_2')['show_block'] ): ?>
        <div class="wyn-strip-inset-component wyn-component fast-facts">
            <div class="col-left">
                <span class="subheadline">
                    <?= get_field('block_2')['subheadline'] ?>
                </span>
                <h2 class="headline">
                    <?= get_field('block_2')['headline'] ?>
                </h2>

                <div class="body wyn-wysiwyg">
                    <?= get_field('block_2')['content'] ?>
                    <?php if( get_field('block_2')['button']['show_button']): ?>
                        <a class="button primary" href="<?= get_field('block_2')['button']['link']?>" target="_blank" rel="noopener noreferrer"><span class="icon-view"></span><?= get_field('block_2')['button']['title']?></a>
                    <?php endif; ?>
                </div>
            </div>
            <div class="col-right">
                <h2 class="headline">
                    <?= get_field('block_2')['column_2']['headline'] ?>
                </h2>

                <div class="body">
                    <?php
                        $items = get_field('block_2')['column_2']['content'];
                    ?>
                    <p>
                        <?php foreach ($items['item'] as $key => $item):?>
                            <strong><?= $item['item_label']; ?>:</strong> <?= $item['item_description']; ?><br />
                        <?php endforeach ?>
                    </p>
                    <p>&nbsp;</p>
                </div>
                <?php if( get_field('block_2')['column_2']['button']['show_button']): ?>
                         <a class="button outline clear primary" href="<?= get_field('block_2')['column_2']['button']['link']?>" rel="noopener noreferrer"><span class="icon-view"></span><?= get_field('block_2')['column_2']['button']['label']?></a>
                 <?php endif; ?>
            </div>
        </div>
    <?php endif; ?>
    <?php if( get_field('block_3')['show_block'] ): ?>
        <div class="jw-player-component full wyn-component">
            <div class="player-outer-wrapper">
                <?php echo do_shortcode('[videojs_video loop="true" muted="true"  url="'. get_field('block_3')['player_video_url'].'" poster="'. get_field('block_3')['player_poster'].'"]');?>  
            </div>
        </div>
    <?php endif; ?>
    <?php if( get_field('block_5')['show_block'] ): ?>
        <div id="virtual-tour" class="jw-player-component full wyn-component">
            <h3 class="headline" style="text-align: center; margin-bottom:20px"><?php echo get_field('block_5')['headline'];?> </h3>
            <div class="player-outer-wrapper">
                <iframe width="100%" height="670px" src="<?php echo get_field('block_5')['panorama_link'];?>" frameborder="0"></iframe>
            </div>
        </div>
    <?php endif; ?>
    <!-- -------------------------------- -->
    <?php if( get_field('block_4')['show_block'] ): ?>
    <div class="wyn-strip-text-component left is-headline wyn-component">
        <h2 class="headline">
            <?php echo get_field('block_4')['headline'];?>
        </h2>
        <div class="body wyn-wysiwyg"></div>
    </div>
    <?php $tabs = get_field('block_4')['tabs']; ?>
    <?php //echo '<pre>'; print_r($tabs); echo '</pre>' ?>
    <div class="wyn-carousel-tabs-component carousel-tabs-component wyn-component">
        <label class="wyn-select-component select">
            <select class="tab-select">
                <?php foreach ($tabs as $key => $item):?>
                    <option value="<?= $key ?>" <?= ( $key === 0 ) ? 'selected' : '' ;?>> <?= $item['tab']['tab_title'] ?> </option>
                <?php endforeach ?>
            </select>
        </label>
        <ul class="tabs">
            <?php foreach ($tabs as $key => $item):?>
                <li data-tab="<?= $key?>" class="tab  <?= ( $key === 0 ) ? 'active' : '' ;?>">
                    <?= $item['tab']['tab_title'] ?>
                </li>
            <?php endforeach ?>
        </ul>
        <div class="carousels">
            <?php foreach ($tabs as $key => $item):?>
                <div class="carousel-tabs-single  <?= ( $key != 0 ) ? 'collapsed' : '' ;?>" data-tab="<?= $key ?>">
                    <div class="carousel-content">
                        <div class="carousel-tabs-wrapper">
                            <?php $slide_images = $item['tab']['slides']['images'] ?>
                            <div class="carousel-tabs-slides">
                                <?php foreach ($slide_images as $key => $image_item):?>
                                    <div class="carousel-tabs-slide-single">
                                    <div class="slide-content">
                                        <div class="masked-image">
                                            <picture>
                                                <source
                                                    srcset="
                                                    <?= $image_item['image'] ?>,
                                                    <?= $image_item['image'] ?> 2x
                                                    "
                                                    media="(max-width: 400px)"
                                                />
                                                <source
                                                    srcset="
                                                    <?= $image_item['image'] ?>,
                                                    <?= $image_item['image'] ?> 2x
                                                    "
                                                    media="(max-width: 768px)"
                                                />
                                                <img
                                                    srcset="
                                                    <?= $image_item['image'] ?>,
                                                    <?= $image_item['image'] ?> 2x
                                                    "
                                                    alt="<?= $image_item['caption'] ?>"
                                                    title="<?= $image_item['caption'] ?>"
                                                    draggable="false"
                                                />
                                            </picture>
                                        </div>
                                        <div class="caption"> <?= $image_item['caption'] ?></div>
                                    </div>
                                </div>
                                <?php endforeach ?>
                            </div>
                            <div class="carousel-arrows"></div>
                        </div>
                    </div>
                <div class="carousel-controls"></div>
            </div>
            <?php endforeach ?>
        </div>
    </div>
    <?php endif; ?>
     <!-- -------------------------------- -->
     <?php get_template_part( 'template-parts/snippets/amenities' ); ?>
     <?php get_template_part( 'template-parts/snippets/contact-snippet' ); ?>
   
    <?php
        $prev_post = get_previous_post();
        if($prev_post) {
            $prev_title = strip_tags(str_replace('"', '', $prev_post->post_title));
        }
        $next_post = get_next_post();
        if($next_post) {
             $next_title = strip_tags(str_replace('"', '', $next_post->post_title));
        }
    ?>

    <?php if($prev_post  &&  $next_post): ?>
        <div class="wyn-pager-prev-next-component wyn-component">
            <div class="controls">
                <a href="<?= get_permalink($prev_post->ID) ?>" class="col-prev">
                    <span class="label-text">  <?= $prev_title ?> </span>
                    <div class="arrow">
                        <i class="icon icon-prev"></i>
                    </div>
                </a>
                <a href="<?= get_permalink($next_post->ID) ?>" class="col-next">
                    <span class="label-text">  <?= $next_title ?> </span>
                    <div class="arrow">
                        <i class="icon icon-next"></i>
                    </div>
                </a>
            </div>
        </div>
    <?php else: ?>
        <?php if($prev_post): ?>
            <div class="wyn-pager-prev-next-component wyn-component">
                <div class="controls full">
                    <a href="<?= get_permalink($prev_post->ID) ?>" class="col-next">
                        <span class="label-text">  <?= $prev_title ?></span>
                        <div class="arrow">
                            <i class="icon icon-next"></i>
                        </div>
                    </a>
                </div>
            </div>
        <?php elseif($next_post): ?>
            <div class="wyn-pager-prev-next-component wyn-component">
                <div class="controls full">
                    <a href="<?= get_permalink($next_post->ID) ?>" class="col-next">
                        <span class="label-text"> <?= $next_title ?> </span>
                        <div class="arrow">
                            <i class="icon icon-next"></i>
                        </div>
                    </a>
                </div>
            </div>
        <?php endif; ?>
    <?php endif; ?>

    <?php endwhile; ?>
<?php endif; ?>

<?php get_footer(); ?>