@extends('layout.v2.admin.main')

@section('title')
    データコピー
@endsection

@push('css')
    <link rel="stylesheet" href="/lme-ui/src/css/reset.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/lme-ui/src/css/base.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/lme-ui/src/css/button/button.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/modal/modal.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/lme-ui/src/css/tag/tag.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-backup/loading/loading.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/js/admin/backup/backup-processing.css?v={{config("sns-line.version")}}">
@endpush

@section('content')
    <div class="lme-content-wrapper" id="vue-element" v-cloak>
        <div class="backup-processing-wrapper">
            {{-- Logo --}}
            <div>
                <img src="/images/logo-lme.png" alt="L Message" height="32">
            </div>

            {{-- Content --}}
            <div class="backup-processing-content">
                {{-- Title --}}
                <div class="backup-processing-title-row">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.0003 22.5006C6.21042 22.5006 1.5 17.7902 1.5 12.0003C1.5 6.21042 6.21042 1.5 12.0003 1.5C17.7902 1.5 22.5006 6.21042 22.5006 12.0003C22.5006 17.7902 17.7902 22.5006 12.0003 22.5006ZM12.0003 3.28065C7.19227 3.28065 3.28065 7.19227 3.28065 12.0003C3.28065 16.8076 7.19227 20.7186 12.0003 20.7186C16.8076 20.7186 20.7186 16.8076 20.7186 12.0003C20.7186 7.19227 16.8076 3.28065 12.0003 3.28065Z" fill="#1F1F1F"/>
                        <path d="M11.9996 17.2503C11.3795 17.2503 10.875 16.7452 10.875 16.1244C10.875 15.5043 11.3795 14.9999 11.9996 14.9999C12.6204 14.9999 13.1255 15.5043 13.1255 16.1244C13.1255 16.7452 12.6204 17.2503 11.9996 17.2503ZM12.5625 13.5H11.4379C11.3345 13.5 11.2503 13.4158 11.2503 13.3124V6.93765C11.2503 6.83418 11.3345 6.75 11.4379 6.75H12.5625C12.666 6.75 12.7502 6.83418 12.7502 6.93765V13.3124C12.7502 13.4141 12.6642 13.5 12.5625 13.5Z" fill="#1F1F1F"/>
                    </svg>
                    <h2 class="backup-processing-title">データコピー登録中</h2>
                </div>

                {{-- Description --}}
                <div class="backup-processing-description">
                    <p style="margin: 0;">現在、データコピー作業を行なっております。コピー作業完了までエルメの操作はできません。</p>
                    <p style="margin: 0;">作業完了までは最大1時間程度かかる場合があります。</p>
                </div>

                {{-- Loading spinner + Progress --}}
                <div class="backup-processing-loader-section">
                    <div v-if="status == 0 || status == 1" class="backup-processing-spinner">
                        <lme-loading
                            :show="true"
                            :fixed="false"
                            :mask-enable="false"
                            color="#1677FF"
                            :width="7"
                            :size="70"></lme-loading>
                    </div>

                    <div class="backup-processing-progress-wrapper">
                        <div class="backup-processing-progress-track">
                            <div class="backup-processing-progress-bar" :style="{ width: progress + '%' }"></div>
                        </div>
                        <p class="backup-processing-progress-text">@{{ progress }}%</p>
                    </div>
                </div>

                {{-- Notice box --}}
                <div class="backup-processing-notice">
                    <div class="backup-processing-notice-header">
                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.00022 16.8755C4.65781 16.8755 1.125 13.3426 1.125 9.00022C1.125 4.65781 4.65781 1.125 9.00022 1.125C13.3426 1.125 16.8755 4.65781 16.8755 9.00022C16.8755 13.3426 13.3426 16.8755 9.00022 16.8755ZM9.00022 11.25C8.53461 11.25 8.1558 11.6283 8.1558 12.0934C8.1558 12.559 8.53461 12.9378 9.00022 12.9378C9.46529 12.9378 9.84364 12.559 9.84364 12.0934C9.84364 11.6283 9.46529 11.25 9.00022 11.25ZM8.57801 5.06261C8.50041 5.06261 8.43727 5.12575 8.43727 5.20335V9.98438C8.43727 10.062 8.50041 10.1251 8.57801 10.1251H9.42142C9.49903 10.1251 9.56216 10.062 9.56216 9.98438V5.20335C9.56216 5.12575 9.49903 5.06261 9.42142 5.06261H8.57801Z" fill="#FF4D4F"/>
                        </svg>
                        <span class="backup-processing-notice-title">注意事項</span>
                    </div>
                    <div class="backup-processing-notice-body">
                        <p>データコピー中は、コピー元・コピー先両方のエルメアカウントが最大1時間程度操作できなくなる可能性があります。</p>
                        <p>あいさつメッセージやステップ配信などエルメ上の設定は通常通り稼働いたしますのでご安心ください。</p>
                    </div>
                </div>
            </div>
        </div>

        <lme-modal v-model="openModalStatus" :mask-closable="false" :header="false" :width="696">
            <div class="backup-modal-container">
                <button class="backup-modal-close" @click="goToBackupList">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 1 0 5.7 7.11L10.59 12 5.7 16.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z" fill="#1F1F1F"/>
                    </svg>
                </button>

                <div class="backup-modal-header">
                    <div v-if="status === 2" class="lme-flex lme-flex-col lme-items-center" style="gap: 22px;">
                        <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M32.0008 60.0016C16.5611 60.0016 4 47.4405 4 32.0008C4 16.5611 16.5611 4 32.0008 4C47.4405 4 60.0016 16.5611 60.0016 32.0008C60.0016 47.4405 47.4405 60.0016 32.0008 60.0016ZM20.3116 29.5132C20.1203 29.5132 19.9538 29.615 19.8664 29.7854C19.779 29.9556 19.7934 30.1499 19.9048 30.3052L27.6988 41.1052C28.078 41.6337 28.6672 41.9368 29.3152 41.9368C29.9632 41.9368 30.5524 41.6337 30.9316 41.1052L44.0932 22.8568C44.205 22.701 44.2191 22.5056 44.1311 22.3341C44.0434 22.1632 43.8772 22.0612 43.6864 22.0612H40.756C40.1213 22.0612 39.5157 22.3721 39.136 22.8928L29.3116 36.5188L24.862 30.3448C24.4911 29.8241 23.8855 29.5132 23.242 29.5132H20.3116Z" fill="#52C41A"/>
                        </svg>
                        <span class="backup-modal-title">データコピーが完了しました</span>
                        <span class="backup-modal-title" style="font-size: 14px;line-height: 100%;font-weight: 400">以下のLINE公式アカウントにデータコピーされました。</span>
                    </div>
                    <div v-if="status === 3" class="lme-flex lme-flex-col lme-items-center" style="gap: 22px;">
                        <svg width="86" height="104" viewBox="0 0 86 104" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M76.9478 94.9562H18.1054L0 76.8693V4.52172C0 2.02347 2.02554 0 4.52634 0H72.4214C74.9222 0 76.9478 2.02347 76.9478 4.52172V94.9562Z" fill="#F5F5F7"/>
                            <path d="M18.1054 81.3916V94.9568L0 76.8699H13.579C16.0798 76.8699 18.1054 78.8933 18.1054 81.3916Z" fill="#C9CFD8"/>
                            <path d="M85.9998 88.1739C85.9998 79.4334 78.907 72.3479 70.1576 72.3479C61.4082 72.3479 54.3154 79.4334 54.3154 88.1739C54.3154 96.9144 61.4082 104 70.1576 104C78.907 104 85.9998 96.9144 85.9998 88.1739Z" fill="#FF4D4F"/>
                            <path d="M73.2741 88.0904L76.2841 85.0834C77.169 84.1994 77.169 82.7683 76.2841 81.8866C75.4015 81.0026 73.9689 81.0026 73.084 81.8866L70.074 84.8935L67.064 81.8866C66.1791 81.0026 64.7465 81.0026 63.8639 81.8866C62.979 82.7683 62.979 84.1994 63.8639 85.0834L66.8739 88.0904L63.8639 91.0973C62.979 91.9813 62.979 93.4124 63.8639 94.2942C64.7465 95.1782 66.1791 95.1782 67.064 94.2942L70.074 91.2872L73.084 94.2942C73.9689 95.1782 75.4015 95.1782 76.2841 94.2942C77.169 93.4124 77.169 91.9813 76.2841 91.0973L73.2741 88.0904Z" fill="#F5F5F7"/>
                            <path d="M30.0835 33.2505C30.9684 34.1345 32.3988 34.1345 33.2837 33.2505C34.1686 32.3665 34.1686 30.9377 33.2837 30.0537L30.3574 27.1304L33.2837 24.2071C34.1686 23.3231 34.1686 21.8942 33.2837 21.0102C32.3988 20.1262 30.9684 20.1262 30.0835 21.0102L27.1573 23.9335L24.231 21.0102C23.3461 20.1262 21.9158 20.1262 21.0309 21.0102C20.146 21.8942 20.146 23.3231 21.0309 24.2071L23.9571 27.1304L21.0309 30.0537C20.146 30.9377 20.146 32.3665 21.0309 33.2505C21.9158 34.1345 23.3461 34.1345 24.231 33.2505L27.1573 30.3272L30.0835 33.2505Z" fill="#DCE0E6"/>
                            <path d="M52.9892 27.1304L55.9155 24.2071C56.8004 23.3231 56.8004 21.8942 55.9155 21.0102C55.0306 20.1262 53.6003 20.1262 52.7154 21.0102L49.7891 23.9335L46.8628 21.0102C45.9779 20.1262 44.5476 20.1262 43.6627 21.0102C42.7778 21.8942 42.7778 23.3231 43.6627 24.2071L46.589 27.1304L43.6627 30.0537C42.7778 30.9377 42.7778 32.3665 43.6627 33.2505C44.5476 34.1345 45.9779 34.1345 46.8628 33.2505L49.7891 30.3272L52.7154 33.2505C53.6003 34.1345 55.0306 34.1345 55.9155 33.2505C56.8004 32.3665 56.8004 30.9377 55.9155 30.0537L52.9892 27.1304Z" fill="#DCE0E6"/>
                            <path d="M50.6318 45.3777C42.7922 42.2464 34.1582 42.2464 26.3185 45.3777C25.1575 45.8434 24.594 47.157 25.058 48.3168C25.5219 49.4744 26.8368 50.0396 28.0001 49.5761C34.7534 46.8767 42.1947 46.8767 48.9502 49.5761C50.1339 50.0464 51.4352 49.4586 51.8924 48.3168C52.3563 47.157 51.7928 45.8434 50.6318 45.3777Z" fill="#DCE0E6"/>
                        </svg>
                        <span class="backup-modal-title">データコピーが失敗しました</span>
                        <span class="backup-modal-title" style="font-size: 14px;line-height: 100%;font-weight: 400">以下のLINE公式アカウントのデータコピーが失敗となりました。</span>
                    </div>
                </div>

                <div class="backup-modal-body" :class="status === 3 ? 'backup-modal-body-error' : ''">
                    <div class="lme-flex lme-items-center" style="gap: 16px;">
                        <div class="backup-avatar">
                            @if($toBot && $toBot->bot_image)
                                <img class="lme-backup-img" src="{{$toBot->bot_image}}" alt="">
                            @else
                                <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M30.9376 31.992H28.8289C28.6721 31.992 28.5508 31.8741 28.5467 31.7179C28.4766 29.0065 27.3806 26.4559 25.4606 24.5359C23.4679 22.5432 20.8185 21.4458 18.0005 21.4458C15.1812 21.4458 12.5318 22.5432 10.5404 24.5359C8.61961 26.4567 7.52312 29.0074 7.453 31.7179C7.45025 31.8716 7.32691 31.992 7.1722 31.992H5.06215C4.98557 31.992 4.91404 31.9618 4.86073 31.9071C4.80758 31.8526 4.77938 31.7806 4.78135 31.7044C4.81649 30.0212 5.16533 28.3875 5.81815 26.8485C6.48658 25.2739 7.43996 23.8604 8.6518 22.6473C9.86267 21.4337 11.2762 20.4803 12.853 19.8136C12.8591 19.8108 12.865 19.8088 12.8708 19.8067C12.8794 19.8036 12.8876 19.8007 12.8962 19.7961C10.6324 18.1585 9.2809 15.5146 9.2809 12.7261C9.2809 7.91882 13.1925 4.00781 18.0005 4.00781C22.8078 4.00781 26.7188 7.91882 26.7188 12.7261C26.7188 15.5163 25.3678 18.1582 23.1049 19.7934C23.1118 19.7968 23.1186 19.7994 23.1258 19.8021C23.1329 19.8048 23.14 19.8075 23.1467 19.8109C24.7249 20.4803 26.1385 21.4337 27.3479 22.6446C28.5658 23.8611 29.5192 25.2745 30.1816 26.8458C30.8344 28.3842 31.1832 30.0188 31.2184 31.7044C31.2204 31.7806 31.1922 31.8526 31.139 31.9071C31.0857 31.9618 31.0142 31.992 30.9376 31.992ZM18.0005 6.67946C16.3852 6.67946 14.8668 7.30897 13.7251 8.45201C12.5829 9.59419 11.9539 11.1121 11.9539 12.7261C11.9539 14.341 12.5829 15.8594 13.7251 17.0016C14.8673 18.1437 16.3856 18.7728 18.0005 18.7728C19.6146 18.7728 21.1325 18.1437 22.2746 17.0016C23.4177 15.8599 24.0472 14.3415 24.0472 12.7261C24.0472 11.1116 23.4177 9.59371 22.2746 8.45201C21.133 7.30897 19.6151 6.67946 18.0005 6.67946Z" fill="#9A9EAD"/>
                                </svg>
                            @endif
                        </div>
                        @if($toBot)
                            <div>
                                <div class="lme-flex lme-items-center" style="gap: 16px;">
                                    <lme-tooltip ref="accountTooltip" :content="accountName" position="top">
                                        <span class="backup-modal-account-name lme-line-clamp-1" style="max-width: 200px;"
                                              ref="accountNameSpan"
                                              @mouseenter="checkTruncation">@{{ accountName }}</span>
                                    </lme-tooltip>
                                    <span v-if="status === 2" class="backup-modal-account-name-description">データコピー完了</span>
                                    <span v-if="status === 3" class="backup-modal-account-name-description-error">データコピー失敗</span>
                                </div>
                                <div class="lme-flex lme-items-center" style="gap: 16px;">
                                    <span class="backup-modal-account-id">LINE ID：{{ displayLineId($toBot->line_id, $toBot->premium_id) }}</span>
                                    <lme-tag text="コミュニケーションプラン" type="primary"></lme-tag>
                                    <lme-tag :text="totalFriendText" type="default"></lme-tag>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <div class="backup-modal-footer">
                    <lme-button-flat style="width: 96px;padding-inline: 0" size="lg" @click="goToBackupList">
                        <span>閉じる</span>
                    </lme-button-flat>
                </div>
            </div>
        </lme-modal>
    </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-default.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/modal/lme-modal.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/tag/lme-tag.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-backup/loading/lme-loading.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="/js/axios.min.js"></script>
    <script>
        let id = {{$id}};
        let currentProgress = {{$processing ?? 0}};
        let currentStatus = {{$status}};
        let totalFriend = "{{$totalFriend}}";
        let toBotPlan = "{{$toBotPlan}}";
        new Vue({
            el: '#vue-element',
            data: {
                openModalStatus: false,
                progress: currentProgress,
                status: currentStatus,
                intervalId: null,
                totalFriendText: "友だち数："+totalFriend,
                toBotPlan: toBotPlan,
                accountName: @json($toBot->view_name ?? '')
            },
            mounted: function(){
                if (this.progress >= 100 || this.status === 2 || this.status === 3) {
                    this.showModalStatus();
                } else {
                    this.intervalId = setInterval(this.updateProgress, 2000);
                }
            },
            methods: {
                updateProgress: async function(){
                    let self = this;
                    await axios.post("/basic/backup/check-processing",{ id: id }).then(response => {
                        let responseData = response.data;
                        self.progress = responseData.data.percent;
                        self.status = responseData.data.status;
                        if (self.progress >= 100 || self.status === 2 || self.status === 3) {
                            clearInterval(self.intervalId);
                            setTimeout(self.showModalStatus,500);
                        }
                    }).catch(error => {
                        console.log(error);
                    });
                },
                goToBackupList: function(){
                    window.location.href = "/basic/backup";
                },
                showModalStatus: function(){
                    this.openModalStatus = true;
                },
                checkTruncation: function () {
                    var self = this;
                    var spanRef = self.$refs.accountNameSpan;
                    var tooltipRef = self.$refs.accountTooltip;
                    if (!spanRef || !tooltipRef) return;
                    if (spanRef.scrollHeight <= spanRef.clientHeight) {
                        self.$nextTick(function () {
                            tooltipRef.hideTooltip();
                        });
                    }
                }
            }
        });
    </script>
@endpush