<?php
$comment_type = 'projects';
$comment_reply_type = 'projects-reply';

if (!empty($comment_details)) {
    foreach ($comment_details as $key => $v_comment) {
        $user_info = $this->db->where(array('user_id' => $v_comment->user_id))->get('tbl_users')->row();
        $profile_info = $this->db->where(array('user_id' => $v_comment->user_id))->get('tbl_account_details')->row();
        $uploaded_file = json_decode($v_comment->comments_attachment ?: '[]');
        $comment_reply_details = $this->db->where('comments_reply_id', $v_comment->task_comment_id)->order_by('comment_datetime', 'ASC')->get('tbl_task_comment')->result();
?>
        <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-900/40" id="<?php echo $comment_type . "-comment-form-container-" . $v_comment->task_comment_id ?>">
            <div class="flex items-start justify-between gap-3">
                <div class="flex items-start gap-3">
                    <img alt="Mail Avatar" src="<?php echo base_url() . $profile_info->avatar ?>" class="h-10 w-10 rounded-full object-cover">
                    <div class="space-y-2">
                        <div class="flex flex-wrap items-center gap-2">
                            <a href="#" class="text-sm font-semibold text-slate-900 dark:text-slate-100"><?= ($profile_info->fullname) ?></a>
                            <span class="text-xs text-slate-500 dark:text-slate-400"><?= time_ago($v_comment->comment_datetime) ?></span>
                        </div>
                        <div class="text-sm text-slate-700 dark:text-slate-200"><?php if (!empty($v_comment->comment)) echo $v_comment->comment; ?></div>
                        <?php if (!empty($uploaded_file)) { ?>
                            <div class="grid gap-2 sm:grid-cols-2">
                                <?php foreach ($uploaded_file as $v_files) {
                                    if (!empty($v_files)) { ?>
                                        <div class="rounded-xl border border-slate-200 bg-slate-50 p-3 dark:border-slate-700 dark:bg-slate-800/60">
                                            <?php if ($v_files->is_image == 1) { ?>
                                                <a href="<?= base_url() ?>client/projects/download_files/<?= $v_files->fileName . '/' . true ?>" class="block">
                                                    <img alt="" src="<?= base_url() . $v_files->path ?>" class="h-28 w-full rounded-lg object-cover">
                                                </a>
                                            <?php } else { ?>
                                                <div class="flex items-center justify-between gap-2">
                                                    <div class="flex items-center gap-2 text-xs text-slate-600 dark:text-slate-300">
                                                        <i data-lucide="paperclip" class="h-4 w-4"></i>
                                                        <?= $v_files->size ?> <?= lang('kb') ?>
                                                    </div>
                                                    <a href="<?= base_url() ?>client/projects/download_files/<?= $v_files->fileName . '/' . true ?>" class="inline-flex items-center gap-1 rounded-lg border border-slate-200 bg-white px-2 py-1 text-xs font-semibold text-slate-600 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700">
                                                        <i data-lucide="download" class="h-4 w-4"></i>
                                                        <?= lang('download') ?>
                                                    </a>
                                                </div>
                                            <?php } ?>
                                        </div>
                                    <?php }
                                } ?>
                            </div>
                        <?php } ?>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <button class="inline-flex items-center gap-1 text-xs font-semibold text-primary hover:underline dark:text-sky-300 reply" data-toggle="tooltip" data-placement="top" title="<?= lang('click_to_reply') ?>" id="reply__<?php echo $v_comment->task_comment_id ?>">
                        <i data-lucide="reply" class="h-4 w-4"></i><?= lang('reply') ?>
                    </button>
                    <?php if ($v_comment->user_id == $this->session->userdata('user_id')) { ?>
                        <?php echo ajax_anchor(base_url("client/projects/delete_comments/$v_comment->task_comment_id"), "<i class='text-rose-600' data-lucide='trash-2'></i>", array("class" => "inline-flex items-center rounded-lg border border-rose-200 bg-rose-50 px-2 py-1 text-xs font-semibold text-rose-600 hover:bg-rose-100", "title" => lang('delete'), "data-fade-out-on-success" => "#" . $comment_type . "-comment-form-container-" . $v_comment->task_comment_id)); ?>
                    <?php } ?>
                </div>
            </div>
            <div class="mt-4">
                <?php $this->load->view('client/projects/comments_reply', array('comment_reply_details' => $comment_reply_details)) ?>
            </div>
            <div class="reply__ mt-4 hidden" id="reply_<?php echo $v_comment->task_comment_id ?>">
                <form id="<?php echo $comment_reply_type; ?>-comment-form-<?php echo $v_comment->task_comment_id ?>" action="<?php echo base_url() ?>client/projects/save_comments_reply/<?php
                                                                                                                                                                                            if (!empty($v_comment->task_comment_id)) {
                                                                                                                                                                                                echo $v_comment->task_comment_id . '/' . $v_comment->user_id;
                                                                                                                                                                                            }
                                                                                                                                                                                            ?>" method="post" class="space-y-3">
                    <input type="hidden" name="project_id" value="<?php
                                                                    if (!empty($v_comment->project_id)) {
                                                                        echo $v_comment->project_id;
                                                                    }
                                                                    ?>" class="form-control">
                    <div class="form-group mb-sm">
                        <textarea name="reply_comments" class="form-control reply_comments" rows="3"></textarea>
                    </div>
                    <button type="submit" id="reply-<?php echo $v_comment->task_comment_id ?>" class="rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-white hover:bg-slate-800 dark:hover:bg-slate-700"><?= lang('save') ?></button>
                </form>
            </div>
            <script type="text/javascript">
                $(document).ready(function() {
                    $('#reply-<?php echo $v_comment->task_comment_id ?>').on('click', function(e) {
                        var ubtn = $(this);
                        ubtn.html('Please wait...');
                        ubtn.addClass('disabled');
                    });
                    $("#<?php echo $comment_reply_type; ?>-comment-form-<?php echo $v_comment->task_comment_id ?>").appForm({
                        isModal: false,
                        onSuccess: function(result) {
                            $(".reply_comments").val("");
                            $('#reply-<?php echo $v_comment->task_comment_id ?>').removeClass("disabled").html('<?= lang('save') ?>');
                            $(result.data).insertBefore("#reply_<?php echo $v_comment->task_comment_id ?>").last();
                            toastr[result.status](result.message);
                        }
                    });
                });
            </script>
        </div>
<?php
    }
}
?>
<script type="text/javascript">
    $(document).ready(function() {
        $(".reply__").hide();
        $("button.reply").on("click", function() {
            var id = $(this).attr("id");
            var sectionId = id.replace("reply__", "reply_");
            $(".reply__").hide();
            $("div#" + sectionId).fadeIn("fast");
            $("div#" + sectionId).css("margin-top", "10px");
        });
    });
</script>
