<?php
/**
 * @package WordPress
 * @subpackage Campoal
 */

global $campoal_options;
global $current_user;
global $post;

$recaptcha_comment = isset($campoal_options['conikal_google_recaptcha_comment_field']) ? $campoal_options['conikal_google_recaptcha_comment_field'] : 1;
$comments_sort = isset($campoal_options['conikal_comments_sort_field']) ? $campoal_options['conikal_comments_sort_field'] : 'oldest';
$replies_sort = isset($campoal_options['conikal_replies_sort_field']) ? $campoal_options['conikal_replies_sort_field'] : 'newest';
$comments_per_page_setting = isset($campoal_options['conikal_comments_per_page_field']) ? $campoal_options['conikal_comments_per_page_field'] : '';
$comments_per_page = $comments_per_page_setting != '' ? $comments_per_page_setting : 10;
$reply_per_comment_setting = isset($campoal_options['conikal_reply_per_comment_field']) ? $campoal_options['conikal_reply_per_comment_field'] : '';
$reply_per_comment = $reply_per_comment_setting != '' ? $reply_per_comment_setting : 3;
$comments_style = isset($campoal_options['conikal_comments_style_field']) ? $campoal_options['conikal_comments_style_field'] : 'normal';
$comment_registration = get_option('comment_registration');

// lazy load placeholder
$lazy_placeholder_avatar = conikal_lazy_load_placeholder('avatar');
?>
<div id="comments<?php echo esc_attr($post->ID) ?>" class="comments-area">
    <!-- COMMENT LIST -->
    <?php
        $id = get_the_ID();

        // get current user info
        $current_user_avatar        = conikal_get_avatar_url($current_user->ID, array('size' => 64));
        $current_user_avatar_retina = conikal_get_avatar_url($current_user->ID, array('size' => 128));
        $current_user_link          = get_author_posts_url($current_user->ID);

        $comments       = conikal_comments_petition($id, 0);
        $commnet_count  = wp_count_comments($id);

        // get lazy load placeholder
        $lazy_placeholder_avatar = conikal_lazy_load_placeholder('avatar');
    ?>

    <?php if($comments) { ?>
        <h2 class="ui dividing header">
            <span id="comment-count"><?php echo esc_html($commnet_count->approved != 0 ? conikal_format_number('%!,0i', esc_html($commnet_count->approved)) : __('No', 'campoal')) ?></span>
            <span id="comment-count-text"><?php echo esc_html($commnet_count->approved <= 1 ? esc_html__('Comment', 'campoal') : __('Comments', 'campoal')) ?></span>
        </h2>
    <?php } ?>

    <?php if ($comments_sort == 'oldest' && $commnet_count->approved >= $comments_per_page) { ?> 
        <input type="hidden" value="<?php echo esc_attr($comments_per_page) ?>" id="comment-offset<?php echo esc_attr($post->ID) ?>">
        <input type="hidden" value="<?php echo esc_attr($comments_per_page) ?>" id="comment-number<?php echo esc_attr($post->ID) ?>">
        <input type="hidden" value="<?php echo esc_attr($reply_per_comment) ?>" id="reply-number<?php echo esc_attr($post->ID) ?>">
        <button class="ui basic fluid button comment-more" id="comment-more<?php echo esc_attr($post->ID) ?>" data-id="<?php echo esc_attr($post->ID) ?>" data-order="<?php echo esc_attr($comments_sort) ?>" data-replies-order="<?php echo esc_attr($replies_sort) ?>"><i class="long arrow up icon"></i><?php esc_html_e('Older comments ...', 'campoal') ?></button>
    <?php } ?>

    <div class="ui <?php echo esc_attr($comments_style) ?> comments comments-list" id="comments-list<?php echo esc_attr($post->ID) ?>">
        <?php if ($comments) { ?>
            <?php
            foreach($comments as $comment) :
                // check comment are voted or not
                $votes = get_comment_meta($comment->comment_ID, 'comment_vote', true);
                if (is_array($votes) && in_array($current_user->ID, $votes)) {
                    $voted = true;
                } else {
                    $voted = false;
                }
                
                $comment_link   = get_comment_link($comment->comment_ID);
                $votes_number = $votes ? count($votes) : 0;
            ?>
                <div class="comment" id="comment-<?php echo esc_attr($comment->comment_ID) ?>">
                    <?php if ($comment->comment_type == 'comment') : ?>
                        <a class="avatar <?php echo esc_attr($comment->comment_level_badge) ?>" href="<?php echo esc_url($comment->comment_author_link) ?>" data-bjax>
                            <img class="lazy" data-src="<?php echo esc_url($comment->comment_author_avatar) ?>" data-retina="<?php echo esc_url($comment->comment_author_avatar_retina) ?>" src="<?php echo esc_url($lazy_placeholder_avatar) ?>" alt="<?php echo esc_attr($comment->comment_author_name) ?>" />
                        </a>
                    <?php endif; ?>
                    <div class="content">
                        <a class="author" href="<?php echo esc_url($comment->comment_author_link) ?>" data-bjax><?php echo esc_html($comment->comment_author_name) ?></a>
                        <div class="metadata">
                            <div class="date">
                                <?php echo esc_html($comment->comment_time) ?>
                            </div>
                            <?php if ($comments_style != 'minimal') : ?>
                            <div class="date"> · </div>
                            <div class="rating">
                            <?php echo '<span id="vote-num-' . esc_html($comment->comment_ID) . '">' . esc_html($votes_number) . '</span> ' . _n('like', 'likes', $votes_number, 'campoal'); ?>
                            </div>
                            <?php endif; ?>
                        </div>
                        <div class="text" id="comment-content-<?php echo esc_attr($comment->comment_ID) ?>">
                            <?php comment_text($comment->comment_ID) ?>
                        </div>
                        <div class="actions">
                            <?php if ($voted == true) { ?>
                                <a href="javascript:void(0)" class="vote down" id="vote-<?php echo esc_attr($comment->comment_ID) ?>" data-author="<?php echo esc_attr($comment->comment_author_name) ?>" data-id="<?php echo esc_attr($comment->comment_ID) ?>"><i class="thumbs down icon"></i><?php esc_html_e('Unlike', 'campoal') ?></a>
                            <?php } else { ?>
                                <a href="javascript:void(0)" class="vote up" id="vote-<?php echo esc_attr($comment->comment_ID) ?>" data-author="<?php echo esc_attr($comment->comment_author_name) ?>" data-id="<?php echo esc_attr($comment->comment_ID) ?>"><i class="thumbs up icon"></i><?php esc_html_e('Like', 'campoal') ?></a>
                            <?php } 
                                if ( is_user_logged_in() ) { ?>
                                <a href="javascript:void(0)" class="reply" id="reply-<?php echo esc_attr($comment->comment_ID) ?>" data-author="<?php echo esc_attr($comment->comment_author_name) ?>" data-id="<?php echo esc_attr($comment->comment_ID) ?>" data-post-id="<?php echo esc_attr($post->ID) ?>"><i class="reply icon"></i><?php esc_html_e('Reply', 'campoal') ?></a>
                            <?php if ( ($comment->user_id == $current_user->ID) || current_user_can('administrator') || conikal_co_author_permission($comment->comment_post_ID)) { ?>
                                <a href="javascript:void(0)" class="edit" id="edit-<?php echo esc_attr($comment->comment_ID) ?>" data-author="<?php echo esc_attr($comment->comment_author_name) ?>" data-id="<?php echo esc_attr($comment->comment_ID) ?>"><i class="pencil icon"></i><?php esc_html_e('Edit', 'campoal') ?></a>
                                <a href="javascript:void(0)" class="delete" id="delete-<?php echo esc_attr($comment->comment_ID) ?>" data-author="<?php echo esc_attr($comment->comment_author_name) ?>" data-id="<?php echo esc_attr($comment->comment_ID) ?>"><i class="delete icon"></i><?php esc_html_e('Delete', 'campoal') ?></a>
                            <?php }
                                }
                            ?>
                        </div>
                    </div>
                    <div class="comments">
                        <?php
                        $replies_total = get_comments(
                            array(
                                'status' => 'approve',
                                'post_id' => $id,
                                'parent' => $comment->comment_ID,
                                'order' => 'DESC'
                            )
                        );
                        if ($replies_sort == 'oldest' && count($replies_total) > $reply_per_comment) { ?>
                            <a href="javascript:void(0)" class="hide-replies display none" id="hide-<?php echo esc_attr($comment->comment_ID) ?>" data-id="<?php echo esc_attr($comment->comment_ID) ?>"><i class="angle up icon"></i><?php esc_html_e('Hidden replies', 'campoal') ?></a>
                            <a href="javascript:void(0)" class="more-replies" id="more-<?php echo esc_attr($comment->comment_ID) ?>" data-id="<?php echo esc_attr($comment->comment_ID) ?>" data-post-id="<?php echo esc_attr($post->ID) ?>" data-order="oldest"><i class="angle down icon"></i><?php echo esc_html('View all', 'campoal') . ' ' . esc_html(count($replies_total)) . ' ' . esc_html__('replies', 'campoal') ?></a>
                            <div class="ui active mini inline loader display none" id="loading-<?php echo esc_attr($comment->comment_ID) ?>"></div>
                        <?php } ?>
                        <div class="replies" id="replies-<?php echo esc_attr($comment->comment_ID) ?>">
                        <?php
                        $replies =  conikal_comments_petition($id, $comment->comment_ID);
                        if ($replies) : ?>
                            <?php foreach($replies as $reply) : 
                            $reply_votes = get_comment_meta($reply->comment_ID, 'comment_vote', true);

                            if (is_array($reply_votes) && in_array($current_user->ID, $reply_votes)) {
                                $reply_voted = true;
                            } else {
                                $reply_voted = false;
                            }

                            $reply_votes_number = $reply_votes ? count($reply_votes) : 0;
                            ?>
                            <div class="comment" id="comment-<?php echo esc_attr($reply->comment_ID) ?>">
                                <?php if ($comment->comment_type == 'comment') : ?>
                                    <a class="avatar <?php echo esc_attr($reply->comment_level_badge) ?>" href="<?php echo esc_url($comment->comment_author_link) ?>" data-bjax>
                                        <img class="lazy" data-src="<?php echo esc_url($reply->comment_author_avatar) ?>" data-retina="<?php echo esc_url($reply->comment_author_avatar_retina) ?>" src="<?php echo esc_url($lazy_placeholder_avatar) ?>" alt="<?php echo esc_attr($comment->comment_author_name) ?>" />
                                    </a>
                                <?php endif; ?>
                                <div class="content">
                                    <a class="author" href="<?php echo esc_url($comment->comment_author_link) ?>" data-bjax><?php echo esc_html($reply->comment_author_name) ?></a>
                                    <div class="metadata">
                                        <div class="date">
                                            <?php echo esc_html($reply->comment_time) ?>
                                        </div>
                                        <div class="date"> · </div>
                                        <div class="rating">
                                            <?php echo '<span id="vote-num-' . esc_attr($reply->comment_ID) . '">' . esc_html($reply_votes_number) . '</span> ' . _n('like', 'likes', $votes_number, 'campoal'); ?>
                                        </div>
                                    </div>
                                    <div class="text" id="comment-content-<?php echo esc_attr($reply->comment_ID) ?>">
                                        <?php comment_text($reply->comment_ID) ?>
                                    </div>
                                    <div class="actions">
                                        <?php if ($reply_voted == true) { ?>
                                            <a href="javascript:void(0)" class="vote down" id="vote-<?php echo esc_attr($reply->comment_ID) ?>" data-author="<?php echo esc_attr($reply->comment_author_name) ?>" data-id="<?php echo esc_attr($reply->comment_ID) ?>"><i class="thumbs down icon"></i><?php esc_html_e('Unlike', 'campoal') ?></a>
                                        <?php } else { ?>
                                            <a href="javascript:void(0)" class="vote up" id="vote-<?php echo esc_attr($reply->comment_ID) ?>" data-author="<?php echo esc_attr($reply->comment_author_name) ?>" data-id="<?php echo esc_attr($reply->comment_ID) ?>"><i class="thumbs up icon"></i><?php esc_html_e('Like', 'campoal') ?></a>
                                        <?php } 
                                            if ( is_user_logged_in() ) { ?>
                                            <a href="javascript:void(0)" class="reply" id="reply-<?php echo esc_attr($comment->comment_ID) ?>" data-author="<?php echo esc_attr($reply->comment_author_name) ?>" data-id="<?php echo esc_attr($comment->comment_ID) ?>" data-post-id="<?php echo esc_attr($post->ID) ?>"><i class="reply icon"></i><?php esc_html_e('Reply', 'campoal') ?></a>
                                        <?php if ( ($comment->user_id == $current_user->ID) || current_user_can('administrator') || conikal_co_author_permission($comment->comment_post_ID)) { ?>
                                            <a href="javascript:void(0)" class="edit" id="edit-<?php echo esc_attr($reply->comment_ID) ?>" data-author="<?php echo esc_attr($reply->comment_author_name) ?>" data-id="<?php echo esc_attr($reply->comment_ID) ?>"><i class="pencil icon"></i><?php esc_html_e('Edit', 'campoal') ?></a>
                                            <a href="javascript:void(0)" class="delete" id="delete-<?php echo esc_attr($reply->comment_ID) ?>" data-author="<?php echo esc_attr($reply->comment_author_name) ?>" data-id="<?php echo esc_attr($reply->comment_ID) ?>"><i class="delete icon"></i><?php esc_html_e('Delete', 'campoal') ?></a>
                                        <?php } 
                                            }
                                        ?>
                                    </div>
                                </div>
                            </div>
                            <?php endforeach; ?>
                        <?php endif; ?>
                        </div>
                        <?php if ($replies_sort == 'newest' && count($replies_total) > $reply_per_comment) { ?>
                            <a href="javascript:void(0)" class="hide-replies display none" id="hide-<?php echo esc_attr($comment->comment_ID) ?>" data-id="<?php echo esc_attr($comment->comment_ID) ?>"><i class="angle up icon"></i><?php esc_html_e('Hidden replies', 'campoal') ?></a>
                            <a href="javascript:void(0)" class="more-replies" id="more-<?php echo esc_attr($comment->comment_ID) ?>" data-id="<?php echo esc_attr($comment->comment_ID) ?>" data-post-id="<?php echo esc_attr($post->ID) ?>" data-order="oldest"><i class="angle down icon"></i><?php echo esc_html('View all', 'campoal') . ' ' . esc_html(count($replies_total)) . ' ' . esc_html__('replies', 'campoal') ?></a>
                            <div class="ui active mini inline loader display none" id="loading-<?php echo esc_attr($comment->comment_ID) ?>"></div>
                        <?php } ?>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php } ?>
    </div>

    <?php if ($comments_sort == 'newest' && $commnet_count->approved >= $comments_per_page) { ?> 
        <input type="hidden" value="<?php echo esc_attr($comments_per_page) ?>" id="comment-offset<?php echo esc_attr($post->ID) ?>">
        <input type="hidden" value="<?php echo esc_attr($comments_per_page) ?>" id="comment-number<?php echo esc_attr($post->ID) ?>">
        <input type="hidden" value="<?php echo esc_attr($reply_per_comment) ?>" id="reply-number<?php echo esc_attr($post->ID) ?>">
        <button class="ui basic fluid button comment-more" id="comment-more<?php echo esc_attr($post->ID) ?>" data-id="<?php echo esc_attr($post->ID) ?>" data-order="<?php echo esc_attr($comments_sort) ?>" data-replies-order="<?php echo esc_attr($replies_sort) ?>"><i class="long arrow down icon"></i><?php esc_html_e('Older comments ...', 'campoal') ?></button>
    <?php } ?>

    <!-- ADD NEW COMMENT -->
    <?php if(is_user_logged_in() || empty($comment_registration)) { ?>
    <h3><?php esc_html_e('Write a Reply or Comment', 'campoal') ?></h3>
    <p> 
        <?php if (is_user_logged_in()) : ?>
        <a href="<?php echo esc_url($current_user_link) ?>"><?php echo esc_html__('Logged in as', 'campoal') . ' ' . $current_user->display_name . '.'; ?></a>
        <a href="<?php echo wp_logout_url(home_url('/')); ?>"><?php esc_html_e('Log out?', 'campoal') ?></a>
        <?php else: ?>
            <?php
                $login_link_desktop = isset($campoal_options['conikal_login_link_desktop_field']) ? $campoal_options['conikal_login_link_desktop_field'] : 0;
                $login_link_mobile = isset($campoal_options['conikal_login_link_mobile_field']) ? $campoal_options['conikal_login_link_mobile_field'] : 1;
                $login_page = isset($campoal_options['conikal_page_login_field']) ? $campoal_options['conikal_page_login_field'] : 0;
                $login_page = (($login_link_mobile == 1 && wp_is_mobile()) || $login_link_desktop == 1) ? get_permalink($login_page) : false;

                $signin_link = '<a href="' . esc_attr($login_page && ($login_link_mobile == 1 || $login_link_desktop == 1) ? esc_url($login_page) : 'javascript:void(0)') . '" class="item' . esc_attr($login_page && ($login_link_mobile == 1 || $login_link_desktop == 1) ? '' : ' signin-btn') . '">' . esc_html__('Sign In', 'campoal') . '</a>';
                $signup_link = '<a href="' . esc_attr($login_page && ($login_link_mobile == 1 || $login_link_desktop == 1) ? esc_url(add_query_arg(array('action' => 'signup'), $login_page)) : 'javascript:void(0)') . '" class="item' . esc_attr($login_page && ($login_link_mobile == 1 || $login_link_desktop == 1) ? '' : ' signup-guest') . '">' . esc_html__('Sign Up', 'campoal') . '</a>';
                echo sprintf(esc_html__('You should %1$s or %2$s account to post comment.', 'campoal'), $signin_link, $signup_link);
            ?>
        <?php endif; ?>
    </p>
    <div class="ui sticky comment-sticky" id="comment-sticky<?php echo esc_attr($post->ID) ?>">
        <div id="commentMessage<?php echo esc_attr($post->ID) ?>" class="respon-message"></div>
        <form class="ui reply large form ui secondary segment comment-label" id="commentForm<?php echo esc_attr($post->ID) ?>">
            <div class="fields">
                <div class="one wide field display-tablet only display-computer only">
                    <a class="ui right spaced avatar image" href="<?php echo esc_url($current_user_link) ?>">
                        <img class="add-comment-avatar lazy" alt="<?php echo esc_attr($current_user->display_name) ?>" data-src="<?php echo esc_url($current_user_avatar) ?>" data-retina="<?php echo esc_url($current_user_avatar_retina) ?>" src="<?php echo esc_url($lazy_placeholder_avatar) ?>">
                    </a>
                </div>
                <div class="fifteen wide field" data-id="<?php echo esc_attr($post->ID) ?>">
                    <textarea class="auto-height comment-input<?php echo esc_attr(wp_is_mobile() ? ' ui large input' : '') ?> content-comment" rows="3" id="content-comment<?php echo esc_attr($post->ID) ?>" name="content_comment" placeholder="<?php esc_attr_e('Add a comment', 'campoal') ?>" data-id="<?php echo esc_attr($post->ID) ?>"></textarea>
                    <a href="javascript:void(0)" class="send-comment ui basic circular icon button" id="send-comment<?php echo esc_attr($post->ID) ?>" data-id="<?php echo esc_attr($post->ID) ?>"><i class="paper plane icon"></i></a>
                    <input type="hidden" class="comment-parent" id="comment-parent<?php echo esc_attr($post->ID) ?>" value="0"/>
                </div>
            </div>
            <?php if(!is_user_logged_in()) {
                $commenter  = wp_get_current_commenter();
                $req        = get_option( 'require_name_email' );
                $aria_req   = ( $req ? " aria-required='true'" : '' );
                $consent    = empty( $commenter['comment_author_email'] ) ? '' : ' checked=&quot;checked&quot;'; ?>
            <div class="comment-guest-info">
                <div class="fields">
                    <div class="one wide field display-tablet only display-computer only"></div>
                    <div class="eight wide field<?php echo esc_attr( $req ? ' required' : '' ) ?>">
                        <div class="<?php echo esc_attr(wp_is_mobile() ? 'ui large input' : 'ui input') ?>">
                            <input type="text" class="comment-fullname" id="comment-fullname<?php echo esc_attr($post->ID) ?>" name="comment_fullname" value="<?php echo esc_attr(  $commenter['comment_author'] ) ?>" placeholder="<?php esc_attr_e('Your fullname', 'campoal') ?>" data-id="<?php echo esc_attr($post->ID) ?>"<?php echo wp_kses_post($aria_req) ?>>
                        </div>
                    </div>
                    <div class="seven wide field<?php echo esc_attr( $req ? ' required' : '' ) ?>">
                        <div class="<?php echo esc_attr(wp_is_mobile() ? 'ui large input' : 'ui input') ?>">
                            <input type="text" class="comment-email" id="comment-email<?php echo esc_attr($post->ID) ?>" name="comment_email" value="<?php echo esc_attr( $commenter['comment_author_email'] ) ?>" placeholder="<?php esc_attr_e('Your email', 'campoal') ?>" data-id="<?php echo esc_attr($post->ID) ?>"<?php echo wp_kses_post($aria_req) ?>>
                        </div>
                    </div>
                </div>
                <?php if (get_option( 'show_comments_cookies_opt_in' )) : ?>
                    <div class="fields">
                        <div class="one wide field display-tablet only display-computer only"></div>
                        <div class="comment-form-url fifteen wide field">
                            <div class="ui checkbox">
                                <input type="checkbox" tabindex="0" class="hidden" id="comment-cookies-consent<?php echo esc_attr($post->ID) ?>" name="comment-cookies-consent" value="yes" data-id="<?php echo esc_attr($post->ID) ?>"<?php echo wp_kses_post($consent) ?>>
                                <label>
                                    <?php esc_html_e('Save my name for the next time I comment.', 'campoal') ?>
                                </label>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>
            </div>
            <div class="field display-mobile only">
                <a href="javascript:void(0)" class="ui primary large fluid button send-comment" id="send-comment-button<?php echo esc_attr($post->ID) ?>" data-id="<?php echo esc_attr($post->ID) ?>"><?php esc_html_e('Post comment', 'campoal') ?></a>
            </div>
            <?php } ?>
        </form>
    </div>
    <?php if (!is_user_logged_in() && conikal_show_google_reCaptcha() && $recaptcha_comment == 1) { ?>
        <form class="ui form">
            <p>
            <?php get_template_part('templates/google', 'recaptcha'); ?>
            </p>
        </form>
    <?php } ?>

    <?php } else { ?>
        <div class="ui large message">
        <?php
            $login_link_desktop = isset($campoal_options['conikal_login_link_desktop_field']) ? $campoal_options['conikal_login_link_desktop_field'] : 0;
            $login_link_mobile = isset($campoal_options['conikal_login_link_mobile_field']) ? $campoal_options['conikal_login_link_mobile_field'] : 1;
            $login_page = isset($campoal_options['conikal_page_login_field']) ? $campoal_options['conikal_page_login_field'] : 0;
            $login_page = (($login_link_mobile == 1 && wp_is_mobile()) || $login_link_desktop == 1) ? get_permalink($login_page) : false;

            $signin_link = '<a href="' . esc_attr($login_page && ($login_link_mobile == 1 || $login_link_desktop == 1) ? esc_url($login_page) : 'javascript:void(0)') . '" class="item' . esc_attr($login_page && ($login_link_mobile == 1 || $login_link_desktop == 1) ? '' : ' signin-btn') . '">' . esc_html__('Sign In', 'campoal') . '</a>';
            $signup_link = '<a href="' . esc_attr($login_page && ($login_link_mobile == 1 || $login_link_desktop == 1) ? esc_url(add_query_arg(array('action' => 'signup'), $login_page)) : 'javascript:void(0)') . '" class="item' . esc_attr($login_page && ($login_link_mobile == 1 || $login_link_desktop == 1) ? '' : ' signup-guest') . '">' . esc_html__('Sign Up', 'campoal') . '</a>';
            echo sprintf(esc_html__('You need %1$s or %2$s account to post comment.', 'campoal'), $signin_link, $signup_link);
        ?>
        </div>
    <?php } ?>
    <?php wp_nonce_field('comment_ajax_nonce', 'securityComment', true); ?>
</div>