<?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">
                <svg viewBox="0 0 48 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="el_oYIS82Wzo"><style>@-webkit-keyframes kf_el_q3rf1NruIu_an_yBbPK2sl1{14.44%{-webkit-transform: translate(23.8546142578125px, 26.078269958496094px) scale(1, 1) translate(-23.8546142578125px, -26.078269958496094px);transform: translate(23.8546142578125px, 26.078269958496094px) scale(1, 1) translate(-23.8546142578125px, -26.078269958496094px);}15.56%{-webkit-transform: translate(23.8546142578125px, 26.078269958496094px) scale(0.01, 1) translate(-23.8546142578125px, -26.078269958496094px);transform: translate(23.8546142578125px, 26.078269958496094px) scale(0.01, 1) translate(-23.8546142578125px, -26.078269958496094px);}24.44%{-webkit-transform: translate(23.8546142578125px, 26.078269958496094px) scale(1, 1) translate(-23.8546142578125px, -26.078269958496094px);transform: translate(23.8546142578125px, 26.078269958496094px) scale(1, 1) translate(-23.8546142578125px, -26.078269958496094px);}0%{-webkit-transform: translate(23.8546142578125px, 26.078269958496094px) scale(1, 1) translate(-23.8546142578125px, -26.078269958496094px);transform: translate(23.8546142578125px, 26.078269958496094px) scale(1, 1) translate(-23.8546142578125px, -26.078269958496094px);}100%{-webkit-transform: translate(23.8546142578125px, 26.078269958496094px) scale(1, 1) translate(-23.8546142578125px, -26.078269958496094px);transform: translate(23.8546142578125px, 26.078269958496094px) scale(1, 1) translate(-23.8546142578125px, -26.078269958496094px);}}@keyframes kf_el_q3rf1NruIu_an_yBbPK2sl1{14.44%{-webkit-transform: translate(23.8546142578125px, 26.078269958496094px) scale(1, 1) translate(-23.8546142578125px, -26.078269958496094px);transform: translate(23.8546142578125px, 26.078269958496094px) scale(1, 1) translate(-23.8546142578125px, -26.078269958496094px);}15.56%{-webkit-transform: translate(23.8546142578125px, 26.078269958496094px) scale(0.01, 1) translate(-23.8546142578125px, -26.078269958496094px);transform: translate(23.8546142578125px, 26.078269958496094px) scale(0.01, 1) translate(-23.8546142578125px, -26.078269958496094px);}24.44%{-webkit-transform: translate(23.8546142578125px, 26.078269958496094px) scale(1, 1) translate(-23.8546142578125px, -26.078269958496094px);transform: translate(23.8546142578125px, 26.078269958496094px) scale(1, 1) translate(-23.8546142578125px, -26.078269958496094px);}0%{-webkit-transform: translate(23.8546142578125px, 26.078269958496094px) scale(1, 1) translate(-23.8546142578125px, -26.078269958496094px);transform: translate(23.8546142578125px, 26.078269958496094px) scale(1, 1) translate(-23.8546142578125px, -26.078269958496094px);}100%{-webkit-transform: translate(23.8546142578125px, 26.078269958496094px) scale(1, 1) translate(-23.8546142578125px, -26.078269958496094px);transform: translate(23.8546142578125px, 26.078269958496094px) scale(1, 1) translate(-23.8546142578125px, -26.078269958496094px);}}#el_oYIS82Wzo *{-webkit-animation-duration: 3s;animation-duration: 3s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1);animation-timing-function: cubic-bezier(0, 0, 1, 1);}#el_q3rf1NruIu{stroke: none;stroke-width: 1;fill: none;}#el_qFwGbHjecp{-webkit-transform: translate(-120px, -119px);transform: translate(-120px, -119px);fill: #0023A1;}#el_7Imtw1xoJX{-webkit-transform: translate(109px, 109px);transform: translate(109px, 109px);}#el_q3rf1NruIu_an_sEMAVxFSS{-webkit-transform: translate(23.8546142578125px, 26.078269958496094px) rotate(0deg) translate(-23.8546142578125px, -26.078269958496094px);transform: translate(23.8546142578125px, 26.078269958496094px) rotate(0deg) translate(-23.8546142578125px, -26.078269958496094px);}#el_q3rf1NruIu_an_yBbPK2sl1{-webkit-animation-fill-mode: backwards;animation-fill-mode: backwards;-webkit-transform: translate(23.8546142578125px, 26.078269958496094px) scale(1, 1) translate(-23.8546142578125px, -26.078269958496094px);transform: translate(23.8546142578125px, 26.078269958496094px) scale(1, 1) translate(-23.8546142578125px, -26.078269958496094px);-webkit-animation-name: kf_el_q3rf1NruIu_an_yBbPK2sl1;animation-name: kf_el_q3rf1NruIu_an_yBbPK2sl1;-webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);}</style>
                    <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
                    <title>Shape</title>
                    <desc>Created with Sketch.</desc>
                    <g id="el_q3rf1NruIu_an_yBbPK2sl1" data-animator-group="true" data-animator-type="2"><g id="el_q3rf1NruIu" fill-rule="evenodd">
                        <g id="el_qFwGbHjecp">
                            <g id="el_7Imtw1xoJX">
                                <path d="M34.9380769,10.2051923 C37.4351923,12.6201923 40.2244231,15.1819231 42.6407692,17.6790385 L39.8178846,21.3176923 L39.8178846,21.4967308 L47.3025,24.8432692 L52.3613462,21.3661538 L49.3096154,17.9725 L49.3096154,17.7275 C52.4434615,15.5090385 55.1357692,13.3713462 58.17,11.3305769 L56.7013462,26.5394231 L13.0078846,26.5394231 L11.5392308,11.3305769 C14.5734615,13.3713462 17.2657692,15.5090385 20.3996154,17.7275 L20.3996154,17.9725 L17.3478846,21.3661538 L22.4067308,24.8432692 L29.8926923,21.4967308 L29.8926923,21.3176923 L27.0684615,17.6790385 C29.4834615,15.1819231 32.2740385,12.6201923 34.7711538,10.2051923 L34.9380769,10.2051923 Z M56.3675,29.2801923 L55.9259615,34.3498077 L39.7505769,34.3430769 L39.7559615,51.8525 L47.6336538,51.8013462 C49.3903846,51.7986538 51.24,49.9503846 50.8644231,48.7348077 C50.4403846,46.9713462 48.8573077,45.7975 47.3886538,44.9171154 C47.6821154,44.9171154 53.0842308,40.9351923 55.6123077,39.2215385 C55.4992308,40.3146154 53.6873077,54.6255769 53.6711538,54.8544231 L35.0040385,61.9513462 L34.7051923,61.9513462 L16.0380769,54.8544231 C16.0219231,54.6255769 14.2113462,40.3146154 14.0969231,39.2215385 C16.6263462,40.9351923 22.0271154,44.9171154 22.3205769,44.9171154 C20.8519231,45.7975 19.2688462,46.9713462 18.8448077,48.7348077 C18.4692308,49.9503846 20.3188462,51.7986538 22.0755769,51.8013462 L29.9546154,51.8525 L29.9586538,34.3430769 L13.7832692,34.3498077 L13.3430769,29.2801923 L56.3675,29.2801923 Z" id="el_3fiHbRyY62"/>
                            </g>
                        </g>
                    </g></g>
                </svg>
            </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();