@extends('layout.basic.main')
@section('title','通知設定 ChatWork連携')

@push('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">

    <style>
        .toast-close {
            margin-right: 15px;
            background-color: #E0E0E0;
            border-radius: 50%;
            margin-left: auto;
            justify-content: center;
            align-items: center;
            display: flex;
            padding: 0px;
            width: 25px;
            height: 25px;
            margin-left: 25px;
            padding-top: 2px;
        }

        .toastify {
            min-width: 213px;
            background: none;
            background-color: #F5FDF9;
            color: #08BF5A;
            display: flex;
            align-items: center;
            height: 40px;
            padding: 7px 10px;
        }

        .toastify-avatar {
            width: 24px;
            height: 24px;
        }

        #notify-setting-chatwork {
            margin-top: 15px;
            color: #222222;
        }

        .tt-page {
            color: #535657;
            font-size: 20px;
            font-weight: 600;
        }

        .btn-link-data {
            color: #5799DB !important;
            border: 1px solid #5799DB;
            border-radius: 3px;
            font-size: 16px;
            font-weight: 300;
            height: 40px;
            padding: 8px;
            width: 300px;
            margin-top: 20px;
        }

        .setting-link {
            background: #F8F8F8 0% 0% no-repeat padding-box;
            border-radius: 3px;
            width: 580px;
            padding: 17px;
            margin-top: 17px;
        }

        .setting-main-account {
            width: 740px;
        }

        .content-bottom {
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border-radius: 3px;
            padding: 11px 24px;
            /*margin-top: 15px;*/
        }

        .title-box {
            font-weight: 600;
            font-size: 16px;
            color: #222222;
            border-bottom: 1px solid #DDDDDD;
            margin-bottom: 7px;
            padding-bottom: 4px;
        }

        .tt-main {
            background: #F8F8F8 0% 0% no-repeat padding-box;
            border: 1px solid #DDDDDD;
            letter-spacing: 0px;
            color: #222222;
            font-size: 14px;
            font-weight: 600;
            padding: 9px;
            width: 450px;
            border-radius: 5px 5px 0 0px;
        }

        .content-main {
            /*display: flex;*/
            /*margin-top: 20px;*/
            border: 1px solid #DDDDDD;
            border-radius: 0px 0px 5px 5px;
            padding: 20px;
            width: 655px;
            border-top: none;
        }

        .content-main .label-step {
            font-weight: 600;
            font-size: 14px;
            color: #222222;
        }

        .main-right {
            /*margin-left: 15px;*/
            /*width: 100%;*/
        }

        .btn-chatwork {
            font-weight: 600;
            font-size: 16px;
            color: #FFFFFF !important;
            display: flex;
            align-items: center;
            padding-left: 1px !important;
            margin-top: 10px;
        }

        .btn-chatwork img {
            width: 35px;
            height: 35px;
        }

        .btn-chatwork i {
            font-size: 20px;

        }

        .bg-img {
            border: 2px solid #F03748;
            border-radius: 5px 0px 0px 5px;
            background: #FFFFFF 0% 0% no-repeat padding-box;
            width: 50px;
            height: 40px;
            text-align: center;
        }

        .bg-right {
            background: #F03748 0% 0% no-repeat padding-box;
            border: 2px solid #F03748;
            border-radius: 0px 5px 5px 0px;
            height: 40px;
            width: 130px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }
        .bg-right div{
            letter-spacing: 0px;
            padding-top: 4px;
        }

        .mt-lb-30 {
            margin-top: 27px;
        }

        .input-text {
            border: 1px solid #E0E0E0 !important;
            border-radius: 3px;
            height: 40px !important;
            margin-right: 10px;
            font-weight: 400;
            font-size: 14px;
            width: 74%;
            outline: none;

        }

        .input-text::placeholder {
            color: #E0E0E0 !important;
        }

        .btn-outline-success-save {
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border: 1px solid #08BF5A;
            border-radius: 3px;
            color: #08BF5A !important;
            font-size: 16px;
            font-weight: 300;
            height: 40px;
            width: 80px;
        }

        a {
            cursor: pointer;
        }

        .radio-custom {
            opacity: 0;
            position: absolute;
        }

        .radio-custom, .radio-custom-label {
            display: inline-block;
            vertical-align: middle;
            /*margin: 5px;*/
            cursor: pointer;
            color: #888888;
            font-size: 14px;
            font-weight: 300;
        }

        .radio-custom-label {
            position: relative;
        }

        .radio-custom + .radio-custom-label:before {
            content: '';
            background: #fff;
            border: 1px solid #ddd;
            display: inline-block;
            vertical-align: middle;
            width: 20px;
            height: 20px;
            padding: 2px;
            margin-right: 10px;
            text-align: center;
        }

        .radio-custom + .radio-custom-label:before {
            border-radius: 50%;
            margin-bottom: 5px;
        }

        .radio-custom:checked + .radio-custom-label:before {
            background: #08BF5A;
            box-shadow: inset 0px 0px 0px 2px #fff;
            border: 1px solid #08BF5A;
        }


        .radio-custom:checked + .radio-custom-label {
            /*outline: 1px solid #ddd; !* focus style *!*/
            color: #08BF5A;
            font-weight: 600;
        }

        .txt-number {
            background: #222222 0% 0% no-repeat padding-box;
            border-radius: 5px;
            color: #fff;
            font-weight: 600;
            font-size: 16px;
            margin-right: 10px;
            width: 25px;
            height: 25px;
            text-align: center;
            padding-top: 2px;
        }

        .txt-no {
            font-weight: 600;
            font-size: 14px;
            color: #222222;
        }

        .mt-label {
            margin-top: 21px;
            margin-bottom: 25px;
        }

        .mt-label-step {
            /*margin-top: 14px;*/
            /*margin-bottom: 14px;*/
        }

        .txt-number-step {
            background: #E0E0E0 0% 0% no-repeat padding-box;
            border-radius: 5px;
            color: #fff;
            font-weight: 600;
            font-size: 16px;
            margin-right: 10px;
            width: 30px;
            height: 30px;
            text-align: center;
            padding-top: 5px;
        }

        .txt-no-step {
            font-weight: 300;
            font-size: 14px;
            color: #888888;
        }

        .btn-outline-back {
            border: 1px solid #E0E0E0;
            color: #222222 !important;
            font-size: 16px;
            font-weight: 300;
            border-radius: 3px;
            width: 100px;
            height: 40px;
            margin-top: 30px;
            background: #fff;
            outline: none;
        }

        .input-width {
            /*width: 407px;*/
        }

        .line_step_no {
            border-left: 1px solid;
            height: 14px;
            width: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 14px;

        }
        #settingChatWorkEmail, #settingChatWorkMainAccount{
            background: #00000080;
        }

    </style>
@endpush
@section('content')
    <article>
        <section id="notify-setting-chatwork" v-cloak>
            <div class="d-flex align-item-center">
                <img src="/images/ic-chatwork.png" style="height: 40px; height: 40px; margin-right: 10px">
                <div class="tt-page">ChatWork（チャットワーク）連携設定</div>
            </div>
            <a class="btn btn-sns-line-outline-default btn-sns-line btn-link-data" target="_blank"
               href="https://lme.jp/manual/notification/#chatwork">
                <i class="fas fa-file-alt"></i>
                連携設定のマニュアルを見る
                <i class="far fa-external-link"></i>
            </a>
            <div class="setting-link">
                <img src="/images/img_set_chatwork_top.png">
                <div class="content-bottom">
                    <div class="title-box">チャットワークアカウントを<span
                                style="color: #F44336; font-size: 20px">2</span>つ ご準備ください
                    </div>
                    <div>
                        <p style="font-size: 16px; font-weight: 600; color: #222222"><span
                                    style="color: #7B56E0; font-size: 16px; font-weight: 600">①</span>：通知送信用のサブアカウント
                            <span style="font-size: 14px; font-weight: 300; color:#222222 ">（新規作成してください）</span>
                        </p>
                        <p style="font-size: 16px; font-weight: 600; color: #222222; margin-top: 5px"><span
                                    style="color: #F44336; font-size: 16px; font-weight: 600"> ②</span>：通知受信用のメインアカウント
                            <br><span style="font-size: 14px; font-weight: 300; color:#222222 ">（普段から利用しているアカウントがある場合は、そちらをご利用ください。）</span>
                        </p>
                    </div>
                    <div class="d-flex align-item-center" style="margin-top: 13px">
                        <div style="font-size: 14px;font-weight: 300; margin-right: 50px">
                            どちらもフリープランでOKです。
                        </div>
                        <a style="color: #5799DB; font-weight: 300; font-size: 14px;text-decoration: underline"
                           href="https://www.chatwork.com/service/packages/chatwork/pre_register.php?plan=free&lang=ja&page"
                           target="_blank">アカウントの新規作成</a>
                    </div>
                </div>
            </div>
            <div class="setting-main-account">
                <div style="margin-top: 37px" v-if="step==1">
                    <div class="tt-main">Step1.メインアカウントでの操作</div>
                    <div class="content-main" style="width: 450px;">
                        {{--                        <img src="/images/step_cw_1.png" style="width: 30px">--}}
                        <div class="main-right">
                            <div class="label-step">1.<span style="color: #F44336">メインアカウン</span>トでチャットワークにログインする
                            </div>
                            <a class=" btn-chatwork" href="https://www.chatwork.com/login.php?lang=jp" target="_blank">
                                <div class="bg-img">
                                    <img src="/images/ic-chatwork.png">
                                </div>
                                <div class="bg-right">
                                    <div>ログイン</div>
                                    <i class="fal fa-external-link"></i>
                                </div>

                            </a>
                            <div class="label-step mt-lb-30">2.サブアカウントをメールで招待する</div>
                            <a style="font-size: 16px; font-weight: 300; text-decoration: underline" data-toggle="modal"
                               data-target="#settingChatWorkEmail">
                                メール招待の方法
                            </a>
                            <div class="label-step mt-lb-30">3.メインアカウントからログアウト</div>
                            <div style="font-size: 14px">ログイン中のメインアカウントからログアウトしてください。</div>
                            <button class="btn btn-sns-line-outline-default btn-sns-line btn-link-data"
                                    style="width: 200px" v-on:click="nextStep(2)">
                                次のステップに進む
                            </button>
                        </div>
                    </div>
                </div>
                <div v-if="step==1">
                    <div class="line_step_no"></div>
                    <div class="d-flex align-item-center mt-label-step">
                        <span class="txt-number-step">2</span>
                        <span class="txt-no-step" style="color: #222222">サブアカウントでの操作</span>
                    </div>
                </div>

                <div v-if=" step == 2 ||  step == 3" style="margin-top: 20px">
                    <div class="d-flex align-item-center mt-label-step">
                        <span class="txt-number-step">1</span>
                        <span class="txt-no-step" style="text-decoration: underline; cursor: pointer" v-on:click="nextStep(1)">メインアカウントでの操作</span>
                    </div>
                    <div class="line_step_no"></div>
                </div>
                <div v-if="step == 3">
                    <div class="d-flex align-item-center mt-label-step">
                        <span class="txt-number-step">2</span>
                        <span class="txt-no-step" style="text-decoration: underline; cursor: pointer" v-on:click="nextStep(2)">サブアカウントでの操作</span>
                    </div>
                    <div class="line_step_no"></div>
                </div>

                <div style="margin-top: 10px" v-if="step==2">
                    <div class="tt-main">Step2.サブアカウントでの操作</div>
                    <div class="content-main" style="width: 450px;">
                        {{--                    <img src="/images/step_cw_2.png" style="width: 30px">--}}
                        <div class="main-right">
                            <div class="label-step">4.<span style="color: #7B56E0">サブアカウント</span>でチャットワークにログインする
                            </div>
                            <a class=" btn-chatwork" href="https://www.chatwork.com/login.php?lang=jp" target="_blank">
                                <div class="bg-img">
                                    <img src="/images/ic-chatwork.png">
                                </div>
                                <div class="bg-right">
                                    <div>ログイン</div>
                                    <i class="fal fa-external-link"></i>
                                </div>

                            </a>
                            <div class="label-step mt-lb-30">5.メインアカウントをコンタクト追加する</div>
                            <a style="font-size: 16px; font-weight: 300; text-decoration: underline; color: #5799DB; cursor: pointer"
                               data-toggle="modal" data-target="#settingChatWorkMainAccount">
                                コンタクト追加方法
                            </a>
                            <div class="label-step mt-lb-30">6.API トークン設定</div>
                            <a style="font-size: 16px; font-weight: 300; text-decoration: underline; color: #5799DB; margin-bottom: 8px; cursor: pointer"
                               target="_blank"
                               href="https://www.chatwork.com/service/packages/chatwork/subpackages/api/token.php">
                                APIトークンを取得する <i class="fal fa-external-link"></i>
                            </a>
                            <div class="d-flex align-item-center input-width" style="margin-top: 8px">
                                <input class=" input-text" type="text" v-model="api_token"
                                       placeholder="取得したAPIトークンを入力">
                                <button class="btn btn-sns-line  btn-outline-success-save" type="button"
                                        v-on:click="saveApiTokenChatWork">保存
                                </button>
                            </div>
                            <div class="label-step mt-lb-30">7.サブアカウントからログアウト</div>
                            <div style="font-size: 14px">ログイン中のサブアカウントからログアウトしてください。</div>
                            <button class="btn btn-sns-line-outline-default btn-sns-line btn-link-data"
                                    style="width: 200px" v-on:click="nextStep(3)">
                                次のステップに進む
                            </button>
                        </div>
                    </div>
                </div>
                <div v-if=" step==1 || step == 2">
                    <div class="line_step_no"></div>
                    <div class="d-flex align-item-center mt-label-step">
                        <span class="txt-number-step">3</span>
                        <span class="txt-no-step" style="color: #222222">メインアカウントでの操作</span>
                    </div>
                </div>
                <div v-if="step==3">
                    <div class="tt-main" style="width: 600px">Step3.メインアカウントでの操作</div>
                    <div class="content-main" style="margin-bottom: 15px; width: 600px">
                        {{--                    <img src="/images/step_cw_3.png" style="width: 30px">--}}
                        <div class="main-right">
                            <div class="label-step">8.再度、<span style="color: #F44336">メインアカウント</span>でチャットワークにログインする
                            </div>
                            <a class=" btn-chatwork" href="https://www.chatwork.com/login.php?lang=jp" target="_blank">
                                <div class="bg-img">
                                    <img src="/images/ic-chatwork.png">
                                </div>
                                <div class="bg-right">
                                    <div>ログイン</div>
                                    <i class="fal fa-external-link"></i>
                                </div>
                            </a>
                            <div class="label-step mt-lb-30" style="margin-bottom: 5px">9.通知受け取り方法を選択</div>

                            <div>
                                <input type="radio" class="radio-custom" value="0" id="only_account"
                                       v-model="type_notify_send_chatwork" v-on:change="changeTypeSendChatwork">
                                <label for="only_account"
                                       class="radio-custom-label">1つのLINE公式アカウントの通知を、自分1人だけで受け取る</label>
                            </div>
                            <div>
                                <input type="radio" value="1" id="group_account" v-model="type_notify_send_chatwork"
                                       class="radio-custom" v-on:change="changeTypeSendChatwork">
                                <label for="group_account"
                                       class="radio-custom-label">複数人のグループでエルメからの通知を受け取る</label>
                            </div>
                            <div>
                                <input type="radio" value="2" id="many_line_account" v-model="type_notify_send_chatwork"
                                       v-on:change="changeTypeSendChatwork"
                                       class="radio-custom">
                                <label for="many_line_account"
                                       class="radio-custom-label">複数のLINE公式アカウントの通知を分けて受け取る</label>
                            </div>
                            <div v-if="type_notify_send_chatwork == 0">
                                <div class="d-flex align-item-center mt-label">
                                    <span class="txt-number">1</span>
                                    <span class="txt-no">サブアカウントを選択し、表示されているURLをコピー</span>
                                </div>
                                <div>
                                    <img src="/images/chatwork_type_1.png">
                                </div>
                                <div class="d-flex align-item-center mt-label">
                                    <span class="txt-number">2</span>
                                    <span class="txt-no">コピーしたURLを以下に登録</span>
                                </div>

                                <div class="d-flex align-item-center input-width" style="margin-top: 8px">
                                    <input class=" input-text" type="text"
                                           v-model="notification_room_url"
                                           id="notification_room_url"
                                           placeholder="https://www.chatwork.com/#!rid******">
                                    <button class="btn btn-sns-line  btn-outline-success-save"
                                            v-on:click="saveUrlRoomChatWork">保存
                                    </button>
                                </div>
                                <div class="d-flex align-item-center mt-label">
                                    <span class="txt-number">3</span>
                                    <span class="txt-no">テスト送信</span>
                                </div>
                                <div style="font-weight: 300; font-size: 14px" class="input-width">
                                    メインアカウントに「<span style="font-weight: 600">エルメ 通知テスト送信完了</span>」とメッセージが届いたら設定完了となります。メッセージが届かない場合は設定に誤りがありますので再度、初めから設定をご確認ください。
                                </div>
                                <button class="btn btn-sns-line  btn-outline-success-save" type="button"
                                        v-on:click="testSendChatWork"
                                        style="width: 120px; margin-top: 24px">テスト送信
                                </button>
                            </div>
                            <div v-if="type_notify_send_chatwork == 1">
                                <div class="d-flex align-item-center mt-label">
                                    <span class="txt-number" style="    margin-right: 3px;">1</span>
                                    <span class="txt-no">「通知を受け取りたい人全員」+「サブアカウント」のグループチャットを作成する</span>
                                </div>
                                <a style="font-size: 16px; font-weight: 300; text-decoration: underline; color: #5799DB; margin-bottom: 8px; cursor: pointer"
                                   target="_blank"
                                   href="https://go.chatwork.com/ja/column/usage/usage-049.html">
                                    グループチャットの作成方法　 <i class="fal fa-external-link"></i>
                                </a>
                                <div class="d-flex align-item-center mt-label" style="margin-bottom: 5px">
                                    <span class="txt-number">2</span>
                                    <span class="txt-no">グループチャットのURLを取得</span>
                                </div>
                                <div style="margin-bottom: 12px">※ グループ名は任意となります。</div>
                                <div>
                                    <img src="/images/chatwork_type_2.png">
                                </div>
                                <div class="d-flex align-item-center mt-label">
                                    <span class="txt-number">3</span>
                                    <span class="txt-no">取得したURLを以下に登録</span>
                                </div>

                                <div class="d-flex align-item-center input-width" style="margin-top: 8px">
                                    <input class=" input-text" type="text"
                                           v-model="notification_room_url"
                                           id="notification_room_url"
                                           placeholder="https://www.chatwork.com/#!rid******">
                                    <button class="btn btn-sns-line  btn-outline-success-save"
                                            v-on:click="saveUrlRoomChatWork">保存
                                    </button>
                                </div>
                                <div class="d-flex align-item-center mt-label">
                                    <span class="txt-number">4</span>
                                    <span class="txt-no">テスト送信</span>
                                </div>
                                <div style="font-weight: 300; font-size: 14px" class="input-width">
                                    チャットワークグループに「<span
                                            style="font-weight: 600">エルメ 通知テスト送信完了</span>」とメッセージが届いたら設定完了となります。メッセージが届かない場合は設定に誤りがありますので再度、初めから設定をご確認ください。
                                </div>
                                <button class="btn btn-sns-line  btn-outline-success-save"
                                        type="button"
                                        v-on:click="testSendChatWork"
                                        style="width: 120px; margin-top: 24px">テスト送信
                                </button>
                            </div>
                            <div v-if="type_notify_send_chatwork == 2">
                                <div class="d-flex align-item-center mt-label" style="margin-bottom: 5px">
                                    <span class="txt-number" style="    margin-right: 3px;">1</span>
                                    <span class="txt-no">「通知を受け取りたい人全員」+「サブアカウント」のグループチャットを作成する</span>
                                </div>
                                {{--                                <div style="margin-bottom: 5px; font-size: 14px">※ 通知を受け取るLINE公式アカウントごとにそれぞれに分けて作成します。</div>--}}
                                <a style="font-size: 16px; font-weight: 300; text-decoration: underline; color: #5799DB; margin-bottom: 8px; cursor: pointer"
                                   target="_blank"
                                   href="https://go.chatwork.com/ja/column/usage/usage-049.html">
                                    グループチャットの作成方法　 <i class="fal fa-external-link"></i>
                                </a>
                                <div class="d-flex align-item-center mt-label" style="margin-bottom: 5px">
                                    <span class="txt-number">2</span>
                                    <span class="txt-no">グループチャットのURLを取得</span>
                                </div>
                                <div style="margin-bottom: 12px">※ グループ名は任意となります。</div>
                                <div>
                                    <img src="/images/chatwork_type_3.png">
                                </div>
                                <div class="d-flex align-item-center mt-label">
                                    <span class="txt-number">3</span>
                                    <span class="txt-no">取得したURLを以下に登録</span>
                                </div>

                                <div class="d-flex align-item-center input-width" style="margin-top: 8px">
                                    <input class=" input-text" type="text"
                                           id="notification_room_url"
                                           v-model="notification_room_url"
                                           placeholder="https://www.chatwork.com/#!rid******">
                                    <button class="btn btn-sns-line  btn-outline-success-save"
                                            v-on:click="saveUrlRoomChatWork">保存
                                    </button>
                                </div>
                                <div class="d-flex align-item-center mt-label">
                                    <span class="txt-number">4</span>
                                    <span class="txt-no">テスト送信</span>
                                </div>
                                <div style="font-weight: 300; font-size: 14px" class="input-width">
                                    チャットワークグループに「<span
                                            style="font-weight: 600">エルメ 通知テスト送信完了</span>」とメッセージが届いたら設定完了となります。メッセージが届かない場合は設定に誤りがありますので再度、初めから設定をご確認ください。
                                </div>
                                <button class="btn btn-sns-line  btn-outline-success-save"
                                        type="button"
                                        v-on:click="testSendChatWork"
                                        style="width: 120px; margin-top: 24px">テスト送信
                                </button>
                            </div>

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


                <button class="btn btn-sns-line  btn-outline-back" style=""
                        onclick="window.location.href = '/basic/notify-setting'">戻る
                </button>
            </div>

            <div class="modal fade " id="settingChatWorkEmail" tabindex="-1" role="dialog"
                 data-backdrop="static"
                 aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document" style="width: 750px;top: 46%;    transform: translateY(-50%);">
                    <div class="modal-content" style="padding: 19px">
                        <div class="modal-header" style="border: none; padding: 5px">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                    style="opacity: 1;font-size: 27px">
                                <span class="line-icon line-icon-close"><i class="fal fa-times"></i></span>
                            </button>
                            <h2 class="text-center" style="font-size: 20px; font-weight: 600">
                                サブアカウントのメール招待方法</h2>

                        </div>
                        <div class="modal-body" style="padding:0px 77px 13px 77px;">
                            <div class="d-flex align-item-center mt-label" style="margin-top: 0; margin-bottom: 10px">
                                <span class="txt-number">1</span>
                                <span class="txt-no">画面右上の「コンタクト管理」アイコンをクリック</span>
                            </div>
                            <div style="position: relative">
                                <img src="/images/img_set_chatwork_mail_1.png">
                            </div>

                            <div class="d-flex align-item-center mt-label" style="    margin-top: 25px;    margin-bottom: 16px;">
                                <span class="txt-number">2</span>
                                <span class="txt-no">サブアカウントの登録メールアドレスを入力して「招待メールを送信」をクリック</span>
                            </div>
                            <img src="/images/img_set_chatwork_mail_2.png">
                        </div>
                        <div style="text-align: center;">
                            <button type="button" class="btn btn-sns-line btn-sns-line-outline-default"
                                    data-dismiss="modal"
                                    style="width: 150px;background: #FFFFFF 0% 0% no-repeat padding-box; color: #222222 !important; font-size:16px; font-weight: 300;border: 1px solid #E0E0E0;border-radius: 3px;">
                                閉じる
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade " id="settingChatWorkMainAccount" tabindex="-1"  data-backdrop="static" role="dialog"
                 aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document" style="width: 750px;top: 46%;    transform: translateY(-50%);">
                    <div class="modal-content" style="padding: 20px">
                        <div class="modal-header" style="border: none">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                    style="opacity: 1;font-size: 27px">
                                <span class="line-icon line-icon-close"><i class="fal fa-times"></i></span>
                            </button>
                            <h2 class="text-center" style="font-size: 20px; font-weight: 600">
                                メインアカウントのコンタクト追加方法</h2>

                        </div>
                        <div class="modal-body" style="padding:0px 60px 13px 60px;">
                            <div class="d-flex align-item-center mt-label" style="margin-top: 0; margin-bottom: 10px">
                                <span class="txt-number">1</span>
                                <span class="txt-no">画面右上の「コンタクト管理」アイコンをクリック</span>
                            </div>
                            <div style="position: relative">
                                <img src="/images/img_set_chatwork_main_acc_1.png">

                            </div>

                            <div class="d-flex align-item-center mt-label">
                                <span class="txt-number">2</span>
                                <span class="txt-no">「未承認」タブより「承認する」をクリック</span>
                            </div>
                            <img src="/images/img_set_chatwork_main_acc_2.png">
                        </div>
                        <div style="text-align: center;">
                            <button type="button" class="btn btn-sns-line btn-sns-line-outline-default"
                                    data-dismiss="modal"
                                    style="width: 150px;background: #FFFFFF 0% 0% no-repeat padding-box; color: #222222 !important; font-size:16px; font-weight: 300;border: 1px solid #E0E0E0;border-radius: 3px;">
                                閉じる
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </article>
@endsection
@push('js')
    <script src="/js/notify/notify-setting-chatwork.js?v={{config('sns-line.version')}}"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

    <script>
        $(document).ready(function () {
        });

        function approveAddFriend() {
            // Get a list of contact requests pending confirmation
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                method: 'GET',
                url: `/ajax/confirm-contact-request`,
                beforeSend: function () {
                    $.LoadingOverlay('show');
                },
                success: function (response) {
                    $.LoadingOverlay('hide');
                },
                error: function () {
                    $.LoadingOverlay('hide');
                }
            })
        }

    </script>
@endpush