<?php get_header('white'); ?>
<section class="section support-detail-banner">
    <div class="container">
        <div class="text-cont">
            <h2 class="banner-heading">WareGo’s User Guide</h2>
        </div>
    </div>
</section>

<section class="section support-inner-detail blog-detail">
    <div class="container">
        <div class="row">
            <div class="col-lg-9  order-xl-1 order-lg-1 order-md-2 order-sm-2 order-2">
                <div class="text-cont">
                    <h1 class="section-title">
                        <?php
                            $title = get_field('title_detailed');
                            $title = empty($title) ? get_the_title() : $title;
                            echo rtrim($title, '.');
                        ?>
                    </h1>
                    <?php the_content(); ?>
                </div>
                <?php
                    $posts = new WP_Query([
                        'post_type'      => 'post',
                        'posts_per_page' => -1,
                        'order'          => 'ASC',
                        'post__not_in'   => [get_the_ID()]
                    ]);
                ?>

                <?php if ($posts->have_posts()) : ?>
                    <div class="related-article">
                        <h2 class="section-title">Related Guides</h2>
                        <ul>
                            <?php while ($posts->have_posts()) : $posts->the_post(); ?>
                                <?php
                                    $title = get_field('title_detailed');
                                    $title = empty($title) ? get_the_title() : $title;
                                ?>
                                <li>
                                    <a href="<?php echo get_the_permalink(); ?>" class="w-100 d-flex justify-content-between align-items-center">
                                        <?php echo $title; ?>
                                        <svg width="7" height="14" viewBox="0 0 7 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M0.0795646 2.01187L1.10881 0.951874L6.71485 6.72887C6.80521 6.82144 6.87693 6.93152 6.92587 7.05277C6.97481 7.17402 7 7.30405 7 7.43537C7 7.5667 6.97481 7.69673 6.92587 7.81798C6.87693 7.93923 6.80521 8.04931 6.71485 8.14187L1.10881 13.9219L0.0805345 12.8619L5.3422 7.43687L0.0795646 2.01187Z" fill="#00003D"/>
                                        </svg>
                                    </a>
                                </li>
                            <?php endwhile; ?>
                            <?php wp_reset_postdata(); ?>
                        </ul>
                    </div>
                <?php endif; ?>

                <div class="section answer-your-question container">
                    <h3>Did this answer your question?</h3>
                    <?php // echo do_shortcode('[posts_like_dislike id=' . get_the_ID() . ']'); ?>

                    <?php
                        $reactions_emoji = [
                            'dislike' => '😞',
                            'neutral' => '😐',
                            'like'    => '😃',
                        ];
                        $reactions = ['dislike', 'neutral', 'like'];
                        $post_id = get_the_ID();
                    ?>
                    <div class="<?php echo isset($_COOKIE['post__reaction_' . get_the_ID()]) ? '' : 'parent-innercom-reaction-buttons'; ?>">
                        <?php foreach ($reactions as $reaction) : ?>
                            <?php
                                $status = '';
                                if (isset($_COOKIE['post__reaction_' . get_the_ID()])) {
                                    $status = $_COOKIE['post__reaction_' . get_the_ID()] == $reaction ? 'active-reaction' : 'inactive';
                                }
                            ?>
                            <button data-reaction="<?php echo $reaction; ?>" class="border-0 intercom-reaction <?php echo "$reaction $status"; ?>"><?php echo $reactions_emoji[$reaction]; ?></button>
                        <?php endforeach; ?>
                    </div>
                </div>

            </div>
            <div class="col-lg-3 order-xl-2 order-lg-2 order-md-1 order-sm-1 order-1 mb-3">
                <div class="sidebar">
                    <div class="side-artical">
                        <label>Topics In this article</label>
                        <?php echo do_shortcode('[ez-toc display_header_label="no" toggle_view="no"]') ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>



<section class="section looking-for">
    <div class="container">
        <h2 class="section-title">Can't find what you're looking for?</h2>
        <a href="https://warego.co/contact-us/" class="primary">Contact us</a>
    </div>
</section>


<?php
get_footer();
?>
<script>
    
	$( document ).ready(function() {
	
        const anchors = $('body').find('.ez-toc-section');
        var active_scroll_item;

        $(window).scroll(function(){
            var scrollTop = $(document).scrollTop();
            var current_h2;

            for (var i = anchors.length-1; i >= 0; i--){
                if (scrollTop > $(anchors[i]).offset().top - 100) {
                    current_h2 = $(anchors[i]).attr('id');
                    
                    $('.ez-toc-list').find("a[href*='" + current_h2 + "']").addClass('active');

                    active_scroll_item = document.querySelector('.side-artical .ez-toc-link.active').offsetTop;
                    document.querySelector('.side-artical #ez-toc-container nav').scrollTop = (active_scroll_item - 10);
                    
                    $('.ez-toc-list').find('a').not("[href*='" + current_h2 + "']").removeClass('active');
                    break;
                }
            }
        });

        // Rections

        var request_data = {
            action: 'add_reaction',
            post: <?php echo $post_id; ?>
        };

        $('.answer-your-question button').on('click', function(e) {

            $('.parent-innercom-reaction-buttons').removeClass('parent-innercom-reaction-buttons');

            if ($(this).hasClass('active-reaction')) {
                return false;
            }

            $('.answer-your-question button').addClass('inactive');
            $('.answer-your-question button').removeClass('active-reaction');
            $(this).addClass('active-reaction');
            $(this).removeClass('inactive');

            request_data.reaction = $(this).data('reaction');
            


            $.ajax({
                url:  ajaxurl,
                type: 'post',
                data: request_data,
                dataType: 'json',
                cache: false,
                success: function(response) {
                    if (response.success) {
                        document.cookie = "post__reaction_" + request_data.post + "=" + request_data.reaction;
                    }
                }
            });
        });

	});

</script>

<script>
    /* document.querySelectorAll('.intercom-reaction').forEach(button => {
        button.addEventListener('click', () => {
            console.log('clicked');
            
            if (this.classList.include('active')) {
                return false;
            }

            // Remove active class and add inactive class to all buttons
            document.querySelectorAll('.intercom-reaction').forEach(btn => {
                btn.classList.remove('active-reaction');
                btn.classList.add('inactive');
            });

            // Add active class and remove inactive class for the clicked button
            button.classList.remove('inactive');
            button.classList.add('active-reaction');

            // Update parent container's class
            const parent = button.closest('.parent-innercom-reaction-buttons');
            if (parent) {
                parent.classList.remove('parent-innercom-reaction-buttons');
                parent.classList.add('parent-innercom-reaction');
            }
        });
    }); */

</script>