@extends('layout.admin.main')
@push('css')
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/admin/change_new_bot.css?v={{config("sns-line.version")}}">
@endpush
@section('content')
    <article class="sub" id="change-bots-new">
        <h2 style="padding-left: 0; font-size: 23px" class="font-weight-bold">LINE公式アカウント入れ替え</h2>
        <h3 style="font-size: 17px">LINE公式アカウントを入れ替えする場合、エルメ上に表示されている友だちと友だちに紐づいている情報が全て削除されます。<br/>
            友だち数によっては入れ替え処理が数時間かかる場合があります。<br/>
        <span style="color: #F44336">※処理中は画面を閉じることはできません。通信環境など安定した状態で操作をしてください。</span></h3>
        <input type="hidden" name="bot_id" value="{{ $bot_id }}">
        <div class="step_1_change_bot">
            <h3 style="font-size: 17px">1.新しいLINE公式アカウントの接続情報
                <a target="_blank" class="font-weight-bold"
                   style="color: rgba(87,153,219,1); text-decoration: underline; margin-left: 30px"
                   href="https://account.line.biz/login?redirectUri=https%3A%2F%2Fmanager.line.biz%2F%3Fstatus%3Dsuccesshttps://lme.jp/media/line/account-open/">
                    管理画面ログイン
                </a>
            </h3>
            <div class="form-change-new-bot">
                <div class="font-weight-bold mb-2" style="margin-bottom: 15px">「設定」→「Messaging API」よりAPI情報を入力</div>
                <div class="content-form">
                    <div class="form-group">
                        <div class="row-change-bot">
                            <div class="label-change-bot">Channel ID</div>
                            <div class="div-input">
                                <input class="form-control font-weight-bold" name="channel_id" v-model="channel_id">
                            </div>
                        </div>
                        <div class="row-change-bot">
                            <div class="label-change-bot"></div>
                            <div class="errors" id="channel_id_new"></div>
                        </div>
                    </div>
                    <div class="form-group" style="margin-bottom: 0">
                        <div class="row-change-bot">
                            <div class="label-change-bot">Channel secret</div>
                            <div class="div-input">
                                <input class="form-control font-weight-bold" name="channel_secret"
                                       v-model="channel_secret">
                            </div>
                        </div>
                        <div class="row-change-bot">
                            <div class="label-change-bot"></div>
                            <div class="errors" id="channel_secret_new"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-change-new-bot">
                <div class="font-weight-bold mb-2" style="margin-bottom: 15px">LINEログイン>チャネル基本設定より下記情報を入力</div>
                <div class="content-form">
                    <div class="form-group">
                        <div class="row-change-bot">
                            <div class="label-change-bot">チャネル ID</div>
                            <div class="div-input">
                                <input class="form-control font-weight-bold" name="channel_id_line_login" v-model="channel_id_line_login">
                            </div>
                        </div>
                        <div class="row-change-bot">
                            <div class="label-change-bot"></div>
                            <div class="errors" id="channel_id_line_login"></div>
                        </div>
                    </div>
                    <div class="form-group" style="margin-bottom: 0">
                        <div class="row-change-bot">
                            <div class="label-change-bot">チャネル シークレット</div>
                            <div class="div-input">
                                <input class="form-control font-weight-bold" name="channel_secret_line_login"
                                       v-model="channel_secret_line_login">
                            </div>
                        </div>
                        <div class="row-change-bot">
                            <div class="label-change-bot"></div>
                            <div class="errors" id="channel_secret_line_login"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="step_2_change_bot">
            <h3 style="font-size: 17px">3.「設定」→「応答設定」より設定内容を確認</h3>
            <div class="col-sm-12 col-md-8 col-lg-6 text-center">
                <img src="/images/add_bot_img.jpg" style="height: 400px; width:400px; padding-top: 10px"
                     id="qr_code_step3">
            </div>
            <div class="col-sm-12 col-md-8 col-lg-6" style="margin-top: 30px;margin-bottom: 20px">
                <p style="font-size: 20px;text-align: center; font-weight: bold">
                    応答モード：Bot<br>
                    Webhook：オン
                </p>
            </div>
            <div class="button-check-bot text-center col-sm-12 col-md-8 col-lg-6">
                <button @click="showConfirmChangeNewBot()" type="button" class="btn btn-sns-line btn-sns-line-success">保存</button>
            </div>
        </div>

        <div class="modal fade" id="confirmChangeNewBot" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content" style="padding:0px !important">
                    <span @click="cancelChangeBot()" class="line-icon line-icon-close" style="float: right;height: 34px"><i class="fas fa-times"></i></span>
                        <div class="modal-body" style="margin: 10px 35px 10px 35px;">
                            <h4>LINE公式アカウントを入れ替えする場合、エルメ上に表示されている友だちと
                                友だちに紐づいている情報が全て削除されますがよろしいですか？</h4>
                            <p class="font-weight-bold" style="color: rgba(244,67,54,1) !important;">※処理中は画面を閉じることはできません。通信環境など安定した状態で操作をしてください。</p>
                        </div>
                        <div class="modal-footer" style="text-align: center; border-top: 0">
                            <button type="button" @click="saveStep1()" class="btn btn-sns-line btn-sns-line-success">入れ替え実行</button>
                            <button type="button" @click="cancelChangeBot()" class="btn btn-sns-line" style="margin-left: 30px;">戻る</button>
                        </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="confirmProcessLoading" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content" style="padding:0px !important">
                    <div class="modal-body" style="margin: 10px 35px 10px 35px;">
                        <h4 class="text-center">入れ替え処理を行なっています</h4>
                        <p class="font-weight-bold text-center">友だち数によっては処理に数時間かかる場合があります</p>
                        <div class="progress">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 0" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <p class="font-weight-bold text-center" style="color: rgba(244,67,54,1) !important;">※処理完了まで絶対にこの画面を閉じないで下さい</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="confirmChangeBotSuccess" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content" style="padding:0px !important">
                    <div class="modal-body" style="margin: 10px 35px 10px 35px;">
                        <h4 class="text-center">入れ替え処理が完了しました</h4>
                        <div class="modal-footer" style="text-align: center; border-top: 0">
                            <button type="button" @click="changeBotSuccess()" class="btn btn-sns-line" style="margin-left: 30px;">閉じる</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>
@endsection
@push('script')
    <script src="/js/media/vue.min.js"></script>
    <script src="/js/admin/change_bots_new.js?v={{config("sns-line.version")}}"></script>
@endpush