@extends('layout.v2.none-sidebar')

@section('title')
    LOA選択（一覧）
@endsection

@push('css')
    <link rel="stylesheet" href="/lme-ui/src/css/button/button.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/lme-ui/src/css/tooltip/tooltip.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/lme-ui/src/css/table/table.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/lme-ui/src/css/input/input.css?v={{config("sns-line.version")}}">
    <style>
        .pre-select-bot {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 35px;
            min-height: 100%;
            background-color: #F8F9FB;
        }
        .pre-select-bot__inner {
            display: flex;
            flex-direction: column;
            gap: 24px;
            align-items: center;
            width: calc(100% - 48px);
            max-width: 100%;
            flex: 1;
        }
        .pre-select-bot__title {
            font-family: 'Noto Sans JP', sans-serif;
            font-weight: 500;
            font-size: 24px;
            color: #222222;
        }
        .pre-select-bot__card {
            background: #FFFFFF;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            flex: 1;
            width: 100%;
        }
        .pre-select-bot__card-inner {
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding: 24px 24px 24px 48px;
            flex: 1;
        }
        .pre-select-bot__table-wrap {
            flex: 1;
            overflow: auto;
        }
        .pre-select-bot__add-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            height: 40px;
            border: 1px solid #D1D1D1;
            border-radius: 8px;
            background: #FFFFFF;
            cursor: pointer;
            font-family: 'Noto Sans JP', sans-serif;
            font-weight: 500;
            font-size: 16px;
            color: #1F1F1F;
            transition: background-color 0.15s;
        }
        .pre-select-bot__add-btn:hover {
            background-color: #F5F5F5;
        }

        /* Account cell */
        .cell-account {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .cell-account__avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        .cell-account__name {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #1677FF;
            font-size: 14px;
            cursor: pointer;
            max-width: 200px;
        }
        .cell-account__name:hover {
            text-decoration: underline;
        }
        .cell-account__badge {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 20px;
            height: 20px;
            border-radius: 9999px;
            background: #FF4D4F;
            color: #FFFFFF;
            font-size: 12px;
            padding: 0 4px;
        }

        /* Friend count cell */
        .cell-friends {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            text-align: right;
        }
        .cell-friends__count {
            font-size: 14px;
            color: #1F1F1F;
        }
        .cell-friends__change {
            font-size: 12px;
            width: 30px;
            text-align: right;
            font-weight: 400;
        }
        .cell-friends__change--up { color: #1677FF; }
        .cell-friends__change--down { color: #FF4D4F; }
        .cell-friends__change--zero { color: #9A9EAD; }

        /* URL cell */
        .cell-url {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .cell-url__text {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
            color: #1F1F1F;
        }
        .cell-url__copy {
            flex-shrink: 0;
            cursor: pointer;
            color: #1677FF;
        }
        .cell-url__copy:hover {
            opacity: 0.7;
        }

        /* Action button */
        .cell-action__btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 24px;
            padding: 0 12px;
            border-radius: 5px;
            font-family: 'Noto Sans JP', sans-serif;
            font-weight: 500;
            font-size: 14px;
            cursor: pointer;
            white-space: nowrap;
            border: 1px solid #1677FF;
            background: #FFFFFF;
            color: #1677FF;
            transition: all 0.15s;
        }
        .cell-action__btn:hover {
            background: #1677FF;
            color: #FFFFFF;
        }
        .cell-action__btn--active {
            background: #1677FF;
            color: #FFFFFF;
        }

        .cell-alert-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .alert-popover {
            position: fixed;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .alert-popover__body {
            background: #FFFFFF;
            border-radius: 6px;
            padding: 16px;
            box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }
        .alert-popover__text {
            font-size: 14px;
            color: #1F1F1F;
            line-height: 20px;
            white-space: nowrap;
            font-weight: 400;
        }
        .alert-popover__arrow {
            width: 13px;
            height: 5px;
            overflow: hidden;
        }
        .alert-popover__arrow::after {
            content: '';
            display: block;
            width: 9px;
            height: 9px;
            margin: -5px auto 0;
            background: #FFFFFF;
            transform: rotate(45deg);
            box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
        }
        .cell-star {
            cursor: pointer;
            font-size: 15px;
            color: #D1D1D1;
        }
        .cell-star.active {
            color: #FAAD14;
        }
        .cell-star:hover {
            color: #FAAD14;
        }
        .lme-popover-fade-enter-active,
        .lme-popover-fade-leave-active {
            transition: opacity 0.15s;
        }
        .lme-popover-fade-enter,
        .lme-popover-fade-leave-to {
            opacity: 0;
        }
        .lme-table .lme-table-row--error td { background-color: #FFF1F0; }
        .lme-table .lme-table-row--selected td { background-color: #F0F5FF; }
        .lme-table .lme-table-row--warning td { background-color: #FFFBE6; }
        .lme-table .badge {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #FF4D4F;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        .lme-table thead th {
            background: #F7F7F7 !important;
        }
        .lme-table thead th:first-child,.lme-table tr td:first-child {
            background: #FFFFFF !important;
            border-bottom: transparent !important;
        }
        .lme-table thead th:first-child:after {
            content: unset !important;
        }
        .text-center {
            width: 100%;
            display: block;
            text-align: center;
        }
    </style>
@endpush

@section('content')
<div id="pre-select-bot" v-cloak>
    {{-- Alert popover portal (teleported to body) --}}
    <div ref="alertPopoverPortal">
        <transition name="lme-popover-fade">
            <div v-if="alertPopover.visible" class="alert-popover" :style="alertPopover.style" @click.stop>
                <div class="alert-popover__body">
                    <p class="alert-popover__text">@{{ alertPopover.message }}</p>
                    <lme-button-default color="blue" size="sm" type="secondary" @click="goAlertLink">
                        @{{ alertPopover.linkText }}
                    </lme-button-default>
                </div>
                <div class="alert-popover__arrow"></div>
            </div>
        </transition>
    </div>

    <div class="pre-select-bot">
        <div class="pre-select-bot__inner">
            <p class="pre-select-bot__title">操作するアカウントをご選択ください</p>

            <div class="pre-select-bot__card">
                <div class="pre-select-bot__card-inner">
                    <div class="pre-select-bot__table-wrap">
                        <lme-table
                            :columns="columns"
                            :data-source="bots"
                            row-key="slot_id"
                            :selectable="false"
                            :fixed-right-count="1"
                            max-height="calc(100vh - 280px)"
                            :row-class-name="getRowClassName"
                            @sort-change="onSortChange"
                        >
{{--                             アラートアイコン column--}}
                            <template slot="cell-alertStatus" slot-scope="slotProps">
                                <div v-if="getAlertType(slotProps.record)" class="cell-alert-icon" @click.stop="toggleAlertPopover(slotProps.record, $event)">
                                    <lme-icon
                                        file_name="error-filled"
                                        size="16"
                                        :color="getAlertType(slotProps.record) === 'error' ? '#FF4D4F' : '#FAAD14'"
                                    ></lme-icon>
                                </div>
                            </template>

{{--                             お気に入り column--}}
                            <template slot="cell-favorite" slot-scope="slotProps">
                                <i class="cell-star"
                                   :class="slotProps.record.isFavorite ? 'fas fa-star active' : 'far fa-star'"
                                   @click.stop="toggleFavorite(slotProps.record)"></i>
                            </template>

{{--                             LINE公式アカウント column--}}
                            <template slot="cell-accountName" slot-scope="slotProps">
                                <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
                                    <div class="cell-account">
                                        <img onerror="altImageAvatar(this)" :src="slotProps.record.avatar || '/images/default-avatar.png'" class="cell-account__avatar" alt="">
                                        <lme-tooltip content="このアカウントを操作する">
                                            <span class="cell-account__name text-truncate" @click="selectBot(slotProps.record)">@{{ slotProps.record.accountName }}</span>
                                        </lme-tooltip>
                                    </div>
                                    <lme-tooltip content="未読チャット数" v-if="slotProps.record.count_user_unconfirm > 0">
                                        <span class="badge" v-if="slotProps.record.count_user_unconfirm > 99">+99</span>
                                        <span class="badge" v-else>@{{ slotProps.record.count_user_unconfirm }}</span>
                                    </lme-tooltip>
                                </div>

                            </template>

                            <template slot="cell-role" slot-scope="slotProps">
                                <span class="cell-role text-center">@{{ slotProps.record.role }}</span>
                            </template>

{{--                             総友だち数 column--}}
                            <template slot="cell-totalFriends" slot-scope="slotProps">
                                <div class="cell-friends">
                                    <span class="cell-friends__count">@{{ slotProps.record.count_friend | formatNumber }}人</span>
                                    <span class="cell-friends__change"
                                          :class="{
                                              'cell-friends__change--up': slotProps.record.friendChange > 0,
                                              'cell-friends__change--down': slotProps.record.friendChange < 0,
                                              'cell-friends__change--zero': slotProps.record.friendChange === 0
                                          }">
                                        @{{ slotProps.record.friendChange > 0 ? '+' + slotProps.record.friendChange : (slotProps.record.friendChange === 0 ? '±0' : slotProps.record.friendChange) }}
                                    </span>
                                </div>
                            </template>

                            <template slot="cell-lineId" slot-scope="slotProps">
                                <span class="cell-line-id text-center">@{{ slotProps.record.lineId }}</span>
                            </template>

{{--                             友だち追加URL column--}}
                            <template slot="cell-addFriendUrl" slot-scope="slotProps">
                                <div class="cell-url">
                                    <span class="cell-url__text">@{{ slotProps.record.addFriendUrl }}</span>
                                    <lme-tooltip content="コピー" position="top">
                                        <svg class="cell-url__copy" @click.stop="copyUrl(slotProps.record)" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                            <path d="M12.3746 16.8755H6.42105C6.35794 16.8755 6.29288 16.8635 6.22766 16.84H6.15375V16.8066C6.10252 16.7783 6.05994 16.7461 6.02415 16.7094L2.97754 13.6638C2.87111 13.5574 2.8125 13.4161 2.8125 13.2659V3.93773C2.8125 3.62732 3.06504 3.37478 3.37545 3.37478H12.3746C12.685 3.37478 12.9375 3.62732 12.9375 3.93773V16.3125C12.9375 16.6229 12.685 16.8755 12.3746 16.8755ZM4.07812 4.6404V12.4103H6.57394C6.96195 12.4103 7.27763 12.7255 7.27763 13.113V15.6098H11.6719V4.6404H4.07812ZM4.63905 13.5352L6.15274 15.0499V13.5352H4.63905ZM15.0465 14.6247H14.0624C13.9848 14.6247 13.9217 14.5615 13.9217 14.4839V2.39062H5.20301C5.12673 2.39062 5.06227 2.32617 5.06227 2.24989V1.26574C5.06227 1.18814 5.12541 1.125 5.20301 1.125H14.6253C14.9352 1.125 15.1873 1.37754 15.1873 1.68795V14.4839C15.1873 14.5615 15.1241 14.6247 15.0465 14.6247Z" fill="#1677FF"/>
                                        </svg>
                                    </lme-tooltip>
                                </div>
                            </template>

{{--                             操作 column (fixed right)--}}
                            <template slot="cell-actions" slot-scope="slotProps">
                                <span class="cell-action__btn"
{{--                                      :class="{ 'cell-action__btn--active': slotProps.record.isCurrentBot }" --}}
                                      @click="selectBot(slotProps.record)">
                                    このアカウントを操作
                                </span>
                            </template>
                        </lme-table>

                    </div>

                    {{-- Add bot button --}}
                    <a href="javascript:void(0)" @click="openPageAddBot()" class="pre-select-bot__add-btn">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10 4V16M4 10H16" stroke="#1F1F1F" stroke-width="1.4" stroke-linecap="round"/>
                        </svg>
                        LINE公式アカウントを追加
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script src="/lme-ui/src/js/button/lme-button.js?v={{config("sns-line.version")}}"></script>
<script src="/lme-ui/src/js/button/lme-button-flat.js?v={{config("sns-line.version")}}"></script>
<script src="/lme-ui/src/js/button/lme-button-ghost.js?v={{config("sns-line.version")}}"></script>
<script src="/lme-ui/src/js/button/lme-button-default.js?v={{config("sns-line.version")}}"></script>
<script src="/lme-ui/src/js/tooltip/lme-tooltip.js?v={{config("sns-line.version")}}"></script>
<script src="/lme-ui/src/js/icon/lme-icon.js?v={{config("sns-line.version")}}"></script>
<script src="/lme-ui/src/js/table/lme-table.js?v={{config("sns-line.version")}}"></script>
<script>
    Vue.filter('formatNumber', function(n) {
        if(!n){
            return 0;
        }
        n = n.toString();
        return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    });
    let isAddBotFree = '{{ $isAddBotFree }}';
    new Vue({
        el: '#pre-select-bot',
        data: {
            columns: [
                { key: 'alertStatus',  title: '',                  width: '24px' },
                { key: 'favorite',     title: '',                  width: '40px' },
                { key: 'accountName',  title: 'LINE公式アカウント', width: '298px', align: 'left'},
                { key: 'role',         title: '操作権限',           width: '104px', align: 'center' },
                { key: 'totalFriends', title: '総友だち数',         width: '141px', align: 'left' },
                { key: 'lineId',       title: 'LINE ID',           width: '104px', align: 'center' },
                { key: 'plan',         title: 'プラン',             width: '132px' },
                { key: 'addFriendUrl', title: '友だち追加URL',      width: '218px' },
                { key: 'actions',      title: '操作',               width: '200px' },
            ],
            bots: [],
            alertPopover: {
                visible: false,
                botId: null,
                message: '',
                link: '',
                linkText: '',
                style: {}
            },
            countSlotNoBot: 0
        },
        mounted() {
            this.loadItems();
            this._popoverPortal = this.$refs.alertPopoverPortal;
            document.body.appendChild(this._popoverPortal);
            document.addEventListener('click', this.hideAlertPopover);
        },
        beforeDestroy() {
            document.removeEventListener('click', this.hideAlertPopover);
            if (this._popoverPortal && this._popoverPortal.parentNode) {
                this._popoverPortal.parentNode.removeChild(this._popoverPortal);
            }
        },
        methods: {
            getAlertType: function(bot) {
                if (bot.is_connected != 1) return 'warning';

                if (bot.payment_method == 2 && bot.status == 1 &&
                    moment().isAfter(
                        moment(bot.expired_date_contract)
                            .add(1, 'day')
                            .subtract(30, 'days')
                    )
                ) {
                    return 'error';
                }

                return null;
            },
            openPageAddBot(){
                if (Number(isAddBotFree)) {
                    window.location.href = '/admin/bot-add-v2';
                    return;
                }

                if(this.countSlotNoBot && this.countSlotNoBot > 0) {
                    var b = confirm('エンタープライズに未接続枠がありますが アカウント追加を行いますか？');
                    if (b == 1) {
                        window.location.href = '/admin/bot-add';
                    }
                }else{
                    window.location.href = '/admin/bot-add';
                }
            },
            getRowClassName: function(record) {
                var alertType = this.getAlertType(record);
                if (alertType === 'error') return 'lme-table-row--error';
                if (alertType === 'warning') return 'lme-table-row--warning';
                return '';
            },
            toggleAlertPopover: function(bot, event) {
                if (this.alertPopover.visible && this.alertPopover.botId === bot.id) {
                    this.alertPopover.visible = false;
                    return;
                }
                var isError = this.getAlertType(bot) === 'error';
                var rect = event.currentTarget.getBoundingClientRect();

                this.alertPopover = {
                    visible: true,
                    botId: bot.id,
                    message: isError ? 'お支払い期日が近づいております' : '接続が切れております',
                    link: isError ? '/basic/detail-contract/' + bot.bot_contract_id : '/admin/setting-bot/' + bot.hashId,
                    linkText: isError ? 'お支払いページへ' : '接続設定へ',
                    style: {
                        position: 'fixed',
                        left: (rect.left + rect.width / 2) + 'px',
                        top: (rect.top - 8) + 'px',
                        transform: 'translateX(-50%) translateY(-100%)'
                    }
                };
            },
            hideAlertPopover: function() {
                this.alertPopover.visible = false;
            },
            goAlertLink: function() {
                if (this.alertPopover.link) {
                    window.location.href = this.alertPopover.link;
                }
            },
            selectBot: function(slotBot) {
                let self = this
                if (slotBot && slotBot.status == 3) {
                    if (slotBot.bot_contract_id) {
                        window.location.href = '/basic/point-settings/cancel/' + slotBot.bot_contract_id;
                        return;
                    }
                }

                let isBotInvite = !!slotBot.role_id;
                let botId = slotBot.id;

                $.LoadingOverlay('show');
                $.ajax({
                    type: "POST",
                    url: "/ajax/set-bot-invite",
                    data: {
                        isBotInvite: isBotInvite,
                        botId: botId
                    },
                    success: function (data) {
                        $.LoadingOverlay('hide');
                        window.location = self.renderUrl(slotBot);
                    },error: function(){
                        $.LoadingOverlay('hide');
                        window.location = '/admin/home';
                    }
                });
            },
            toggleFavorite: function(bot) {
                var self = this;
                $.ajax({
                    type: 'POST',
                    url: '/ajax/admin/favorite-bot',
                    data: { hash_id: bot.hashId },
                })
                .success(function(response) {
                    bot.isFavorite = response.is_favorite;
                })
                .fail(function(response) {})
                .always(function() {})
            },
            copyUrl: function(bot) {
                if (!bot.addFriendUrl) return;
                var tempInput = document.createElement('input');
                tempInput.value = bot.addFriendUrl;
                document.body.appendChild(tempInput);
                tempInput.select();
                document.execCommand('copy');
                document.body.removeChild(tempInput);

                toastSuccess('コピーしました')
            },
            onSortChange: function(sortInfo) {
                var key = sortInfo.key;
                var order = sortInfo.order;
                this.bots.sort(function(a, b) {
                    var valA = a[key] || '';
                    var valB = b[key] || '';
                    if (typeof valA === 'number') {
                        return order === 'asc' ? valA - valB : valB - valA;
                    }
                    return order === 'asc'
                        ? String(valA).localeCompare(String(valB))
                        : String(valB).localeCompare(String(valA));
                });
            },
            renderUrl(bot) {
                return '/basic/home/'+ bot.hashId
            },
            redirectBotDetail(bot) {
                window.location.href = '/admin/setting-bot/' + bot.hashId
            },
            loadItems() {
                let self = this;
                $.ajax({
                    type: 'GET',
                    url: '/ajax/admin/bots-for-user',
                }).done(function (response) {
                    self.bots = response.data;
                    self.countSlotNoBot = response.bot_unconnected?.length
                }).fail(function (a, b, c) {
                }).always(function (a, b) {
                    $.LoadingOverlay("hide");
                });
            }
        },
    });
</script>
@endpush