<?php
$comment_type = !empty($comment_type) ? $comment_type : 'comment';
if (!empty($comment_details)) {
    foreach ($comment_details as $key => $v_comment) { ?>
        <?php
        $avatar = !empty($v_comment->avatar) ? base_url() . ltrim($v_comment->avatar, '/') : '';
        $fullname = !empty($v_comment->fullname) ? $v_comment->fullname : lang('unknown');
        ?>
        <div class="project-inline-card flex gap-3 rounded-xl border border-slate-200 bg-white p-4 shadow-sm transition hover:shadow-md dark:border-slate-700 dark:bg-slate-800" id="<?php echo $comment_type . "-comment-form-container-" . $v_comment->task_comment_id ?>">
            <?php if (!empty($avatar)) { ?>
                <img alt="Avatar" src="<?php echo $avatar; ?>"
                     class="h-10 w-10 rounded-full border border-slate-200 object-cover dark:border-slate-700">
            <?php } else { ?>
                <div class="flex h-10 w-10 items-center justify-center rounded-full border border-slate-200 bg-slate-100 text-slate-500 dark:border-slate-700 dark:bg-slate-700 dark:text-slate-300">
                    <i data-lucide="user" class="h-4 w-4"></i>
                </div>
            <?php } ?>
            <div class="flex-1">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <a href="<?= base_url() ?>admin/user/user_details/<?= $v_comment->user_id ?>"
                           class="text-sm font-semibold text-slate-900 hover:underline dark:text-slate-100">
                            <?= html_escape($fullname) ?>
                        </a>
                        <div class="text-xs text-slate-500 dark:text-slate-400"><?= time_ago($v_comment->comment_datetime) ?></div>
                    </div>
                    <?php if ($v_comment->user_id == $this->session->userdata('user_id')) { ?>
                        <?php echo ajax_anchor(
                            base_url("admin/common/delete_comments/" . $v_comment->task_comment_id),
                            "",
                            array(
                                "class" => "inline-flex items-center justify-center rounded-lg border border-rose-200 bg-rose-50 p-2 text-rose-600 hover:bg-rose-100 dark:border-rose-900/60 dark:bg-rose-950/30 dark:text-rose-300 dark:hover:bg-rose-900/40",
                                "title" => lang('delete'),
                                "data-fade-out-on-success" => "#" . $comment_type . "-comment-form-container-" . $v_comment->task_comment_id
                            )
                        ); ?>
                    <?php } ?>
                </div>
                <div class="mt-2 break-words text-sm leading-relaxed text-slate-700 dark:text-slate-200">
                    <?php if (!empty($v_comment->comment)) echo $v_comment->comment; ?>
                </div>

                <?php
                $attachments_json = !empty($v_comment->comments_attachment) ? $v_comment->comments_attachment : '[]';
                $uploaded_file = json_decode($attachments_json);
                if (!empty($uploaded_file)) {
                    ?>
                    <div class="mt-3 grid gap-2 sm:grid-cols-2">
                        <?php
                        foreach ($uploaded_file as $v_files) {
                            if (!empty($v_files)) {
                                ?>
                                <div class="project-inline-card rounded-lg border border-slate-200 bg-slate-50 p-3 dark:border-slate-700 dark:bg-slate-900/60">
                                    <?php if ($v_files->is_image == 1) { ?>
                                        <a href="<?= base_url() ?>admin/common/download_files/<?= $v_files->fileName . '/' . true ?>" class="block">
                                            <img alt="" src="<?= base_url() . $v_files->path ?>" class="h-28 w-full rounded-md 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() ?>admin/common/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
                }
                $comment_reply_details = $this->common_model->get_comment_details($v_comment->task_comment_id, null, true);
                ?>

                <button class="reply mt-3 inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-2.5 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-700/50 dark:text-slate-200 dark:hover:bg-slate-700" data-tooltip="<?= 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 $this->load->view('admin/common/comments_reply', array('comment_type' => $comment_type, 'comment_reply_details' => $comment_reply_details)) ?>

                <div class="reply__ project-inline-card mt-3 hidden rounded-xl border border-slate-200 bg-slate-50/70 p-3 dark:border-slate-700 dark:bg-slate-900/40" id="reply_<?php echo $v_comment->task_comment_id ?>">
                    <form id="<?php echo $comment_type; ?>-reply-comment-form-<?php echo $v_comment->task_comment_id ?>"
                          action="<?php echo base_url() ?>admin/common/save_comments_reply/<?php
                          if (!empty($v_comment->task_comment_id)) { echo $v_comment->task_comment_id; }
                          ?>" method="post" class="space-y-3" data-comment-reply-form="true">

                        <input type="hidden" name="module" value="<?php if (!empty($v_comment->module)) { echo $v_comment->module; } ?>">
                        <input type="hidden" name="module_field_id" value="<?php if (!empty($v_comment->module_field_id)) { echo $v_comment->module_field_id; } ?>">

                        <textarea name="reply_comments" class="reply_comments w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-300/40 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:focus:border-slate-500 dark:focus:ring-slate-600/40"
                                  rows="3"></textarea>
                        <div class="flex justify-end">
                            <button type="submit"
                                    id="<?php echo $comment_type; ?>reply-<?php echo $v_comment->task_comment_id ?>"
                                    class="inline-flex items-center gap-1.5 rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white">
                                <i data-lucide="send" class="h-3.5 w-3.5"></i>
                                <?= lang('save') ?>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    <?php } ?>
<?php } ?>
<script type="text/javascript">
    document.addEventListener("click", function (e) {
        const btn = e.target.closest("button.reply");
        if (!btn) return;
        const id = btn.getAttribute("id") || "";
        const sectionId = id.replace("reply__", "reply_");
        document.querySelectorAll(".reply__").forEach((el) => el.classList.add("hidden"));
        const target = document.getElementById(sectionId);
        if (target) {
            target.classList.remove("hidden");
            target.style.marginTop = "10px";
            const textarea = target.querySelector("textarea");
            if (textarea) textarea.focus();
        }
    });
</script>
