@php
    $mail_type = App\Models\EmGeneralPurpose::where('key1', 'pre_project_comment')->where('key2', 'mail_type')->get();
@endphp

<template id="list_email">

    <div>
        <div class="d-flex  flex-nowrap  mb-3 action-bar">
            <div class="d-flex overflow-x-auto w-100">
                <div class="ms-auto d-flex mb-1">
                    {{-- filter bookmarked --}}
                    <div class="me-2 d-flex align-items-center justify-content-center min-w-120 text-nowrap">
                        <div class="form-check form-switch d-flex align-items-center gap-2 mt-1">
                            <input class="form-check-input mb-1" type="checkbox" role="switch"
                                v-model="filterObj.bookmarked_only" @change="searchFunction"
                                id="email_check_hide_bookmarked">
                            <label class="form-check-label lh-md" for="email_check_hide_bookmarked">
                                {{ trans('label.bookmark_show') }}
                            </label>

                        </div>
                    </div>
                    {{-- end filter bookmarked --}}
                    <div class="input-group rounded-3 has-clear-btn-input-group me-2">
                        <span class="input-group-text bg-white border-end-0" style="border-color: #ced4da"><i
                                class="ri-search-line" style="color: #878a99"></i></span>
                        <input type="text" class="form-control border-start-0  ps-0 pe-3 rounded-end-1 "
                            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="btn text-black bg-white border rounded-3 text-nowrap" data-bs-toggle="modal"
                        @click="EventBus.$emit('reset_create')" data-bs-target="#addActivityEmailModal">
                        <i class="fe fe-plus button_icon"></i>{{ trans('activity.new_comment_email') }}
                    </a>
                    <sort_order_manager :scolumns="columns" @sort-order-changed="sortOrder"></sort_order_manager>
                    <select class="btn btn-light bg-white text-start rounded-3 collapse-all-btn ms-2 me-2"
                        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>

                    {{-- dropdown rec per page --}}
                    @include('includes.pagination-dropdown')
                    {{-- end dropdown rec per page --}}
                </div>

            </div>
        </div>
        <div class="position-relative table-wrapper bg-white rounded-1 mb-3" v-for="item in list">
            <item_email :item="item" template_id="list_email"></item_email>
        </div>

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

        @include('includes.pagination')
    </div>

</template>

<template id="item_email">

    <div class="pb-3 rounded-1 document-project-comment" :style="{ backgroundColor: item.theme_color.str_val1 }">
        <div class="p-3 pb-1  ps-4 pe-4 d-flex align-items-center">
            <button type="button" data-bs-toggle="collapse"
                :data-bs-target="'#collapseActivityComment' + template_id + item.id" aria-expanded="true"
                aria-controls="collapseActivityComment" class=" gino-accordion-item__button text-black flex-1 ">
                <div>
                    <img :src="item.creator.avatar_url" class="rounded-circle border" width="32" height="32"
                        style="object-fit: cover">
                    <span>
                        <strong> ((item.creator.name)) </strong> さんによる記録された<strong>((item.mail_type_name))</strong>
                    </span>
                </div>
            </button>
            <div class="chat-count text-secondary">
                <i class="bi bi-chat-right-dots-fill  pr-2"></i>
                <small>(( item.chats_count))</small>
            </div>
            <div class="text-bondi-blue text-nowrap ms-auto d-flex align-items-center">
                <a class="action-btn rounded p-1 me-2" @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 me-2 comment-color-picker dropdown-center action-btn 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="flex-1 color-picker-item" v-for="themeColor in commentThemeColor"
                                :style="{ backgroundColor: themeColor.str_val3 }"
                                @click="changeCommentThemeColor(themeColor)"></span>

                        </div>
                    </div>
                </div>
                <div class="d-inline-flex me-2 gap-2">
                    <a class="action-btn rounded p-1"
                        @click="openUpdateModal('#updateActivityCommentModal' + template_id + item.id)">
                        @include('icons.pen')</a>

                </div>
                <a href="javascript:void(0);" class=" pe-3 text-nowrap text-bondi-blue" 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" data-popper-placement="bottom-start">
                    <a class="dropdown-item d-flex align-items-center gap-2" href="javascript:void(0);"
                        @click="createTask">
                        <i class="bi bi-check"></i> {{ trans('activity.create_todo') }}
                    </a>
                    <a class="dropdown-item d-flex align-items-center gap-2" href="javascript:void(0);"
                        @click="EventBus.$emit('copy_comment',item,2)" data-bs-toggle="modal"
                        data-bs-target="#addActivityEmailModal">
                        @include('icons.copy'){{ trans('label.copy') }}
                    </a>
                    <a class="dropdown-item d-flex align-items-center gap-2" href="javascript:void(0);"
                        @click="deleteItem">
                        @include('icons.trash'){{ trans('label.delete') }}
                    </a>
                </div>
                <small class="text-secondary">(( formatJapaneseDate(item.created_at) ))</small>
            </div>
        </div>
        <div :id="'collapseActivityComment' + template_id + item.id"
            class="accordion-collapse collapse show px-4  editable-content text-bondi-blue text-break">
            <div>

                <div class="d-flex gap-5 pb-2 mt-2 border-bottom">
                    <template v-if="item.mail_type == 1">
                        <div>
                            <div class="text-gray-8 fs-12 mb-1 lh-lg"> {{ trans('activity.email_from') }}
                            </div>
                            <div class="d-flex align-items-center">((item.email_from))</div>
                        </div>
                        <div>
                            <div class="text-gray-8 fs-12 mb-1 lh-lg"> {{ trans('activity.email_to') }}</div>
                            <div class="d-flex align-items-center gap-2" v-if="item.email_to"></i>((item.email_to))
                            </div>
                        </div>
                        <div>
                            <div class="text-gray-8 fs-12 mb-1 lh-lg"> {{ trans('activity.email_cc') }}</div>
                            <div class="d-flex align-items-center gap-2" v-if="item.email_cc">((item.email_cc))</div>
                        </div>
                    </template>
                    <div>
                        <div class="text-gray-8 fs-12 mb-1 lh-lg"> {{ trans('activity.subject') }}</div>
                        <div class="d-flex align-items-center gap-2">((item.subject))</div>
                    </div>
                </div>
                {{--   <div :class="[{ 'd-none': item.isEditing }, 'mb-3']">
                    <span v-html="item.content" class=" text-black"></span>
                </div> --}}
                <div v-if="!item.isEditing" class="mb-2 mt-2">
                    <span @click="toggleEdit(item,'content'+ template_id + item.id)" v-html="item.content"
                        class="editable-span text-black"></span>

                </div>
                <div v-if="item.isEditing" class="mb-2">
                    <form @submit.prevent="" :ref="'updateActivityCommentForm2' + template_id + item.id"
                        :id="'updateActivityCommentForm2' + template_id + item.id" method="post"
                        enctype="multipart/form-data">
                        <ckeditor name="content" v-model="selectedObject.content" class="content"></ckeditor>
                        <div @click="saveRecord(item ,'content' + template_id + item.id,'#updateActivityCommentForm2' + template_id + item.id)"
                            class="btn btn-primary btn-sm mt-3">
                            {{ trans('label.save') }}
                        </div>
                        <div class="btn btn-light btn-sm mt-3"
                            @click="toggleEdit(item, 'content' + template_id + item.id)">
                            {{ trans('label.cancel') }}
                        </div>

                    </form>
                </div>
                <div class="d-flex gap-5 border-top py-2 mb-2 border-bottom">
                    <div>
                        <div class="text-gray-8 fs-12 mb-1 lh-lg"> {{ trans('activity.date') }}</div>
                        <div class="d-flex align-items-center gap-2" v-if="item.date"><i
                                class="ri-calendar-line"></i>((item.date))</div>
                    </div>
                    <div>
                        <div class="text-gray-8 fs-12 mb-1 lh-lg"> {{ trans('activity.time') }}</div>
                        <div class="d-flex align-items-center gap-2" v-if="item.time"><i
                                class="ri-time-line"></i>((item.time))</div>
                    </div>
                    <div>
                        <div class="text-gray-8 fs-12 mb-1 lh-lg"> {{ trans('activity.file') }}</div>
                        <div class="d-flex align-items-center gap-2" v-if="item.files">
                            <file-list :list="item.files" @file_deleted="deleteFile">
                            </file-list>
                        </div>
                    </div>

                </div>
            </div>
            <list_chat :chats_count="item.chats_count" :key="template_id" :comment="item"
                :template_id="template_id" table_name="activity"></list_chat>
        </div>

        <!-- Modal -->
        <div class="modal fade gino-modal" v-if="!modalLoading"
            :id="'updateActivityCommentModal' + template_id + item.id" tabindex="-1" role="dialog"
            aria-hidden="true">
            <div class="modal-dialog " role="document">
                <div class="modal-content custom-modal-content">
                    <div class="modal-header border-0  bg-light p-3">
                        <h6 class="modal-title">
                            (( modalTitle ))
                        </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="updateActivityComment('#updateActivityCommentForm' + template_id + item.id)"
                        :ref="'updateActivityCommentForm' + template_id + item.id"
                        :id="'updateActivityCommentForm' + template_id + item.id" method="post"
                        enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="modal-body p-20">
                            <div class="row">

                                <div class="col-md-12 mb-3">
                                    <label for="mail_type" class="form-label">{{ trans('activity.type') }}</label>
                                    <select
                                        :class="[{ 'validate-error--input': updateValidateErrors.mail_type }, 'form-control']"
                                        :disabled="action == 'view'" v-model="selectedObject.mail_type"
                                        name="mail_type">
                                        @foreach ($mail_type as $key => $item)
                                            <option value="{{ $item->key3 }}">
                                                {{ $item->str_val1 }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <div class="validate-error--text text-danger"
                                        v-if="updateValidateErrors.mail_type"
                                        v-for="err in updateValidateErrors.mail_type">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>


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

                                <div class="col-md-6 mb-3">
                                    <label for="time" class="form-label">{{ trans('activity.time') }}</label>
                                    <input type="time" v-model="selectedObject.time"
                                        :class="[{ 'validate-error--input': validateErrors.time }, 'form-control']"
                                        name="time">
                                    <div class="validate-error--text text-danger" v-if="validateErrors.time"
                                        v-for="err in validateErrors.time">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>
                                <template v-if="selectedObject.mail_type != 1">
                                </template>
                                <template v-else>
                                    <div class="col-md-6 mb-3">
                                        <label for="email_from"
                                            class="form-label">{{ trans('activity.email_from') }}</label>
                                        <input type="email"
                                            :class="[{ 'validate-error--input': validateErrors.email_from }, 'form-control']"
                                            v-model="selectedObject.email_from" name="email_from">
                                        <div class="validate-error--text text-danger" v-if="validateErrors.email_from"
                                            v-for="err in validateErrors.email_from">
                                            <small>
                                                (( err ))
                                            </small>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="email_to"
                                            class="form-label">{{ trans('activity.email_to') }}</label>
                                        <input type="text"
                                            :class="[{ 'validate-error--input': validateErrors.email_to }, 'form-control']"
                                            v-model="selectedObject.email_to" name="email_to">
                                        <div class="validate-error--text text-danger" v-if="validateErrors.email_to"
                                            v-for="err in validateErrors.email_to">
                                            <small>
                                                (( err ))
                                            </small>
                                        </div>
                                    </div>
                                    <div class="col-md-12 mb-3">
                                        <label for="email_cc"
                                            class="form-label">{{ trans('activity.email_cc') }}</label>
                                        <input type="text"
                                            :class="[{ 'validate-error--input': validateErrors.email_cc }, 'form-control']"
                                            v-model="selectedObject.email_cc" name="email_cc">
                                        <div class="validate-error--text text-danger" v-if="validateErrors.email_cc"
                                            v-for="err in validateErrors.email_cc">
                                            <small>
                                                (( err ))
                                            </small>
                                        </div>
                                    </div>
                                </template>

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

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

                                <div class="col-sm-12 mb-3">
                                    <label for="file" class="form-label">{{ trans('activity.file') }}</label>
                                    <file-list :list="item.files" @file_deleted="deleteFile">
                                    </file-list>

                                    <input type="file"
                                        :class="[{ 'validate-error--input': updateValidateErrors.files }, 'form-control']"
                                        name="files[]" multiple>
                                    <div class="validate-error--text text-danger" v-if="updateValidateErrors.files"
                                        v-for="err in updateValidateErrors.files">
                                        <small>
                                            (( err ))
                                        </small>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="modal-footer border-0 p-3 pt-0 gap-2 justify-content-end" v-if="action !='view'">
                            <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_email_js">
    $(document).ready(function() {
        $('.gino-modal').modal({
            backdrop: false,
            keyboard: false
        });
    });
    Vue.component('list_email', {
        template: '#list_email',
        delimiters: ["((", "))"],
        created() {
            EventBus.$on('reload_list_email', (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: [],
                conditionSearch: '',
                search: '',
                columns: [{
                        id: 1,
                        key3: "updated_at",
                        str_val1: "{{ trans('label.updated_at') }}",
                        num_val1: 1, // có áp dụng sort hay không
                        num_val2: 0, // asc or desc
                    },
                    {
                        id: 2,
                        key3: "created_at",
                        str_val1: "{{ trans('label.created_at') }}",
                        num_val1: 1, // có áp dụng sort hay không
                        num_val2: 0, // asc or desc
                    },
                ],
                filterObj: {},
                selectedObject: {},
                listPage: [],
                showCount: 10,
                addChatValidateErrors: {},
                validateErrors: {},
                updateValidateErrors: {},
                createLoading: false,
                viewType: 'list',
                action: 'edit',
                loading: false,
                showClearSearch: false,
                selected: [],
                showed: [],
                attributes: [],
                customer_staff_id: null,
            };
        },
        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: {
            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();
            },
            previewImage(event) {
                const file = event.target.files[0];
                if (file) {
                    this.previewUrl = URL.createObjectURL(file)
                }
            },
            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();
            },
            searchFunction() {
                this.page = 1
                this.onLoadPagination();
            },
            sortOrder() {
                this.onLoadPagination();
            },
            onLoadPagination() {
                const that = this;

                let columns = this.columns.map((item) => {
                    if (item.num_val1) {
                        return {
                            column: item.key3,
                            num_val1: item.num_val1,
                            sort_order: item.num_val2 ? 'asc' : 'desc',
                            label: item.str_val1
                        }
                    }
                })

                this.loading = true
                this.list = []
                let conditionSearch = '?page=' + this.page;
                conditionSearch += '&perPage=' + this.perPage;
                conditionSearch += '&showcount=' + this.showCount;
                conditionSearch += '&type=2';
                conditionSearch += '&project_type={{ $project_type }}';
                conditionSearch += '&table_record_id={{ $id }}';
                conditionSearch += '&sortOrder=' + JSON.stringify(columns);
                conditionSearch += '&s=' + encodeURIComponent(this.search);
                this.conditionSearch = conditionSearch;

                jQuery.ajax({
                    type: 'GET',
                    url: "{{ route('api.activities.list_comment', $id) }}" +
                        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;
                        that.count_data.email = 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
                    }

                });

            },
            openUpdateActivityEmailModal(obj, modalId, action = 'edit') {
                this.selectedObject = {
                    ...obj
                }
                //fix vue select2
                this.action = action
                $(modalId + " [name='customer_staff_id'")?.val(obj.customer_staff_id)
                $(modalId + " [name='customer_staff_id'")?.trigger('change')
                CKEDITOR.instances['update_comment_note']?.setData(obj.note);
            },

            async updateActivityEmail() {
                let that = this;
                this.createLoading = true
                const form = $('#updateActivityEmailForm');
                const formData = new FormData(form[0]);
                await jQuery.ajax({
                    type: 'POST',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    url: "{{ route('view.activity.update') }}/" +
                        that.selectedObject.id,
                    success: function(data) {
                        notifier.success("{{ trans('label.update_success') }}");
                        that.createLoading = false
                        resetForm(form[0])
                        that.$emit('emit-reload')
                        $('.modal').modal('hide');
                        that.onLoadPagination();
                    },
                    error: function(data) {
                        that.createLoading = false
                        that.validateErrors = data.responseJSON.errors
                        notifier.alert(data.responseJSON.message);
                    }
                });
            },
            async deleteActivityEmail(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('#formDeleteActivityEmail_' + id);
                        $('#formDeleteActivityEmail_' + id).submit();
                    }
                })
            },

        },
    });

    Vue.component('item_email', {
        template: `#item_email`,
        delimiters: ["((", "))"],
        props: {
            item: {
                type: Object,
                required: true
            },
            template_id: {
                type: String,
                required: true
            }
        },
        data() {
            return {
                selectedObject: {},
                addChatValidateErrors: {},
                validateErrors: {},
                updateValidateErrors: {},
                createLoading: false,
                viewType: 'list',
                action: 'edit',
                loading: false,
                showClearSearch: false,
                selected: [],
                showed: [],
                attributes: [],
                customer_staff_id: null,
                modalTitle: '',
                modalLoading: true,
                commentThemeColor: @json($commentThemeColor),
            };
        },
        mounted() {
            const that = this;

            switch (that.item.type) {
                case 2:
                    that.modalTitle =
                        "{{ trans('activity.update_email') }}";
                    break;
                case 3:
                    that.modalTitle =
                        "{{ trans('activity.update_call') }}";
                    break;
                case 4:
                    that.modalTitle =
                        "{{ trans('activity.update_task') }}";
                    break;
                case 5:
                    that.modalTitle =
                        "{{ trans('activity.update_meeting') }}";
                    break;
                default:
                    that.modalTitle =
                        "{{ trans('activity.update_note') }}";
            }

            that.selectedObject = {
                delete_file: 0,
                ...that.item
            }

        },
        computed: {},
        methods: {
            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: 'activity',
                        },
                        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
                        }
                    });
                }
            },
            deleteFile(id) {
                this.item.files.filter((file, index) => {
                    if (file.file_id == id) {
                        this.item.files.splice(index, 1);
                    }
                });
            },
            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.activity.update_theme_color') }}/" +
                        that.item.id,
                    success: function(data) {},
                    error: function(data) {}
                });
            },
            openUpdateModal(id) {
                this.selectedObject = {
                    delete_file: 0,
                    ...this.item
                }
                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.updateActivityComment(formId)
                obj.isEditing = false
            },
            async updateActivityComment(formId) {
                let that = this;
                that.createLoading = true
                const form = $(formId);
                const formData = new FormData(form[0]);
                formData.append('_method', 'PUT');
                await jQuery.ajax({
                    type: 'POST',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    url: "{{ route('view.activity.update') }}/" +
                        that.item.id,
                    success: function(data) {
                        that.createLoading = false
                        notifier.success("{{ trans('label.update_success') }}");
                        $('.modal').modal('hide');
                        if (that.template_id == 'list_activity') {
                            if (that.item.type == 2)
                                EventBus.$emit('reload_list_email')
                            if (that.item.type == 3)
                                EventBus.$emit('reload_list_call')
                            if (that.item.type == 4)
                                EventBus.$emit('reload_list_task')
                            if (that.item.type == 5)
                                EventBus.$emit('reload_list_meeting')
                        } else
                            EventBus.$emit('reload_list_activity')
                        $(`${formId} input[type="file"]`).val('');
                        that.item = {
                            delete_file: 0,
                            ...data.result
                        }
                        that.selectedObject = {
                            delete_file: 0,
                            ...data.result
                        }
                    },
                    error: function(data) {
                        that.createLoading = false
                        that.validateErrors = data.responseJSON.errors
                        notifier.alert(data.responseJSON.message);
                    }
                });
            },
            createTask() {
                let that = this
                jQuery.ajax({
                    type: 'POST',
                    url: "{{ route('view.activity.createTask') }}/" +
                        that.item.id,
                    success: function(data) {
                        console.log(data);

                        let element = notifier.success(
                            'ToDo リスト<a href="' + data.result.url + '">' +
                            data.result.task.task_id + '</a>を新規追加しました。'
                        );
                        customizeNotification(element);
                    },
                    error: function(data) {
                        that.validateErrors = data.responseJSON.errors
                        notifier.alert(data.responseJSON.message);
                    }
                });
            },
            async deleteActivityComment(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('#formDeleteActivityComment_' + id);
                        $('#formDeleteActivityComment_' + id).submit();
                    }
                })
            },
            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
                    await jQuery.ajax({
                        type: 'DELETE',
                        data: {
                            _method: 'DELETE',
                        },
                        url: "{{ route('view.activity.destroy') }}/" +
                            that?.item?.id,
                        success: function(data) {
                            EventBus.$emit('reload_list_email')
                            EventBus.$emit('reload_list_activity')
                            notifier.success("{{ trans('label.delete_success') }}");
                        },
                        error: function(data) {
                            notifier.alert(data.responseJSON.message);
                        }
                    });
                    that.createLoading = false
                }
            },
        },
    });
</script>