@extends('layout.admin.main')
@section('title', 'L Message（エルメ）へようこそ')
@push('css')

    <link rel="stylesheet" href="/css/tutorial_style.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/_assets/commons/css/lme_custom.css?v={{config("sns-line.version")}}" type="text/css">
@endpush

@section('content')
    <div class="row">
        <div id="botTutorial" class="" v-cloak>
            <div class="titleP">
                L Message（エルメ）へようこそ
            </div>
            <div class="content-setting">
                <div class="text-center pp-temp">最初のおすすめ４ステップ！</div>
                <div class="text-center pp-temp-s">L Message（エルメ）の設定を完了しましょう！</div>
                <div class="steps">
                    <div class="step " :class="tutorial.status_template == 1 ? 'completed' : ''">
                        <div class="icon">
                            <svg class="icon_complete_s" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect width="24" height="24" rx="12" fill="#23814D"/>
                                <path d="M18.25 6.969H17.158C17.0825 6.96916 17.008 6.98643 16.9401 7.01951C16.8722 7.05259 16.8127 7.10062 16.766 7.16L10.325 15.321L7.235 11.407C7.18833 11.3476 7.12881 11.2996 7.06092 11.2665C6.99303 11.2334 6.91852 11.2162 6.843 11.216H5.75C5.72679 11.216 5.70403 11.2225 5.68428 11.2347C5.66454 11.2469 5.64858 11.2643 5.6382 11.2851C5.62782 11.3059 5.62342 11.3291 5.62551 11.3522C5.62759 11.3753 5.63607 11.3974 5.65 11.416L9.932 16.839C9.97879 16.8985 10.0385 16.9466 10.1065 16.9796C10.1746 17.0127 10.2493 17.0299 10.325 17.0299C10.4007 17.0299 10.4754 17.0127 10.5435 16.9796C10.6115 16.9466 10.6712 16.8985 10.718 16.839L18.349 7.169C18.3633 7.1506 18.3721 7.12855 18.3744 7.10538C18.3767 7.08221 18.3725 7.05885 18.3622 7.03798C18.3518 7.01711 18.3358 6.99958 18.316 6.98738C18.2962 6.97517 18.2733 6.96881 18.25 6.969Z" fill="white"/>
                            </svg>
                            <svg class="icon_s" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect width="24" height="24" rx="12" fill="#E0E0E0"/>
                                <circle cx="12" cy="12" r="2" fill="white"/>
                            </svg>
                        </div>
                        <span class="name">テンプレート<br>設定</span>
                    </div>
                    <div class="line"></div>

                    <div class="step" :class="tutorial.status_tag == 1 ? 'completed' : ''">
                        <div class="icon">
                            <svg class="icon_complete_s" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect width="24" height="24" rx="12" fill="#23814D"/>
                                <path d="M18.25 6.969H17.158C17.0825 6.96916 17.008 6.98643 16.9401 7.01951C16.8722 7.05259 16.8127 7.10062 16.766 7.16L10.325 15.321L7.235 11.407C7.18833 11.3476 7.12881 11.2996 7.06092 11.2665C6.99303 11.2334 6.91852 11.2162 6.843 11.216H5.75C5.72679 11.216 5.70403 11.2225 5.68428 11.2347C5.66454 11.2469 5.64858 11.2643 5.6382 11.2851C5.62782 11.3059 5.62342 11.3291 5.62551 11.3522C5.62759 11.3753 5.63607 11.3974 5.65 11.416L9.932 16.839C9.97879 16.8985 10.0385 16.9466 10.1065 16.9796C10.1746 17.0127 10.2493 17.0299 10.325 17.0299C10.4007 17.0299 10.4754 17.0127 10.5435 16.9796C10.6115 16.9466 10.6712 16.8985 10.718 16.839L18.349 7.169C18.3633 7.1506 18.3721 7.12855 18.3744 7.10538C18.3767 7.08221 18.3725 7.05885 18.3622 7.03798C18.3518 7.01711 18.3358 6.99958 18.316 6.98738C18.2962 6.97517 18.2733 6.96881 18.25 6.969Z" fill="white"/>
                            </svg>
                            <svg class="icon_s" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect width="24" height="24" rx="12" fill="#E0E0E0"/>
                                <circle cx="12" cy="12" r="2" fill="white"/>
                            </svg>
                        </div>
                        <span class="name">タグ管理</span>
                    </div>
                    <div class="line"></div>

                    <div class="step" :class="tutorial.status_send_all == 1 ? 'completed' : ''">
                        <div class="icon">
                            <svg class="icon_complete_s" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect width="24" height="24" rx="12" fill="#23814D"/>
                                <path d="M18.25 6.969H17.158C17.0825 6.96916 17.008 6.98643 16.9401 7.01951C16.8722 7.05259 16.8127 7.10062 16.766 7.16L10.325 15.321L7.235 11.407C7.18833 11.3476 7.12881 11.2996 7.06092 11.2665C6.99303 11.2334 6.91852 11.2162 6.843 11.216H5.75C5.72679 11.216 5.70403 11.2225 5.68428 11.2347C5.66454 11.2469 5.64858 11.2643 5.6382 11.2851C5.62782 11.3059 5.62342 11.3291 5.62551 11.3522C5.62759 11.3753 5.63607 11.3974 5.65 11.416L9.932 16.839C9.97879 16.8985 10.0385 16.9466 10.1065 16.9796C10.1746 17.0127 10.2493 17.0299 10.325 17.0299C10.4007 17.0299 10.4754 17.0127 10.5435 16.9796C10.6115 16.9466 10.6712 16.8985 10.718 16.839L18.349 7.169C18.3633 7.1506 18.3721 7.12855 18.3744 7.10538C18.3767 7.08221 18.3725 7.05885 18.3622 7.03798C18.3518 7.01711 18.3358 6.99958 18.316 6.98738C18.2962 6.97517 18.2733 6.96881 18.25 6.969Z" fill="white"/>
                            </svg>
                            <svg class="icon_s" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect width="24" height="24" rx="12" fill="#E0E0E0"/>
                                <circle cx="12" cy="12" r="2" fill="white"/>
                            </svg>
                        </div>
                        <span class="name">メッセージ<br>配信</span>
                    </div>
                    <div class="line"></div>

                    <div class="step" :class="tutorial.status_qr_code == 1 ? 'completed' : ''">
                        <div class="icon">
                            <svg class="icon_complete_s" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect width="24" height="24" rx="12" fill="#23814D"/>
                                <path d="M18.25 6.969H17.158C17.0825 6.96916 17.008 6.98643 16.9401 7.01951C16.8722 7.05259 16.8127 7.10062 16.766 7.16L10.325 15.321L7.235 11.407C7.18833 11.3476 7.12881 11.2996 7.06092 11.2665C6.99303 11.2334 6.91852 11.2162 6.843 11.216H5.75C5.72679 11.216 5.70403 11.2225 5.68428 11.2347C5.66454 11.2469 5.64858 11.2643 5.6382 11.2851C5.62782 11.3059 5.62342 11.3291 5.62551 11.3522C5.62759 11.3753 5.63607 11.3974 5.65 11.416L9.932 16.839C9.97879 16.8985 10.0385 16.9466 10.1065 16.9796C10.1746 17.0127 10.2493 17.0299 10.325 17.0299C10.4007 17.0299 10.4754 17.0127 10.5435 16.9796C10.6115 16.9466 10.6712 16.8985 10.718 16.839L18.349 7.169C18.3633 7.1506 18.3721 7.12855 18.3744 7.10538C18.3767 7.08221 18.3725 7.05885 18.3622 7.03798C18.3518 7.01711 18.3358 6.99958 18.316 6.98738C18.2962 6.97517 18.2733 6.96881 18.25 6.969Z" fill="white"/>
                            </svg>
                            <svg class="icon_s" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect width="24" height="24" rx="12" fill="#E0E0E0"/>
                                <circle cx="12" cy="12" r="2" fill="white"/>
                            </svg>
                        </div>
                        <span class="name">QRコード<br>アクション</span>
                    </div>
                </div>

                <!-- Cards -->
                <div class="cards">
                    {{--                template --}}
                    <div class="card "
                         :class="{
                                completed: tutorial.status_template == 1,
                                active: activeItem == 'template' && tutorial.status_template == 0}">
                        <div class="check">
                            <svg class="icon_complete" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" fill="#23814D"/>
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#23814D"/>
                                <path d="M22.25 10.969H21.158C21.0825 10.9692 21.008 10.9864 20.9401 11.0195C20.8722 11.0526 20.8127 11.1006 20.766 11.16L14.325 19.321L11.235 15.407C11.1883 15.3476 11.1288 15.2996 11.0609 15.2665C10.993 15.2334 10.9185 15.2162 10.843 15.216H9.75C9.72679 15.216 9.70403 15.2225 9.68428 15.2347C9.66454 15.2469 9.64858 15.2643 9.6382 15.2851C9.62782 15.3059 9.62342 15.3291 9.62551 15.3522C9.62759 15.3753 9.63607 15.3974 9.65 15.416L13.932 20.839C13.9788 20.8985 14.0385 20.9466 14.1065 20.9796C14.1746 21.0127 14.2493 21.0299 14.325 21.0299C14.4007 21.0299 14.4754 21.0127 14.5435 20.9796C14.6115 20.9466 14.6712 20.8985 14.718 20.839L22.349 11.169C22.3633 11.1506 22.3721 11.1286 22.3744 11.1054C22.3767 11.0822 22.3725 11.0589 22.3622 11.038C22.3518 11.0171 22.3358 10.9996 22.316 10.9874C22.2962 10.9752 22.2733 10.9688 22.25 10.969Z" fill="white"/>
                            </svg>
                            <svg class="icon_active" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" fill="#08BF5A"/>
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#08BF5A"/>
                                <circle cx="16" cy="16" r="3" fill="white"/>
                            </svg>
                            <svg class="icon_no_active" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" fill="white"/>
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#08BF5A"/>
                                <circle cx="16" cy="16" r="3" fill="#08BF5A"/>
                            </svg>
                        </div>
                        <div>
                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_2001_2464)">
                                    <path d="M9 28.5H7.5C7.4337 28.5 7.37011 28.4737 7.32322 28.4268C7.27634 28.3799 7.25 28.3163 7.25 28.25V24.25H3.25C3.1837 24.25 3.12011 24.2237 3.07322 24.1768C3.02634 24.1299 3 24.0663 3 24V22.5C3 22.4337 3.02634 22.3701 3.07322 22.3232C3.12011 22.2763 3.1837 22.25 3.25 22.25H7.25V18.25C7.25 18.1837 7.27634 18.1201 7.32322 18.0732C7.37011 18.0263 7.4337 18 7.5 18H9C9.0663 18 9.12989 18.0263 9.17678 18.0732C9.22366 18.1201 9.25 18.1837 9.25 18.25V22.25H13.25C13.3163 22.25 13.3799 22.2763 13.4268 22.3232C13.4737 22.3701 13.5 22.4337 13.5 22.5V24C13.5 24.0663 13.4737 24.1299 13.4268 24.1768C13.3799 24.2237 13.3163 24.25 13.25 24.25H9.25V28.25C9.25 28.3163 9.22366 28.3799 9.17678 28.4268C9.12989 28.4737 9.0663 28.5 9 28.5ZM27 27.5H17.5C17.3674 27.5 17.2402 27.4473 17.1464 27.3536C17.0527 27.2598 17 27.1326 17 27V17.5C17 17.3674 17.0527 17.2402 17.1464 17.1464C17.2402 17.0527 17.3674 17 17.5 17H27C27.1326 17 27.2598 17.0527 27.3536 17.1464C27.4473 17.2402 27.5 17.3674 27.5 17.5V27C27.5 27.1326 27.4473 27.2598 27.3536 27.3536C27.2598 27.4473 27.1326 27.5 27 27.5ZM19.124 19.126V25.376H25.376V19.126H19.124ZM27 15H17.5C17.3674 15 17.2402 14.9473 17.1464 14.8536C17.0527 14.7598 17 14.6326 17 14.5V5C17 4.86739 17.0527 4.74021 17.1464 4.64645C17.2402 4.55268 17.3674 4.5 17.5 4.5H27C27.1326 4.5 27.2598 4.55268 27.3536 4.64645C27.4473 4.74021 27.5 4.86739 27.5 5V14.5C27.5 14.6326 27.4473 14.7598 27.3536 14.8536C27.2598 14.9473 27.1326 15 27 15ZM19.124 6.626V12.876H25.376V6.626H19.124ZM14.5 15H5C4.86739 15 4.74021 14.9473 4.64645 14.8536C4.55268 14.7598 4.5 14.6326 4.5 14.5V5C4.5 4.86739 4.55268 4.74021 4.64645 4.64645C4.74021 4.55268 4.86739 4.5 5 4.5H14.5C14.6326 4.5 14.7598 4.55268 14.8536 4.64645C14.9473 4.74021 15 4.86739 15 5V14.5C15 14.6326 14.9473 14.7598 14.8536 14.8536C14.7598 14.9473 14.6326 15 14.5 15ZM6.626 6.626V12.876H12.874V6.626H6.626Z"
                                          :fill="tutorial.status_template == 1 ? '#888888' : '#08bf5a'"/>
                                </g>
                                <defs>
                                    <clipPath id="clip0_2001_2464">
                                        <rect width="32" height="32" fill="white"/>
                                    </clipPath>
                                </defs>
                            </svg>
                        </div>
                        <div class="tt_temp_item">テンプレート設定</div>
                        <p class="tt_temp_note">何度も使えるテンプレートを作成して業務を効率化しましょう！</p>
{{--                        <div class="btn-done" v-if="tutorial.status_template == 1">お疲れ様です</div>--}}
                        <button v-if="tutorial.status_template == 1" class="button button05 " @click="openListDone('template')">もう一度みる</button>
                        <button v-if="(activeItem == 'template') && tutorial.status_template == 0" class="button button01" @click="openSetting('template')">設定する</button>
                        <button v-if="(activeItem != 'template') && tutorial.status_template == 0" class="button button05 " @click="openSetting('template')">設定する</button>
                    </div>
                    {{--                tag --}}
                    <div class="card "
                         :class="{
                                completed: tutorial.status_tag == 1,
                                active: activeItem == 'tag' && tutorial.status_tag == 0}">
                        <div class="check">
                            <svg class="icon_complete" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" fill="#23814D"/>
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#23814D"/>
                                <path d="M22.25 10.969H21.158C21.0825 10.9692 21.008 10.9864 20.9401 11.0195C20.8722 11.0526 20.8127 11.1006 20.766 11.16L14.325 19.321L11.235 15.407C11.1883 15.3476 11.1288 15.2996 11.0609 15.2665C10.993 15.2334 10.9185 15.2162 10.843 15.216H9.75C9.72679 15.216 9.70403 15.2225 9.68428 15.2347C9.66454 15.2469 9.64858 15.2643 9.6382 15.2851C9.62782 15.3059 9.62342 15.3291 9.62551 15.3522C9.62759 15.3753 9.63607 15.3974 9.65 15.416L13.932 20.839C13.9788 20.8985 14.0385 20.9466 14.1065 20.9796C14.1746 21.0127 14.2493 21.0299 14.325 21.0299C14.4007 21.0299 14.4754 21.0127 14.5435 20.9796C14.6115 20.9466 14.6712 20.8985 14.718 20.839L22.349 11.169C22.3633 11.1506 22.3721 11.1286 22.3744 11.1054C22.3767 11.0822 22.3725 11.0589 22.3622 11.038C22.3518 11.0171 22.3358 10.9996 22.316 10.9874C22.2962 10.9752 22.2733 10.9688 22.25 10.969Z" fill="white"/>
                            </svg>
                            <svg class="icon_active" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" fill="#08BF5A"/>
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#08BF5A"/>
                                <circle cx="16" cy="16" r="3" fill="white"/>
                            </svg>
                            <svg class="icon_no_active" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" fill="white"/>
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#08BF5A"/>
                                <circle cx="16" cy="16" r="3" fill="#08BF5A"/>
                            </svg>
                        </div>
                        <div>
                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_2001_2477)">
                                    <path d="M26 30H6C5.73478 30 5.48043 29.8946 5.29289 29.7071C5.10536 29.5196 5 29.2652 5 29V3C5 2.73478 5.10536 2.48043 5.29289 2.29289C5.48043 2.10536 5.73478 2 6 2H26C26.2652 2 26.5196 2.10536 26.7071 2.29289C26.8946 2.48043 27 2.73478 27 3V29C27 29.2652 26.8946 29.5196 26.7071 29.7071C26.5196 29.8946 26.2652 30 26 30ZM7.25 21.25V27.752H24.75V21.25H7.25ZM7.25 12.75V19.25H24.75V12.75H7.25ZM7.25 4.25V10.75H24.75V4.25H7.25ZM10.75 25.75C10.5028 25.75 10.2611 25.6767 10.0555 25.5393C9.84998 25.402 9.68976 25.2068 9.59515 24.9784C9.50054 24.7499 9.47579 24.4986 9.52402 24.2561C9.57225 24.0137 9.6913 23.7909 9.86612 23.6161C10.0409 23.4413 10.2637 23.3223 10.5061 23.274C10.7486 23.2258 10.9999 23.2505 11.2284 23.3451C11.4568 23.4398 11.652 23.6 11.7893 23.8055C11.9267 24.0111 12 24.2528 12 24.5C12 24.8315 11.8683 25.1495 11.6339 25.3839C11.3995 25.6183 11.0815 25.75 10.75 25.75ZM10.75 17.25C10.5028 17.25 10.2611 17.1767 10.0555 17.0393C9.84998 16.902 9.68976 16.7068 9.59515 16.4784C9.50054 16.2499 9.47579 15.9986 9.52402 15.7561C9.57225 15.5137 9.6913 15.2909 9.86612 15.1161C10.0409 14.9413 10.2637 14.8222 10.5061 14.774C10.7486 14.7258 10.9999 14.7505 11.2284 14.8452C11.4568 14.9398 11.652 15.1 11.7893 15.3055C11.9267 15.5111 12 15.7528 12 16C12 16.3315 11.8683 16.6495 11.6339 16.8839C11.3995 17.1183 11.0815 17.25 10.75 17.25ZM10.75 8.75C10.5028 8.75 10.2611 8.67669 10.0555 8.53934C9.84998 8.40199 9.68976 8.20676 9.59515 7.97835C9.50054 7.74995 9.47579 7.49861 9.52402 7.25614C9.57225 7.01366 9.6913 6.79093 9.86612 6.61612C10.0409 6.4413 10.2637 6.32225 10.5061 6.27402C10.7486 6.22579 10.9999 6.25054 11.2284 6.34515C11.4568 6.43976 11.652 6.59998 11.7893 6.80554C11.9267 7.0111 12 7.25277 12 7.5C12 7.83152 11.8683 8.14946 11.6339 8.38388C11.3995 8.6183 11.0815 8.75 10.75 8.75Z"
                                          :fill="tutorial.status_tag == 1 ? '#888888' : '#08bf5a'"/>
                                </g>
                                <defs>
                                    <clipPath id="clip0_2001_2477">
                                        <rect width="32" height="32" fill="white"/>
                                    </clipPath>
                                </defs>
                            </svg>

                        </div>
                        <div class="tt_temp_item">タグ管理</div>
                        <p class="tt_temp_note">友だちをカテゴリー分けする際に使用する目印をつけましょう！</p>
                        <button v-if="tutorial.status_tag == 1" class="button button05 " @click="openListDone('tag')">もう一度みる</button>
                        <button v-if="(activeItem == 'tag') && tutorial.status_tag == 0" @click="openSetting('tag')" class="button button01 ">設定する</button>
                        <button v-if="(activeItem != 'tag') && tutorial.status_tag == 0" @click="openSetting('tag')" class="button button05 ">設定する</button>
                    </div>
                    {{--                send all --}}
                    <div class="card"
                         :class="{
                                completed: tutorial.status_send_all == 1 ,
                                active: activeItem == 'sendAll' && tutorial.status_send_all == 0}">
                        <div class="check">
                            <svg class="icon_complete" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" fill="#23814D"/>
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#23814D"/>
                                <path d="M22.25 10.969H21.158C21.0825 10.9692 21.008 10.9864 20.9401 11.0195C20.8722 11.0526 20.8127 11.1006 20.766 11.16L14.325 19.321L11.235 15.407C11.1883 15.3476 11.1288 15.2996 11.0609 15.2665C10.993 15.2334 10.9185 15.2162 10.843 15.216H9.75C9.72679 15.216 9.70403 15.2225 9.68428 15.2347C9.66454 15.2469 9.64858 15.2643 9.6382 15.2851C9.62782 15.3059 9.62342 15.3291 9.62551 15.3522C9.62759 15.3753 9.63607 15.3974 9.65 15.416L13.932 20.839C13.9788 20.8985 14.0385 20.9466 14.1065 20.9796C14.1746 21.0127 14.2493 21.0299 14.325 21.0299C14.4007 21.0299 14.4754 21.0127 14.5435 20.9796C14.6115 20.9466 14.6712 20.8985 14.718 20.839L22.349 11.169C22.3633 11.1506 22.3721 11.1286 22.3744 11.1054C22.3767 11.0822 22.3725 11.0589 22.3622 11.038C22.3518 11.0171 22.3358 10.9996 22.316 10.9874C22.2962 10.9752 22.2733 10.9688 22.25 10.969Z" fill="white"/>
                            </svg>
                            <svg class="icon_active" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" fill="#08BF5A"/>
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#08BF5A"/>
                                <circle cx="16" cy="16" r="3" fill="white"/>
                            </svg>
                            <svg class="icon_no_active" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" fill="white"/>
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#08BF5A"/>
                                <circle cx="16" cy="16" r="3" fill="#08BF5A"/>
                            </svg>
                        </div>
                        <div>
                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_2001_2499)">
                                    <path d="M16.0002 30H15.9382C13.7682 29.9874 11.6306 29.4734 9.69218 28.498H4.93818C4.55749 28.4975 4.19254 28.346 3.92336 28.0768C3.65417 27.8076 3.50271 27.4427 3.50218 27.062V22.312C2.59282 20.5055 2.08368 18.5241 2.00947 16.5029C1.93527 14.4818 2.29774 12.4684 3.07218 10.6C4.13055 8.05817 5.91645 5.88577 8.20553 4.35568C10.4946 2.82559 13.1848 2.00605 15.9382 2L16.0002 2C18.3163 2.00278 20.5956 2.5794 22.6344 3.67831C24.6732 4.77722 26.408 6.36419 27.6836 8.29735C28.9593 10.2305 29.736 12.4496 29.9445 14.7563C30.1529 17.0631 29.7866 19.3855 28.8782 21.516C27.446 24.8663 24.763 27.5256 21.4002 28.928C19.6887 29.6388 17.8533 30.0032 16.0002 30ZM15.9502 4.374C13.9482 4.38415 11.9828 4.91082 10.244 5.90306C8.5052 6.8953 7.05194 8.31951 6.0248 10.0379C4.99766 11.7563 4.43142 13.7107 4.38085 15.7121C4.33029 17.7134 4.79712 19.6939 5.73618 21.462L5.87618 21.724V26.124H10.2762L10.5382 26.264C12.2023 27.1455 14.055 27.6114 15.9382 27.622H16.0002C17.5448 27.6507 19.0797 27.3712 20.515 26.7999C21.9504 26.2286 23.2575 25.3769 24.36 24.2947C25.4625 23.2125 26.3383 21.9214 26.9361 20.4968C27.5339 19.0723 27.8418 17.5429 27.8418 15.998C27.8418 14.4531 27.5339 12.9237 26.9361 11.4992C26.3383 10.0746 25.4625 8.78351 24.36 7.70129C23.2575 6.61906 21.9504 5.76742 20.515 5.19612C19.0797 4.62483 17.5448 4.34535 16.0002 4.374H15.9502ZM22.2502 17.5C21.9536 17.4996 21.6638 17.4113 21.4174 17.2462C21.171 17.0812 20.979 16.8468 20.8658 16.5726C20.7526 16.2985 20.7231 15.997 20.7812 15.7061C20.8393 15.4153 20.9824 15.1482 21.1922 14.9386C21.4021 14.7291 21.6694 14.5864 21.9603 14.5287C22.2512 14.471 22.5527 14.5008 22.8267 14.6144C23.1006 14.728 23.3348 14.9202 23.4995 15.1669C23.6643 15.4135 23.7522 15.7034 23.7522 16C23.7516 16.398 23.5932 16.7795 23.3115 17.0608C23.0299 17.342 22.6482 17.5 22.2502 17.5ZM16.0002 17.5C15.7035 17.5 15.4135 17.412 15.1668 17.2472C14.9201 17.0824 14.7279 16.8481 14.6144 16.574C14.5008 16.2999 14.4711 15.9983 14.529 15.7074C14.5869 15.4164 14.7297 15.1491 14.9395 14.9393C15.1493 14.7296 15.4166 14.5867 15.7075 14.5288C15.9985 14.4709 16.3001 14.5006 16.5742 14.6142C16.8483 14.7277 17.0826 14.92 17.2474 15.1666C17.4122 15.4133 17.5002 15.7033 17.5002 16C17.4996 16.3977 17.3414 16.7789 17.0603 17.0601C16.7791 17.3413 16.3978 17.4995 16.0002 17.5ZM9.75018 17.5C9.4535 17.5 9.16349 17.412 8.91682 17.2472C8.67015 17.0824 8.47789 16.8481 8.36436 16.574C8.25083 16.2999 8.22112 15.9983 8.279 15.7074C8.33688 15.4164 8.47974 15.1491 8.68952 14.9393C8.89929 14.7296 9.16657 14.5867 9.45754 14.5288C9.74851 14.4709 10.0501 14.5006 10.3242 14.6142C10.5983 14.7277 10.8326 14.92 10.9974 15.1666C11.1622 15.4133 11.2502 15.7033 11.2502 16C11.2496 16.3977 11.0914 16.7789 10.8103 17.0601C10.5291 17.3413 10.1478 17.4995 9.75018 17.5Z"
                                          :fill="tutorial.status_send_all == 1 ? '#888888' : '#08bf5a'"/>
                                </g>
                                <defs>
                                    <clipPath id="clip0_2001_2499">
                                        <rect width="32" height="32" fill="white"/>
                                    </clipPath>
                                </defs>
                            </svg>

                        </div>
                        <div class="tt_temp_item">メッセージ配信</div>
                        <p class="tt_temp_note">メッセージを一斉送信してみましょう！</p>
{{--                        <div class="btn-done" v-if="tutorial.status_send_all == 1">お疲れ様です</div>--}}
                        <button v-if="tutorial.status_send_all == 1" class="button button05 " @click="openListDone('sendAll')">もう一度みる</button>
                        <div class="tooltip-wrapper"
                             ref="tooltipWrapper"
                             @mouseenter="showTooltip"
                             @mouseleave="hideTooltip">
                            <button v-if="(activeItem == 'sendAll') && tutorial.status_send_all == 0" @click="openSetting('sendAll')" class="button button01 ">設定する</button>
                            <button v-if="(activeItem != 'sendAll') && tutorial.status_send_all == 0" @click="openSetting('sendAll')" class="button button05">
                                <svg style="margin-right: 5px" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 22.5C9.9233 22.5 7.89323 21.8842 6.16652 20.7304C4.4398 19.5767 3.09399 17.9368 2.29927 16.0182C1.50455 14.0996 1.29661 11.9884 1.70176 9.95156C2.1069 7.91476 3.10693 6.04383 4.57538 4.57538C6.04383 3.10693 7.91476 2.1069 9.95156 1.70176C11.9884 1.29661 14.0996 1.50455 16.0182 2.29927C17.9368 3.09399 19.5767 4.4398 20.7304 6.16652C21.8842 7.89323 22.5 9.9233 22.5 12C22.4968 14.7838 21.3896 17.4527 19.4211 19.4211C17.4527 21.3896 14.7838 22.4968 12 22.5ZM12 3.2805C10.2754 3.28021 8.58941 3.79135 7.1553 4.74928C5.72119 5.70721 4.60336 7.0689 3.94317 8.66216C3.28298 10.2554 3.11009 12.0087 3.44636 13.7002C3.78264 15.3917 4.61297 16.9455 5.83236 18.1651C7.05174 19.3847 8.6054 20.2153 10.2969 20.5519C11.9883 20.8884 13.7416 20.7158 15.335 20.0559C16.9283 19.396 18.2902 18.2784 19.2484 16.8445C20.2066 15.4105 20.718 13.7246 20.718 12C20.7152 9.68856 19.7959 7.47256 18.1616 5.83799C16.5273 4.20341 14.3114 3.28368 12 3.2805Z" fill="#F44336"/>
                                    <path d="M12 17.25C11.7775 17.25 11.56 17.184 11.375 17.0604C11.19 16.9368 11.0458 16.7611 10.9606 16.5555C10.8755 16.35 10.8532 16.1238 10.8966 15.9055C10.94 15.6873 11.0472 15.4868 11.2045 15.3295C11.3618 15.1722 11.5623 15.065 11.7805 15.0216C11.9988 14.9782 12.225 15.0005 12.4305 15.0856C12.6361 15.1708 12.8118 15.315 12.9354 15.5C13.059 15.685 13.125 15.9025 13.125 16.125C13.1246 16.4232 13.0059 16.7092 12.7951 16.9201C12.5842 17.1309 12.2982 17.2496 12 17.25ZM12.5625 13.5H11.4375C11.3878 13.5 11.3401 13.4802 11.3049 13.4451C11.2698 13.4099 11.25 13.3622 11.25 13.3125V6.9375C11.25 6.88777 11.2698 6.84008 11.3049 6.80492C11.3401 6.76975 11.3878 6.75 11.4375 6.75H12.5625C12.6122 6.75 12.6599 6.76975 12.6951 6.80492C12.7302 6.84008 12.75 6.88777 12.75 6.9375V13.3125C12.7492 13.362 12.7292 13.4092 12.6942 13.4442C12.6592 13.4792 12.612 13.4992 12.5625 13.5Z" fill="#F44336"/>
                                </svg>
                                設定する</button>
                            <div class="tooltip_tt" v-show="isShow">
                                <div class="content_hint">
                                    <div class="title-t">
                                        メッセージ配信に関する注意事項
                                    </div>
                                    <div class="content_t">
                                        <div>
                                            <span>・ </span>
                                            <span>配信対象が全員の場合、エルメ上に反映されている友だち全員にメッセージが配信されますのでご注意ください。</span>
                                        </div>
                                        <div>
                                            <span>・ </span>
                                            <span>メッセージ配信にはテスト配信機能はございませんので、配信対象を少人数に絞り込むことを推奨します。</span>
                                        </div>
                                        <div><span>・ </span><span>メッセージ配信は、LINE公式アカウント配信数・エルメ配信数、両方の配信カウント対象となります。大量の配信を行うとご利用プランの配信数上限に達する場合がございますのでご注意ください。</span></div>
                                    </div>
                                </div>
                                <div style="display: flex; justify-content: end">
                                    <button class="button button07" style="width: 200px;height: 38px; position: initial" @click.stop="confirm">
                                        理解しました。設定へ進む
                                    </button>
                                </div>

                            </div>
                        </div>
                    </div>
                    {{--                Qrcode --}}
                    <div class="card"
                         :class="{
                                completed: tutorial.status_qr_code == 1,
                                active: activeItem == 'qrCode' &&  tutorial.status_qr_code == 0}">
                        <div class="check">
                            <svg class="icon_complete" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" fill="#23814D"/>
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#23814D"/>
                                <path d="M22.25 10.969H21.158C21.0825 10.9692 21.008 10.9864 20.9401 11.0195C20.8722 11.0526 20.8127 11.1006 20.766 11.16L14.325 19.321L11.235 15.407C11.1883 15.3476 11.1288 15.2996 11.0609 15.2665C10.993 15.2334 10.9185 15.2162 10.843 15.216H9.75C9.72679 15.216 9.70403 15.2225 9.68428 15.2347C9.66454 15.2469 9.64858 15.2643 9.6382 15.2851C9.62782 15.3059 9.62342 15.3291 9.62551 15.3522C9.62759 15.3753 9.63607 15.3974 9.65 15.416L13.932 20.839C13.9788 20.8985 14.0385 20.9466 14.1065 20.9796C14.1746 21.0127 14.2493 21.0299 14.325 21.0299C14.4007 21.0299 14.4754 21.0127 14.5435 20.9796C14.6115 20.9466 14.6712 20.8985 14.718 20.839L22.349 11.169C22.3633 11.1506 22.3721 11.1286 22.3744 11.1054C22.3767 11.0822 22.3725 11.0589 22.3622 11.038C22.3518 11.0171 22.3358 10.9996 22.316 10.9874C22.2962 10.9752 22.2733 10.9688 22.25 10.969Z" fill="white"/>
                            </svg>
                            <svg class="icon_active" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" fill="#08BF5A"/>
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#08BF5A"/>
                                <circle cx="16" cy="16" r="3" fill="white"/>
                            </svg>
                            <svg class="icon_no_active" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" fill="white"/>
                                <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#08BF5A"/>
                                <circle cx="16" cy="16" r="3" fill="#08BF5A"/>
                            </svg>
                        </div>
                        <div>
                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_2001_2488)">
                                    <path d="M27.75 28H26.25C26.1837 28 26.1201 27.9737 26.0732 27.9268C26.0263 27.8799 26 27.8163 26 27.75V26.25C26.001 26.184 26.0277 26.121 26.0744 26.0744C26.121 26.0277 26.184 26.001 26.25 26H27.75C27.8163 26 27.8799 26.0263 27.9268 26.0732C27.9737 26.1201 28 26.1837 28 26.25V27.75C28 27.8163 27.9737 27.8799 27.9268 27.9268C27.8799 27.9737 27.8163 28 27.75 28ZM23.312 28H21.812C21.7457 28 21.6821 27.9737 21.6352 27.9268C21.5883 27.8799 21.562 27.8163 21.562 27.75V26.25C21.562 26.1837 21.5883 26.1201 21.6352 26.0732C21.6821 26.0263 21.7457 26 21.812 26H23.312C23.3783 26 23.4419 26.0263 23.4888 26.0732C23.5357 26.1201 23.562 26.1837 23.562 26.25V27.75C23.562 27.8163 23.5357 27.8799 23.4888 27.9268C23.4419 27.9737 23.3783 28 23.312 28ZM18.876 28H17.376C17.3097 28 17.2461 27.9737 17.1992 27.9268C17.1523 27.8799 17.126 27.8163 17.126 27.75V17.376C17.126 17.3097 17.1523 17.2461 17.1992 17.1992C17.2461 17.1523 17.3097 17.126 17.376 17.126H23.312C23.3783 17.126 23.4419 17.1523 23.4888 17.1992C23.5357 17.2461 23.562 17.3097 23.562 17.376V21.562H26V17.376C26 17.3097 26.0263 17.2461 26.0732 17.1992C26.1201 17.1523 26.1837 17.126 26.25 17.126H27.75C27.8163 17.126 27.8799 17.1523 27.9268 17.1992C27.9737 17.2461 28 17.3097 28 17.376V23.312C28 23.3783 27.9737 23.4419 27.9268 23.4888C27.8799 23.5357 27.8163 23.562 27.75 23.562H21.812C21.7457 23.562 21.6821 23.5357 21.6352 23.4888C21.5883 23.4419 21.562 23.3783 21.562 23.312V20.124H19.126V27.748C19.1263 27.781 19.12 27.8137 19.1075 27.8443C19.0951 27.8748 19.0767 27.9026 19.0535 27.9261C19.0302 27.9495 19.0026 27.9681 18.9721 27.9808C18.9417 27.9935 18.909 28 18.876 28ZM14.626 28H5C4.73478 28 4.48043 27.8946 4.29289 27.7071C4.10536 27.5196 4 27.2652 4 27V17.376C4 17.3097 4.02634 17.2461 4.07322 17.1992C4.12011 17.1523 4.1837 17.126 4.25 17.126H14.626C14.6923 17.126 14.7559 17.1523 14.8028 17.1992C14.8497 17.2461 14.876 17.3097 14.876 17.376V27.75C14.876 27.8163 14.8497 27.8799 14.8028 27.9268C14.7559 27.9737 14.6923 28 14.626 28ZM6 19.126V26H12.876V19.126H6ZM10.312 23.686H8.564C8.49804 23.686 8.43475 23.6599 8.38793 23.6135C8.3411 23.567 8.31453 23.504 8.314 23.438V21.686C8.314 21.6197 8.34034 21.5561 8.38722 21.5092C8.43411 21.4623 8.4977 21.436 8.564 21.436H10.314C10.38 21.437 10.443 21.4637 10.4896 21.5104C10.5363 21.557 10.563 21.62 10.564 21.686V23.438C10.5637 23.4708 10.557 23.5033 10.5442 23.5335C10.5314 23.5638 10.5128 23.5912 10.4894 23.6142C10.466 23.6372 10.4383 23.6554 10.4078 23.6677C10.3774 23.6801 10.3448 23.6863 10.312 23.686ZM27.748 14.876H17.376C17.3097 14.876 17.2461 14.8497 17.1992 14.8028C17.1523 14.7559 17.126 14.6923 17.126 14.626V4.25C17.126 4.1837 17.1523 4.12011 17.1992 4.07322C17.2461 4.02634 17.3097 4 17.376 4H27C27.2652 4 27.5196 4.10536 27.7071 4.29289C27.8946 4.48043 28 4.73478 28 5V14.626C28 14.6923 27.9737 14.7559 27.9268 14.8028C27.8799 14.8497 27.8163 14.876 27.75 14.876H27.748ZM19.126 6V12.876H26V6H19.126ZM14.626 14.876H4.25C4.1837 14.876 4.12011 14.8497 4.07322 14.8028C4.02634 14.7559 4 14.6923 4 14.626V5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H14.626C14.6923 4 14.7559 4.02634 14.8028 4.07322C14.8497 4.12011 14.876 4.1837 14.876 4.25V14.626C14.875 14.692 14.8483 14.755 14.8016 14.8016C14.755 14.8483 14.692 14.875 14.626 14.876ZM6 6V12.876H12.876V6H6ZM23.438 10.562H21.686C21.62 10.561 21.557 10.5343 21.5104 10.4876C21.4637 10.441 21.437 10.378 21.436 10.312V8.564C21.436 8.4977 21.4623 8.43411 21.5092 8.38722C21.5561 8.34034 21.6197 8.314 21.686 8.314H23.438C23.504 8.31453 23.567 8.3411 23.6135 8.38793C23.6599 8.43475 23.686 8.49804 23.686 8.564V10.314C23.6855 10.3796 23.6592 10.4424 23.6128 10.4888C23.5664 10.5352 23.5036 10.5615 23.438 10.562ZM10.312 10.562H8.564C8.4977 10.562 8.43411 10.5357 8.38722 10.4888C8.34034 10.4419 8.314 10.3783 8.314 10.312V8.564C8.314 8.4977 8.34034 8.43411 8.38722 8.38722C8.43411 8.34034 8.4977 8.314 8.564 8.314H10.314C10.3803 8.314 10.4439 8.34034 10.4908 8.38722C10.5377 8.43411 10.564 8.4977 10.564 8.564V10.314C10.5624 10.38 10.5353 10.4428 10.4882 10.489C10.4412 10.5353 10.378 10.5615 10.312 10.562Z"
                                          :fill="tutorial.status_qr_code == 1 ? '#888888' : '#08bf5a'"/>
                                </g>
                                <defs>
                                    <clipPath id="clip0_2001_2488">
                                        <rect width="32" height="32" fill="white"/>
                                    </clipPath>
                                </defs>
                            </svg>

                        </div>
                        <div class="tt_temp_item">QRコードアクション</div>
                        <p class="tt_temp_note">友だち追加の流入経路を特定し、活用しましょう！</p>
{{--                        <div class="btn-done" v-if="tutorial.status_qr_code == 1">お疲れ様です</div>--}}
                        <button v-if="tutorial.status_qr_code == 1" class="button button05 " @click="openListDone('qrCode')">もう一度みる</button>
                        <button v-if="(activeItem == 'qrCode') && tutorial.status_qr_code == 0" @click="openSetting('qrCode')" class="button button01 ">設定する</button>
                        <button v-if="(activeItem != 'qrCode') && tutorial.status_qr_code == 0" @click="openSetting('qrCode')" class="button button05 ">設定する</button>
                    </div>
            </div>
        </div>
           @include('basic.tutorial.modal.setting_template')
           @include('basic.tutorial.modal.setting_tag')
           @include('basic.tutorial.modal.setting_send_all')
           @include('basic.tutorial.modal.setting_qrcode')
        </div>
    </div>

@endsection

@push('script')
    <script src="/js/form_answer/vue.min.js"></script>
    <script src="/js/moment.min.js"></script>
    <script src="/js/moment-with-locales.js"></script>
    <script src="/js/tutorial/index.js"></script>
@endpush