@extends('layout.admin.main')
@if(!empty($data))
    @section('title', 'LOA接続設定')
@else
    @section('title', 'LOA選択（プラン選択）')
@endif
@push('css')
    <link rel="stylesheet" href="/css/admin/step_add_bot.css?v={{config("sns-line.version")}}">
    <style>
        *{
            font-weight: bold;
        }
        div button {
            display: block;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            padding: 10px 10px;
            font-size: 85%;
            background: #4A96B2;
            color: #fff;
            margin-top: 5px;
            border: 0;
            width: 50%;
            cursor: pointer;

        }

        .center {
            text-align: center;
        }

        .center input, .center button {
            width: 5%;
            margin: 20px auto;
            font-size: 100%;
            text-align: center;
            border-radius: 20px;
        }

        .change-bot-new {
            width: 14%;
            position: absolute;
            right: 30px;
            bottom: 30px;
        }

        /*#liff_app_id {*/
        /*    border: 1px solid #bbb*/
        /*}*/

        #base_url {
            border: 1px solid #bbb
        }

        .StripeElement--focus {
            border-color: #80BDFF;
        }
        /* Can't see what I type without this */
        #card-number.form-control,
        #card-cvc.form-control,
        #card-exp.form-control {
            display:block;
        }
        .row-base{
            background: #fff;
            display: flex;
            align-items: center;
            margin: 8px 0px 18px 0px;
            border-radius: 5px 0 0 5px;


        }
        .box-content{
            padding: 20px 20px 0 20px;
            border-radius: 5px;
            border: 2px solid #F4F6F7;
            margin-bottom: 20px;
        }

        .row-base .title{
            background-color: #7D9195;
            color: #fff;
            min-width: 200px;
            display: flex;
            align-items: center;
            height: 40px;
            border-radius: 5px;
        }

        .row-base .content{
            background-color: #F4F6F7;
            display: flex;
            height: 40px;
            align-items: center;
            margin-left: 20px;
            margin-right: 20px;
            border-radius: 5px;
        }

        .btn-sns-line {
            padding: 8px 5px;
        }

        .input-edit-bot {
            border-radius: 4px;
            height: 40px !important;
            border: 2px solid #E8E8E8 !important;
            font-size: 15px !important;
            padding-left: 10px !important;
        }

        .sub-title{
            font-size: 18px !important;
        }
        .mt-3{
            margin-top: 30px;
        }
        .ml-3{
            margin-left: 30px;
        }
        .mt-2{
            margin-top: 20px;
        }
        .content .glyphicon{
            margin-left: 20px;
            cursor: pointer;
            color: rgba(112,112,112,1);;
        }
        #step2_form input[type="text"]{
            height: auto;
        }
        #changeImg{
            margin-left: 30px;
            width: 80px;
            padding: 6px;
        }
        .title-step-add
        {
            padding: 10px;
            font-size: 20px;
            font-weight: bold;
            border-left: 9px solid #08bf5a;
            margin-bottom: 20px;
        }
        .copy-notification {
            color: #ffffff;
            background-color: rgba(0,0,0,0.8);
            padding: 20px;
            border-radius: 30px;
            position: fixed;
            top: 50%;
            left: 50%;
            width: 250px;
            margin-top: -30px;
            margin-left: -85px;
            display: none;
            text-align:center;
        }
        .copy-text:hover{
            cursor: pointer;
        }

        .step4 .text-left {
            color: #2C2C2C !important;
            background: white !important;
            border-bottom: 2px solid #CCCCCC;
        }

        .step4 .row-item .col-xs-3{
            padding: 2px;
        }

        .step4 .row-item .col-xs-6{
            padding: 2px;
        }

        .step4 .row-item .col-xs-3 .column {
            background-color: #EFF7ED;
            text-align: center;
            font-size: 16px;
            color: #08BF5A;
            padding: 10px;
        }

        .step4 .row-item .col-xs-6 .column {
            background-color: #FFE8D5;
            text-align: center;
            font-size: 16px;
            color: #FE7500;
            padding: 10px;
        }
        .control-label.full-width {
            color: green !important;
            background: red;
        }

        .input-sm {
            background: red !important;
        }

        .form-group.has-error.keep-color-on-error .form-control {
            background: #ffffff !important;
        }

        #modalConfirmContract select {
            appearance: auto!important;
        }
    </style>
@endpush
@section('content')
    <div class="sub">
        @if(!empty($data))
            <section class="botedit">
               <div class="row">
                    <div class="col-sm-9">
                        <div class="d-flex" style="margin-bottom: 15px;justify-content: space-between;">
                            <div> <span style=" font-size: 28px;color: rgba(112,112,112,1);font-weight: bold">接続設定</span></div>
                            <div class="text-right">
                                <button class="btn btn-sns-line btn-sns-line-secondary btn-shadown-dropdown"
                                        style="width: 150px" onclick="checkLinkBot({{$data}})">接続チェック</button>
                                <button class="btn btn-sns-line btn-sns-line-dark btn-shadown-dropdown" style="width: 200px;margin-left: 5px" onclick="addFlagGetOldFriend()">既存友だち情報取得</button>
                                @if($data->plan_type == 1)
                                    <button onclick="return window.location.href='{{ route('change.bots.new', ['id' => Hashids::encode($data->id)]) }}'" class="btn btn-sns-line btn-sns-line-primary btn-sm btn-shadown-dropdown" style="width: 230px;margin-left: 5px" >LINE公式アカウント入れ替え</button>
                                @endif
                                <!-- <a href="{{route('botDelete',['id'=>Hashids::encode($data->id)])}}"  @if($roleId != null)
                                style="display: none"
                                   @endif
                                   onclick="return window.confirm('削除すると元に戻すことはできません。宜しいですか？')">
                                    <button class="btn btn-sns-line btn-sns-line-danger btn-sm" style="width: 150px;margin-left: 5px" >接続情報削除</button>
                                </a> -->
                            </div>
                        </div>

                        @if($flag_bot_line_id == 1)
                            <div class="row">
                                <div class="col-sm-12">
                                <div class="alert alert-danger" style="text-align: center">
                                <strong>LINE ID</strong>（ベーシックID）を入力してください
                                </div>
                            </div>
                            </div>
                        @endif
                        <form id="change-form" method="post" enctype="multipart/form-data">

                            <input type="hidden" name="id" value="{{isset($_GET["id"])?$_GET["id"]:null}}">

                            {{csrf_field()}}

                        <div class="row" >
                            <div class="col-sm-12"  >
                                <div class="box-content">
                                    <div class="title-step-add">LINE公式アカウント表示</div>
                                    <div class="row row-base"  >
                                        <div class="col-sm-3 title">アカウント画像</div>
                                        <div class="col-sm-9 content"  style="background: white;padding-left: 0">
                                            @if ($data->bot_image && (stripos($data->bot_image, 'profile.line-scdn.net') !== false))
                                                <img src="{{$data->bot_image}}"
                                                     onerror="this.onerror=null;this.src='/images/8.png'"
                                                     id="upfile1" data-aau-account-image style="cursor:pointer;border-radius: 50%; height: 40px" width="40px"/>
                                            @else
                                                <img src=" {{!preg_match('/http/', $data->bot_image) ? env('URL_SERVER_MEDIA') : ''}}{{$data->bot_image}}"
                                                     onerror="this.onerror=null;this.src='/images/8.png'"
                                                     id="upfile1" data-aau-account-image style="cursor:pointer;border-radius: 50%; height: 40px" width="40px"/>
                                            @endif
                                            <button class="btn btn-sns-line btn-sns-line-success btn-shadown-dropdown" type="button" id="changeImg" >変更</button>
                                            <input type="file" id="file1" name="image" style="display: none"
                                                   accept="image/x-png,image/jpeg">

                                            <span class="errors" id="file1"></span>
                                        </div>
                                    </div>
                                    <div class="row row-base"  >
                                        <div class="col-sm-3 title"    >
                                            アカウント名
                                        </div>
                                        <div class="col-sm-9 content"  style="flex-wrap: wrap;">
                                            <input type="text" class="form-control" name="bot_name" data-aau-account-name value="{{(empty($data))?'':$data->view_name}}">
                                            <span class="errors" id="bot_name"></span>
                                        </div>
                                    </div>
                                    <div class="row row-base"  >
                                        <div class="col-sm-3 title" style="background: white;color: #51595C;font-weight: bold;font-size: 11px;text-align: center">LINE公式アカウント管理画面で 画像・アカウント名を変更した場合</div>
                                        <div class="col-sm-9 content"  style="background: white;padding: 0">
                                            <button class="btn btn-sns-line btn-sns-line-dark btn-shadown-dropdown"
                                                    type="button"
                                                    onclick="reGetAvatarBot({{$data->id}})"
                                                    style="width: 110px;padding: 6px" >情報更新</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="box-content">
                                    <div class="title-step-add">接続情報</div>
                                    <div class="row row-base"  >
                                        <div class="col-sm-3 title">Channel ID</div>
                                        <div class="col-sm-9 content"  >
                                            <span>{{(empty($data))?'':$data->channel_id}}  </span>
{{--                                            <input type="hidden" name="channel_access_token"--}}
{{--                                                   value="{{(empty($data))?'':$data->channel_access_token}}">--}}
                                        </div>
                                    </div>

                                    <div class="row row-base"  >
                                        <div class="col-sm-3 title">Channel Secret</div>
                                        <div class="col-sm-9 content" style="padding: 0" >
{{--                                                <span>{{(empty($data))?'':$data->channel_secret}} </span>--}}
                                            <input type="text" name="channel_secret" class="form-control input-edit-bot"
                                                   value="{{(empty($data))?'':$data->channel_secret}}">

                                            <span class="errors" id="channel_secret"></span>
                                        </div>
                                    </div>

                                    <div class="row row-base"  >
                                        <div class="col-sm-3 title">Webhook URL</div>
                                        <div class="col-sm-9 content"  >
                                            <span>{{(empty($data))?'':$data->webhook_url}} </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="box-content">
                                    <div class="title-step-add" style="display: flex;align-items: center;justify-content: space-between;padding: 0 10px;">LINEログイン（LIFF）設定情報
                                        <div style="display: flex;align-items: center; margin-right: 10px">

                                            @if(!empty($data->channel_id_line_login ))
                                            <span style="font-size: 18px;font-weight: bold; margin-right: 20px;">LIFFアプリ接続確認</span>
                                            <button type="button" style="width: 150px;margin-top: 0;" onclick="checkLiffAppId()" class="btn btn-sns-line btn-sns-line-warning btn-shadown-dropdown">
                                                チェックする
                                            </button>
                                                @endif
                                        </div>
                                    </div>
                                    <div class="row row-base">
                                        <div class="col-sm-3 title">チャネル ID</div>
                                        <div class="col-sm-9 content"  >
                                            <input class="form-control" type="text" id="channel_id_line_login" name="channel_id_line_login" value="{{(empty($data))?'':$data->channel_id_line_login}}"/>
                                        </div>
                                    </div>
                                    <div class="row row-base">
                                        <div class="col-sm-3 title">チャネルシークレット</div>
                                        <div class="col-sm-9 content">
                                            <input class="form-control" type="text" id="channel_secret_line_login" name="channel_secret_line_login" value="{{(empty($data))?'':$data->channel_secret_line_login}}"/>
                                        </div>
                                    </div>
                                    <div class="row row-base">
                                        <div class="col-sm-3 title">接続済みLIFF ID</div>
                                        <div class="col-sm-9 content">
                                            {{(empty($data))?'-':$data->liff_app_id}}
                                        </div>
                                    </div>
                                </div>
                                <div class="box-content">
                                    <div class="title-step-add">データコピー</div>
                                    <div class="row row-base">
                                        <div class="col-sm-3 title">コピーコード</div>
                                        <div class="col-sm-9 content" style="justify-content: space-between;" >
                                            @if($data->plan_type == 1)
                                                <span>{{(empty($data))?'':$data->transfer_code}} </span>
                                                <input type="hidden" name="transfer_code" id="transfer_code" value="{{(empty($data))?'':$data->transfer_code}}">
                                                <span class="ml-3 copy-text" onclick="copyClipBoard('transfer_code')" >
                                                    <svg class="Icon_ionic-md-copy_bl" viewBox="6.187 3.375 19.482 24.121" style="width: 19px;height: 19px;">
                                                        <path id="Icon_ionic-md-copy_bl" d="M 18.24794387817383 3.375 L 11.3189868927002 3.375 C 10.03756427764893 3.375 8.97067928314209 4.383902549743652 8.97067928314209 5.665324687957764 L 8.97067928314209 6.158179759979248 L 8.535808563232422 6.158179759979248 C 7.254384994506836 6.158179759979248 6.187499523162842 7.167080879211426 6.187499523162842 8.448504447937012 L 6.187499523162842 25.14757537841797 C 6.187499523162842 26.42899894714355 7.254384994506836 27.49588394165039 8.535808563232422 27.49588394165039 L 20.59625244140625 27.49588394165039 C 21.87767219543457 27.49588394165039 22.88657569885254 26.42899894714355 22.88657569885254 25.14757537841797 L 22.88657569885254 24.71270561218262 L 23.37942886352539 24.71270561218262 C 24.66085243225098 24.71270561218262 25.66975402832031 23.64581871032715 25.66975402832031 22.3643970489502 L 25.66975402832031 10.79681205749512 L 18.24794387817383 3.375 Z M 18.24794387817383 5.961037158966064 L 23.08371734619141 10.79681205749512 L 18.24794387817383 10.79681205749512 L 18.24794387817383 5.961037158966064 Z M 21.03112411499023 25.14757537841797 C 21.03112411499023 25.42009925842285 20.83398246765137 25.64043235778809 20.59625244140625 25.64043235778809 L 8.535808563232422 25.64043235778809 C 8.280682563781738 25.64043235778809 8.042951583862305 25.4027042388916 8.042951583862305 25.14757537841797 L 8.042951583862305 8.448504447937012 C 8.042951583862305 8.210773468017578 8.263287544250488 8.013631820678711 8.535808563232422 8.013631820678711 L 8.97067928314209 8.013631820678711 L 8.97067928314209 22.82826232910156 C 8.97067928314209 24.10968399047852 9.573701858520508 24.71270561218262 10.85512351989746 24.71270561218262 L 21.03112411499023 24.71270561218262 L 21.03112411499023 25.14757537841797 Z M 23.81430244445801 22.3643970489502 C 23.81430244445801 22.63691711425781 23.61716079711914 22.85725212097168 23.37942886352539 22.85725212097168 L 11.3189868927002 22.85725212097168 C 11.06386184692383 22.85725212097168 10.82613182067871 22.61952209472656 10.82613182067871 22.3643970489502 L 10.82613182067871 5.665324687957764 C 10.82613182067871 5.427595138549805 11.04646587371826 5.230452060699463 11.3189868927002 5.230452060699463 L 15.46476364135742 5.230452060699463 L 16.39249038696289 5.230452060699463 L 16.39249038696289 10.79681205749512 L 16.39249038696289 12.65226459503174 L 18.24794387817383 12.65226459503174 L 23.81430244445801 12.65226459503174 L 23.81430244445801 22.3643970489502 Z">
                                                        </path>
                                                    </svg>
                                                    <span class="errors" id="transfer_code"></span>
                                                </span>
                                            @else
                                                <span>有料プランのみ</span>

                                            @endif
                                            
                                        </div>
                                    </div>
{{--                                    <div class="col-sm-12"  >--}}
{{--                                        <a href="https://lme.jp/manual/data_copy" target="_blank">--}}
{{--                                            <button class="btn btn-primary" type="button" style="width: 150px">設定マニュアル</button>--}}
{{--                                        </a>--}}

{{--                                    </div>--}}

                                </div>
                                @if(!empty($data) && !empty($data->domain_url_shorten))
                                <div class="box-content">
                                    <div class="title-step-add">独自ドメイン設定</div>
                                    <div class="row row-base">
                                        <div class="col-sm-3 title">
                                            独自ドメイン
                                        </div>
                                        <div class="col-sm-9 content" style="background: white;padding: 0">
                                            @if($data->plan_type == 1)
                                                <input class="form-control input-edit-bot" type="text" name="domain_url_shorten"
                                                       value="{{(empty($data))?'':$data->domain_url_shorten}}" @if($data->plan_type == 2 || strtotime($data->expired_date) < time()) disabled @endif >
                                                <br>
                                            @else
                                                <span>有料プランのみ</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="row row-base">
                                        <div class="col-sm-3"></div>
                                        <div class="col-sm-9"><span class="errors" id="domain_url_shorten"></span></div>
                                    </div>
{{--                                    <div class="col-sm-12"  >--}}
{{--                                        <a href="https://lme.jp/manual/own_domain/" target="_blank">--}}
{{--                                            <button class="btn btn-primary" type="button" style="width: 150px">設定マニュアル</button>--}}
{{--                                        </a>--}}
{{--                                    </div>--}}
                                </div>
                                @endif

{{--                                    <div class="row row-base"  >--}}
{{--                                        <div class="col-sm-3 title"    >--}}
{{--                                            LINE ID--}}
{{--                                        </div>--}}
{{--                                        <div class="col-sm-9 content"  >--}}
{{--                                            @if(empty($data) || empty($data->line_id))--}}
{{--                                                <input type="text" id="bot_line_id" name="lineId" value="{{(empty($data))?'':$data->line_id}}">--}}
{{--                                                <br>--}}
{{--                                                <span class="errors" id="lineId"></span>--}}
{{--                                            @else--}}
{{--                                            <input type="hidden" id="bot_line_id" name="lineId" value="{{(empty($data))?'':$data->line_id}}">--}}
{{--                                            <span>{{(empty($data))?'':$data->line_id}} </span>--}}
{{--                                            <span class="ml-3 copy-text" onclick="copyClipBoard('bot_line_id')" >--}}
{{--                                                <svg class="Icon_ionic-md-copy_bl" viewBox="6.187 3.375 19.482 24.121" style="width: 19px;height: 19px;">--}}
{{--                                                    <path id="Icon_ionic-md-copy_bl" d="M 18.24794387817383 3.375 L 11.3189868927002 3.375 C 10.03756427764893 3.375 8.97067928314209 4.383902549743652 8.97067928314209 5.665324687957764 L 8.97067928314209 6.158179759979248 L 8.535808563232422 6.158179759979248 C 7.254384994506836 6.158179759979248 6.187499523162842 7.167080879211426 6.187499523162842 8.448504447937012 L 6.187499523162842 25.14757537841797 C 6.187499523162842 26.42899894714355 7.254384994506836 27.49588394165039 8.535808563232422 27.49588394165039 L 20.59625244140625 27.49588394165039 C 21.87767219543457 27.49588394165039 22.88657569885254 26.42899894714355 22.88657569885254 25.14757537841797 L 22.88657569885254 24.71270561218262 L 23.37942886352539 24.71270561218262 C 24.66085243225098 24.71270561218262 25.66975402832031 23.64581871032715 25.66975402832031 22.3643970489502 L 25.66975402832031 10.79681205749512 L 18.24794387817383 3.375 Z M 18.24794387817383 5.961037158966064 L 23.08371734619141 10.79681205749512 L 18.24794387817383 10.79681205749512 L 18.24794387817383 5.961037158966064 Z M 21.03112411499023 25.14757537841797 C 21.03112411499023 25.42009925842285 20.83398246765137 25.64043235778809 20.59625244140625 25.64043235778809 L 8.535808563232422 25.64043235778809 C 8.280682563781738 25.64043235778809 8.042951583862305 25.4027042388916 8.042951583862305 25.14757537841797 L 8.042951583862305 8.448504447937012 C 8.042951583862305 8.210773468017578 8.263287544250488 8.013631820678711 8.535808563232422 8.013631820678711 L 8.97067928314209 8.013631820678711 L 8.97067928314209 22.82826232910156 C 8.97067928314209 24.10968399047852 9.573701858520508 24.71270561218262 10.85512351989746 24.71270561218262 L 21.03112411499023 24.71270561218262 L 21.03112411499023 25.14757537841797 Z M 23.81430244445801 22.3643970489502 C 23.81430244445801 22.63691711425781 23.61716079711914 22.85725212097168 23.37942886352539 22.85725212097168 L 11.3189868927002 22.85725212097168 C 11.06386184692383 22.85725212097168 10.82613182067871 22.61952209472656 10.82613182067871 22.3643970489502 L 10.82613182067871 5.665324687957764 C 10.82613182067871 5.427595138549805 11.04646587371826 5.230452060699463 11.3189868927002 5.230452060699463 L 15.46476364135742 5.230452060699463 L 16.39249038696289 5.230452060699463 L 16.39249038696289 10.79681205749512 L 16.39249038696289 12.65226459503174 L 18.24794387817383 12.65226459503174 L 23.81430244445801 12.65226459503174 L 23.81430244445801 22.3643970489502 Z">--}}
{{--                                                    </path>--}}
{{--                                                </svg>--}}
{{--                                            </span>--}}
{{--                                            @endif--}}

{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="row row-base"  >--}}
{{--                                        <div class="col-sm-3 title"    >--}}
{{--                                            友だち追加URL--}}
{{--                                        </div>--}}
{{--                                        <div class="col-sm-9 content"  >--}}
{{--                                            <input type="hidden" name="url" id="url1" value="{{(empty($data))?'':$data->url_add_friend}}">--}}
{{--                                            <span>{{(empty($data))?'':$data->url_add_friend}}</span>--}}
{{--                                           <span class="ml-3 copy-text" onclick="copyClipBoard('url1')" >--}}
{{--                                                <svg class="Icon_ionic-md-copy_bl" viewBox="6.187 3.375 19.482 24.121" style="width: 19px;height: 19px;">--}}
{{--                                                    <path id="Icon_ionic-md-copy_bl" d="M 18.24794387817383 3.375 L 11.3189868927002 3.375 C 10.03756427764893 3.375 8.97067928314209 4.383902549743652 8.97067928314209 5.665324687957764 L 8.97067928314209 6.158179759979248 L 8.535808563232422 6.158179759979248 C 7.254384994506836 6.158179759979248 6.187499523162842 7.167080879211426 6.187499523162842 8.448504447937012 L 6.187499523162842 25.14757537841797 C 6.187499523162842 26.42899894714355 7.254384994506836 27.49588394165039 8.535808563232422 27.49588394165039 L 20.59625244140625 27.49588394165039 C 21.87767219543457 27.49588394165039 22.88657569885254 26.42899894714355 22.88657569885254 25.14757537841797 L 22.88657569885254 24.71270561218262 L 23.37942886352539 24.71270561218262 C 24.66085243225098 24.71270561218262 25.66975402832031 23.64581871032715 25.66975402832031 22.3643970489502 L 25.66975402832031 10.79681205749512 L 18.24794387817383 3.375 Z M 18.24794387817383 5.961037158966064 L 23.08371734619141 10.79681205749512 L 18.24794387817383 10.79681205749512 L 18.24794387817383 5.961037158966064 Z M 21.03112411499023 25.14757537841797 C 21.03112411499023 25.42009925842285 20.83398246765137 25.64043235778809 20.59625244140625 25.64043235778809 L 8.535808563232422 25.64043235778809 C 8.280682563781738 25.64043235778809 8.042951583862305 25.4027042388916 8.042951583862305 25.14757537841797 L 8.042951583862305 8.448504447937012 C 8.042951583862305 8.210773468017578 8.263287544250488 8.013631820678711 8.535808563232422 8.013631820678711 L 8.97067928314209 8.013631820678711 L 8.97067928314209 22.82826232910156 C 8.97067928314209 24.10968399047852 9.573701858520508 24.71270561218262 10.85512351989746 24.71270561218262 L 21.03112411499023 24.71270561218262 L 21.03112411499023 25.14757537841797 Z M 23.81430244445801 22.3643970489502 C 23.81430244445801 22.63691711425781 23.61716079711914 22.85725212097168 23.37942886352539 22.85725212097168 L 11.3189868927002 22.85725212097168 C 11.06386184692383 22.85725212097168 10.82613182067871 22.61952209472656 10.82613182067871 22.3643970489502 L 10.82613182067871 5.665324687957764 C 10.82613182067871 5.427595138549805 11.04646587371826 5.230452060699463 11.3189868927002 5.230452060699463 L 15.46476364135742 5.230452060699463 L 16.39249038696289 5.230452060699463 L 16.39249038696289 10.79681205749512 L 16.39249038696289 12.65226459503174 L 18.24794387817383 12.65226459503174 L 23.81430244445801 12.65226459503174 L 23.81430244445801 22.3643970489502 Z">--}}
{{--                                                    </path>--}}
{{--                                                </svg>--}}
{{--                                            </span>--}}

{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="row"  >--}}
{{--                                        <div class="col-sm-12"   >--}}
{{--                                            <p class="sub-title mt-2"> LIFF設定項目</p>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="row row-base"  >--}}
{{--                                        <div class="col-sm-3 title"    >--}}
{{--                                            エンドポイントURL--}}
{{--                                        </div>--}}
{{--                                        <div class="col-sm-9 content"  >--}}
{{--                                            <span>{{ $baseUrl}}/liff-callback/{{ $bots->liff_callback_unique }} </span>--}}
{{--                                            <input type="hidden" name="url_endpoint" id="url_endpoint" value="{{ $baseUrl}}/liff-callback/{{ $bots->liff_callback_unique }}">--}}
{{--                                            <span class="ml-3 copy-text" onclick="copyClipBoard('url_endpoint')" >--}}
{{--                                                <svg class="Icon_ionic-md-copy_bl" viewBox="6.187 3.375 19.482 24.121" style="width: 19px;height: 19px;">--}}
{{--                                                    <path id="Icon_ionic-md-copy_bl" d="M 18.24794387817383 3.375 L 11.3189868927002 3.375 C 10.03756427764893 3.375 8.97067928314209 4.383902549743652 8.97067928314209 5.665324687957764 L 8.97067928314209 6.158179759979248 L 8.535808563232422 6.158179759979248 C 7.254384994506836 6.158179759979248 6.187499523162842 7.167080879211426 6.187499523162842 8.448504447937012 L 6.187499523162842 25.14757537841797 C 6.187499523162842 26.42899894714355 7.254384994506836 27.49588394165039 8.535808563232422 27.49588394165039 L 20.59625244140625 27.49588394165039 C 21.87767219543457 27.49588394165039 22.88657569885254 26.42899894714355 22.88657569885254 25.14757537841797 L 22.88657569885254 24.71270561218262 L 23.37942886352539 24.71270561218262 C 24.66085243225098 24.71270561218262 25.66975402832031 23.64581871032715 25.66975402832031 22.3643970489502 L 25.66975402832031 10.79681205749512 L 18.24794387817383 3.375 Z M 18.24794387817383 5.961037158966064 L 23.08371734619141 10.79681205749512 L 18.24794387817383 10.79681205749512 L 18.24794387817383 5.961037158966064 Z M 21.03112411499023 25.14757537841797 C 21.03112411499023 25.42009925842285 20.83398246765137 25.64043235778809 20.59625244140625 25.64043235778809 L 8.535808563232422 25.64043235778809 C 8.280682563781738 25.64043235778809 8.042951583862305 25.4027042388916 8.042951583862305 25.14757537841797 L 8.042951583862305 8.448504447937012 C 8.042951583862305 8.210773468017578 8.263287544250488 8.013631820678711 8.535808563232422 8.013631820678711 L 8.97067928314209 8.013631820678711 L 8.97067928314209 22.82826232910156 C 8.97067928314209 24.10968399047852 9.573701858520508 24.71270561218262 10.85512351989746 24.71270561218262 L 21.03112411499023 24.71270561218262 L 21.03112411499023 25.14757537841797 Z M 23.81430244445801 22.3643970489502 C 23.81430244445801 22.63691711425781 23.61716079711914 22.85725212097168 23.37942886352539 22.85725212097168 L 11.3189868927002 22.85725212097168 C 11.06386184692383 22.85725212097168 10.82613182067871 22.61952209472656 10.82613182067871 22.3643970489502 L 10.82613182067871 5.665324687957764 C 10.82613182067871 5.427595138549805 11.04646587371826 5.230452060699463 11.3189868927002 5.230452060699463 L 15.46476364135742 5.230452060699463 L 16.39249038696289 5.230452060699463 L 16.39249038696289 10.79681205749512 L 16.39249038696289 12.65226459503174 L 18.24794387817383 12.65226459503174 L 23.81430244445801 12.65226459503174 L 23.81430244445801 22.3643970489502 Z">--}}
{{--                                                    </path>--}}
{{--                                                </svg>--}}
{{--                                            </span>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="row row-base"  >--}}
{{--                                        <div class="col-sm-3 title" >--}}
{{--                                            LIFF ID--}}
{{--                                        </div>--}}
{{--                                        <div class="col-sm-9 content"  >--}}
{{--                                            <input type="text" name="liff_app_id"  value="{{(empty($bots))?'':$bots->liff_app_id}}">--}}
{{--                                            <br>--}}
{{--                                            <span class="errors" id="liff_app_id"></span>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <p class="text-warning" style="color: #e15633"><span class="glyphicon glyphicon-warning-sign"></span>  LIFFアプリを変更すると、過去に作った流入アクション、予約管理、リッチメニューに設定しているフォーム作成が機能できなくなります。</p>--}}
{{--                                    <div class="row"  >--}}
{{--                                        <div class="col-sm-12"  >--}}
{{--                                            <p class="sub-title mt-2"> データコピー</p>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                    <div class="row"  >--}}
{{--                                        <div class="col-sm-12"  >--}}
{{--                                            <p class="sub-title mt-3"> 独自ドメイン設定項目</p>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="row row-base" style="margin-bottom: 2px" >--}}
{{--                                        <div class="col-sm-3 title"    >--}}
{{--                                            独自ドメイン--}}
{{--                                        </div>--}}
{{--                                        <div class="col-sm-9 content"  >--}}
{{--                                            @if($data->plan_type == 1)--}}
{{--                                            <input type="text" name="domain_url_shorten"--}}
{{--                                                   value="{{(empty($data))?'':$data->domain_url_shorten}}" @if($data->plan_type == 2 || strtotime($data->expired_date) < time()) disabled @endif >--}}
{{--                                            <br>--}}
{{--                                            <span class="errors" id="domain_url_shorten"></span>--}}
{{--                                                @else--}}
{{--                                                <span>有料プランのみ</span>--}}
{{--                                                @endif--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                    <div class="row"  >--}}
{{--                                        <div class="col-sm-12"  >--}}
{{--                                            <a href="https://lme.jp/manual/own_domain/" target="_blank">--}}
{{--                                                <button class="btn btn-primary" type="button" style="width: 150px">設定マニュアル</button>--}}
{{--                                            </a>--}}

{{--                                        </div>--}}
{{--                                    </div>--}}

                                </div>
                            </div>
                        <div>
                                <button type="submit" style="width: 200px;padding: 10px" class="btn btn-sns-line btn-sns-line-success btn-shadown-dropdown"
                                        id="submit-form" form="change-form">保存</button>
                                <br>
                                <a href="/admin/home" type="button" style="width: 150px;padding: 10px;margin-top: 20px" class="btn btn-sns-line btn-sns-line-secondary btn-shadown-dropdown">戻る</a>
                        </div >

                        </form>
                    </div>
                </div>
                <div id="modal-err-status-link" class="modal fade"  data-keyboard="false"
                     data-backdrop="static"
                     tabindex="-1" role="dialog" aria-labelledby="list-choose-test-modal"
                     style="display:none">
                    <input type="hidden" value="" id="bot_id" name="bot_id">

                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div id="" class="modal-header">

                                <button type="button" aria-label="Close" class="close" data-dismiss="modal" style="opacity: unset;font-size: 34px;width: 20px" onclick="closeModalReLink()">
                                    <span aria-hidden="true" style="color: black !important;">×</span>
                                </button>
                            </div>

                            <div id="media_modal_body" class="modal-body modal-body-main">
                                <div class="row" style=" align-items: center; display: flex;">
                                    <div class="col-sm-12 ">
                                        <div class="">
                                            <div style="font-size: 21px;font-weight: bold;color: #d9534f;text-align: center;">応答設定を確認して下さい。</div>
                                            <div class="form-horizontal">
                                                <div class="form-group">

                                                    <div class="col-sm-12 text-center">
                                                        <img src="/images/add_bot_img.jpg" style=" padding-top: 10px">
                                                    </div>

                                                </div>
                                                <div class="form-group">
                                                    <div class="col-sm-6 col-sm-offset-4">
                                                        <label style="font-size: 20px; margin-bottom: 15px ;font-weight: 500;" >
                                                            LINE公式アカウント管理画面<br>
                                                            設定→応答設定ページ
                                                        </label>
                                                        <label style="font-size: 20px; color:#d9534f; font-weight: 500;" >
                                                            基本設定・応答モード：Bot<br>
                                                            詳細設定・Webhook ：オン
                                                        </label>
                                                    </div>

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

                                    </div>
                                </div>
                            </div>
                            <div id="" class="modal-footer" style=" justify-content: center; display: flex; align-items: baseline;">
                                <button class="btn btn-danger btn-sm" style="width: 100px;" onclick="reLink()">
                                    再接続
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="modal-check-domain" class="modal fade"  data-keyboard="false"
                     data-backdrop="static"
                     tabindex="-1" role="dialog" aria-labelledby="list-choose-test-modal"
                     style="display:none">
                    <input type="hidden" value="" id="bot_id" name="bot_id">

                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div id="" class="modal-header">

                                <button type="button" aria-label="Close" class="close" data-dismiss="modal" style="opacity: unset;font-size: 34px;width: 20px" onclick="closeModalCheckDomain()">
                                    <span aria-hidden="true" style="color: black !important;">×</span>
                                </button>
                            </div>

                            <div id="media_modal_body" class="modal-body modal-body-main">
                                <div class="inner">
                                    <div>再接続をする場合、他のシステムとの接続が解除される場合がありますがよろしいですか？
                                    </div>

                                </div>
                            </div>
                            <div id="" class="modal-footer" style=" justify-content: center; display: flex; align-items: baseline;">
                                <button class="btn btn-success pull-left" style="width: 100px" type="button" onclick="setDomain()">
                                    はい
                                </button>
                                <button class="btn btn-secondary" onclick="closeModalCheckDomain()" type="button"  style="width: 100px">
                                    いいえ
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="modal-active-domain" class="modal fade"  data-keyboard="false"
                     data-backdrop="static"
                     tabindex="-1" role="dialog" aria-labelledby="list-choose-test-modal"
                     style="display:none">
                    <input type="hidden" value="" id="bot_id" name="bot_id">

                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div id="" class="modal-header">

                                <button type="button" aria-label="Close" class="close" data-dismiss="modal" style="opacity: unset;font-size: 34px;width: 20px" onclick="closeModalActiveDomain()">
                                    <span aria-hidden="true" style="color: black !important;">×</span>
                                </button>
                            </div>

                            <div id="media_modal_body" class="modal-body modal-body-main">
                                <div class="inner">
                                    <div>一度オフしてからオンにして下さい。
                                    </div>

                                </div>
                            </div>
                            <div id="" class="modal-footer" style=" justify-content: center; display: flex; align-items: baseline;">
                                <button class="btn btn-success pull-left btn-shadown-dropdown" style="width: 100px" type="button" onclick="checkActiveDomain()">
                                    はい
                                </button>
                                <button class="btn btn-secondary btn-shadown-dropdown" onclick="closeModalActiveDomain()" type="button"  style="width: 100px">
                                    やめる
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="modalCheckLiffSuccess" class="modal fade"  data-keyboard="false"
                     data-backdrop="static"
                     tabindex="-1" role="dialog" aria-labelledby="modalCheckLiffSuccess"
                     style="display:none">
                    <input type="hidden" value="" id="bot_id" name="bot_id">

                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div id="" class="modal-header" style="border-bottom: none">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px;
                                text-align: end;color: #51595c; width: 38px;">
                                    <span class="line-icon line-icon-close"><i class="fas fa-times"></i></span>
                                </button>
                            </div>

                            <div  class="modal-body " style="height: 80px; text-align: center">
                                <div class="col-md-12">
                                    <div style="  ">
                                        正常に接続されています
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div id="modalCheckLiffFail"
                     class="modal fade"
                     tabindex="-1" role="dialog"
                     aria-labelledby="chatSettingStatus">
                    <input type="hidden" value="" id="bot_id" name="bot_id">

                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div id="" class="modal-header" style="border-bottom: none">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px;
                                text-align: end;color: #51595c;width: 38px;">
                                    <span class="line-icon line-icon-close"><i class="fas fa-times"></i></span>
                                </button>
                            </div>

                            <div id="media_modal_body" class="modal-body modal-body-main">
                                <div class="col-md-12">
                                    <div style="    margin-left: 11%;">LIFFアプリの接続が切れているため再接続処理を行います。<br>
                                        再接続処理を行なった場合、すでに作成済みの <br>
                                        回答フォーム、商品、カレンダー予約、イベント予約、 <br>
                                        流入アクションが利用できなくなる場合があります。
                                    </div>

                                </div>
                            </div>
                            <div id="" class="modal-footer" style=" justify-content: center; display: flex; align-items: baseline; border-top: none">
                                <button class="btn btn-sns-line btn-sns-line-success" style="width: 100px"
                                        type="button" onclick="reCreateLiff()">
                                    はい
                                </button>
                                <button class="btn-sns-line btn btn-sns-line-dark" data-dismiss="modal"
                                        type="button"  style="width: 100px">
                                    いいえ
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Modal -->
        <div class="modal fade" id="modalNotify" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
            </div>
        </div>
        </div>
        @endif
        @if(empty($data))
                <input type="hidden" id="app_token_univapay" value="{{ env('UNIVAPAY_APP_TOKEN') }}">
            <section  id="choose_plan" @if(!empty($botSlotId)) style="display: none"  @endif>

                <div>
                    <div style="position: relative">
                        <h2 class="titlePage" style="">プラン選択</h2>
                        <ul class="nav nav-tabs" role="tablist" id="tabs-plan-bot">
                            <li role="presentation" class="active" style="border-bottom: unset;text-align: center;margin-bottom: 0">
                                <a @click="switchTabPlanBot('tab1')" id="show_plan_year" href="#plan_year" role="tab" data-toggle="tab"
    {{--                               style="border: unset;box-shadow: 0px 3px 6px #00000029;"--}}
                                >年間払い（10% OFF）</a>
                            </li>
                            <li role="presentation" class="" style="border-bottom: unset;text-align: center;margin-bottom: 0">
                                <a @click="switchTabPlanBot('tab2')" id="show_plan_month" href="#plan_month" role="tab" data-toggle="tab"
                                   style="border: unset;">毎月払い</a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active col-sm-12 " id="plan_year">
                            <div class="title-box-plan" >※年間払いのみ銀行振込での支払いが可能です</div>
                            <div class="tab-content-plan-bot">
                                <div class="sub-plan-bot">
                                    <div class="header-box-plan">
                                        <div class="top-header-box-plan" style="background: #08BF5A">無料で試したい方向け</div>
                                        <div class="bottom-header-box-plan">
                                            フリー
                                            <div class="body-box-plan">
                                                <div class="title-body-box-plan">1LINE公式アカウントまで</div>
                                                <div style="text-align: center">¥<span style="font-size: 30px;margin-left: 10px">0</span></div>
                                                <button type="button" class="btn btn-sns-line btn-sns-line-success btn-box-plan btn-shadown-dropdown" onclick="ShowAddBotFree()">このプランを利用</button>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="sub-plan-bot">
                                    <div class="header-box-plan">
                                        <div class="top-header-box-plan" style="background: #FE9300">業務で利用したい方向け</div>
                                        <div class="bottom-header-box-plan">
                                            スタンダード
                                            <div class="body-box-plan">
                                                <div class="title-body-box-plan">1LINE公式アカウントごと / 月</div>
                                                <div style="text-align: center">¥<span style="font-size: 30px;margin-left: 10px">{{ number_format($basicFee * 0.9) }}</span></div>
                                                <button type="button" class="btn btn-sns-line btn-sns-line-success btn-box-plan btn-shadown-dropdown" style="background: #FE9300" v-on:click="showConfirmContract('standard', 'year')">このプランを利用</button>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="sub-plan-bot">
                                    <div class="header-box-plan">
                                        <div class="top-header-box-plan" style="background: #F44336">よりビジネスを拡大させたい方向け</div>
                                        <div class="bottom-header-box-plan">
                                            プロ
                                            <div class="body-box-plan">
                                                <div class="title-body-box-plan">1LINE公式アカウントごと/ 月</div>
                                                <div style="text-align: center">¥<span style="font-size: 30px;margin-left: 10px">{{ number_format(config('sns-line.plan_pro_fee') * 0.9) }}</span></div>
                                                <button type="button" class="btn btn-sns-line btn-sns-line-danger btn-box-plan btn-shadown-dropdown" v-on:click="showConfirmContract('pro', 'year')">このプランを利用</button>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                
                                <div class="sub-plan-bot">
                                    <div class="header-box-plan">
                                        <div class="top-header-box-plan" style="background: #C16AC9">多数のアカウントを運用される方向け</div>
                                        <div class="bottom-header-box-plan">
                                            <a href="https://lme.jp/manual/enterprise/" target="_blank" class="font-weight-bold" style="text-decoration: underline;color: #5799DB;">
                                            おまとめ割引
                                            </a>
                                            <div class="body-box-plan">
                                                <div class="title-body-box-plan" style="font-size: 16px;
                                                                color: rgb(81, 89, 92);
                                                                text-decoration: none;
                                                                padding-top: 20px;
                                                                padding-bottom: 20px;
                                                            ">
                                                    <span>ご利用アカウント数に<br/>応じて割引</span>
                                                </div>
                                                <button type="button"  class="btn btn-sns-line btn-sns-line-success btn-box-plan btn-shadown-dropdown" v-on:click="showConfirmContract('enterprise', 'year')" style="background: #C16AC9; ">このプランを利用</button>

                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-content-plan-bot">
                                <div class="intro_plan_left">
                                    <div class="title">初期費用
                                    </div>
                                    <div class="content danger" >
                                        無料
                                    </div>
                                    <div class="title">最低契約期間
                                    </div>
                                    <div class="content danger">
                                        制限なし
                                    </div>
                                    <div class="title">エルメ月間配信数（※1）
                                    </div>
                                    <div  style="display: flex; align-items: center; ">
                                        <div class="content " style="width: 33%; border-right: 1px solid #E0E0E0">
                                            <span style="font-size: 20px;">1,000 </span>
                                            <span style="font-size: 11px">通まで</span></div>
                                        <div class="content danger " style="width: 65%">無制限</div>
                                    </div>
                                    <div class="title">チャット履歴閲覧・検索期間
                                    </div>
                                    <div  style="display: flex; align-items: center;">
                                        <div class="content " style="width: 33%; border-right: 1px solid #E0E0E0">
                                            <span style="font-size: 20px; ">180</span>
                                            <span  style="font-size: 11px">日間</span></div>
                                        <div class="content danger" style="width: 65%">無制限</div>
                                    </div>
                                    <div class="title">総友だち数上限
                                    </div>
                                    <div style="display: flex; align-items: center; ">
                                        <div class="content " style="width: 68%; border-right: 1px solid #E0E0E0">
                                            <span style="font-size: 20px;">5</span>
                                            <span  style="font-size: 11px">万人まで</span></div>
                                        <div class="content danger" style="width: 32%">
                                            <span style="font-size: 20px;">10</span>
                                            <span  style="font-size: 11px">万人まで（※2）</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="intro_plan_right">
                                    <div class="title">10~40アカウント</div>
                                    <div class="content">
                                        <span style="font-size: 30px;">20</span>
                                        <span  style="font-size: 11px">% OFF</span>
                                    </div>
                                    <div class="title">50~90アカウント</div>
                                    <div class="content">
                                        <span style="font-size: 30px;">25</span>
                                        <span  style="font-size: 11px">% OFF</span>
                                    </div>
                                    <div class="title">100アカウント</div>
                                    <div class="content">
                                        <span style="font-size: 30px;">30</span>
                                        <span  style="font-size: 11px">% OFF</span>
                                    </div>

                                </div>
                            </div>
                            <div class="box_note_plan" style="">
                                <p>※1 有料プランで配信数が無制限となるのはL Messageの配信数のみであり、LINE公式アカウントの配信数は無制限にはなりません。<br>
                                    LINE公式アカウントは別途配信数に応じて有料プランのご契約が必要です。</p>
                                <p>※2　有効友だち数が10万人を超える場合は、個別のご案内となりますのでご利用をご希望の場合は、<a style="color: #5799DB; text-decoration: underline"  href="https://forms.gle/ThxgSX852UMAaqpV8" target="_blank" >お問い合わせフォーム</a>よりご連絡ください。</p>
                            </div>

                        </div>
                        <div role="tabpanel" class="tab-pane col-sm-12 " id="plan_month">
                            <div class="title-box-plan" style="">※年間払いのみ銀行振込での支払いが可能です </div>
                            <div class="tab-content-plan-bot">
                                <div class="sub-plan-bot">
                                    <div class="header-box-plan">
                                        <div class="top-header-box-plan" style="background: #08BF5A">無料で試したい方向け</div>
                                        <div class="bottom-header-box-plan">
                                            フリー
                                            <div class="body-box-plan">
                                                <div class="title-body-box-plan">1LINE公式アカウントまで</div>
                                                <div style="text-align: center">¥<span style="font-size: 30px;margin-left: 10px">0</span></div>
                                                <button type="button" class="btn btn-sns-line btn-sns-line-success btn-box-plan btn-shadown-dropdown" onclick="ShowAddBotFree()">このプランを利用</button>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="sub-plan-bot">
                                    <div class="header-box-plan">
                                        <div class="top-header-box-plan" style="background: #FE9300">業務で利用したい方向け</div>
                                        <div class="bottom-header-box-plan">
                                            スタンダード
                                            <div class="body-box-plan">
                                                <div class="title-body-box-plan">1LINE公式アカウントごと / 月</div>
                                                <div style="text-align: center">¥<span style="font-size: 30px;margin-left: 10px">{{ number_format($basicFee) }}</span></div>
                                                <button type="button" class="btn btn-sns-line btn-sns-line-success btn-box-plan btn-shadown-dropdown" style="background: #FE9300" v-on:click="showConfirmContract('standard', 'month')">このプランを利用</button>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="sub-plan-bot">
                                    <div class="header-box-plan">
                                        <div class="top-header-box-plan" style="background: #F44336">よりビジネスを拡大させたい方向け</div>
                                        <div class="bottom-header-box-plan">
                                            プロ
                                            <div class="body-box-plan">
                                                <div class="title-body-box-plan">1LINE公式アカウントごと/ 月</div>
                                                <div style="text-align: center">¥<span style="font-size: 30px;margin-left: 10px">{{ number_format(config('sns-line.plan_pro_fee')) }}</span></div>
                                                <button type="button" class="btn btn-sns-line btn-sns-line-danger btn-box-plan btn-shadown-dropdown" v-on:click="showConfirmContract('pro', 'month')">このプランを利用</button>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="sub-plan-bot">
                                    <div class="header-box-plan">
                                        <div class="top-header-box-plan" style="background: #C16AC9">多数のアカウントを運用される方向け</div>
                                        <div class="bottom-header-box-plan">
                                            <a href="https://lme.jp/manual/enterprise/" class="font-weight-bold" target="_blank" style="text-decoration: underline;color: #5799DB;">
                                            おまとめ割引
                                            </a>
                                            <div class="body-box-plan">
                                                <div class="title-body-box-plan" style="font-size: 16px;
                                                                color: rgb(81, 89, 92);
                                                                text-decoration: none;
                                                                padding-top: 20px;
                                                                padding-bottom: 20px;
                                                            ">
                                                    <span>ご利用アカウント数に<br/>応じて割引</span>
                                                </div>
                                                <button type="button"  class="btn btn-sns-line btn-sns-line-success btn-box-plan btn-shadown-dropdown" v-on:click="showConfirmContract('enterprise', 'month')" style="background: #C16AC9;">このプランを利用</button>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-content-plan-bot">
                                <div class="intro_plan_left">
                                    <div class="title">初期費用
                                    </div>
                                    <div class="content danger" >
                                        無料
                                    </div>
                                    <div class="title">最低契約期間
                                    </div>
                                    <div class="content danger">
                                        制限なし
                                    </div>
                                    <div class="title">エルメ月間配信数（※1）
                                    </div>
                                    <div  style="display: flex; align-items: center; ">
                                        <div class="content " style="width: 33%; border-right: 1px solid #E0E0E0">
                                            <span style="font-size: 20px;">1,000 </span>
                                            <span style="font-size: 11px">通まで</span></div>
                                        <div class="content danger " style="width: 65%">無制限</div>
                                    </div>
                                    <div class="title">チャット履歴閲覧・検索期間
                                    </div>
                                    <div  style="display: flex; align-items: center;">
                                        <div class="content " style="width: 33%; border-right: 1px solid #E0E0E0">
                                            <span style="font-size: 20px; ">180</span>
                                            <span  style="font-size: 11px">日間</span></div>
                                        <div class="content danger" style="width: 65%">無制限</div>
                                    </div>
                                    <div class="title">総友だち数上限
                                    </div>
                                    <div style="display: flex; align-items: center; ">
                                        <div class="content " style="width: 68%; border-right: 1px solid #E0E0E0">
                                            <span style="font-size: 20px;">5</span>
                                            <span  style="font-size: 11px">万人まで</span></div>
                                        <div class="content danger" style="width: 32%">
                                            <span style="font-size: 20px;">10</span>
                                            <span  style="font-size: 11px">万人まで（※2）</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="intro_plan_right">
                                    <div class="title">10~40アカウント</div>
                                    <div class="content">
                                        <span style="font-size: 30px;">10</span>
                                        <span  style="font-size: 11px">% OFF</span>
                                    </div>
                                    <div class="title">50~90アカウント</div>
                                    <div class="content">
                                        <span style="font-size: 30px;">15</span>
                                        <span  style="font-size: 11px">% OFF</span>
                                    </div>
                                    <div class="title">100アカウント</div>
                                    <div class="content">
                                        <span style="font-size: 30px;">20</span>
                                        <span  style="font-size: 11px">% OFF</span>
                                    </div>

                                </div>
                            </div>
                            <div class="box_note_plan" style="">
                                <p>※1 有料プランで配信数が無制限となるのはL Messageの配信数のみであり、LINE公式アカウントの配信数は無制限にはなりません。<br>
                                    LINE公式アカウントは別途配信数に応じて有料プランのご契約が必要です。</p>
                                <p>※2　有効友だち数が10万人を超える場合は、個別のご案内となりますのでご利用をご希望の場合は、<a style="color: #5799DB; text-decoration: underline"  href="https://forms.gle/ThxgSX852UMAaqpV8" target="_blank" >お問い合わせフォーム</a>よりご連絡ください。</p>
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="introduction_plan_new">
                                <div>
                                    <img src="https://lme.jp/manual/wp-content/uploads/2022/10/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%B5%E3%82%A4%E3%82%B9%E3%82%99-%E2%80%93-1-2.png?v={{config("sns-line.version")}}">
                                </div>
                                <!-- <div class="box_intro_point" style="">
                                    <p>※1 有料プランで配信数が無制限となるのはL Messageの配信数のみであり、LINE公式アカウントの配信数は無制限にはなりません。<br>
                                        LINE公式アカウントは別途配信数に応じて有料プランのご契約が必要です。</p>
                                    <p>※2　有効友だち数が10万人を超える場合は、個別のご案内となりますのでご利用をご希望の場合は、<a style="color: #5799DB; text-decoration: underline"  href="https://forms.gle/ThxgSX852UMAaqpV8" target="_blank" >お問い合わせフォーム</a>よりご連絡ください。</p>
                                    <p>※3　フリープランは「powered  by L Message」と広告が表示されます。</p>
                                    <p>※4　決済システムはUnivaPay・Stripeの2つに対応しています。ご利用には左記決済システムのアカウントをご準備いただく必要があります。</p>
                               </div> -->

                                <!-- <div class="box_intro_point">
                                    <div class="text-center" style="font-size: 16px">お申し込み時の注意点</div>
                                    <div class="lbl_title_plan">フリー</div>
                                    <div>・配信数は1ヶ月ごとにリセットされます</div>
                                    <div>・1ヶ月以内に配信数が1,000通に達した場合、全てのメッセージ配信が自動的に停止いたしますのでご注意ください。</div>
                                    <div>・1つのエルメアカウントにフリープランで接続できるLINE公式アカウントは1つまでとなります。2つ目以降のLINE公式アカウントの接続は1LINE公式アカウントご <br>
                                        とにスタンダードプランのお申込みが必要となります。※エルメのフリープランが利用されてない状態で、LINE公式アカウントがスタンダードプランで接続されている  <br>
                                        場合にはそのLINE公式アカウントの他にフリープランでLINE公式アカウントを1つまで接続可能となります。</div>
                                    <div class="lbl_title_plan" style="    margin-top: 24px;">スタンダード・プロ</div>
                                    <div>・1,000通以上の配信を行う場合は、エルメの有料プランとLINE公式アカウントの有料プランの両方の契約が必要となります。 <br>
                                        （エルメとLINE公式アカウント、それぞれの有料契約は連動しておりません。）</div>
                                    <div>・1ヶ月以内に1,000通以上の配信が見込まれる場合は、初めからスタンダードプランのご利用を推奨いたします。</div>
                                    <div>・システムの仕様上、スタンダード・プロプランのダウングレードはできませんのでご注意ください。</div>
                                    <div>・解約はいつでも可能です。（日割り計算による返金はございません。）</div>
{{--                                    <div>・年間一括払いの場合、お支払いいただく金額は116,424円（税込）で、契約は自動更新となります。</div>--}}
                                    <div>・中途解約の場合でも返金はできかねますので予めご了承ください。</div>
                                    <div class="lbl_title_plan">エンタープライズ</div>
                                    <div>・お支払い方法は 月払い/クレジットカードのみ、年間一括払い/銀行振込のみとなりますのであらかじめご了承ください。</div>
                                    <div>・中途解約の場合でも返金はできかねますので予めご了承ください。</div>

                                </div> -->
                            </div>

                        </div>

                        <div class="col-sm-12" style="margin: 20px 0 ;box-shadow: rgba(0, 0, 0, 0.16) 1px -1px 5px; padding: 20px 50px" id="button_confirm_year">
                            <div class=" row">
                                <div class="col-sm-12" style="    display: flex;
                                            align-items: center;
                                            justify-content: space-evenly;">
                                    <div  style="text-align: center">
                                        <div style="color: #51595C ">フリー</div>
                                        <button type="button" class="btn btn-sns-line btn-sns-line-success btn-bottom-plan btn-shadown-dropdown"  style="width: 210px" onclick="ShowAddBotFree()">フリープランを利用</button>
                                    </div>
                                    <div  style="text-align: center">
                                        <div style="color: #51595C ">スタンダード</div>
                                        <button type="button" class="btn btn-sns-line btn-sns-line-success btn-bottom-plan btn-shadown-dropdown" style="width: 210px;background: rgb(254, 147, 0);" v-on:click="showConfirmContract('standard', 'year')" >スタンダードプランを利用</button>
                                    </div>
                                    <div  style="text-align: center">
                                        <div style="color: #51595C ">プロ</div>
                                        <button type="button" class="btn btn-sns-line btn-sns-line-success btn-sns-line-danger btn-shadown-dropdown" style="width: 210px;height: 41px;" v-on:click="showConfirmContract('pro', 'year')" >プロプランを利用</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12" style="margin: 20px 0 ;box-shadow: rgba(0, 0, 0, 0.16) 1px -1px 5px; padding: 20px 50px;display: none" id="button_confirm_month">
                            <div class=" row">
                                <div class="col-sm-12" style="    display: flex;
                                            align-items: center;
                                            justify-content: space-evenly;">
                                    <div  style="text-align: center">
                                        <div style="color: #51595C ">フリー</div>
                                        <button type="button" class="btn btn-sns-line btn-sns-line-success btn-bottom-plan btn-shadown-dropdown"  style="width: 210px" onclick="ShowAddBotFree()">フリープランを利用</button>
                                    </div>
                                    <div  style="text-align: center">
                                        <div style="color: #51595C ">スタンダード</div>
                                        <button type="button" class="btn btn-sns-line btn-sns-line-success btn-bottom-plan btn-shadown-dropdown" style="width: 210px;background: rgb(254, 147, 0);" v-on:click="showConfirmContract('standard', 'month')" >スタンダードプランを利用</button>
                                    </div>
                                    <div  style="text-align: center">
                                        <div style="color: #51595C ">プロ</div>
                                        <button type="button" class="btn btn-sns-line btn-sns-line-success btn-sns-line-danger btn-shadown-dropdown" style="width: 210px;height: 41px;" v-on:click="showConfirmContract('pro', 'month')" >プロプランを利用</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="modalConfirmNotifyContract" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document" style="width: 500px">
                        <div class="modal-content">
                            <div class="modal-body" style="text-align: center;padding: 20px 30px 20px 30px">
                                <div class="row px-c-5 font-weight-bold text-left" >
                                    すでにエンタープライズプランの契約があります。<br/>
                                    既存の契約内で接続枠の追加ができますが、新たにエンタープライズプランの契約を行いますか？
                                </div>
                                <div style="margin-top: 15px">
                                    <button class="btn btn-sns-line btn-sns-line-success btn-shadown-dropdown-light" v-on:click="acceptCreateEnterprise()" style="width: 100px;padding: 10px 18px 8px;font-size: 15px">はい</button>
                                    <button class="btn btn-sns-line btn-sns-line-danger btn-shadown-dropdown-light" v-on:click="cancelCreateEnterprise()" style="width: 100px;padding: 10px 18px 8px;font-size: 15px">いいえ</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="modal fade" id="modalConfirmContract" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document" style="width: 500px">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px;width: 30px">
                                    <i class="fas fa-times hover-icon-action" style="color: rgba(125,145,149,1);padding: 5px 10px;border-radius: 4px;font-size: 24px"></i></button>
                                <h2 class="text-center" style="font-weight: bold;">契約内容確認</h2>
                            </div>
                            <div class="modal-body" style="text-align: center;padding: 0 30px 20px 30px">
                                <div class="row px-c-5" >
                                    <div class="col-sm-12" style="padding: 0">
                                        <div id="setting_basic_info" style="font-size: 14px">
                                            <div class="modal-row">
                                                <div class="modal-row-title">お申し込みプラン</div>
                                                <div class="modal-row-content">
                                                    <div v-if="type_slot == 'standard' && type_bill == 'month'">スタンダードプラン 毎月一括払い</div>
                                                    <div v-if="type_slot == 'standard' && type_bill == 'year'">スタンダードプラン 年間一括払い</div>
                                                    <div v-if="type_slot == 'enterprise' && type_bill == 'month'">おまとめ（スタンダード）プラン 毎月一括払い</div>
                                                    <div v-if="type_slot == 'enterprise' && type_bill == 'year'">おまとめ（スタンダード）プラン 年間一括払い</div>
                                                    <div v-if="type_slot == 'pro' && type_bill == 'month'">プロ 毎月一括払い</div>
                                                    <div v-if="type_slot == 'pro' && type_bill == 'year'">プロ 年間一括払い</div>
                                                    <div v-if="type_slot == 'enterprise_pro' && type_bill == 'month'">おまとめ（プロ）プラン 毎月一括払い</div>
                                                    <div v-if="type_slot == 'enterprise_pro' && type_bill == 'year'">おまとめ（プロ）プラン 年間一括払い</div>
                                                </div>
                                            </div>
                                            <div class="modal-row" v-if="type_slot == 'enterprise'">
                                                <div class="modal-row-title">契約枠数</div>
                                                <div class="modal-row-content" style="display: flex">
                                                    <select v-on:change="calculateSaleEnterprise()" class="form-control" v-model="number_slot" style="width: 80px">
                                                        <option>10</option>
                                                        <option>20</option>
                                                        <option>30</option>
                                                        <option>40</option>
                                                        <option>50</option>
                                                        <option>60</option>
                                                        <option>70</option>
                                                        <option>80</option>
                                                        <option>90</option>
                                                        <option>100</option>
                                                    </select>
{{--                                                    <input type="number" min="2" class="form-control" v-on:change="calculateSaleEnterprise()" v-model="number_slot" style="width: 80px">--}}
                                                    <div style="margin-left: 5px;margin-top: 5px">枠</div>
                                                </div>
                                            </div>
                                            <div class="modal-row">
                                                <div class="modal-row-title">お支払い料金</div>
                                                <div class="modal-row-content">
                                                    @{{ text_price_payment }}
                                                </div>
                                            </div>
                                            <div class="modal-row">
                                                <div class="modal-row-title">お支払い方法</div>
                                                <div class="modal-row-content">
                                                    <div style="display: block">
                                                    <input type="radio" checked name="payment_type" value="1" v-model="payment_type">クレジットカード
                                                    </div>
                                                    <div style="display: block;text-align: initial"  v-if="type_bill == 'year'">
                                                    <input type="radio" name="payment_type" value="2" v-model="payment_type">銀行振込
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-row" v-if="type_bill == 'year'" style="text-align: left; margin-top: 20px">
                                                <p>銀行振込の場合、お振込み後有料プランの有効化まで最短数分~最長数日 </br>
                                                    （土日祝日を挟む場合など）かかる場合がございます。</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="margin-top: 15px">
                                    <button class="btn btn-sns-line btn-sns-line-success btn-shadown-dropdown-light" v-on:click="showPaymentUnivapay()" style="width: 130px;padding: 10px 18px 8px;font-size: 15px">決済にすすむ</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="modalShowBankTransferUnivapay" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document" style="width: 45%">
                        <div class="modal-content">
                            <div class="modal-header" style="border-bottom: unset">
                                <button type="button" class="close"  aria-hidden="true" style="opacity: 1;font-size: 27px;width: 30px">
                                    <i class="fas fa-times hover-icon-action" style="color: rgba(125,145,149,1);padding: 5px 10px;border-radius: 4px;font-size: 24px" @click="closeModalInfoBankTransfer()"></i></button>
                                <h2 class="text-center" style="margin-bottom: 0">契約詳細</h2>
                            </div>
                            <div class="modal-body" style="text-align: center;padding: 0 30px 20px 30px">
                                <div>
                                    <div class="modal-row">
                                        <div class="modal-row-title" style="width: 200px">契約プラン</div>
                                        <div class="modal-row-content">
                                            <span  v-if="type_slot == 'standard'">スタンダード</span>
                                            <span v-else-if="type_slot == 'enterprise'">おまとめ（スタンダード）</span>
                                            <span v-else-if="type_slot == 'enterprise_pro'">おまとめ（プロ）</span>
                                            <span v-if="type_bill == 'year'">（年間一括）</span>
                                        </div>
                                    </div>
                                    <div class="modal-row">
                                        <div class="modal-row-title" style="width: 200px">契約枠数</div>
                                        <div class="modal-row-content" v-if='type_slot == "enterprise"'>
                                            @{{ number_slot }}枠
                                            <span v-if="number_slot > 9 && number_slot < 49">
                                                <span v-if="type_bill == 'month'">（10%割引適用）</span>
                                                <span v-if="type_bill == 'year'">（15%割引適用）</span>
                                            </span>
                                            <span v-if="number_slot > 49 && number_slot < 99">
                                                <span v-if="type_bill == 'month'">（15%割引適用）</span>
                                                <span v-if="type_bill == 'year'">（25%割引適用）</span>
                                            </span>
                                            <span v-if="number_slot == 100">
                                                 <span v-if="type_bill == 'month'">（20%割引適用）</span>
                                                <span v-if="type_bill == 'year'">（30%割引適用）</span>
                                            </span>
                                        </div>
                                        <div class="modal-row-content" v-else>
                                            1枠
                                            <span v-if="type_bill == 'year'">（10%割引適用）</span>
                                        </div>
                                    </div>
                                    <div class="modal-row">
                                        <div class="modal-row-title" style="width: 200px">ご利用料金</div>
                                        <div class="modal-row-content">
                                            @{{ text_price_payment }}
                                            <span v-if="type_bill == 'month'">/月</span>
                                            <span v-if="type_bill == 'year'">/年</span>
                                        </div>
                                    </div>
                                    <div class="modal-row" style="align-items: baseline;">
                                        <div class="modal-row-title" style="width: 200px">振込口座情報</div>
                                        <div class="modal-row-content" style="text-align: left">
                                            <div style="text-align: left;"><span>@{{ bank_name }}</span>銀行</div>
                                            <div style="text-align: left;"><span>@{{ branch_name ? branch_name : '' }}</span>支店</div>
                                            <div class="row-info-transfer">
                                                <div style="flex: 0 0 80px; margin-right: 20px">普通口座</div>
                                                <div style="flex: 0 0 80px;" id="account_number"></div>
                                            </div>
                                            <div>(ｶ)ﾕﾆｳﾞｧﾍﾟｲｷｬｽﾄ</div>
                                            <div style="font-size: 11px">※振込手数料はご負担いただきますようお願いいたします。</div>
                                        </div>
                                    </div>
                                    <div class="modal-row text-left"  >
                                        本日より7日間以内に上記口座にご利用料金をお振込みください。お振込み後、有料プランが有効化されます。有料プランの有効化まで最短数分~最長数日（土日祝日をはさむ場合など）かかる場合がございます。振込口座情報はご登録のメールアドレスにもお送りしています。
                                    </div>

                                </div>
                                <button type="button" class="btn btn-sns-line btn-sns-line-success btn-shadown-dropdown" style="width: 200px;margin-top: 20px" @click="closeModalInfoBankTransfer()">閉じる</button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
                <div class="modal fade" id="modalFormAddCardUnivapay" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document" style="width: 500px">
                        <div class="modal-content">
                            <div class="modal-header" style="border-bottom: unset">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px;width: 30px">
                                    <i class="fas fa-times hover-icon-action" style="color: rgba(125,145,149,1);padding: 5px 10px;border-radius: 4px;font-size: 24px"></i></button>
                                <h2 class="text-center" style="margin-bottom: 0">決済カード情報登録
                                </h2>
                            </div>
                            <div class="modal-body" style="text-align: center;padding: 0 30px 20px 30px">
                                <div style="text-align: center;margin-bottom: 20px">
                                    <span><img class="img-card" src="/images/visa.png"></span>
                                    <span><img class="img-card" src="/images/mastercard.png"></span>
                                    <span><img class="img-card" src="/images/jcbcard.png"></span>
                                    <span><img class="img-card" src="/images/americanexpress.png"></span>
                                    <span><img class="img-card" src="/images/dinerscard.png"></span>
                                </div>
                                <form id="payment-form-univapay" action="">
                                    <div id="checkout">
                                    </div>
                                    <button type="button" class="btn btn-sns-line btn-sns-line-success btn-shadown-dropdown" style="width: 200px;margin-top: 20px" onclick="getPaymentInfo()">決済</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            <section id="connect_bot" @if(empty($botSlotId)) style="display: none"  @endif>
                <input type="hidden" id="bot_slot_id" @if($botSlotId) value="{{ $botSlotId }}" @endif>
                <h2 style="font-size: 23px; color: #51595C; font-weight: bold; padding: 10px 10px 10px 0; margin: 0">
                    LINE公式アカウント接続</h2>
                <div style="font-size: 16px;color: #F44336;font-weight: bold">
                    接続操作は必ずパソコンを使って行なってください
                    <br>
                    スマートフォンでは行わないでください
                </div>
                <br>
                <div id="step2_info" class="step-info">
                    <p class="font-weight-bold" style="text-align: center;font-size: 20px">新規接続 動画マニュアル</p>
                    <div style="text-align: center; margin: auto; margin-top: 10px">
                        <iframe style="width: calc(38vw - 90px) ; height: calc(0.6 * (38vw - 90px));border-radius: 5px"
                                src="https://www.youtube.com/embed/xbyU6KAyy_Y" allowfullscreen>
                        </iframe>
                    </div>
                </div>
                <div>

                </div>
                <div class="row">
                    <div class="col-lg-md col-lg-10">
                        <div class="row area-info-bot" style=" align-items: center; display: flex; background-color: #FFEFEF;line-height: 1.7;">
                            <div class="col-sm-12 ">
                                <div class="danger" style="font-size: 18px ; color:#F44336 ">総友だち数上限（※）にご注意下さい </div>
{{--                                <div style="font-size: 12px; font-weight: initial">--}}
{{--                                    ※ 有効友だち数：エルメ上に登録されている友だちから、ブロックしている・されている友だちを除いたメッセージのやり取りが可能な友だちの数。--}}
{{--                                </div>--}}
                                <div style="font-size: 15px ">フリー・スタンダードプランの場合 ：0~50,000人まで</div>

                                <div style="font-size: 15px ">プロプランの場合　　　　　　　　 ：50,001~100,000人まで</div>

                                <div style="font-size: 15px ">有効友だち数が100,001人以上の方は、<a href="https://forms.gle/ThxgSX852UMAaqpV8" target="_blank" style="color: #5799DB; font-weight: bold; text-decoration: underline">利用申請フォーム</a>より申請をお願いいたします。</div>
                            </div>
                        </div>


                        <div class="row area-info-bot" style=" align-items: center; display: flex; background-color: #F8F8F8">
                            <div class="col-sm-12 ">
                                    <div class="row" style=" align-items: center; display: flex; ">
                                        <div class="col-sm-6 font-weight-bold">
                                            <div style="font-size: 18px;margin-bottom: 10px">1 LINE公式アカウント管理画面にログイン</div>
                                            <div>LINE公式アカウントをまだお持ちでない方は<a class="font-weight-bold" href="https://lme.jp/media/line/account-open/" style="color:rgba(87,153,219,1);text-decoration:underline;" target="_blank">こちら</a></div>
                                        </div>
                                        <div class="col-sm-6 ">
                                            <a class="font-weight-bold" href=" https://account.line.biz/login?redirectUri=https%3A%2F%2Fmanager.line.biz%2F%3Fstatus%3Dsuccesshttps://lme.jp/media/line/account-open/" style="color: white" target="_blank">
                                                <button type="button" class="btn-shadown-dropdown" id="btn_manual_bot">LINE公式アカウント 管理画面ログイン<i class="fas fa-external-link" style="margin-top: 7px;font-size: 25px;margin-left: 25px;"></i></button>
                                            </a>
                                        </div>
                                    </div>
                                   </div>
                        </div>
                        <div class="col-sm-12 text-center" style="margin-top: 10px"><i class="fas fa-chevron-down" style="color: #7D9195; font-size: 25px"></i></div>
                        <form id="step2_form" method="post" enctype="multipart/form-data" style=" margin-top: 46px;">
                            {{csrf_field()}}
                        <div class="row area-info-bot" style=" align-items: center; background-color: #F8F8F8">
                            <div class="col-sm-12 ">
                                    <div class="row" style=" align-items: center; display: flex; ">
                                        <div class="col-sm-12 font-weight-bold" style="font-size: 18px;margin-bottom: 10px">
                                            2「設定」→「Messaging API」よりAPI情報を入力
                                        </div>
                                    </div>
                                    <div class="font-weight-bold">Messaging API情報の設定方法は<a class="font-weight-bold" href="https://lme.jp/manual/register/" target="_blank" style="color:rgba(87,153,219,1);text-decoration:underline;">こちら</a></div>
                                        <div class="form-horizontal form-bot-info">
                                            <div class="form-group form-group-bot-info">
                                                <label for="channelIdNew" class="control-label col-sm-4" style="font-size: 18px;padding-top: 7px">Channel ID</label>
                                                <div class="col-sm-8">
                                                    <input type="text" name="channel_id_new" id="channel_id_input" data-vv-as="  タイトル" aria-required="true" aria-invalid="true" class="form-control">
                                                    <span class="errors font-weight-bold" id="channel_id_new"></span>
                                                    <br>
                                                </div>
                                            </div>
                                            <div class="form-group form-group-bot-info">
                                                <label for="channelSecretNew" class="control-label col-sm-4" style="font-size: 18px;padding-top: 5px">Channel secret</label>
                                                <div class="col-sm-8" >
                                                    <input type="text" name="channel_secret_new" id="channel_secret_input"  aria-required="true" aria-invalid="true" class="form-control">
                                                    <span class="errors font-weight-bold" id="channel_secret_new"></span>
                                                    <br>
                                                </div>
                                            </div>
                                        </div>
                            </div>
                        </div>
                            <div class="col-sm-12 text-center" style="margin-top: 10px"><i class="fas fa-chevron-down" style="color: #7D9195; font-size: 25px"></i></div>

                            <div class="row area-info-bot" style=" align-items: center;margin-top: 45px; background-color: #F8F8F8">
                                <div class="col-sm-12">
                                        <div class="row" style=" align-items: center; display: flex; ">
                                            <div class="col-sm-12 font-weight-bold" style="font-size: 18px">
                                                3 LINE developersにログインして <br> LINEログイン>チャネル基本設定より下記情報を入力
                                            </div>
                                        </div>
                                    <div class="font-weight-bold">LINE developersのログインは<a class="font-weight-bold" href="https://account.line.biz/login?redirectUri=https%3A%2F%2Fdevelopers.line.biz%2Fconsole%2F" target="_blank" style="color:rgba(87,153,219,1);text-decoration:underline;">こちら</a></div>
                                        <div class="form-horizontal form-bot-info">
                                            <div class="form-group form-group-bot-info row">
                                                <label for="client_id_input" class="control-label col-sm-4" style="font-size: 18px;padding-top: 7px">チャネル ID</label>
                                                <div class="col-sm-8">
                                                    <input type="text" name="client_id_new" id="client_id_input" aria-required="true" aria-invalid="true" class="form-control">
                                                    <span class="errors font-weight-bold" id="client_id_new"></span>
                                                    <br>
                                                </div>
                                            </div>
                                            <div class="form-group form-group-bot-info">
                                                <label for="client_secret_input" class="control-label col-sm-4" style="font-size: 18px;padding-top: 5px;">チャネル シークレット</label>
                                                <div class="col-sm-8" >
                                                    <input type="text" name="client_secret_new" id="client_secret_input"  aria-required="true" aria-invalid="true" class="form-control">
                                                    <span class="errors font-weight-bold" id="client_secret_new"></span>
                                                    <br>
                                                </div>
                                            </div>
                                        </div>
                                    <div style="color: #F44336;font-size: 13px;margin-top: 15px;">※ステップ2とステップ3は項目名は同じですが、異なる情報を入力します。詳細は上記の設定動画をご確認ください。</div>
                                </div>
                            </div>
                            <div class="col-sm-12 text-center" style="margin-top: 10px"><i class="fas fa-chevron-down" style="color: #7D9195; font-size: 25px"></i></div>

                            <div class="row area-info-bot" style=" align-items: center; display: flex; margin-top: 45px; background-color: #F8F8F8">
                            <div class="col-sm-12">
                                <div class="row" style=" align-items: center; display: flex;">
                                    <div class="col-sm-12 font-weight-bold" style="font-size: 18px;">
                                        4「設定」→「応答設定」より設定内容を確認
                                    </div>
                                </div>
                                    <div class="">

                                        <div class="form-horizontal" style="padding: 20px">
                                            <div class="form-group d-flex">

                                                <div class="text-center" style="padding: 0 20px 0 0">
                                                    <img src="/images/add_bot_new_12.png"  style="height: 340px; width: 460px;" id="qr_code_step3">
                                                </div>
                                                <div class="col-sm-6" style="margin-top: 80px">
                                                    <div class="form-warring-setting">
                                                        <div class="title-warring-setting" style="background: #7D9195">チャット</div>
                                                        <div >オン（推奨）</div>
                                                    </div>
                                                    <div class="form-warring-setting">
                                                        <div class="title-warring-setting" style="background: #7D9195">あいさつメッセージ</div>
                                                        <div >オフ（推奨）</div>
                                                    </div>
                                                    <div class="form-warring-setting">
                                                        <div class="title-warring-setting" style="background: #F44336">Webhook</div>
                                                        <div  style="color: #F44336;">オン（必須）</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                        </div>
                            <button id="button_connect" class="btn-shadown-dropdown" type="submit" style="font-weight: 600">接続チェック</button>
                        </form>
                    </div>
                </div>
            </section>
            <section id="detail_connect_bot" style="font-weight: bold;display: none">
                <h2 style="font-size: 23px; color: #51595C; font-weight: bold; padding: 10px 10px 10px 0; margin: 0">
                    LINE公式アカウント接続</h2>
                <br>
                <div class="row">
                    <div class="col-sm-9">
                        <div style="font-size: 18px;">接続が完了しました</div>
                        <div id="info_basic_bot">
                            <img id="image_basic_bot" src="/images/8.png" onerror="imgBotError(this);">
                            <div id="name_basic_bot" style="font-size: 16px">LINE公式アカウント名</div>
                        </div>
                        <div style="font-size: 20px; color: #F44336">画面を閉じる前に必ず下記をご確認ください</div>
                        <div class="row area-info-bot" style="padding: 10px 0">
                            <div style="font-size: 16px;">◯すでにLINE公式アカウントに友だちがいる場合</div>
                            <div style="padding: 20px; background-color: #FFEEED; margin-top: 10px; border-radius: 5px;">
                                <div class="title-detail-connect-bot" style="background-color:  #F44336;">未認証アカウント</div>
                                <div style="margin-bottom: 20px"><span style="color: #F44336">・初めはエルメ上に友だちの情報は表示されません</span> （友だち情報の追加方法は<a target="_blank" href="https://lme.jp/manual/add_existing_friends/" style="text-decoration: underline;font-weight: bold">コチラ</a>）</div>
                                <div style="margin-bottom: 10px">・過去のチャットはエルメ上では表示されません<br>（過去のチャットはLINE OFFICIAL ACCOUNT MANAGERから確認できます。）</div>
                            </div>
                            <div style="padding: 20px; background-color: #F8F8F8; margin: 20px 0 20px; border-radius: 5px">
                                <div class="title-detail-connect-bot">認証済みアカウント</div>
                                <div style="margin-bottom: 20px">・友だち情報が自動取得されます</div>
                                <div style="margin-bottom: 40px">・過去のチャットはエルメ上では表示されません<br>（過去のチャットはLINE OFFICIAL ACCOUNT MANAGERから確認できます。）</div>
                            </div>
                            <div style="font-size: 16px;">◯LINE公式アカウントまだ友だちがいない場合</div>
                            <div style="margin: 10px 0 20px 0">・そのままホームにお進みください</div>
                        </div>
                        <a href="{{ route('adminIndex') }}" id="back_list_bot_connent">
                            <button class="btn btn-sns-line btn-sns-line-success btn-shadown-dropdown" style="padding: 10px 35px;width: 200px;margin-top: 30px;font-size: 16px">ホーム</button>
                        </a>
                    </div>
                </div>
            </section>
        @endif
    </article>
    <input type="hidden" id="flag_bot_line_id" value="{{$flag_bot_line_id}}">
    <input type="hidden" id="basic_fee" value="{{$basicFee}}">
    <input type="hidden" id="flag_free_plan" value="{{$flagChangeFreePlan}}">
    <input type="hidden" id="bot_free_number" value="{{$botFreeNumber}}">
    <input type="hidden" id="bot_id_upgrade" value="{{$upgradeBotId}}">
    <input type="hidden" id="type_connect" value="{{isset($_GET['type']) ? $_GET['type'] : null}}">
@endsection
@push('script')
    <script>
        const basic_fee = $('#basic_fee').val();
        const bot_id_upgrade = $('#bot_id_upgrade').val();
    </script>
    <script src="https://widget.univapay.com/client/checkout.js"></script>
    <script src="/js/media/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="/js/admin/bot.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/admin/step_add_bot.js?v={{config('sns-line.version')}}"></script>
    <script>
     function addFlagGetOldFriend(){
         var bot_id = $("input[name='id']").val();
         console.log(bot_id);
         $.ajax({
             type: "POST",
             url: "/ajax/add-flag-get-old-friend",
             data: {
                 bot_id: bot_id
             }, // serializes the form's elements.
             success: function (data) {
                 if (data.success == true) {
                     alert(data.message);
                 } else {
                     alert(data.message);
                 }
             } ,
             error: function (data) {
                 console.log(data)
                 alert(data.message);
             }

         });
     }
     function reGetAvatarBot(id){

         $.ajax({
             type: "POST",
             url: "/ajax/reGetAvatarBot",
             data: {
                 bot_id: id
             }, // serializes the form's elements.
             success: function (data) {
                 if (data.success == true) {
                    window.location.reload();
                 } else {
                     alert(data.message);
                 }
             } ,
             error: function (data) {
                 alert(data.message);
             }

         });
     }


    $(document).ready(function() {
        var flag_bot = $('#flag_bot_line_id').val();
        console.log(flag_bot);
        if(flag_bot == 1){
            $('#bot_line_id').focus();
        }
    });

        
    function copyClipBoard(id) {
        var copyText = document.getElementById(id);
        /* Select the text field */
        // copyText.select();
        // // copyText.setSelectionRange(0, 99999); /* For mobile devices */
        //
        // /* Copy the text inside the text field */
        // navigator.clipboard.writeText(copyText.value);
        //
        // /* Alert the copied text */
        // alert("Copied the text: " + copyText.value);
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val(copyText.value).select();
        document.execCommand("copy");
        $temp.remove();
        var notificationTag = $("div.copy-notification");
        var notificationText = "Copied to clipboard";
        var showNotification = true;
        if (showNotification && notificationTag.length == 0) {
            var notificationTag = $("<div/>", { "class": "copy-notification", text: notificationText });
            $("body").append(notificationTag);
            notificationTag.fadeIn("slow", function () {
                setTimeout(function () {
                    notificationTag.fadeOut("slow", function () {
                        notificationTag.remove();
                    });
                }, 1000);
            });
        }
    }

     function checkLinkBot(item) {
         console.log('checkLinkBot',item);
         $('#pageTimeClose').val('edit_bot');
         $.ajaxSetup({
             headers: {
                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
             }
         });
         $.ajax({
             url: '/admin/bot/check-mode',
             beforeSend: function () {
                 $.LoadingOverlay('show');
             },
             type: 'POST',
             data:  {bot_id : item.id }
         }).done(function (a, b, c) {
             console.log(a);
             if (a.success && a.msg) return alert(a.msg), !1;
             var bot = a.bot;
             if(bot){
                 var bot_id = bot.id
                 var status = bot.is_connected;
                 var webhook_url = bot.webhook_url;
                 console.log('bot_id = ' + bot_id);
                 console.log('status = ' + status);
                 console.log('webhook_url = ' + webhook_url);
                 $('#botIdCheck').val(bot_id);

                 if (status == 3 || status == 0) {
                     // $("#modalWebhookOk").modal("show");
                     // $("#modalWebhookFail").modal("show");
                     $("#modalWebhookOff").modal("show");
                 } else if (status == 2)  {
                     $("#modalWebhookONCallbackFail").modal("show");
                     $('#webhook_url_modal').val(webhook_url);
                     $('#webhook_url_modal_copy').val(webhook_url);
                 }
             }

             $.LoadingOverlay('hide');
         }).fail(function (a, b, c) {
             $.LoadingOverlay('hide');
         }).always(function (a, b) {
             $.LoadingOverlay('hide');
         });

     }

     function reLink() {

         $.ajaxSetup({
             headers: {
                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
             }
         });
         $.ajax({
             url: '/admin/bot/check-mode',
             beforeSend: function () {
                 $.LoadingOverlay('show');
             },
             type: 'POST',
             data: {bot_id : $('#bot_id').val() }
         }).done(function (a, b, c) {
             console.log(a);

             if(!a.status_link){
                 $('#modal-check-domain').modal('show');
                 $('#bot_id').val($('#bot_id').val());
             }else{
                 if ( a.msg) return alert(a.msg), !1;
             }


             $.LoadingOverlay('hide');
         }).fail(function (a, b, c) {
             $.LoadingOverlay('hide');
         }).always(function (a, b) {
             $.LoadingOverlay('hide');
         });

     }

     function closeModalReLink() {
         $('#modal-relink').modal('hide');
     }

     function closeModalActiveDomain() {
         $('#modal-active-domain').modal('hide');
     }
     function checkActiveDomain() {
         $.ajaxSetup({
             headers: {
                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
             }
         });
         $.ajax({
             url: '/admin/bot/check-active-domain',
             beforeSend: function () {
                 $.LoadingOverlay('show');
             },
             type: 'POST',
             data: {bot_id:  $('#bot_id').val()}
         }).done(function (a, b, c) {
             console.log(a)

             if (a.success == 0 && a.msg) return alert(a.msg), !1;
             if(!a.active){
                 $('#modal-active-domain').modal('show');
             }else{
                 window.location.reload();
             }

             $.LoadingOverlay('hide');
         }).fail(function (a, b, c) {
             $.LoadingOverlay('hide');
         }).always(function (a, b) {
             $.LoadingOverlay('hide');
         });
     }

     function setDomain() {

         $.ajaxSetup({
             headers: {
                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
             }
         });
         $.ajax({
             url: '/admin/bot/set-domain',
             beforeSend: function () {
                 $.LoadingOverlay('show');
             },
             type: 'POST',
             data: {bot_id:  $('#bot_id').val()}
         }).done(function (a, b, c) {
             console.log(a);
             if (a.success == 0 && a.msg) return alert(a.msg), !1;
             $('#modal-active-domain').modal('show');


             $.LoadingOverlay('hide');
         }).fail(function (a, b, c) {
             $.LoadingOverlay('hide');
         }).always(function (a, b) {
             $.LoadingOverlay('hide');
         });
     }
    </script>
@endpush