<?php
/* 
Template Name: Faq 
*/
get_header();

$imagehero = get_field('hero_section_image');
$imageheromobile = wp_get_attachment_image_src($imagehero,'related-index' );
$imageherodesktop = wp_get_attachment_image_src($imagehero,'featured-faq' );

?>
    <section class="l-hero-faq">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-lg-8">
                    <div class="l-hero-faq__content pt-lg-2 pt-xl-3">
                        <h1 class="c-title"><?php echo get_field('hero_section_title'); ?></h1>
                        <img class="l-hero-faq__imagemobile d-none" src="<?php echo $imageheromobile[0]; ?>" alt="<?php echo get_field('hero_section_title'); ?>">
                        <ul class="c-list-quastion">
                            <?php
                                $listlinks = get_field('hero_section_links');
                                foreach($listlinks as $listlink):
                            ?>
                            <li><a class="c-box-guests__link" href="<?php echo $listlink['hero_section_link'] ?>"><?php echo $listlink['hero_section_link_title'] ?></a></li>
                            <?php
                                endforeach;
                            ?>
                        </ul>
                    </div>
                </div>
                <div class="col-md-5 col-lg-4">
                    <img class="l-hero-faq__image" src="<?php echo $imageherodesktop[0]  ?>" alt="<?php echo get_field('hero_section_title'); ?>">
                </div>
            </div>
        </div>
    </section>
    <section class="l-popular-features">
        <div class="container">
            <h3 class="c-subtitle is-dark mb-2"><?php echo get_field('popular_features_title'); ?></h3>
            <div class="row">
                <?php
                    $cardlinks = get_field('popular_features_links');
                    $count = 1;
                    foreach($cardlinks as $cardlink):
                        $cardlinktitle[$count]= $cardlink['popular_features_link_title'];
                        $cardlinkurl[$count]= $cardlink['popular_features_link'];
                        $count ++;
                    endforeach;
                ?>
                <div class="col-6 col-md-4 col-lg-3"><a class="c-stack-featured" href="<?php echo $cardlinkurl[1]; ?>"><?php echo $cardlinktitle[1]; ?></a></div>
                <div class="col-6 col-md-4 col-lg-3"><a class="c-stack-featured" href="<?php echo $cardlinkurl[2]; ?>"><?php echo $cardlinktitle[2]; ?></a></div>
                <div class="col-6 col-md-4 col-lg-3"><a class="c-stack-featured" href="<?php echo $cardlinkurl[3]; ?>"><?php echo $cardlinktitle[3]; ?></a></div>
                <div class="col-6 col-md-4 col-lg-3"><a class="c-stack-featured" href="<?php echo $cardlinkurl[4]; ?>"><?php echo $cardlinktitle[4]; ?></a></div>
                <div class="col-lg-3 d-none d-lg-block"></div>
                <div class="col-6 col-md-4 col-lg-3"><a class="c-stack-featured" href="<?php echo $cardlinkurl[5]; ?>"><?php echo $cardlinktitle[5]; ?></a></div>
                <div class="col-6 col-md-4 col-lg-3"><a class="c-stack-featured" href="<?php echo $cardlinkurl[6]; ?>"><?php echo $cardlinktitle[6]; ?></a></div>
                <div class="col-lg-3"></div>
            </div>
        </div>
    </section>
    <section class="l-faq-ajax">
        <div class="container">
            <h3 class="c-subtitle is-dark mb-2"><?php echo get_field('helpful_articles_title'); ?></h3>
            <ul class="l-faq-ajax__menu">
                <li>Showing:</li>
                <li data-slug="all"  class="active"><strong>All articles</strong></li>
                <li data-slug="royal-caribbean-international"><strong>Royal Caribbean International</strong></li>
                <li data-slug="celebrity-cruises"><strong>Calebrity Cruises</strong></li>
                <li data-slug="azamara"><strong>Azamara</strong></li>
            </ul>
            <div class="carregando d-none"></div>
            <div class="row mobile-list ajax-post">

            </div>
            <div id="all" class="c-btn-viem-all">
                <a href="<?php echo esc_url( home_url( '/help-faqs/all' ) ); ?>" data-all="<?php echo esc_url( home_url( '/help-faqs/all' ) ); ?>" data-link="<?php echo esc_url( home_url( '/category-faq/' ) ); ?>">View all</a>
            </div>
        </div>
    </section>
    <?php
    
            $args = array(
                'post_type'      => 'faq',
                'posts_per_page' => 12,
                'post_status' => 'publish',
                'tax_query' => array(
                    array(
                        'taxonomy' => 'post_format',
                        'field' => 'slug',
                        'terms' => array( 'post-format-video' ),
                        'operator' => 'IN'
                    )
                )
            );
            $loop = new WP_Query( $args );


            if ( $loop->have_posts() ):
                ?>
    <section class="l-brands-news l-brands-technology py-3 py-md-3 py-xl-4">
        <div class="carousel-title d-flex justify-content-between align-items-center mb-md-1 mb-xl-3">
            <h2 class="c-subtitle  is-center is-tech">Media <a class="c-subtitle__link" href="<?php echo esc_url( home_url( '/help-faqs/media' ) ); ?>">View all</a></h2>

            <div class="d-none d-sm-flex">
                <a href="javascript:;" class="c-btn-round is-tech js-carousel-default-prev" aria-label="Prev"><i class="icon icon-left-arrow"></i></a>
                <a href="javascript:;" class="c-btn-round is-tech js-carousel-default-next" aria-label="Next"><i class="icon icon-right-arrow"></i></a>
            </div>
        </div>
        <div class="c-carousel-default is-media js-carousel-default owl-carousel">
            <?php while ( $loop->have_posts() ) : $loop->the_post();?>
                    <?php
                        $categories = get_the_category();
                        $post_id = get_the_ID();
                        $imagefeatured = get_the_post_thumbnail_url($post_id,'related-index');
                        $format = get_post_format( $post_id );
                        if(!$format):
                            $format = "article";
                        endif;
                    ?>
                <article class="c-card-news">
                    <div class="c-card-news__cover">
                        <a href="<?php the_permalink(); ?>">
                            <img src="<?php echo $imagefeatured; ?>" alt="<?php echo the_title(); ?>">
                            <div class="c-card-news__type"><i class="icon icon-<?php echo $format; ?>"></i></div>
                        </a>
                    </div>
                    <a href="<?php the_permalink(); ?>">
                        <h3 class="c-card-news__title is-tech mt-1"><?php echo the_title(); ?></h3>
                    </a>
                </article>
            <?php
                endwhile; wp_reset_query();
            ?>
        </div>
    </section>
            <?php
                endif;
            ?>
    <section class="l-small-change">
        <div class="container">
            <div class="row align-center">
                <div class="col-md-6 col-lg-4">
                    <h2 class="c-subtitle is-dark"><?php echo get_field('post_image_right_title'); ?></h2>
                    <div class="c-description is-dark-gray mt-2">
                        <p><?php echo get_field('post_image_right_description'); ?></p>
                    </div>
					<a class="c-btn-icon is-dark mt-2" href="<?php echo get_field('post_image_right_link'); ?>"><?php echo get_field('post_image_right_title_link'); ?> <i class="icon icon-go"></i></a>
                </div>
                <div class="col-lg-1 d-none d-lg-block"></div>
                <div class="col-md-6 col-lg-7">
                    <?php
                        $imageright = get_field('post_image_right_image');
                        $imagerighturl = wp_get_attachment_image_src($imageright,'featured-faq-small' );
                    ?>
                    <img class="l-small-change__image" src="<?php echo $imagerighturl[0]; ?>" alt="<?php echo get_field('post_image_right_title'); ?>">
                </div>
            </div>
        </div>
    </section>
    <section class="l-learn-plan">
        <div class="container">
            <div class="l-learn-plan__image">
                    <?php
                        $imageleft = get_field('post_image_left_image');
                        $imagelefturl = wp_get_attachment_image_src($imageleft,'featured-faq-small' );
                    ?>
                    <img src="<?php echo $imagelefturl[0]; ?>" alt="<?php echo get_field('post_image_left_title'); ?>">
                    <?php $type = get_field('seletc_type_link');
                        if ($type === 'Link') :
                    ?>
                        <a href="<?php echo get_field('post_image_left_link'); ?>" class="c-box-featured__btn is-light">Read</a>
                    <?php    
                        else:
                    ?>
                        <a data-fancybox href="https://vimeo.com/<?php echo get_field('post_image_left_id_video'); ?>" class="c-box-featured__btn is-light">Watch</a>
                    <?php
                        endif;  
                    ?>
            </div>
            <h3 class="c-title"><?php echo get_field('post_image_left_title'); ?></h3>
        </div>
    </section>
    <section class="l-list-featured">
        <div class="container">
            <div class="row carousel-faq owl-carousel">
            <?php
                $postsrelated = get_field('select_posts');
                if($postsrelated):
                foreach($postsrelated as $postrel):
                    $post_id = $postrel->ID;
                    $imagefeatured = get_the_post_thumbnail_url($post_id,'featured-faq-list');
                ?>

                <div class="item col-lg-4">
                    <a href="<?php echo get_permalink($post_id); ?>">
                        <img src="<?php echo $imagefeatured; ?>" alt="<?php echo get_the_title($post_id); ?>">
                    </a>
                    <a href="<?php echo get_permalink($post_id); ?>">
                        <h3 class="c-title-app is-light mt-1"><?php echo get_the_title($post_id); ?></h3>
                    </a>
                    <p class="c-subtitle-app is-light"><?php echo get_field('description_post', $post_id); ?></p>
                    <a class="c-btn-icon is-faq mt-1" href="<?php echo get_permalink($post_id); ?>">Learn more <i class="icon icon-go"></i></a>
                </div>
                <?php
                endforeach;
                endif;
            ?>
            </div>
        </div>
    </section>
<?php
get_footer();