<?php
$comment_type = 'attachments';
$attachInfo = $attachment_info[0];
$module = $attachInfo->module;
$module_id = $attachInfo->module_field_id;
if ($type == 'g') {
    $height = '450px';
    $title = $attachInfo->title;
    $comment_details = $this->common_model->get_comments_by_where(array('attachments_id' => $attachInfo->attachments_id, 'uploaded_files_id' => '0', 'comments_reply_id' => '0'));
    $description = $attachInfo->description;
} else {
    $uploaded_files_id = $attachInfo->uploaded_files_id;
    $height = '600px';
    $title = $attachInfo->file_name;
    $description = lang('upload') . ' ' . $attachInfo->fullname;
    $comment_details = $this->common_model->get_comments_by_where(array('uploaded_files_id' => $uploaded_files_id, 'comments_reply_id' => '0'));
}
?>

<div class="rounded-2xl bg-white shadow-xl dark:bg-slate-950 dark:shadow-none">
    <div class="flex items-start justify-between gap-4 border-b border-slate-200 px-6 py-4 dark:border-slate-800">
        <div>
            <h4 class="text-base font-semibold text-slate-900 dark:text-slate-100"><?= $title . ' ' . lang('details') ?></h4>
            <p class="text-xs text-slate-500 dark:text-slate-400"><?= $description ?></p>
        </div>
        <div class="flex items-center gap-2">
            <a data-tooltip="<?= lang('download') . ' ' . lang('all') ?>"
               href="<?= base_url() ?>admin/common/download_all_files/<?= $attachInfo->attachments_id ?>"
               class="inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800">
                <i data-lucide="download" class="h-4 w-4"></i>
                <?= lang('download') ?>
            </a>
            <button type="button" data-dismiss="modal" class="inline-flex items-center justify-center rounded-lg border border-slate-200 bg-white p-2 text-slate-400 hover:text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-400 dark:hover:text-slate-100">
                <i data-lucide="x" class="h-4 w-4"></i>
            </button>
        </div>
    </div>

    <div class="grid gap-6 px-6 py-5 lg:grid-cols-[minmax(0,1.2fr),minmax(0,0.8fr)]">
        <div class="space-y-4">
            <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-900/50">
                <?php
                if (!empty($attachment_info)) {
                    foreach ($attachment_info as $l_key => $v_files) {
                        if (!empty($v_files)) {
                            $extension = _get_file_extension($v_files->file_name);
                            $full_ex = _mime_content_type($v_files->files);
                            ?>
                            <?php if ($v_files->is_image == 1) { ?>
                                <img src="<?php echo base_url($v_files->files); ?>" class="w-full rounded-xl">
                            <?php } else if ($extension == 'pdf') { ?>
                                <iframe src="<?php echo base_url($v_files->files); ?>" height="<?= $height ?>"
                                        width="100%" frameborder="0" class="rounded-xl bg-white dark:bg-slate-900"></iframe>
                            <?php } else if (is_html5_video($v_files->files)) { ?>
                                <video width="100%" height="100%" type="<?= $full_ex ?>"
                                       src="<?php echo site_url($v_files->files); ?>" controls class="rounded-xl">
                                    Your browser does not support the video tag.
                                </video>
                            <?php } else { ?>
                                <div class="flex items-center justify-between rounded-xl border border-slate-200 bg-white px-4 py-5 dark:border-slate-700 dark:bg-slate-900">
                                    <div>
                                        <p class="text-sm font-semibold text-slate-900 dark:text-slate-100"><?= lang('no_preview_available') ?></p>
                                        <a class="text-sm text-primary hover:underline dark:text-sky-400"
                                           href="<?= base_url() ?>admin/common/download_files/<?= $v_files->uploaded_files_id ?>">
                                            <?= $v_files->file_name ?>
                                        </a>
                                    </div>
                                    <a href="<?= base_url() ?>admin/common/download_files/<?= $v_files->uploaded_files_id ?>"
                                       class="inline-flex items-center justify-center rounded-lg border border-slate-200 bg-slate-50 p-2 text-slate-500 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700">
                                        <i data-lucide="download" class="h-5 w-5"></i>
                                    </a>
                                </div>
                            <?php } ?>
                            <?php if (($l_key + 1) < count($attachment_info)) { ?>
                                <div class="my-4 border-t border-slate-200 dark:border-slate-800"></div>
                            <?php } ?>
                        <?php } ?>
                    <?php }
                } ?>
            </div>
        </div>

        <div class="rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900/70">
            <div class="flex items-center justify-between border-b border-slate-200 pb-3 dark:border-slate-800">
                <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100"><?= lang('comments') ?></h3>
            </div>
            <div class="mt-4">
                <?php echo form_open(base_url("admin/common/save_attachment_comments"), array("id" => $comment_type . "-comment-form", "class" => "space-y-4", "enctype" => "multipart/form-data", "role" => "form")); ?>
                <?php if ($type == 'g') { ?>
                    <input type="hidden" name="attachments_id" value="<?php if (!empty($attachInfo->attachments_id)) { echo $attachInfo->attachments_id; } ?>" class="form-control">
                <?php } else { ?>
                    <input type="hidden" name="uploaded_files_id" value="<?php if (!empty($uploaded_files_id)) { echo $uploaded_files_id; } ?>" class="form-control">
                <?php } ?>
                <input type="hidden" name="module" value="<?php echo $module; ?>">
                <input type="hidden" name="module_field_id" value="<?php echo $module_id; ?>">
                <div>
                    <?php
                    echo form_textarea(array(
                        "id" => "comment_description",
                        "name" => "description",
                        "class" => "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 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100 dark:placeholder:text-slate-500 dark:focus:border-slate-500",
                        "placeholder" => $title . ' ' . lang('comments'),
                        "data-rule-required" => true,
                        "rows" => 4,
                        "data-msg-required" => lang("field_required"),
                    ));
                    ?>
                </div>
                <div>
                    <div id="attachemnt_comments-dropzone" class="dropzone rounded-xl border border-dashed border-slate-200 bg-slate-50 p-4 dark:border-slate-700 dark:bg-slate-950/60"></div>
                    <div id="attachemnt_comments-dropzone-scrollbar" class="mt-3">
                        <div id="attachemnt_comments-previews" class="flex flex-wrap gap-3">
                            <div id="attachemnt_file-upload-row" class="relative w-24">
                                <div class="preview box-content rounded-lg border border-slate-200 bg-white p-2 dark:border-slate-700 dark:bg-slate-900">
                                    <button type="button" data-dz-remove class="absolute right-2 top-2 text-slate-400 hover:text-rose-500 dark:text-slate-500 dark:hover:text-rose-300">
                                        <i data-lucide="x" class="h-4 w-4"></i>
                                    </button>
                                    <img data-dz-thumbnail class="upload-thumbnail-sm rounded-md"/>
                                    <input class="file-count-field" type="hidden" name="files[]" value=""/>
                                    <div class="mt-2 h-1.5 w-full rounded-full bg-slate-200 dark:bg-slate-700">
                                        <div class="h-1.5 w-0 rounded-full bg-emerald-500" data-dz-uploadprogress></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex justify-end">
                    <button type="submit" id="file-save-button" class="rounded-lg bg-slate-900 px-4 py-2 text-xs font-semibold text-white hover:bg-slate-800 dark:bg-indigo-600 dark:hover:bg-indigo-500">
                        <?= lang('post_comment') ?>
                    </button>
                </div>
                <?php echo form_close(); ?>

                <div class="mt-4">
                    <?php $this->load->view('admin/common/comments_list', array('comment_details' => $comment_details)) ?>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $('#myModal_extra_lg').on('loaded.bs.modal', function () {
        (function ($) {
            "use strict";
            var fileSerial = 0;
            $('#file-save-button').on('click', function (e) {
                var ubtn = $(this);
                ubtn.html('Please wait...');
                ubtn.addClass('disabled');
            });
            $("#<?php echo $comment_type; ?>-comment-form").appForm({
                isModal: false,
                onSuccess: function (result) {
                    $(".comment_description").val("");
                    $(".dz-complete").remove();
                    $('#file-save-button').removeClass("disabled").html('<?= lang('post_comment') ?>');
                    $(result.data).insertAfter("#<?php echo $comment_type; ?>-comment-form");
                    toastr[result.status](result.message);
                }
            });
            var previewNode = document.querySelector("#attachemnt_file-upload-row");
            if (previewNode !== null) {
                previewNode.id = "";
                var previewTemplate = previewNode.parentNode.innerHTML;
                previewNode.parentNode.removeChild(previewNode);
                Dropzone.autoDiscover = false;
                var projectFilesDropzone = new Dropzone("#attachemnt_comments-dropzone", {
                    url: "<?= base_url() ?>admin/common/upload_file",
                    thumbnailWidth: 80,
                    thumbnailHeight: 80,
                    parallelUploads: 20,
                    previewTemplate: previewTemplate,
                    dictDefaultMessage: '<?php echo lang("file_upload_instruction"); ?>',
                    autoQueue: true,
                    previewsContainer: "#attachemnt_comments-previews",
                    clickable: true,
                    accept: function (file, done) {
                        if (file.name.length > 200) {
                            done("Filename is too long.");
                            $(file.previewTemplate).find(".description-field").remove();
                        }
                        $.ajax({
                            url: "<?= base_url() ?>admin/common/validate_project_file",
                            data: {
                                file_name: file.name,
                                file_size: file.size
                            },
                            cache: false,
                            type: 'POST',
                            dataType: "json",
                            success: function (response) {
                                if (response.success) {
                                    fileSerial++;
                                    $(file.previewTemplate).find(".description-field").attr("name", "comment_" + fileSerial);
                                    $(file.previewTemplate).append("<input type='hidden' name='file_name_" + fileSerial + "' value='" + file.name + "' />\n\
                                     <input type='hidden' name='file_size_" + fileSerial + "' value='" + file.size + "' />");
                                    $(file.previewTemplate).find(".file-count-field").val(fileSerial);
                                    done();
                                } else {
                                    $(file.previewTemplate).find("input").remove();
                                    done(response.message);
                                }
                            }
                        });
                    }
                });
            }
        })(jQuery);
    });
</script>
