@php
    $commentThemeColor = config('system_variables.comment_theme_color', []);
@endphp

<template id="list_document">
    <div>
        <div class="d-flex justify-content-between w-100 mb-3 overflow-x-auto pb-1">
            <div class="d-flex me-auto">
                <div class="align-items-center d-flex me-2">
                    <input type="checkbox"
                        :class="[{ 'gino-checkbox--checked2': selectAll == 2 },
                            'gino-checkbox form-check-input'
                        ]"
                        v-model="selectAll" :checked="selectAll" @click.stop>
                </div>

                <a class="btn rounded-3 d-flex me-auto gap-1 text-nowrap border bg-white text-black"
                    @click="bulkDelete()">
                    <x-icons.trash icon_class="d-inline-block" :css="['padding-bottom' => '2.5px']"></x-icons.trash>
                    {{ trans('label.bulk_delete') }}
                </a>
            </div>
            <div class="input-group rounded-3 has-clear-btn-input-group me-2 ms-auto">
                <span class="input-group-text border-end-0 bg-white" style="border-color: #ced4da"><i
                        class="ri-search-line" style="color: #878a99"></i></span>
                <input type="text" class="form-control border-start-0 rounded-end-1 pe-3 ps-0" v-model="search"
                    @keyup="handleSearch" style="border-color: #ced4da;" placeholder="{{ trans('label.search') }}">
                <i class="bi bi-x fs-22 position-absolute clearSearchButton" @click="clearInput"
                    v-if="showClearSearch"></i>
            </div>
            <div class="d-inline-flex align-items-center justify-content-center gap-2 text-end">
                <a href="javascript:void(0);" class="btn rounded-3 text-nowrap border bg-white text-black"
                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    <i class="fe fe-plus button_icon"></i>{{ trans('label.create') }}
                </a>
                <div class="dropdown-menu rounded-7" data-popper-placement="bottom-start">

                    <a class="dropdown-item cursor" data-bs-toggle="modal"
                        data-bs-target="#createDocumentFromUploadedFileModal">
                        <i class="fe fe-plus button_icon me-2"></i>{{ trans('customer.upload_file') }}
                    </a>
                    <a class="dropdown-item cursor" data-bs-toggle="modal" data-bs-target="#attachProjectDocumentModal">
                        <i class="fe fe-plus button_icon me-2"></i>{{ trans('project_document.attach_from_document') }}
                    </a>
                    <a class="dropdown-item cursor" data-bs-toggle="modal" data-bs-target="#addProjectDocumentModal">
                        <i class="fe fe-plus button_icon me-2"></i>{{ trans('project_document.new_from_template') }}
                    </a>

                </div>

                <select class="btn btn-light rounded-3 collapse-all-btn bg-white text-start"
                    style="border-color: rgb(206, 212, 218);">
                    <option value="expand_all">{{ trans('label.expand_all') }}</option>
                    <option value="collapse_all">{{ trans('label.collapse_all') }}</option>
                </select>
                <div>
                    @include('includes.pagination-dropdown')
                </div>
            </div>



        </div>
        <div class="position-relative table-wrapper rounded-1 mb-3 bg-white" v-for="item in list">
            <item_document :item="item" template_id="list_document" @zip_document_file="zipFileEmit"
                @open_add_file_modal="openAddFileModal" :ref="'itemDoc' + item.id" :doc_selected="selected"
                @update-selected="updateSelected">
            </item_document>
        </div>

        @include('includes.pagination')

        <div class="position-relative table-wrapper rounded-1 mb-4 bg-white pb-3" v-if="loading">
            <div class="d-flex align-items-center justify-content-center p-3 pb-1 pe-4 ps-4">
                <div class="spinner-border">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade gino-modal" id="attachProjectDocumentModal" tabindex="-1" role="dialog"
            aria-labelledby="attachProjectDocumentModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content custom-modal-content">
                    <div class="modal-header bg-light border-0 p-3">
                        <h6 class="modal-title" id="attachProjectDocumentModalLabel">
                            {{ trans('project_document.new_from_template') }}
                        </h6>
                        <button type="button" class="btn btn-sm btn-maximize"><svg xmlns="http://www.w3.org/2000/svg"
                                class="full-screen-open full-screen-icon header-link-icon" height="24px"
                                viewBox="0 0 24 24" width="24px" fill="currentColor">
                                <path d="M0 0h24v24H0V0z" fill="none"></path>
                                <path
                                    d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z">
                                </path>
                            </svg>
                            <svg xmlns="http://www.w3.org/2000/svg"
                                class="full-screen-close full-screen-icon header-link-icon d-none" fill="currentColor"
                                height="24" viewBox="0 -960 960 960" width="24">
                                <path
                                    d="M320-200v-120H200v-80h200v200h-80Zm240 0v-200h200v80H640v120h-80ZM200-560v-80h120v-120h80v200H200Zm360 0v-200h80v120h120v80H560Z">
                                </path>
                            </svg></button>
                        <button type="button" class="btn-close btn-close-black" data-bs-dismiss="modal"
                            aria-label="{{ trans('label.close') }}"><span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form @submit.prevent="attachProjectDocumentFormSubmit" ref="attachProjectDocumentForm"
                        id="attachProjectDocumentForm" method="post" enctype="multipart/form-data">
                        <div class="modal-body p-20">
                            <div class="row">
                                <input type="hidden" name="project_type" value="{{ $project_type }}">
                                <input type="hidden" name="table_record_id" value="{{ $model->id }}">

                                <div class="col-md-12 mb-3">
                                    <label for="document_id"
                                        class="form-label required">{{ trans('project_document.document_id') }}</label>
                                    <select2 v-model="createObj.document_id" name="document_id"
                                        data-dropdown-parent="#attachProjectDocumentModal" data-allow-clear="true"
                                        @get-data="(data) => {createObj.name = data.text} "
                                        :ajax_options="{
                                            url: `{{ route('api.documents.select2_list') }}`,
                                            delay: 300,
                                            dataMapper: res => res.data.map(item =>
                                                ({
                                                    id: item.id,
                                                    text: item.name,
                                                })),
                                            extraParams: {
                                                // param bên dưới để lọc những document nào chưa được attach với project 
                                                // (1 doc chỉ thuộc 1 trong 4 loại project)
                                                attach_to_project: true,
                                            },
                                            cache: true,
                                        }">
                                    </select2>
                                    <div class="validate-error--text text-danger" v-if="validateErrors.document_id"
                                        v-for="err in validateErrors.document_id">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>


                                <div class="col-12 mb-3">
                                    <label for="name"
                                        class="form-label required">{{ trans('project_document.name') }}</label>
                                    <input type="text"
                                        :class="[{ 'validate-error--input': validateErrors.name }, 'form-control']"
                                        v-model="createObj.name" name="name">
                                    <div class="validate-error--text text-danger" v-if="validateErrors.name"
                                        v-for="err in validateErrors.name">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>

                                <div class="col-12 mb-3">
                                    <label for="note"
                                        class="form-label">{{ trans('project_document.note') }}</label>
                                    <ckeditor
                                        :vclass="[{ 'validate-error--input': validateErrors.note },
                                            'form-control'
                                        ]"
                                        v-model="createObj.note" name="note"></ckeditor>
                                    <div class="validate-error--text text-danger" v-if="validateErrors.note"
                                        v-for="err in validateErrors.note">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>

                            </div>

                        </div>
                        <div class="modal-footer justify-content-end gap-2 border-0 p-3 pt-0">
                            <div v-if="createLoading">
                                <div class="spinner-border">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>
                            <div class="btn btn-light" data-bs-dismiss="modal" aria-hidden="true">
                                {{ trans('label.cancel') }}
                            </div>
                            <button type="submit" class="btn btn-primary">
                                {{ trans('label.save') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade gino-modal" id="addProjectDocumentModal" tabindex="-1" role="dialog"
            aria-labelledby="addProjectDocumentModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content custom-modal-content">
                    <div class="modal-header bg-light border-0 p-3">
                        <h6 class="modal-title" id="addProjectDocumentModalLabel">
                            {{ trans('project_document.new_from_template') }}
                        </h6>
                        <button type="button" class="btn btn-sm btn-maximize"><svg
                                xmlns="http://www.w3.org/2000/svg"
                                class="full-screen-open full-screen-icon header-link-icon" height="24px"
                                viewBox="0 0 24 24" width="24px" fill="currentColor">
                                <path d="M0 0h24v24H0V0z" fill="none"></path>
                                <path
                                    d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z">
                                </path>
                            </svg>
                            <svg xmlns="http://www.w3.org/2000/svg"
                                class="full-screen-close full-screen-icon header-link-icon d-none" fill="currentColor"
                                height="24" viewBox="0 -960 960 960" width="24">
                                <path
                                    d="M320-200v-120H200v-80h200v200h-80Zm240 0v-200h200v80H640v120h-80ZM200-560v-80h120v-120h80v200H200Zm360 0v-200h80v120h120v80H560Z">
                                </path>
                            </svg></button>
                        <button type="button" class="btn-close btn-close-black" data-bs-dismiss="modal"
                            aria-label="{{ trans('label.close') }}"><span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form @submit.prevent="createProjectDocumentFormSubmit" ref="createProjectDocumentForm"
                        id="createProjectDocumentForm" method="post" enctype="multipart/form-data">
                        <div class="modal-body p-20">
                            <div class="row">
                                <input type="hidden" name="project_type" value="{{ $project_type }}">
                                <input type="hidden" name="table_record_id" value="{{ $model->id }}">


                                <div class="col-md-12 mb-3">
                                    <label for="document_template_id"
                                        class="form-label required">{{ trans('project_document.document_template_id') }}</label>
                                    <select2 v-model="createObj.document_template_id" name="document_template_id"
                                        data-dropdown-parent="#addProjectDocumentModal" data-allow-clear="true"
                                        @get-data="(data) => {createObj.name = data.text} "
                                        :ajax_options="{
                                            url: `{{ route('api.document_templates.select2_list') }}`,
                                            delay: 300,
                                            dataMapper: res => res.data.map(item =>
                                                ({
                                                    id: item.document_template_id,
                                                    text: item.name,
                                                })),
                                            cache: true,
                                        }">
                                    </select2>
                                    <div class="validate-error--text text-danger"
                                        v-if="validateErrors.document_template_id"
                                        v-for="err in validateErrors.document_template_id">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>



                                <div class="col-12 mb-3">
                                    <label for="name"
                                        class="form-label required">{{ trans('project_document.name') }}</label>
                                    <input type="text"
                                        :class="[{ 'validate-error--input': validateErrors.name }, 'form-control']"
                                        v-model="createObj.name" name="name">
                                    <div class="validate-error--text text-danger" v-if="validateErrors.name"
                                        v-for="err in validateErrors.name">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>

                                <div class="col-12 mb-3">
                                    <label for="note"
                                        class="form-label">{{ trans('project_document.note') }}</label>
                                    <ckeditor
                                        :vclass="[{ 'validate-error--input': validateErrors.note },
                                            'form-control'
                                        ]"
                                        v-model="createObj.note" name="note"></ckeditor>
                                    <div class="validate-error--text text-danger" v-if="validateErrors.note"
                                        v-for="err in validateErrors.note">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>

                            </div>

                        </div>
                        <div class="modal-footer justify-content-end gap-2 border-0 p-3 pt-0">
                            <div v-if="createLoading">
                                <div class="spinner-border">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>
                            <div class="btn btn-light" data-bs-dismiss="modal" aria-hidden="true">
                                {{ trans('label.cancel') }}
                            </div>
                            <button type="submit" class="btn btn-primary">
                                {{ trans('label.save') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade gino-modal" id="createDocumentFromUploadedFileModal" tabindex="-1" role="dialog"
            aria-labelledby="createDocumentFromUploadedFileModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content custom-modal-content">
                    <div class="modal-header bg-light border-0 p-3">
                        <h6 class="modal-title" id="createDocumentFromUploadedFileModalLabel">
                            {{ trans('customer.upload_file') }}
                        </h6>
                        <button type="button" class="btn btn-sm btn-maximize"><svg
                                xmlns="http://www.w3.org/2000/svg"
                                class="full-screen-open full-screen-icon header-link-icon" height="24px"
                                viewBox="0 0 24 24" width="24px" fill="currentColor">
                                <path d="M0 0h24v24H0V0z" fill="none"></path>
                                <path
                                    d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z">
                                </path>
                            </svg>
                            <svg xmlns="http://www.w3.org/2000/svg"
                                class="full-screen-close full-screen-icon header-link-icon d-none" fill="currentColor"
                                height="24" viewBox="0 -960 960 960" width="24">
                                <path
                                    d="M320-200v-120H200v-80h200v200h-80Zm240 0v-200h200v80H640v120h-80ZM200-560v-80h120v-120h80v200H200Zm360 0v-200h80v120h120v80H560Z">
                                </path>
                            </svg></button>
                        <button type="button" class="btn-close btn-close-black" data-bs-dismiss="modal"
                            aria-label="{{ trans('label.close') }}"><span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form @submit.prevent="createDocumentFromUploadedFile" ref="createDocumentFromUploadedFileForm"
                        id="createDocumentFromUploadedFileForm" method="post" enctype="multipart/form-data">
                        <div class="modal-body p-20">
                            <input type="hidden" name="project_type" value="{{ $project_type }}">
                            <input type="hidden" name="table_record_id" value="{{ $model->id }}">
                            <div class="row">

                                <div class="col-sm-12 mb-3">
                                    <label for="file" class="form-label">{{ trans('label.file') }}</label>
                                    <input type="file"
                                        :class="[{ 'validate-error--input': validateErrors.file }, 'form-control']"
                                        name="file" @change="handleFileChange">
                                    <div class="validate-error--text text-danger" v-if="validateErrors.file"
                                        v-for="err in validateErrors.file">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>

                                <div class="col-12 mb-3">
                                    <label for="name"
                                        class="form-label">{{ trans('project_document.name') }}</label>
                                    <input type="text"
                                        :class="[{ 'validate-error--input': validateErrors.name }, 'form-control']"
                                        v-model="createObjUploadedFile.name" name="name">
                                    <div class="validate-error--text text-danger" v-if="validateErrors.name"
                                        v-for="err in validateErrors.name">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>



                                <div class="col-12 mb-3">
                                    <label for="note"
                                        class="form-label">{{ trans('project_document.note') }}</label>
                                    <ckeditor
                                        :vclass="[{ 'validate-error--input': validateErrors.note }, 'form-control']"
                                        name="note" v-model="createObjUploadedFile.note"></ckeditor>
                                    <div class="validate-error--text text-danger" v-if="validateErrors.note"
                                        v-for="err in validateErrors.note">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="modal-footer justify-content-end gap-2 border-0 p-3 pt-0">
                            <div v-if="createLoading">
                                <div class="spinner-border">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>
                            <div class="btn btn-light" data-bs-dismiss="modal" aria-hidden="true">
                                {{ trans('label.cancel') }}
                            </div>
                            <button type="submit" class="btn btn-primary">
                                {{ trans('label.save') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>


        <div class="modal fade gino-modal" id="downloadZipFileModal" tabindex="-1" role="dialog"
            aria-labelledby="downloadZipFileModalLabel" aria-hidden="true" data-backdrop="static"
            data-keyboard="false">
            <div class="modal-dialog" role="document">
                <div class="modal-content custom-modal-content">
                    <div class="modal-header bg-light border-0">
                        <h6 class="modal-title" id="downloadZipFileModalLabel">
                            {{ trans('label.download_file') }}
                        </h6>
                        <button type="button" class="btn btn-sm btn-maximize"><svg
                                xmlns="http://www.w3.org/2000/svg"
                                class="full-screen-open full-screen-icon header-link-icon" height="24px"
                                viewBox="0 0 24 24" width="24px" fill="currentColor">
                                <path d="M0 0h24v24H0V0z" fill="none"></path>
                                <path
                                    d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z">
                                </path>
                            </svg>
                            <svg xmlns="http://www.w3.org/2000/svg"
                                class="full-screen-close full-screen-icon header-link-icon d-none" fill="currentColor"
                                height="24" viewBox="0 -960 960 960" width="24">
                                <path
                                    d="M320-200v-120H200v-80h200v200h-80Zm240 0v-200h200v80H640v120h-80ZM200-560v-80h120v-120h80v200H200Zm360 0v-200h80v120h120v80H560Z">
                                </path>
                            </svg></button>
                        <button type="button" class="btn-close btn-close-black" data-bs-dismiss="modal"
                            aria-label="{{ trans('label.close') }}"><span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body p-20" v-if="exporting">
                        <div class="row">
                            <div class="col-12 text-center">
                                <div class="spinner-border">
                                    <span class="visually-hidden">Exporting...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <template v-else>
                        <div class="modal-body p-20">
                            <div class="row">
                                <div>
                                    <file-list :file="zipFile" :show_delete_button="false"></file-list>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-end gap-2 border-0 p-3 pt-0">

                            <a :href="`{{ route('view.file.download') }}/` + zipFile?.file_id"
                                class="btn btn-primary">
                                {{ trans('label.download') }}
                            </a>
                            <div class="btn btn-light" data-bs-dismiss="modal" aria-hidden="true">
                                {{ trans('label.close') }}
                            </div>
                        </div>
                    </template>

                </div>
            </div>
        </div>


        <!-- Modal -->

        <div class="modal fade gino-modal" id="addEtFileModal" tabindex="-1" role="dialog"
            aria-labelledby="addEtFileModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content custom-modal-content">
                    <div class="modal-header bg-light border-0 p-3">
                        <h6 class="modal-title" id="addEtFileModalLabel">
                            {{ trans('file.new_from_template') }}</h6>
                        <button type="button" class="btn btn-sm btn-maximize"><i class="fa fa-expand"
                                aria-hidden="true"></i></button>
                        <button type="button" class="btn-close btn-close-black" data-bs-dismiss="modal"
                            aria-label="{{ trans('label.close') }}"><span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form @submit.prevent="createEtFileFormSubmit" ref="createEtFileForm" id="createEtFileForm"
                        method="post" enctype="multipart/form-data">
                        <div class="modal-body p-20">
                            <div class="row">


                                <div class="col-md-12 mb-3">
                                    <label for="file_template_id"
                                        class="form-label required">{{ trans('file_template.id') }}</label>
                                    <select2 v-model="createObj.file_template_id" name="file_template_id"
                                        data-dropdown-parent="#addEtFileModal" data-allow-clear="true"
                                        v-if="!loadSelect2"
                                        :ajax_options="{
                                            url: `{{ route('api.file_templates.select2_list') }}`,
                                            delay: 300,
                                            dataMapper: res => res.data.map(item =>
                                                ({
                                                    id: item.file_template_id,
                                                    text: item.name,
                                                    subtext: item.file_set_name,
                                                })),
                                            templateResult: 'userTemplate',
                                            cache: true,
                                        }"
                                        @get-data="(data) => {createObj.name = data.text + (data.subtext ? '_' + data.subtext : '')}">
                                    </select2>
                                    <div class="validate-error--text text-danger"
                                        v-if="addFileFromTemplateValidateErrors.file_template_id"
                                        v-for="err in addFileFromTemplateValidateErrors.file_template_id">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>

                                <div class="col-12 mb-3">
                                    <label for="name" class="form-label">{{ trans('file.name') }}</label>
                                    <input type="text"
                                        :class="[{ 'validate-error--input': addFileFromTemplateValidateErrors.name },
                                            'form-control'
                                        ]"
                                        v-model="createObj.name" name="name">
                                    <div class="validate-error--text text-danger"
                                        v-if="addFileFromTemplateValidateErrors.name"
                                        v-for="err in addFileFromTemplateValidateErrors.name">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>

                                <div class="col-12 mb-3">
                                    <label for="note"
                                        class="form-label">{{ trans('project_document.note') }}</label>
                                    <ckeditor
                                        :vclass="[{ 'validate-error--input': addFileFromTemplateValidateErrors.note },
                                            'form-control'
                                        ]"
                                        v-model="createObj.note" name="note"></ckeditor>
                                    <div class="validate-error--text text-danger"
                                        v-if="addFileFromTemplateValidateErrors.note"
                                        v-for="err in addFileFromTemplateValidateErrors.note">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="modal-footer justify-content-end gap-2 border-0 p-3 pt-0">
                            <div v-if="createLoading">
                                <div class="spinner-border">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>
                            <div class="btn btn-light" data-bs-dismiss="modal" aria-hidden="true">
                                {{ trans('label.cancel') }}
                            </div>
                            <button type="submit" class="btn btn-primary">
                                {{ trans('label.save') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- Modal upload file -->

        <div class="modal fade gino-modal" id="uploadFileModal" tabindex="-1" role="dialog"
            aria-labelledby="uploadFileModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content custom-modal-content">
                    <div class="modal-header bg-light border-0 p-3">
                        <h6 class="modal-title" id="uploadFileModalLabel">
                            {{ trans('file.new_from_upload') }}</h6>
                        <button type="button" class="btn btn-sm btn-maximize"><i class="fa fa-expand"
                                aria-hidden="true"></i></button>
                        <button type="button" class="btn-close btn-close-black" data-bs-dismiss="modal"
                            aria-label="{{ trans('label.close') }}"><span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form @submit.prevent="uploadFileFormSubmit" ref="uploadFileForm" id="uploadFileForm"
                        method="post" enctype="multipart/form-data">
                        <div class="modal-body p-20">
                            <div class="row">
                                <div class="col-sm-12 mb-3">
                                    <label for="file" class="form-label">{{ trans('label.file') }}</label>
                                    <input type="file"
                                        :class="[{ 'validate-error--input': uploadFileValidateErrors.file }, 'form-control']"
                                        name="file" @change="handleUploadFileChange">
                                    <div class="validate-error--text text-danger" v-if="uploadFileValidateErrors.file"
                                        v-for="err in uploadFileValidateErrors.file">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>

                                <div class="col-12 mb-3">
                                    <label for="name" class="form-label">{{ trans('file.name') }}</label>
                                    <input type="text"
                                        :class="[{ 'validate-error--input': uploadFileValidateErrors.name }, 'form-control']"
                                        v-model="uploadedFileObj.name" name="name">
                                    <div class="validate-error--text text-danger" v-if="uploadFileValidateErrors.name"
                                        v-for="err in uploadFileValidateErrors.name">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>

                                <div class="col-12 mb-3">
                                    <label for="note"
                                        class="form-label">{{ trans('project_document.note') }}</label>
                                    <ckeditor
                                        :vclass="[{ 'validate-error--input': uploadFileValidateErrors.note },
                                            'form-control'
                                        ]"
                                        v-model="uploadedFileObj.note" name="note"></ckeditor>
                                    <div class="validate-error--text text-danger" v-if="uploadFileValidateErrors.note"
                                        v-for="err in uploadFileValidateErrors.note">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="modal-footer justify-content-end gap-2 border-0 p-3 pt-0">
                            <div v-if="createLoading">
                                <div class="spinner-border">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>
                            <div class="btn btn-light" data-bs-dismiss="modal" aria-hidden="true">
                                {{ trans('label.cancel') }}
                            </div>
                            <button type="submit" class="btn btn-primary">
                                {{ trans('label.save') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>


        <!-- Modal -->
        <div class="modal fade gino-modal" id="attachFileModal" tabindex="-1" role="dialog"
            aria-labelledby="attachFileModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content custom-modal-content">
                    <div class="modal-header bg-light border-0 p-3">
                        <h6 class="modal-title" id="attachFileModalLabel">
                            {{ trans('project_document.new_from_template') }}
                        </h6>
                        <button type="button" class="btn btn-sm btn-maximize"><svg
                                xmlns="http://www.w3.org/2000/svg"
                                class="full-screen-open full-screen-icon header-link-icon" height="24px"
                                viewBox="0 0 24 24" width="24px" fill="currentColor">
                                <path d="M0 0h24v24H0V0z" fill="none"></path>
                                <path
                                    d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z">
                                </path>
                            </svg>
                            <svg xmlns="http://www.w3.org/2000/svg"
                                class="full-screen-close full-screen-icon header-link-icon d-none" fill="currentColor"
                                height="24" viewBox="0 -960 960 960" width="24">
                                <path
                                    d="M320-200v-120H200v-80h200v200h-80Zm240 0v-200h200v80H640v120h-80ZM200-560v-80h120v-120h80v200H200Zm360 0v-200h80v120h120v80H560Z">
                                </path>
                            </svg></button>
                        <button type="button" class="btn-close btn-close-black" data-bs-dismiss="modal"
                            aria-label="{{ trans('label.close') }}"><span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form @submit.prevent="attachFileFormSubmit" ref="attachFileForm" id="attachFileForm"
                        method="post" enctype="multipart/form-data">
                        <div class="modal-body p-20">
                            <div class="row">

                                <input type="hidden" name="document_id" :value="selectedDocumentId">

                                <div class="col-md-12 mb-3">
                                    <label for="file_id"
                                        class="form-label required">{{ trans('project_document.file_id') }}</label>
                                    <select2 v-model="createObj.file_id" name="file_id"
                                        data-dropdown-parent="#attachFileModal" data-allow-clear="true"
                                        @get-data="(data) => {createObj.name = data.text} "
                                        :ajax_options="{
                                            url: `{{ route('api.files.select2_list') }}`,
                                            delay: 300,
                                            dataMapper: res => res.data.map(item =>
                                                ({
                                                    id: item.file_id,
                                                    text: item.file_id + ' ' + item.name,
                                                })),
                                            cache: true,
                                        }">
                                    </select2>
                                    <div class="validate-error--text text-danger"
                                        v-if="attachFilevalidateErrors.file_id"
                                        v-for="err in attachFilevalidateErrors.file_id">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>

                                <div class="col-12 mb-3">
                                    <label for="note"
                                        class="form-label">{{ trans('project_document.note') }}</label>
                                    <ckeditor
                                        :vclass="[{ 'validate-error--input': attachFilevalidateErrors.note },
                                            'form-control'
                                        ]"
                                        v-model="createObj.note" name="note"></ckeditor>
                                    <div class="validate-error--text text-danger" v-if="attachFilevalidateErrors.note"
                                        v-for="err in attachFilevalidateErrors.note">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>

                            </div>

                        </div>
                        <div class="modal-footer justify-content-end gap-2 border-0 p-3 pt-0">
                            <div v-if="createLoading">
                                <div class="spinner-border">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>
                            <div class="btn btn-light" data-bs-dismiss="modal" aria-hidden="true">
                                {{ trans('label.cancel') }}
                            </div>
                            <button type="submit" class="btn btn-primary">
                                {{ trans('label.save') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<template id="item_document">

    <div class="rounded-1 hiring_project-comment pb-3" :style="{ backgroundColor: item.theme_color.str_val1 }">
        <div class="d-flex align-items-center p-3 pb-1 pe-4 ps-4">
            <input type="checkbox" class="gino-checkbox form-check-input mb-1 me-2" :checked="isSelected"
                @change="toggleSelect">
            <div class="text-secondary me-2 text-nowrap">
                <link-icon
                    :object="{
                        url: `/document/${item.uuid}/detail`,
                        name: item.id
                    }"></link-icon>
            </div>

            <div class="me-1">
                <span v-if="item.current_state" class="rounded-1 fs-1111 d-inline-block px-2 py-1 text-center"
                    :style="{
                        color: item.current_state?.color ?? '#85d6ff',
                        backgroundColor: item.current_state?.color ? item
                            .current_state?.color.trim() + '22' : '#85d6ff22'
                    }">
                    (( item.current_state?.name ))
                </span>
            </div>
            <button type="button" data-bs-toggle="collapse"
                :data-bs-target="'#collapseDocumentComment' + template_id + item.id" aria-expanded="true"
                aria-controls="collapseDocumentComment"
                class="gino-accordion-item__button flex-1 text-start text-black">
                <div>
                    <span>((item.name))</span>
                </div>
            </button>
            <div class="text-bondi-blue d-flex align-items-center ms-auto text-nowrap">
                <div class="input-group rounded-3 has-clear-btn-input-group me-2">
                    <span class="input-group-text border-end-0 bg-white" style="border-color: #ced4da"><i
                            class="ri-search-line" style="color: #878a99"></i></span>
                    <input type="text" class="form-control border-start-0 rounded-end-1 pe-3 ps-0"
                        v-model="search" @keyup="handleSearch" style="border-color: #ced4da;"
                        placeholder="{{ trans('label.search') }}">
                    <i class="bi bi-x fs-22 position-absolute clearSearchButton" @click="clearInput"
                        v-if="showClearSearch"></i>
                </div>
                <a class="action-btn me-2 rounded p-1" @click="bookMarkItem(item,item.id)">
                    <template v-if="item.bookmarked">
                        @include('icons.star_fill')
                    </template>
                    <template v-else>
                        @include('icons.star')
                    </template>
                </a>
                <div class="d-flex comment-color-picker dropdown-center action-btn me-2 rounded p-1">
                    <a href="javascript:void(0);" class="color-picker-dropdown-button" data-bs-toggle="dropdown"
                        data-bs-offset="0,10" aria-haspopup="true" aria-expanded="true"
                        :style="{ backgroundColor: item.theme_color.str_val3 }">
                    </a>
                    {{--  :style="{ backgroundColor: item.theme_color.str_val3 }" --}}
                    <div class="color-picker-dropdown dropdown-menu rounded-7" style="width:188px"
                        data-popper-placement="bottom-start">
                        <div class="color-picker-list">
                            <span class="color-picker-item flex-1" v-for="themeColor in commentThemeColor"
                                :style="{ backgroundColor: themeColor.str_val3 }"
                                @click="changeCommentThemeColor(themeColor)"></span>

                        </div>
                    </div>
                </div>
                {{-- --}}
                <a href="javascript:void(0);" class="text-bondi-blue me-2 text-nowrap" data-bs-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                    {{ trans('label.action') }} <i class="fas fa-caret-down button_icon"></i>
                </a>
                <div class="dropdown-menu rounded-7 overflow-unset" data-popper-placement="bottom-start">
                    <a href="javascript:void(0);" class="dropdown-item cursor" @click.stop data-bs-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="true">
                        <i class="fe fe-plus"></i>{{ trans('label.create') }}
                    </a>
                    <div class="dropdown-menu dropdown-menu-custome rounded-7" data-popper-placement="top">
                        <a class="dropdown-item cursor" data-bs-toggle="modal" data-bs-target="#uploadFileModal"
                            @click="$emit('open_add_file_modal', item.id)">
                            <i class="fe fe-plus button_icon"></i>{{ trans('file.new_from_upload') }}
                        </a>
                        <a class="dropdown-item cursor" data-bs-toggle="modal" data-bs-target="#addEtFileModal"
                            @click="$emit('open_add_file_modal', item.id)">
                            <i class="fe fe-plus button_icon"></i>{{ trans('file.new_from_template') }}
                        </a>
                        <a class="dropdown-item cursor" data-bs-toggle="modal" data-bs-target="#attachFileModal"
                            @click="$emit('open_add_file_modal', item.id)">
                            <i class="fe fe-plus button_icon"></i>{{ trans('project_document.attach_from_document') }}
                        </a>
                    </div>
                    <a href="javascript:void(0);" class="dropdown-item cursor" @click.stop data-bs-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="true">
                        <x-icons.download icon_class="d-inline-block"
                            :css="['margin-top' => '-2px']"></x-icons.download>{{ trans('project_document.zip') }}
                    </a>
                    <div class="dropdown-menu dropdown-menu-custome rounded-7" data-popper-placement="bottom-start">
                        <a class="dropdown-item" :href="`/group-document/`+item.id">
                            {{ trans('project_document.merge_file') }}
                        </a>
                        <a class="dropdown-item" :href="`/zip-document/`+item.id">
                            {{ trans('project_document.zip_file') }}
                        </a>
                    </div>
                    <a class="dropdown-item cursor" :href="`{{ asset('/document') }}/${item.uuid}/detail`">
                        @include('icons.eye'){{ trans('label.detail') }}
                    </a>
                    <a class="dropdown-item cursor" @click="deleteItem">
                        <x-icons.trash icon_class="d-inline-block"
                            :css="['margin-top' => '-2px']"></x-icons.trash>{{ trans('label.detail') }}
                    </a>
                </div>

                {{-- <div class="d-inline-flex me-3 gap-2">
                    <a class="action-btn rounded-3 p-1" style="width:39px;height:39px;"
                        @click="$emit('zip_document_file',item.id)">
                        <x-icons.download icon_class="d-inline-block mt-1"></x-icons.download>
                    </a>
                    <a class="action-btn rounded-3 p-1" style="width:39px;height:39px;"
                        :href="`{{ asset('/document') }}/${item.uuid}/detail`">
                        @include('icons.eye')</a>
                    <a class="action-btn rounded-3 p-1" style="width:39px;height:39px;" role="button"
                        @click="deleteItem">
                        @include('icons.trash')</a>
                </div> --}}
            </div>
            <div>
                (( formatJapaneseDate(item.created_at) ))
            </div>
        </div>

        <div :id="'collapseDocumentComment' + template_id + item.id"
            class="accordion-collapse show editable-content text-bondi-blue text-break collapse px-4">
            <div>
                <div class="pb-3">
                    <span v-html="item.note">
                    </span>
                </div>
                <div class="border-top">
                    <div class="table-responsive gino-custom-table-2 pb-0 pt-0">
                        <table class="mb-0 table text-nowrap">
                            <thead>
                                <tr>
                                    <th @click="sortSelect('select')" role='button' style="width: 1px"
                                        class="col_checkbox px-4">
                                        <input type="checkbox"
                                            :class="[{ 'gino-checkbox--checked2': selectAll == 2 },
                                                'gino-checkbox form-check-input'
                                            ]"
                                            v-model="selectAll" :checked="selectAll" @click.stop>
                                        <i v-if="sortBy == 'select'"
                                            v-bind:class="sortDirection == 'desc' ? 
                                    'fas fa-chevron-down' : 'fas fa-chevron-up'"></i>
                                    </th>
                                    <th style="width:1px">
                                        <div>{{ trans('label.action') }}</div>
                                    </th>
                                    <th @click="sort('file_id')" role='button' class="col_id text-center">
                                        {{ trans('file.id') }}
                                        <i v-if="sortBy == 'file_id'"
                                            v-bind:class="sortDirection == 'desc' ? 
                                    'fas fa-chevron-down' : 'fas fa-chevron-up'"></i>
                                    </th>

                                    <th @click="sort('status')" role='button'>
                                        {{ trans('file.status') }}
                                        <i v-if="sortBy == 'status'"
                                            v-bind:class="sortDirection == 'desc' ? 
                                    'fas fa-chevron-down' : 'fas fa-chevron-up'"></i>
                                    </th>

                                    <th @click="sort('name')" role='button'>
                                        {{ trans('file.name') }}
                                        <i v-if="sortBy == 'name'"
                                            v-bind:class="sortDirection == 'desc' ? 
                                    'fas fa-chevron-down' : 'fas fa-chevron-up'"></i>
                                    </th>
                                    <th @click="sort('priority')" role='button'>
                                        {{ trans('file.priority') }}
                                        <i v-if="sortBy == 'priority'"
                                            v-bind:class="sortDirection == 'desc' ? 
                                    'fas fa-chevron-down' : 'fas fa-chevron-up'"></i>
                                    </th>
                                    <th @click="sort('progress')" role='button'>
                                        {{ trans('file.progress') }}
                                        <i v-if="sortBy == 'progress'"
                                            v-bind:class="sortDirection == 'desc' ? 
                                    'fas fa-chevron-down' : 'fas fa-chevron-up'"></i>
                                    </th>

                                    <th @click="sort('updated_at')" role='button'>
                                        {{ trans('project_document.updated_at') }}
                                        <i v-if="sortBy == 'updated_at'"
                                            v-bind:class="sortDirection == 'desc' ? 
                                'fas fa-chevron-down' : 'fas fa-chevron-up'"></i>
                                    </th>
                                    <th @click="sort('updated_by_id')" role='button'>
                                        {{ trans('project_document.updated_by_id') }}
                                        <i v-if="sortBy == 'updated_by_id'"
                                            v-bind:class="sortDirection == 'desc' ? 
                                'fas fa-chevron-down' : 'fas fa-chevron-up'"></i>
                                    </th>

                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="item in list" :key="item.file_id">

                                    <td scope="col" class="px-4">
                                        <input type="checkbox" class="gino-checkbox form-check-input"
                                            v-model="selected" :value="item.file_id">
                                    </td>
                                    <td>
                                        <div class="hstack me-2 gap-2">
                                            <div>
                                                <a href="javascript:void(0);"
                                                    class="option-dots action-btn rounded p-1"
                                                    data-bs-toggle="dropdown" aria-haspopup="true"
                                                    aria-expanded="false">
                                                    @include('icons.ellipsis')
                                                </a>
                                                <div class="dropdown-menu rounded-7 overflow-unset">
                                                    <a style="justify-content: flex-start;align-items: center;display: flex;width: 100%;gap: 5px;"
                                                        :href="item.detail_url" class="dropdown-item"
                                                        title="{{ trans('label.copy') }}">
                                                        @include('icons.eye')
                                                        {{ trans('label.view') }}
                                                    </a>
                                                    <a style="justify-content: flex-start;align-items: center;display: flex;width: 100%;gap: 5px;"
                                                        :href="`{{ asset('/file/download') }}/` + item.file_id"
                                                        class="dropdown-item" title="{{ trans('label.download') }}"
                                                        v-if="item.is_uploadfile">
                                                        @include('icons.download')
                                                        {{ trans('label.download') }}
                                                    </a>
                                                    <div v-else-if="item?.file_template?.form_name"
                                                        class="dropdown-item p-0" @click.stop>
                                                        <form_export
                                                            :file_template_id="item?.file_template?.file_template_id"
                                                            :file_id="item?.file_id"
                                                            title="{{ trans('label.export') }}">
                                                        </form_export>
                                                    </div>
                                                    <a style="justify-content: flex-start;align-items: center;display: flex;width: 100%;gap: 5px;"
                                                        @click="detachFile( item.file_id )" class="dropdown-item"
                                                        title="{{ trans('label.delete') }}" role="button">
                                                        <div class="d-flex align-items-center">
                                                            <div style="margin-bottom:-3px" class="me-1">
                                                                @include('icons.trash')
                                                            </div>
                                                            {{ trans('label.delete') }}
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        ((item.file_id))
                                    </td>
                                    <td>
                                        <span class="rounded-1 fs-1111 px-2 py-1" v-if="item.current_state"
                                            :style="{
                                                color: item.current_state?.color ?? '#85d6ff',
                                                backgroundColor: item.current_state?.color ? item.current_state?.color
                                                    ?.trim() + '22' : '#85d6ff22'
                                            }">
                                            (( item.current_state?.name ))
                                        </span>
                                    </td>
                                    <td>
                                        <div>(( item.name ))</div>
                                        <list_chat_aside :items="item.chats" :comment="item"
                                            template_id="'file_chat_'+item.id" table_name="file">
                                        </list_chat_aside>
                                    </td>
                                    <td>
                                        <span class="priority-status-indicator" v-if="item.priority">
                                            <span class="dot"
                                                :style="{
                                                    backgroundColor: item.priority_color
                                                }"></span>
                                            (( item.priority_name ))
                                        </span>
                                    </td>
                                    <td>
                                        <span v-if="item.progress_formatted">
                                            ((item.progress_formatted))
                                        </span>
                                    </td>
                                    <td>(( formatJapaneseDate(item.updated_at) ))</td>
                                    <td class="pe-5">
                                        <div class="align-items-center d-flex" v-if="item.updater">
                                            <img :src="item.updater?.avatar_url" v-if="item.updater?.avatar_url"
                                                class="table-user-avatar" height="32" :alt="item.updater?.name"
                                                style="object-fit: cover;
                                                    min-width: 32px;">
                                            <span>
                                                <div>(( item.updater?.name ))</div>
                                                <small class="text-gray"><i>((item.updater?.email))</i></small>
                                            </span>
                                        </div>
                                    </td>
                                </tr>
                                <tr v-if="loading">
                                    <td colspan="100%" class="text-center">
                                        <div class="spinner-border">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr v-if="list?.length < 1 && !loading">
                                    <td colspan="100%" class="text-center">{{ trans('label.no_record') }}</td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="d-flex border-bottom mb-2 gap-5 pb-3 pt-2">
                    <div>
                        <div class="text-gray-8 fs-12 lh-lg mb-1"> {{ trans('label.id') }}
                        </div>
                        <div class="d-flex align-items-center text-nowrap">
                            <link-icon
                                :object="{
                                    url: `/document/${item.uuid}/detail`,
                                    name: item.id
                                }"></link-icon>
                        </div>
                    </div>
                    <div>
                        <div class="text-gray-8 fs-12 lh-lg mb-1">
                            {{ trans('project_document.document_template') }}
                        </div>
                        <div class="d-flex flex-column text-left">
                            <div class="d-block"><span>((item?.document_template?.name))</span></div>
                        </div>
                    </div>
                    <div>
                        <div class="text-gray-8 fs-12 lh-lg mb-1">
                            {{ trans('project_document.type') }}
                        </div>
                        <div class="d-flex flex-column text-left">
                            ((item.type_name))
                        </div>
                    </div>

                    <div>
                        <div class="text-gray-8 fs-12 lh-lg mb-1"> {{ trans('project_document.updated_at') }}
                        </div>
                        <div class="d-flex align-items-center"><strong>(( formatJapaneseDate(item.updated_at)
                                ))</strong></div>
                    </div>
                    <div>
                        <div class="text-gray-8 fs-12 lh-lg mb-1"> {{ trans('project_document.updated_by_id') }}
                        </div>
                        <div class="d-flex align-items-center"><strong>((item.updater?.name))</strong></div>
                    </div>
                    <div>
                        <div class="text-gray-8 fs-12 lh-lg mb-1"> {{ trans('project_document.created_at') }}
                        </div>
                        <div class="d-flex align-items-center"><strong>(( formatJapaneseDate(item.created_at)
                                ))</strong></div>
                    </div>
                    <div>
                        <div class="text-gray-8 fs-12 lh-lg mb-1"> {{ trans('project_document.created_by_id') }}
                        </div>
                        <div class="d-flex align-items-center"><strong>((item.creator?.name))</strong></div>
                    </div>
                </div>
            </div>
            <list_chat key="document" :items="item.chats" :comment="item" template_id="document"
                table_name="document"></list_chat>
            {{-- @include('includes.pagination') --}}
        </div>

        <div class="modal fade gino-modal" :id="'addFileModal' + item.id" tabindex="-1" role="dialog"
            :aria-labelledby="'addFileModalLabel' + item.id" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content custom-modal-content">
                    <div class="modal-header bg-light border-0 p-3">
                        <h6 class="modal-title" :id="'addFileModalLabel' + item.id">
                            {{ trans('trainee.new_hiring_project_candidate_dialog') }}
                        </h6>
                        <button type="button" class="btn-close btn-close-black" data-bs-dismiss="modal"
                            aria-label="{{ trans('label.close') }}"><span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form @submit.prevent="addFile('#addFile' + item.id)" :ref="'addFile' + item.id"
                        :id="'addFile' + item.id" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="modal-body p-20">
                            <div class="row">

                                <input type="hidden" name="project_type" value="{{ $project_type }}">
                                <input type="hidden" name="table_record_id" value="{{ $id }}">
                                <input type="hidden" name="document_id" :value="item.id">


                                <div class="col-md-12 mb-3">
                                    <label for="file_template_id"
                                        class="form-label required">{{ trans('project_document.file_template_id') }}</label>
                                    <select2 v-model="createObj.file_template_id" name="file_template_id"
                                        :data-dropdown-parent="'#addFileModal' + item.id" data-allow-clear="true"
                                        :ajax_options="{
                                            url: `{{ route('api.file_templates.select2_list') }}`,
                                            delay: 300,
                                            dataMapper: res => res.data.map(item =>
                                                ({
                                                    id: item.file_template_id,
                                                    text: item.name,
                                                    subtext: item.file_set_name,
                                                })),
                                            templateResult: 'userTemplate',
                                            cache: true,
                                        }">
                                    </select2>
                                    <div class="validate-error--text text-danger"
                                        v-if="validateErrors.file_template_id"
                                        v-for="err in validateErrors.file_template_id">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>

                                <div class="col-12 mb-3">
                                    <label for="name"
                                        class="form-label">{{ trans('project_document.name') }}</label>
                                    <input type="text"
                                        :class="[{ 'validate-error--input': validateErrors.name }, 'form-control']"
                                        v-model="createObj.name" name="name">
                                    <div class="validate-error--text text-danger" v-if="validateErrors.name"
                                        v-for="err in validateErrors.name">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>

                                <div class="col-12 mb-3">
                                    <label for="note"
                                        class="form-label">{{ trans('project_document.note') }}</label>
                                    <ckeditor
                                        :vclass="[{ 'validate-error--input': validateErrors.note },
                                            'form-control'
                                        ]"
                                        v-model="createObj.note" name="note"></ckeditor>
                                    <div class="validate-error--text text-danger" v-if="validateErrors.note"
                                        v-for="err in validateErrors.note">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="modal-footer justify-content-end gap-2 border-0 p-3 pt-0">
                            <div v-if="createLoading">
                                <div class="spinner-border">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>
                            <div class="btn btn-light" data-bs-dismiss="modal" aria-hidden="true">
                                {{ trans('label.cancel') }}
                            </div>

                            <button type="submit" class="btn btn-primary">
                                {{ trans('label.save') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>


<script id="list_document_js">
    Vue.component('list_document', {
        template: '#list_document',
        delimiters: ["((", "))"],
        created() {
            EventBus.$on('reload_list_document', (msg = null) => {
                if (msg) console.log(msg);
                this.list = []
                this.onLoadPagination()
            });
        },
        props: {
            count_data: {
                type: Object,
                default: () => {}
            },
        },
        data() {
            return {
                sortDirection: 'desc',
                sortBy: '',
                count: 0, //total page
                page: 1, //pagination: curent page
                perPage: "{{ $default_records_per_page }}", // pagination: records per page
                total: 0, //pagination: total records
                pageRange: 3, // pagination:controls nearby page display. currenpage counted
                from: 1,
                to: 10,
                list: [],
                listPage: [],
                showCount: 10,
                search: '',
                previewUrl: "{{ $model->logo_url }}",
                selectedObject: {},
                addChatValidateErrors: {},
                validateErrors: {},
                createInterviewObj: {},
                createObj: {},
                createObjUploadedFile: {
                    name: '',
                },
                validateErrors: {},
                createLoading: false,
                viewType: 'list',
                action: 'edit',
                loading: false,
                showClearSearch: false,
                selected: [],
                showed: [],
                attributes: [],
                customer_staff_id: null,
                zipFile: {},
                exporting: false,
                loadSelect2: false,
                selectedDocumentId: null,
                addFileFromTemplateValidateErrors: {},
                uploadFileValidateErrors: {},
                attachFilevalidateErrors: {},
                uploadedFileObj: {
                    name: ''
                }
            };
        },
        mounted() {
            const that = this;

            this.onLoadPagination();
        },
        computed: {
            selectAll: {
                get: function() {
                    if (!this.list || this.selected.length == 0) return 0
                    if (this.selected.length == this.list.length) return 1
                    if (this.selected.length != this.list.length) return 2
                },
                set: function(value) {
                    this.selected = value ? this.list.map((row) => row.id) : [];
                }
            }
        },
        methods: {
            updateSelected(id, isSelected) {
                if (isSelected) {
                    // Thêm ID vào mảng nếu được chọn
                    this.selected.push(id);
                } else {
                    // Loại bỏ ID khỏi mảng nếu bỏ chọn
                    this.selected = this.selected.filter(selectedId => selectedId !== id);
                }
            },
            openAddFileModal(id) {
                console.log(id);
                this.selectedDocumentId = id;
            },
            zipFileEmit(id) {
                url = `{{ asset('/document') }}/${id}/zip-file`;
                this.zipFileFunction(url)
            },
            async zipFileFunction(route) {
                let that = this;
                this.exporting = true
                $('#downloadZipFileModal').modal({
                    backdrop: false,
                    keyboard: false
                }).modal('show');
                await jQuery.ajax({
                    type: 'GET',
                    url: route,
                    success: function(data) {
                        console.log(data.result);

                        // notifier.success("{{ trans('label.create_success') }}")
                        that.zipFile = JSON.parse(JSON.stringify(data.result));
                        that.exporting = false
                    },
                    error: function(data) {
                        $('.modal').modal('hide')
                        that.validateErrors = data.responseJSON.errors
                        notifier.alert(data.responseJSON.message);
                        that.exporting = false
                    }
                });
                await setTimeout(() => {}, 500);
                this.exporting = false
            },
            onPerPageChange(perPage) {
                this.page = 1;
                this.perPage = perPage;
                this.onLoadPagination();
            },
            onPageChange(_p) {
                this.page = _p;
                this.onLoadPagination();
            },
            onPrePage() {
                if (this.page > 1) {
                    this.page = this.page - 1;
                }
                this.onLoadPagination();
            },
            onNextPage() {
                if (this.page < this.count) {
                    this.page = this.page + 1;
                }
                this.onLoadPagination();
            },
            handleSearch() {
                this.loading = true
                this.list = []
                if (this.search !== '') this.showClearSearch = true
                else this.showClearSearch = false;

                if (this.searchTimeout) clearTimeout(this.searchTimeout)
                this.searchTimeout = setTimeout(() => {
                    this.searchFunction();
                }, 400);
            },
            searchFunction() {
                this.page = 1
                this.onLoadPagination();
            },
            clearInput() {
                this.search = ''
                this.list = []
                this.showClearSearch = false
                this.onLoadPagination();
            },
            resetSearch() {
                Object.assign(this.filterObj, {
                    status: []
                })
                this.onLoadPagination();
            },
            previewImage(event) {
                const file = event.target.files[0];
                if (file) {
                    this.previewUrl = URL.createObjectURL(file)
                }
            },
            searchFunction() {
                this.page = 1
                this.onLoadPagination();
            },
            async onLoadPagination() {
                const that = this;
                that.list = []
                that.loading = true
                let conditionSearch = '?page=' + that.page;
                conditionSearch += '&perPage=' + that.perPage;
                conditionSearch += '&showcount=' + that.showCount;
                conditionSearch += '&project_type={{ $project_type }}';
                conditionSearch += '&project_id={{ $model->id }}';
                conditionSearch += '&s=' + encodeURIComponent(that.search);
                that.conditionSearch = conditionSearch;

                await jQuery.ajax({
                    type: 'GET',
                    data: that.filterObj,
                    dataType: 'json',
                    url: "{{ route('api.et_project_document.list') }}" + that.conditionSearch,
                    success: function(data) {
                        that.list = data?.result?.data;
                        that.count = data.result.last_page;
                        that.from = data.result.from;
                        that.to = data.result.to;
                        that.total = data.result.total;
                        that.count_data.document = that.total
                        let pageArr = [];
                        if (that.page - 2 > 0) {
                            pageArr.push(that.page - 2);
                        }
                        if (that.page - 1 > 0) {
                            pageArr.push(that.page - 1);
                        }
                        pageArr.push(that.page);
                        if (that.page + 1 <= that.count) {
                            pageArr.push(that.page + 1);
                        }
                        if (that.page + 2 <= that.count) {
                            pageArr.push(that.page + 2);
                        }
                        that.listPage = pageArr;
                        that.loading = false
                    },
                    error: function(xhr, textStatus, error) {
                        notifier.warning('システムエラーが発生しました。 大変お手数ですが、サイト管理者までご連絡ください');
                        that.loading = false
                    }
                });
            },
            resetCreateObj() {
                this.createObj = {}
            },
            /* create project_document */
            async createProjectDocumentFormSubmit() {

                if (this.createLoading) return;
                let that = this;
                this.createLoading = true
                const form = $('#createProjectDocumentForm');
                const formData = new FormData(form[0]);
                await jQuery.ajax({
                    type: 'POST',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    url: "{{ route('et_project_document.create') }}",
                    success: function(data) {
                        that.createLoading = false
                        let element = notifier.success(data.message);
                        customizeNotification(element, notifier);
                        resetForm(form[0])
                        $('.modal').modal('hide');
                        that.onLoadPagination();
                        that.validateErrors = {}
                        that.resetCreateObj()
                    },
                    error: function(data) {
                        that.createLoading = false
                        that.validateErrors = data.responseJSON.errors
                        customizeNotification(notifier.alert(
                                "{{ trans('label.can_not_save') }}"),
                            notifier);

                    }
                });
            },
            /* attach document có sẵn */
            async attachProjectDocumentFormSubmit() {

                if (this.createLoading) return;
                let that = this;
                this.createLoading = true
                const form = $('#attachProjectDocumentForm');
                const formData = new FormData(form[0]);
                await jQuery.ajax({
                    type: 'POST',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    url: "{{ route('et_project_document.attachProjectDocument') }}",
                    success: function(data) {
                        that.createLoading = false
                        let element = notifier.success(data.message);
                        customizeNotification(element, notifier);
                        resetForm(form[0])
                        $('.modal').modal('hide');
                        that.onLoadPagination();
                        that.validateErrors = {}
                        that.resetCreateObj()
                    },
                    error: function(data) {
                        that.createLoading = false
                        that.validateErrors = data.responseJSON.errors
                        customizeNotification(notifier.alert(
                                "{{ trans('label.can_not_save') }}"),
                            notifier);

                    }
                });
            },
            handleFileChange(event) {
                const file = event.target.files[0]; // Lấy file đầu tiên
                if (file) {
                    this.createObjUploadedFile.name = file.name // Bỏ phần mở rộng
                } else {
                    this.createObjUploadedFile.name = "";
                }
            },
            async createDocumentFromUploadedFile() {
                let that = this;
                this.createLoading = true
                const form = $('#createDocumentFromUploadedFileForm');
                const formData = new FormData(form[0]);
                await jQuery.ajax({
                    type: 'POST',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    url: "{{ route('et_project_document.createDocumentFromUploadedFile', $model->customer_id) }}",
                    success: function(data) {
                        notifier.success("{{ trans('label.create_success') }}");
                        that.createLoading = false
                        // form[0].reset()
                        resetForm(form[0]);
                        $('.modal').modal('hide');
                        that.onLoadPagination()
                        that.createObjUploadedFile = {
                            name: '',
                        }

                    },
                    error: function(data) {
                        that.createLoading = false
                        that.validateErrors = data.responseJSON.errors
                        notifier.alert(data.responseJSON.message);
                    }
                });
            },

            /* START --------------------tạo et file cho document -------------------- */
            handleUploadFileChange(event) {
                const file = event.target.files[0]; // Lấy file đầu tiên
                if (file) {
                    this.uploadedFileObj.name = file.name // Bỏ phần mở rộng
                } else {
                    this.uploadedFileObj.name = "";
                }
            },
            async createEtFileFormSubmit() {
                if (this.createLoading) return;
                let that = this;
                this.createLoading = true
                const form = $('#createEtFileForm');
                const formData = new FormData(form[0]);
                await jQuery.ajax({
                    type: 'POST',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    url: "{{ route('view.file.create_document_file') }}/" + that
                        .selectedDocumentId,
                    success: function(data) {
                        that.createLoading = false
                        let element = notifier.success(data.message);
                        customizeNotification(element, notifier);
                        that.previewUrl = "{{ asset('assets/images/multi-user.jpg') }}";
                        resetForm(form[0])
                        $('.modal').modal('hide');
                        that.createEtFileValidateErrors = {}
                        that.createObj = {}
                        console.log('itemDoc' + that.selectedDocumentId)
                        let refName = 'itemDoc' + that.selectedDocumentId
                        that.$refs[refName][0]?.onLoadPagination();
                    },
                    error: function(data) {
                        that.createLoading = false
                        that.createEtFileValidateErrors = data.responseJSON.errors
                        customizeNotification(notifier.alert(
                                "{{ trans('label.can_not_save') }}"),
                            notifier);

                    }
                });
            },

            async uploadFileFormSubmit() {
                if (this.createLoading) return;
                let that = this;
                this.createLoading = true
                const form = $('#uploadFileForm');
                const formData = new FormData(form[0]);
                await jQuery.ajax({
                    type: 'POST',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    url: "{{ route('view.file.create_document_file_upload') }}/" + that
                        .selectedDocumentId,
                    success: function(data) {
                        that.createLoading = false
                        let element = notifier.success(data.message);
                        customizeNotification(element, notifier);
                        that.previewUrl = "{{ asset('assets/images/multi-user.jpg') }}";
                        resetForm(form[0])
                        $('.modal').modal('hide');
                        that.uploadFileValidateErrors = {
                            name: ''
                        }
                        let refName = 'itemDoc' + that.selectedDocumentId
                        that.$refs[refName][0]?.onLoadPagination();
                    },
                    error: function(data) {
                        that.createLoading = false
                        that.uploadFileValidateErrors = data.responseJSON.errors
                        customizeNotification(notifier.alert(
                                "{{ trans('label.can_not_save') }}"),
                            notifier);

                    }
                });
            },
            async attachFileFormSubmit() {

                if (this.createLoading) return;
                let that = this;
                this.createLoading = true
                const form = $('#attachFileForm');
                const formData = new FormData(form[0]);
                await jQuery.ajax({
                    type: 'POST',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    url: "{{ route('et_project_document.attachFile') }}",
                    success: function(data) {
                        that.createLoading = false
                        let element = notifier.success(data.message);
                        customizeNotification(element, notifier);
                        resetForm(form[0])
                        $('.modal').modal('hide');
                        that.attachFilevalidateErrors = {}
                        that.resetCreateObj()
                        let refName = 'itemDoc' + that.selectedDocumentId
                        that.$refs[refName][0]?.onLoadPagination();
                    },
                    error: function(data) {
                        that.createLoading = false
                        that.attachFilevalidateErrors = data.responseJSON.errors
                        customizeNotification(notifier.alert(
                                "{{ trans('label.can_not_save') }}"),
                            notifier);

                    }
                });
            },
            /* END --------------------tạo et file cho document -------------------- */

            async bulkDelete() {
                let that = this;

                if (that.selected.length <= 0) {
                    notifier.alert("{{ trans('label.choosing_item') }}")
                    return;
                }

                const result = await Swal.fire({
                    title: "{{ trans('label.are_you_sure') }}",
                    html: "{{ trans('label.cant_revert') }}" + "{!! '<br>' !!}" +
                        that.selected,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#ffffff',
                    confirmButtonText: "{{ trans('label.yes_delete_it') }}",
                    cancelButtonText: "{{ trans('label.cancel') }}"
                });
                if (result.isConfirmed) {
                    that.createLoading = true
                    await jQuery.ajax({
                        type: 'DELETE',
                        data: {
                            _method: 'DELETE',
                            ids: that.selected
                        },
                        url: "{{ route('view.project_document.bulk_delete') }}",
                        success: function(data) {
                            notifier.success("{{ trans('label.delete_success') }}");
                            that.onLoadPagination();
                            that.selected = [];
                        },
                        error: function(data) {
                            notifier.alert(data.responseJSON.message);
                            /* notifier.alert(data.responseJSON.message); */
                        }
                    });
                    that.createLoading = false
                }
            },
        },
    });


    Vue.component('item_document', {
        template: `#item_document`,
        delimiters: ["((", "))"],
        props: {
            item: {
                type: Object,
                required: true
            },
            template_id: {
                type: String,
                required: true
            },
            doc_selected: {
                type: Array,
            }
        },
        data() {
            return {
                sortDirection: 'desc',
                sortBy: '',
                count: 0, //total page
                page: 1, //pagination: curent page
                perPage: "{{ $default_records_per_page }}", // pagination: records per page
                total: 0, //pagination: total records
                pageRange: 3, // pagination:controls nearby page display. currenpage counted
                from: 1,
                to: 10,
                list: [],
                listPage: [],
                showCount: 10,
                search: '',
                selectedObject: {},
                addChatValidateErrors: {},
                validateErrors: {},
                updateValidateErrors: {},
                createLoading: false,
                viewType: 'list',
                action: 'edit',
                loading: false,
                showClearSearch: false,
                createObj: {},
                selected: [],
                showed: [],
                attributes: [],
                customer_staff_id: null,
                modalTitle: '',
                modalLoading: true,
                commentThemeColor: @json($commentThemeColor),
                listCandidateRemain: [],
            };
        },
        mounted() {
            const that = this;
            that.selectedObject = {
                delete_file: 0,
                ...that.item
            }
            that.onLoadPagination()

        },
        computed: {
            isSelected() {
                return this.doc_selected.includes(this.item.id);
            },
            selectAll: {
                get: function() {
                    if (!this.list || this.selected.length == 0) return 0
                    if (this.selected.length == this.list.length) return 1
                    if (this.selected.length != this.list.length) return 2
                },
                set: function(value) {
                    this.selected = value ? this.list.map((row) => row.id) : [];
                }
            }
        },
        methods: {
            toggleSelect(event) {
                this.$emit('update-selected', this.item.id, event.target.checked);
            },
            sortSelect: function(s) {
                if (s === this.sortBy) {
                    this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
                }
                this.sortBy = s;
                this.list.sort((p1, p2) => {
                    let modifier = 1;
                    if (this.sortDirection === 'asc') modifier = -1;
                    let indexA = this.selected.indexOf(p1.template_id);
                    let indexB = this.selected.indexOf(p2.template_id);
                    // Nếu id không có trong selected thì cho nó giá trị lớn để nó được đẩy về sau
                    if (indexA === -1) indexA = Infinity;
                    if (indexB === -1) indexB = Infinity;

                    return (indexA - indexB) * modifier;
                });
            },
            sortTime: function(s) {
                if (s === this.sortBy) {
                    this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
                }
                this.sortBy = s;
                this.list = this.list.sort((p1, p2) => {
                    let modifier = this.sortDirection === 'asc' ? 1 : -1;

                    const time1 = p1[this.sortBy].split(':').map(num => parseInt(num));
                    const time2 = p2[this.sortBy].split(':').map(num => parseInt(num));

                    if (time1[0] < time2[0]) return -1 * modifier;
                    if (time1[0] > time2[0]) return 1 * modifier;
                    if (time1[1] < time2[1]) return -1 * modifier;
                    if (time1[1] > time2[1]) return 1 * modifier;
                    return 0;
                });
            },
            sort: function(s) {
                if (s === this.sortBy) {
                    this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
                }
                this.sortBy = s;
                this.list = this.list.sort((p1, p2) => {
                    let modifier = 1;
                    if (this.sortDirection === 'desc') modifier = -1;

                    if (p1[this.sortBy] == undefined && p2[this.sortBy] != undefined) return -1 *
                        modifier;
                    if (p1[this.sortBy] != undefined && p2[this.sortBy] == undefined) return 1 *
                        modifier;
                    if (p1[this.sortBy] == undefined && p2[this.sortBy] == undefined) return 0;

                    if (p1[this.sortBy].length == 0 && p2[this.sortBy].length > 0) return -1 *
                        modifier;
                    if (p1[this.sortBy].length > 0 && p2[this.sortBy].length == 0) return 1 *
                        modifier;
                    if (p1[this.sortBy].length == 0 && p2[this.sortBy].length == 0) return 0;

                    if (!Number.isNaN(parseInt(p1[this.sortBy])) && !Number.isNaN(parseInt(p2[this
                            .sortBy]))) {
                        if (p1[this.sortBy].indexOf && p2[this.sortBy].indexOf && p1[this.sortBy]
                            .indexOf("-") == -1 && p2[this.sortBy].indexOf("-") == -1) {
                            return (p1[this.sortBy] - p2[this.sortBy]) * modifier;
                        }
                    }

                    if (p1[this.sortBy] < p2[this.sortBy]) return -1 * modifier;
                    if (p1[this.sortBy] > p2[this.sortBy]) return 1 * modifier;
                    return 0;
                });
            },

            handleSearch() {
                this.loading = true
                this.list = []
                if (this.search !== '') this.showClearSearch = true
                else this.showClearSearch = false;

                if (this.searchTimeout) clearTimeout(this.searchTimeout)
                this.searchTimeout = setTimeout(() => {
                    this.searchFunction();
                }, 400);
            },
            searchFunction() {
                this.page = 1
                this.onLoadPagination();
            },
            clearInput() {
                this.search = ''
                this.list = []
                this.showClearSearch = false
                this.onLoadPagination();
            },
            resetSearch() {
                Object.assign(this.filterObj, {
                    status: []
                })
                this.onLoadPagination();
            },

            onPerPageChange(perPage) {
                this.page = 1;
                this.perPage = perPage;
                this.onLoadPagination();
            },
            onPageChange(_p) {
                this.page = _p;
                this.onLoadPagination();
            },
            onPrePage() {
                if (this.page > 1) {
                    this.page = this.page - 1;
                }
                this.onLoadPagination();
            },
            onNextPage() {
                if (this.page < this.count) {
                    this.page = this.page + 1;
                }
                this.onLoadPagination();
            },
            deleteFile() {
                this.selectedObject.delete_file = 1
            },
            openUpdateModal(id) {
                this.modalLoading = false
                setTimeout(() => {
                    $(id).modal({
                        backdrop: false,
                        keyboard: false
                    }).modal('show');
                }, 100);
            },
            toggleEdit(obj, id) {
                obj.isEditing = !obj.isEditing;
            },
            saveRecord(obj, id, formId) {

                this.selectedObject.id = obj.id
                this.updateFile(formId)
                obj.isEditing = false
            },
            onLoadPagination() {
                this.loading = true
                this.list = []
                const that = this;
                let conditionSearch = '?page=' + this.page;
                // conditionSearch += '&perPage=' + this.perPage;
                conditionSearch += '&perPage=0';
                conditionSearch += '&showcount=' + this.showCount;
                conditionSearch += '&document_id=' + this.item.id;
                conditionSearch += '&s=' + encodeURIComponent(this.search);
                this.conditionSearch = conditionSearch;

                jQuery.ajax({
                    type: 'GET',
                    url: "{{ route('api.project_doc_certificate.et_file') }}" +
                        conditionSearch,
                    dataType: 'json',
                    data: that.filterObj,
                    success: function(data) {
                        that.list = data.result.data;
                        that.count = data.result.last_page;
                        that.from = data.result.from;
                        that.to = data.result.to;
                        that.total = data.result.total;

                        let pageArr = [];
                        if (that.page - 2 > 0) {
                            pageArr.push(that.page - 2);
                        }
                        if (that.page - 1 > 0) {
                            pageArr.push(that.page - 1);
                        }
                        pageArr.push(that.page);
                        if (that.page + 1 <= that.count) {
                            pageArr.push(that.page + 1);
                        }
                        if (that.page + 2 <= that.count) {
                            pageArr.push(that.page + 2);
                        }
                        that.listPage = pageArr;
                        that.loading = false
                    },
                    error: function(xhr, textStatus, error) {
                        notifier.warning('システムエラーが発生しました。 大変お手数ですが、サイト管理者までご連絡ください');
                        that.loading = false
                    }

                });

            },
            changeCommentThemeColor(themeColor) {
                that = this

                if (that.item.theme_color_id == themeColor.key3) return;
                that.item.theme_color = themeColor;
                that.item.theme_color_id = themeColor.key3;

                jQuery.ajax({
                    type: 'POST',
                    data: {
                        'theme_color_id': themeColor.key3,
                    },
                    url: "{{ route('view.project_document.update_theme_color') }}/" +
                        that.item.id,
                    success: function(data) {},
                    error: function(data) {}
                });
            },
            async deleteItem() {
                const result = await Swal.fire({
                    title: "{{ trans('label.are_you_sure') }}",
                    html: "{{ trans('label.cant_revert') }}",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#ffffff',
                    confirmButtonText: "{{ trans('label.yes_delete_it') }}",
                    cancelButtonText: "{{ trans('label.cancel') }}"
                });
                if (result.isConfirmed) {
                    that = this
                    that.createLoading = true
                    jQuery.ajax({
                        type: 'DELETE',
                        url: "{{ route('et_project_document.delete') }}/" +
                            that.item?.id,
                        success: function(data) {
                            EventBus.$emit('reload_list_document')
                            EventBus.$emit('reload_list_activity')
                            notifier.success("{{ trans('label.delete_success') }}");
                        },
                        error: function(data) {
                            notifier.alert(data.responseJSON.message);
                        }
                    });
                    that.createLoading = false
                }
            },

            deleteDocumentComment(id) {
                Swal.fire({
                    title: "{{ trans('label.are_you_sure') }}",
                    text: "{{ trans('label.cant_revert') }}",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#ffffff',
                    confirmButtonText: "{{ trans('label.yes_delete_it') }}",
                    cancelButtonText: "{{ trans('label.cancel') }}"
                }).then((result) => {
                    if (result.isConfirmed) {
                        console.log('#formDeleteDocumentComment_' + id);
                        $('#formDeleteDocumentComment_' + id).submit();
                    }
                })
            },

            async addFile(formID) {
                let that = this;
                this.createLoading = true
                const form = $(formID);
                const formData = new FormData(form[0]);

                await jQuery.ajax({
                    type: 'POST',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    url: "{{ route('view.file.create_document_file') }}/" + that.item.id,
                    success: function(data) {
                        that.createLoading = false
                        let element = notifier.success(data.message);
                        customizeNotification(element, notifier);
                        that.previewUrl = "{{ asset('assets/images/multi-user.jpg') }}";
                        resetForm(form[0])
                        $('.modal').modal('hide');
                        that.onLoadPagination();
                        that.validateErrors = {}
                    },
                    error: function(data) {
                        that.createLoading = false
                        that.validateErrors = data.responseJSON.errors
                        customizeNotification(notifier.alert(
                                "{{ trans('label.can_not_save') }}"),
                            notifier);
                    }
                });
                that.createLoading = false
            },

            async detachFile(file_id) {

                const that = this;
                const result = await Swal.fire({
                    title: "{{ trans('label.are_you_sure') }}",
                    html: "{{ trans('label.cant_revert') }}",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#ffffff',
                    confirmButtonText: "{{ trans('label.yes_delete_it') }}",
                    cancelButtonText: "{{ trans('label.cancel') }}"
                });
                if (result.isConfirmed) {
                    that.createLoading = true
                    jQuery.ajax({
                        type: 'DELETE',
                        url: "{{ route('view.file.delete_document_file') }}/" + file_id,
                        success: function(data) {
                            EventBus.$emit('reload_list_document')
                            EventBus.$emit('reload_list_activity')
                            notifier.success("{{ trans('label.delete_success') }}");
                        },
                        error: function(data) {
                            notifier.alert(data.responseJSON.message);
                        }
                    });
                    that.createLoading = false
                }
            },
            bookMarkItem(item, id) {
                let that = this
                if (that.bookmarking) {
                    /*  notifier.warning('{{ trans('label.too_fast') }}'); */
                } else {
                    that.bookmarking = true
                    jQuery.ajax({
                        method: 'GET',
                        data: {
                            project_type: 'document',
                        },
                        url: "{{ route('api.bookmarks.bookmark_item') }}/" + id,
                        success: function(data) {
                            that.bookmarking = false
                            item.bookmarked = data.result
                            customizeNotification(notifier.success(
                                    "{{ trans('label.update_success') }}"),
                                notifier);
                        },
                        error: function(xhr, textStatus, error) {
                            customizeNotification(notifier.error(
                                    "{{ trans('label.can_not_save') }}"),
                                notifier);

                            that.bookmarking = false
                        }
                    });
                }
            },
        },
    });
</script>