@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="/chat_files/jquery-ui.min.css">
<link rel="stylesheet" href="/css/reply/style.css?v={{config('sns-line.version')}}">
<style>
    body>* {
        font-weight: normal;
        color: #535657;
        font-size: 14px;
    }

    .sub h2 {
        color: #535657;
    }


    #auth_delete hr {
        margin-top: 13px;
        margin-bottom: 14px;
    }

    .center input,
    .center button {
        width: 50%;
        margin: 20px auto;
        font-size: 100%;
        text-align: center;
        padding: 10px;
    }

    div.btn 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;

    }

    .btn {
        border-radius: 4px !important;
        font-weight: bold;
    }

    .btn:hover {
        opacity: 0.7;
    }

    a {
        font-weight: bold;
    }

    input {
        height: 34px;
    }

    td {
        color: #51595C;
    }

    #account_management .table>tbody>tr>th {
        border: none !important;
        background-color: #7D9195 !important;
        text-align: left;
    }

    .table>tbody>tr>td {
        border: none;
        border-bottom: 1px solid #F2F2F2;
        text-align: left;
    }

    [v-cloak] {
        display: none !important;
    }

    .active_btn {
        opacity: 0.5;
    }

    .pagination>li>a:hover {
        background-color: rgb(8, 191, 90);
        color: white !important;
    }


    .form-search-friend {
        display: flex;
    }

    .text-important {
        color: #F44336;
    }

    .text-url {
        text-decoration: underline;
        color: #5799DB;
        cursor: pointer;
        font-weight: normal;
    }

    .text-url:hover {
        opacity: 0.7;
    }

    .btn-inactive {
        border: 1px solid #F44336;
        color: #F44336 !important;
        background-color: white;
        cursor: not-allowed;
    }
    .btn-sns-line {
        height: 40px;
        font-size: 14px;
        font-weight: normal;
    }
    .button-auth {
        border: 1px solid #F44336;
        color: #F44336 !important;
        background-color: white;
        font-weight: normal;
    }

    .btn:focus {
        border: 2px solid #F44336 !important;
    }

    .text-margin {
        margin: 15px 0 15px 0;
    }

    .text-margin-2 {
        margin: 10px 0 10px 0;
    }
    .row-flex {
        display: flex;
        align-items: center;
    }

    .tab_title {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin: 20px 10px 10px 10px;
    }

    .alert-success {
        background: #E5F5EC;
        color: #08BF5A;
        border-radius: 15px;
        padding: 8px 25px 5px 25px;
        font-size: 12px;
        margin-bottom: 0;
        margin-left: 25px;
        border: none;
    }

    .area-text-auth {
        padding: 5px 15px 10px 15px;
        background-color: #F8F8F8;
        border-radius: 3px;
    }

    .sub_content {
        background: white;
        padding: 10px;
        height: 235px;
    }

    textarea {
        width: 80%;
        padding: 5px 10px;
    }

    input[type="checkbox"]{
        transform: scale(1.4);
    }

    .form-control {
        border: 1px solid #E0E0E0;
    }

    .value-cont {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        font-size: 18px;
    }

    .input-control {
        border: 1px solid #bbb;
        height: 40px !important;
    }
    .row-checkbox {
        margin-left: 3px;
    }
</style>
@endpush
@section('content')
<article class="sub main" id="auth_delete" style="padding-top: 50px; padding-bottom: 30px">
    <section class="masteredit" id="case_not_allowed_delete" v-show="type_view === 'not_allowed_delete'" v-cloak>
        <h2 class="font-weight-bold" style="font-size: 20px; padding: 0">エルメアカウント削除確認</h2>
        <div class="row">
            <div class="col-sm-10" style="width: auto !important">
                <div class="area-text-auth text-margin">
                    <div class="text-important">エルメに接続されたLINE公式アカウントが残っています。エルメと接続されている全てのLINE公式アカウントを接</div>
                    <div class="text-important">続解除した後にエルメアカウントの削除が可能となります。</div>
                </div>
                <div class="text-margin">LINE公式アカウントの接続解除方法は <a href="https://lme.jp/manual/cancellation/" class="text-url" target="_blank">こちら</a></div>
            </div>
        </div>
    </section>
    <section class="masteredit" id="case_auth_delete_account" v-show="type_view === 'account_deletion' && user_id" v-cloak>
        <h2 class="font-weight-bold" style="font-size: 20px; padding: 0">エルメアカウント削除確認</h2>
        <div class="row">
            <div class="col-sm-10" style="width: auto !important">
                <div class="area-text-auth">
                    <div class="text-margin" style="font-size: 16px;font-weight: bold">ご確認事項</div>
                    <div class="text-margin">
                        <div>エルメアカウント削除後は即時、L Message上からエルメアカウント並びにLINE公式アカウントに関する<span class="text-important">全てのデータが削除さ</span></div>
                        <div><span class="text-important">れ復元ができなくなります</span>のでご注意ください。</div>
                    </div>
                    <div class="text-margin">
                        <div>エルメ上でリッチメニューの表示が設定されたまま、エルメアカウントの削除を行いますと、削除後24時間まで表示設定が残る</div>
                        <div>可能性がございます。削除前にエルメ上の<span class="text-important">リッチメニューを削除</span>されることを推奨いたします。</div>    
                    </div>
                    <div class="text-margin">
                        <div>有料契約期間が残っている場合も、解約扱いとなり本日限りで契約終了となり、次回決済日までの利用権利が消失しま</div>
                        <div>す。<span class="text-important">日割計算での返金等もございません。</span></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-8 text-margin" id="account-text-warning">
                <div class="text-important">アカウント削除後はエルメに関する全てのデータが復旧できなくなりますので</div>
                <div class="text-important">この先の操作は十分ご確認の上お進みください。</div>
            </div>
            <div class="col-sm-8" id="account-component-send-mail">
                <button type="button" id="btn_send_auth_code_delete_account" class="text-margin-2 btn btn-sns-line btn-sns-line-danger button-auth" @click="sendAuthCode('auth_delete_account', 'normal')">認証コードをメールで受け取る</button>
            </div>
            <div class="col-sm-10" id="account-component-delete-step1" hidden>
                <div class="row-flex" style="font-size: 16px;">
                    <div>メールに記載されている認証コードをご入力ください</div>
                    <div class="text-url" style="margin-left: 30px;" @click="sendAuthCode('auth_delete_account', 'resend')">メールを再送する</div>
                    <div class="alert alert-success" id="account_success_alert_send_code" hidden>
                        <div style="display:flex">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14.227" height="14.072" viewBox="0 0 14.227 14.072">
                                <g id="Group_483" data-name="Group 483" transform="translate(-641.332 -699.366)">
                                    <path id="Path_240" data-name="Path 240" d="M14.519,7.5v.591a6.426,6.426,0,1,1-3.811-5.873" transform="translate(640.333 698.339)" fill="none" stroke="#08bf5a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" />
                                    <path id="Path_241" data-name="Path 241" d="M15.854,3.333,9.428,9.766,7.5,7.838" transform="translate(638.998 697.956)" fill="none" stroke="#08bf5a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" />
                                </g>
                            </svg>
                            <span id="account_alert_send_code" style="margin-left: 15px"></span>
                        </div>
                    </div>
                </div>
                <input type="text" class="form-control text-margin-2 input-control" id="code_account" name="code-account" placeholder="認証コードを入力" style="width: 375px;">
                <button type="button" id="btn_delete_account_step1" @click="nextStep('auth_delete_account')" class="text-margin-2 btn btn-sns-line btn-sns-line-danger">エルメアカウントの削除にすすむ</button>
            </div>
            <div class="col-sm-10" id="account-component-delete-step2" hidden>
                <div class="text-margin" style="margin-bottom: 0; font-weight: bold;">解約する理由を教えてください（必須/複数選択）</div>
                <div class="row-flex row-checkbox" v-for="(reason, indexReason) in list_reason_delete">
                    <input type="checkbox" name="checkbox_reason_delete_account" :id="'check_reason_delete_account'+reason.index" :value="reason.index" :data-value-checkbox="reason.value" style="margin-top: 0">
                    <div>@{{ reason.value }}</div>
                </div>
                <textarea class="text-margin form-control" id="note_reason_delete_account" rows="3" style="resize: vertical; margin-top: 10px; width: 750px"></textarea>
                <div class="text-margin" style="margin-bottom: 0;margin-top: 20px; font-weight: bold;">以下の確認事項にチェックをお願い致します。</div>
                <div class="row-flex row-checkbox">
                    <div><input type="checkbox" id="condition_account_1" name="condition-account-1" value="condition_account_1" @change="changeCheckBox('account')" style="height: 25px"></div>
                    <div>アカウント削除後はエルメに関する全てのデータが復旧できなくなることを確認しました。</div>
                </div>
                <div class="row-flex row-checkbox">
                    <div><input type="checkbox" id="condition_account_2" name="condition-account-2" value="condition_account_2" @change="changeCheckBox('account')" style="height: 25px"></div>
                    <div>アカウント削除前にエルメ上で登録しているリッチメニューを削除しました。</div>
                </div>
                <div class="row-flex row-checkbox">
                    <div><input type="checkbox" id="condition_account_3" name="condition-account-3" value="condition_account_3" @change="changeCheckBox('account')" style="height: 25px"></div>
                    <div>アカウント削除後は、次回決済日までの利用権利が消失し日割計算での返金等もないことを確認しました。</div>
                </div>
                <button type="button" id="btn_delete_account_step2" class="text-margin btn btn-sns-line btn-sns-line-danger btn-inactive" @click="deleteAccount()">エルメアカウントを削除する</button>
            </div>
        </div>
    </section>
    <section class="masteredit" id="case_auth_delete_bot" v-show="type_view === 'bot_deletion' && bot_id" v-cloak>
        <h2 class="font-weight-bold" style="font-size: 20px; padding: 0">LINE公式アカウント 接続解除確認</h2>
        <div class="row">
            <div class="col-sm-10" style="width: auto !important">
                <div class="area-text-auth">
                    <div class="text-margin" style="font-size: 16px;font-weight: bold;">ご確認事項</div>
                    <div class="text-margin">
                        <div>LINE公式アカウントの接続解除後は、即時、<span class="text-important">一切の操作、登録したデータの閲覧・コピー・友だち情報の確認等ができなくな</span></div>
                        <div><span class="text-important">ります</span>のでご注意ください。</div>
                    </div>
                    <div class="text-margin">
                        <div>エルメ上でリッチメニューの表示が設定されたまま、LINE公式アカウントの接続解除を行いますと、削除後24時間まで表示設</div>
                        <div>定が残る可能性がございます。削除前にエルメ上の<span class="text-important">リッチメニューを削除</span>されることを推奨いたします。</div>    
                    </div>
                    <div class="text-margin" style="margin-top: 40px">
                        <div>有料契約期間が残っている場合も、解約扱いとなり本日限りで契約終了となり、次回決済日までの利用権利が消失しま</div>
                        <div>す。<span class="text-important">日割計算での返金等もございません。</span></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-10 text-margin" id="bot-text-warning">
                <div class="text-important">LINE公式アカウントの接続解除後はエルメ上に存在する、LINE公式アカウントに関する全てのデータが復旧できなくなりますので</div>
                <div class="text-important">この先の操作は十分ご確認の上お進みください。</div>
            </div>
            <div class="col-sm-8" id="bot-component-send-mail" >
                <button type="button" id="btn_send_auth_code_delete_bot" class="text-margin-2 btn btn-sns-line btn-sns-line-danger button-auth" @click="sendAuthCode('auth_delete_bot', 'normal')">認証コードをメールで受け取る</button>
            </div>
            <div class="col-sm-10" id="bot-component-delete-step1" hidden>
                <div class="row-flex" style="font-size: 16px;">
                    <div>メールに記載されている認証コードをご入力ください</div>
                    <div class="text-url" style="margin-left: 30px;" @click="sendAuthCode('auth_delete_bot', 'resend')">メールを再送する</div>
                    <div class="alert alert-success" id="bot_success_alert_send_code" hidden>
                        <div style="display:flex">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14.227" height="14.072" viewBox="0 0 14.227 14.072">
                                <g id="Group_483" data-name="Group 483" transform="translate(-641.332 -699.366)">
                                    <path id="Path_240" data-name="Path 240" d="M14.519,7.5v.591a6.426,6.426,0,1,1-3.811-5.873" transform="translate(640.333 698.339)" fill="none" stroke="#08bf5a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" />
                                    <path id="Path_241" data-name="Path 241" d="M15.854,3.333,9.428,9.766,7.5,7.838" transform="translate(638.998 697.956)" fill="none" stroke="#08bf5a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" />
                                </g>
                            </svg>
                            <span id="bot_alert_send_code" style="margin-left: 10px"></span>
                        </div>
                    </div>
                </div>
                <input type="text" class="form-control text-margin-2 input-control" id="code_bot" name="code-bot" placeholder="認証コードを入力" style="width: 375px;">
                <button type="button" id="btn_delete_bot_step1" class="text-margin-2 btn btn-sns-line btn-sns-line-danger" @click="nextStep('auth_delete_bot')">LINE公式アカウントの接続解除にすすむ</button>
            </div>
            <div class="col-sm-10" id="bot-component-delete-step2" hidden>
                <div class="text-margin" style="margin-bottom: 0;font-weight: bold;">接続解除する理由を教えてください（必須/複数選択）</div>
                <div class="row-flex row-checkbox" v-for="(reason, indexReason) in list_reason_delete">
                    <input type="checkbox" name="checkbox_reason_delete_bot" :id="'check_reason_delete_bot'+reason.index" :value="reason.index" :data-value-checkbox="reason.value" style="margin-top: 0">
                    <div>@{{ reason.value }}</div>
                </div>
                <textarea class="text-margin form-control" id="note_reason_delete_bot" rows="3" style="resize: vertical; margin-top: 10px; width: 750px"></textarea>
                <div class="text-margin" style="margin-bottom: 0; margin-top: 20px; font-weight: bold;">以下の確認事項にチェックをお願い致します。</div>
                <div class="row-flex row-checkbox">
                    <div><input type="checkbox" id="condition_bot_1" name="condition-bot-1" value="condition_bot_1" @change="changeCheckBox('bot')" style="height: 25px"></div>
                    <div>接続解除後はエルメ上に存在するLINE公式アカウントに関する全てのデータが復旧できなくなることを確認しました。</div>
                </div>
                <div class="row-flex row-checkbox">
                    <div><input type="checkbox" id="condition_bot_2" name="condition-bot-2" value="condition_bot_2" @change="changeCheckBox('bot')" style="height: 25px"></div>
                    <div>接続解除前にエルメ上で登録しているリッチメニューを削除しました。</div>
                </div>
                <div class="row-flex row-checkbox">
                    <div><input type="checkbox" id="condition_bot_3" name="condition-bot-3" value="condition_bot_3" @change="changeCheckBox('bot')" style="height: 25px"></div>
                    <div>接続解除後は、次回決済日までの利用権利が消失し日割計算での返金等もないことを確認しました。</div>
                </div>
                <button type="button" id="btn_delete_bot_step2" class="text-margin btn btn-sns-line btn-sns-line-danger btn-inactive" @click="deleteBot()">LINE公式アカウントを接続解除する</button>
            </div>
        </div>
    </section>
    <input type="text" id="current_user_id" value="{{Auth::user()->id}}" hidden></input>
    <input type="text" id="current_role_user" value="{{Auth::user()->role}}" hidden></input>
    <div class="text-margin text-url" id="btn_back" @click='backScreen()' style="margin-top: 20px; width: 45px" hidden>戻る</div>
</article>
@endsection
@push('script')

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="/js/vue-paginate.js"></script>
<script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
<script type="application/javascript" src="/js/admin/auth_delete_account.js?v={{config("sns-line.version")}}"></script>

<script>
    $(document).ready(function() {
        // $.datepicker.setDefaults($.datepicker.regional["ja"]);
        $('.datepicker').datepicker({
            format: 'yyyy/mm/dd',
            todayHighlight: true,
            autoclose: true,
        });
    });
</script>
@endpush