@extends('layout.admin.main')
@section('title', 'マイページ')
@push('css')
    <style>
        section {
            font-weight: normal;
        }

        .block-setting {
            width: 10px;
            height: 35px;
            position: relative;
            right: 14px;
            top: 8px;
            background-color: #08BF5A;
            border-radius: 10%;
        }

        .block-setting .block-setting2 {
            display: inline-block;
        }

        .block-setting2 {
            font-size: 16px;
            font-weight: bold;
        }

        .row {
            border-spacing: 6px
        }

        .rowName {
            font-weight: normal;
            font-size: 14px;
        }

        .rowForm {
            margin-top: 5px;
            margin-right: 15px;
            border: 1px #E8E8E8;
            border-radius: 5px;
        }
        .rowForm input{
            height: 35px;
        }

        /*fieldset.rowField {*/
        /*    width: 80%;*/
        /*    margin-bottom: 28px !important;*/
        /*    padding: 14px 30px 12px 20px !important;*/
        /*    border: 1px solid #E0E0E0 !important;*/
        /*    border-radius: 5px;*/
        /*}*/

        .form-control[readonly] {
            background: #F8F8F8;
        }

        .form-control {
            border: 1px solid #E8E8E8 !important;
        }

        .area-input {
            padding-left: 17px;
        }

        legend.rowField {
            display: none;
        }

        button[data-target="#deleteModal"]:focus{
            opacity: 1;
        }

        .btn-sns-line-danger:focus {
            opacity: 1;
        }


        .btn-sns-line-success {
            font-size: 16px;
            font-weight: bold;
            background-color: #08BF5A;
        }

        .btn-sns-line-danger {
            width: 250px;
            font-size: 14px;
            font-weight: bold;
            background-color: #F44336;
            position: relative;
            bottom: 45px;
            left: 20px;
        }


        .error {
            font-weight: bold;
            color: red;
        }

        .success {
            font-weight: bold;
            color: green;
        }

        .rowFieldDelete {
            width: 900px;
            height: 500px;
            padding: 30px;
            background-color: #FFFFFF;
            border: 3px solid #F4F6F7 !important;
            border-radius: 5px;
        }

        #deleteModal .modal-dialog
        {
            -webkit-transform: translate(0, -50%);
            -o-transform: translate(0, -50%);
            transform: translate(0, -50%);
            top: 45%;
            right: 10%;
        }
        .text-url {
            text-decoration: underline;
            color: #5799DB;
            cursor: pointer;
        }

        .btn-delete-account {
            color: #F44336;
            text-decoration: underline;
            cursor: pointer;
        }

        .btn-delete-account:hover {
            opacity: 0.7;
        }

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

        .button-auth {
            border: 1px solid #08BF5A !important;
            color: #08BF5A !important;
            background-color: white;
            height: 40px;
            font-size: 14px;
            font-weight: normal;
        }

        .button-auth:focus {
            border: 2px solid #08BF5A !important;
        }

        .button-auth:active {
            border: 2px solid #08BF5A !important;
        }

        .btn-save-common {
            background-color: #F0FAF5;
            color: #08BF5A !important;
            border-radius: 3px;
            width: 150px;
            height: 35px;
            margin-bottom: 15px;
            font-size: 16px;
        }

        .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;
        }

        .btn-back-common {
            color: #535657 !important;
            border-radius: 3px;
            /* margin-left: 10px; */
            background-color: #F2F2F2;
            width: 130px;
            height: 35px;
            font-size: 14px;
        }

        .confirmDelete {
            font-size: 25px;
            margin-left: 250px;
        }

        .inputDelete {
            font-size: 18px;
            display: flex;
            justify-content: center;
        }

        .noteDelete {
            width: 700px;
            height: 160px;
            margin: 25px 0 25px 67px;
            padding: 10px 20px 0 20px;
            color: #151515;
            background-color: #FEBA00;
            border-radius: 5px;
        }

        .component-link-change {
            font-weight: 300;
            font-size: 14px;
            color: #222222;
        }

        .link_change {
            font-weight: 300;
            font-size: 14px;
            color: #5799DB;
            text-decoration: underline;
        }

        .link_change:hover {
            opacity: 0.7;
            color: #5799DB !important;
            text-decoration: underline !important;
        }

        span, h2, label, .admin_setting {
            color: #222222;
        }

        .text-change-email:hover {
            color: #999999;
            opacity: .7;
            text-decoration: underline;
        }

        input::placeholder {
            color: #E0E0E0;
            font-size: 16px;
        }
        [v-cloak] {
            display: none !important;
        }

    </style>
@endpush
@section('content')
    <article id="setting-email" v-cloak>
        <section class="admin_setting pl-[10px]">
            <h2 class="text-[20px] font-bold mb-[20px]">
                マイページ</h2>
            <form action="{{route('adminSettingUpdate')}}" method="post" class="w-[76%]">
                <div class="flex-setting w-[80%] pl-[20px] pr-[30px] pt-[14px] pb-[18px] border border-solid border-[#E0E0E0] rounded-[5px] mb-[20px]">
                    <div class="block-setting2 leading-5 mb-[11px]">アカウント設定</div>
                    <div class="">
                        <div class="mb-[14px]">
                            <div class="rowName">ユーザー名</div>
                            <div class="rowForm mt-[7px]">
                                @if(!$errors->has('name'))
                                    <input type="text" class="form-control h-[35px]" autocomplete="off"
                                           style="font-weight: lighter;" name="name"
                                           value="{{Auth::check() ? Auth::user()->username :''}}">
                                @endif
                                @if($errors->has('name'))
                                    <input type="text" class="form-control h-[35px]" autocomplete="off"
                                           readonly
                                           onfocus="this.removeAttribute('readonly');" name="name"
                                           style="font-weight: lighter;"
                                           value="{{old('name')}}">
                                    <span class="error">
                                    {{$errors->first('name')}}
                                </span>
                                @endif
                            </div>
                        </div>
                        <div class="mb-[14px]">
                            <div class="rowName">会社・組織名</div>
                            <div class="rowForm mt-[7px]">
                                @if(!$errors->has('company_name'))
                                    <input type="text" class="form-control h-[35px]" name="company_name"
                                           autocomplete="off"
                                           style="font-weight: lighter;"
                                           value="{{Auth::check() ? Auth::user()->company_name : ''}}">
                                @else
                                    <input type="text" class="form-control h-[35px]" name="company_name"
                                           autocomplete="off"
                                           style="margin-bottom: -19px; font-weight: lighter;"
                                           value="{{old('company_name')}}"><br>
                                    <span class="error">
                                    {{$errors->first('company_name')}}
                                </span>
                                @endif
                            </div>
                        </div>
                        <div class="">
                            <div class="rowName">電話番号</div>
                            <div class="rowForm mt-[7px]">
                                @if(!$errors->has('phone_number'))
                                    <input type="text" class="form-control h-[35px]" name="phone_number"
                                           autocomplete="off"
                                           style="font-weight: lighter;"
                                           value="{{Auth::check() ? Auth::user()->phone_number : ''}}">
                                @else
                                    <input type="text" class="form-control h-[35px]" name="phone_number"
                                           autocomplete="off"
                                           style="margin-bottom: -19px; font-weight: lighter;"
                                           value="{{ old('phone_number')}}"><br>
                                    <span class="error">
                                    {{$errors->first('phone_number')}}
                                </span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex-setting w-[80%] pl-[20px] pr-[30px] pt-[14px] pb-[18px] border border-solid border-[#E0E0E0] rounded-[5px] mb-[20px]">
                    <div class="block-setting2 leading-5 mb-[11px]">登録メールアドレス</div>
                    <div class="">
                        <div class="mb-[8px]">
                            <div class="rowName">メールアドレス</div>
                            <div class="rowForm mt-[7px]">
                                @if(!$errors->has('email'))
                                    <input type="text" class="form-control h-[35px]" autocomplete="off"
                                           id="email_1"
                                           name="email" style="font-weight: lighter;"
                                           value="{{Auth::check() ? Auth::user()->email : ''}}" readonly>
                                @else
                                    <input type="text" class="form-control h-[35px]" autocomplete="off"
                                           id="email_2"
                                           name="email"
                                           style="margin-bottom: -19px; font-weight: lighter;"
                                           value="{{old('email')}}" readonly><br>
                                    <span class="error">
                                        {{$errors->first('email')}}
                                    </span>
                                @endif
                            </div>
                        </div>
                        <a class="underline text-[14px] cursor-pointer text-[#888888] text-change-email"
                           v-if="!showChangeEmail"
                           @click="showChangeEmail = true">
                            メールアドレスを変更する
                        </a>
                        <div id="component-auth-code-change-mail" v-if="showChangeEmail">
                            <div class="flex items-center">
                                <span class="text-[14px]">メールアドレスを変更する</span>
                                <div class="text-url text-[14px]" style="margin-left: 30px;"
                                     v-if="showInputCode"
                                     @click="reSendCode">
                                    メールを再送する
                                </div>
                                <div class="alert alert-success" id="success_alert_send_mail" v-if="resendCodeSuccess">
                                    <div class="flex items-center">
                                        <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="alert_send_mail" class="text-[10px] text-[#08BF5A]"
                                              style="margin-left: 10px">メールが再送されました</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-[15px] mt-[16px]">
                                <div class="rowName" v-if="!showInputCode"> 変更したいメールアドレスをご入力ください</div>
                                <div class="rowName" v-else> 変更するメールアドレスをご入力ください</div>
                                <div class="rowForm">
                                    <input type="text" class="form-control h-[35px]" id="new_email"
                                           v-model="newEmail"
                                           :disabled="showInputCode"
                                           name="new-email" onkeyup="ChangeInputFormEmail('error_new_email')"
                                           style="font-weight: lighter;">
                                </div>
                                <span class="error error-email mt-[5px]" id="error_new_email"></span>
                            </div>
                            <div v-if="!showInputCode">
                                <button type="button" id="btn_change_mail_user" v-if="!newEmail"
                                        disabled
                                        class="bg-[#FFFFFF] h-[40px] tracking-normal text-[#08BF5A] w-[400px] text-[14px] border rounded-[3px] border-solid border-[#08BF5A]">
                                    変更用の認証コードを入力したメールアドレスで受け取る
                                </button>
                                <button type="button" id="btn_change_mail_user" v-if="newEmail"
                                        @click="sendChangeMailCode"
                                        class="bg-[#08BF5A] h-[40px] tracking-normal text-[#FFFFFF] w-[400px] text-[14px] border rounded-[3px] border-solid border-[#08BF5A] hover:opacity-70">
                                    変更用の認証コードを入力したメールアドレスで受け取る
                                </button>
                            </div>
                            <div v-if="showInputCode">
                                <div class="rowName">メールに記載されている認証コードをご入力ください</div>
                                <div class="rowForm">
                                    <input type="text" class="form-control text-margin input-control w-[300px] h-[35px]"
                                           id="code_change_mail" name="code-change-mail"
                                           @keyup="errorCodeMessage = ''"
                                           v-model="code"
                                           placeholder="認証コードを入力"
                                           style="font-weight: lighter;">
                                </div>
                                <span class="error error-email" id="error_code_change_email"
                                      v-if="errorCodeMessage">@{{ errorCodeMessage }}</span>
                                <div class="flex items-center mt-[15px]">
                                    <button type="button" id="btn_change_mail_user"
                                            @click="changeMail"
                                            class="bg-[#08BF5A] h-[40px] tracking-normal text-[#FFFFFF] w-[250px] text-[14px] border rounded-[3px] border-solid border-[#08BF5A]">
                                        メールアドレスを変更する
                                    </button>
                                    <div class="alert alert-success" id="success_alert_change_mail w-[240px]"
                                         v-if="changeMailSuccess">
                                        <div class="flex items-center">
                                            <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="alert_change_mail" class="text-[10px] text-[#08BF5A]"
                                                  style="margin-left: 10px">メールアドレスが変更されました</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex-setting w-[80%] pl-[20px] pr-[30px] pt-[14px] pb-[18px] border border-solid border-[#E0E0E0] rounded-[5px] mb-[31px]">
                    <fieldset class="rowField">
                        <legend class="rowField"></legend>
                        <div class="block-setting2">パスワードの変更</div>
                        <div class="area-input">
                            <div class="row ">
                                <div class="rowName">現在のパスワードをご入力ください</div>
                                <div class="rowForm">
                                    <input type="password" class="form-control w-[550px]" id="password_old"
                                           style="width: 100%; height: 35px;" name="passwordOld">
                                    @if($errors->has('password'))
                                        <span class="error">
                                            {{$errors->first('password')}}
                                        </span>
                                    @endif

                                    @if(Session::has('errorPass'))
                                        <span class="error">
                                            {{Session::get('errorPass')}}
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="row">
                                <div class="rowName">変更するパスワードをご入力ください</div>
                                <div class="rowForm">
                                    @if(!$errors->has('new_pass'))
                                        <input type="password" class="form-control w-[550px]" id="new_pass"
                                               name="new_pass"
                                               style="width: 100%; height: 35px;">
                                    @else
                                        <input type="password" name="new_pass" id="new_pass" class="w-[550px]"
                                               style="width: 100%; height: 35px;" value="{{old('new_pass')}}"><br>
                                        <span class="error">
                                    {{$errors->first('new_pass')}}
                                </span>
                                    @endif

                                    @if(Session::has('errorNew'))
                                        <span class="error">
                                    {{Session::get('errorNew')}}
                                </span>
                                    @endif
                                        @if(Session::has('errorNewFormat'))
                                            <span class="error" style="margin-bottom: 20px">
                                    {{Session::get('errorNewFormat')}}
                                </span>
                                        @endif
                                </div>
                            </div>
                            <div class="row">
                                <div class="rowName">確認のためもう一度パスワードをご入力ください</div>
                                <div class="rowForm">
                                    @if(!$errors->has('confirm_new_pass'))
                                        <input type="password" class="form-control w-[550px]" id="confirm_new_pass"
                                               name="confirm_new_pass" style="width: 100%; height: 35px;">
                                    @else
                                        <input type="password" class="form-control w-[550px]" id="confirm_new_pass"
                                               name="confirm_new_pass"
                                               style="width: 100%; height: 35px;margin-bottom: -19px;"
                                               value="{{old('confirm_new_pass')}}"><br>
                                        <span class="error">
                                    {{$errors->first('confirm_new_pass')}}
                                </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>

                <div style="display:flex; justify-content: space-between; width: 80%">
                    <div class="text-left ">

                        <button type="submit" class="btn btn-sns-line btn-save-common bg-[#F0FAF5]" id="update">保存</button>
                        <br>
                        <button type="button" onclick='backScreen()' class="btn btn-sns-line btn-back-common bg-[#F2F2F2]">戻る
                        </button>
                    </div>
                    <div class="text-right" style="margin-right: 20px">
                        @if(Auth::user()->role == 0 && Auth::user()->level == null)
                            <div type="button" class="btn-delete-account"
                                 onclick="deleteUser('{{Auth::user()->id}}')" style="font-size: 14px">エルメアカウントを削除する
                            </div>
                        @endif

                    </div>
                </div>
            </form>
            <div class="deleteForm modal fade" id="deleteModal">
                <div class="modal-dialog" role="document">
                    <fieldset class="rowFieldDelete " style="display: inline;">
                    <span class="confirmDelete">
                        <div style="display: inline; color: #535657">エルメアカウント削除確認</div>
                    </span>
                        <!-- <button type="button" data-dismiss="modal" class="close " aria-hidden="true"  style="font-size: 30px;color: #7D9195 ;">
                                            <i class="fas fa-times"></i>
                                    </button> -->
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                style="font-size: 30px; opacity: unset;">
                        <span class="line-icon" style="color: #7D9195 ">
                            <i class="fas fa-times"></i>
                        </span>
                        </button>

                        <div class="noteDelete">
                            <p style="display: flex; justify-content: center;font-size: 20px; margin-bottom: 5px;">
                                注意</p>
                            <p style="font-size: 14px; margin-bottom: 10px;">
                                ・エルメアカウント削除後は即時、L Message上からエルメアカウント並びに
                                LINE公式アカウントに関する全てのデータが削除され復元ができなくなりますのでご注意ください。
                            </p>
                            <p style="font-size: 14px;">
                                ・有料契約期間が残っている場合も、解約扱いとなり本日限りで契約終了とな
                                り、次回決済日ま での利用権利が消失します。日割計算での返金等もございません。
                            </p>
                        </div>
                        <div class="inputDelete" style="color: #535657;">
                            確認のためログインパスワードを入力してください
                        </div>
                        <div>
                            <input type="password" class="form-control " id="password_delete_user"
                                   style="width: 700px; height: 50px; margin-left: 67px; margin-top: 5px;"
                                   name="passwordDel">
                            @if($errors->has('password'))
                                <span class="error">
                            {{$errors->first('password')}}
                        </span>
                            @endif

                            @if(Session::has('errorPass2'))
                                <span class="error">
                            {{Session::get('errorPass2')}}
                        </span>
                            @endif
                        </div>
                        <div>
                            <!-- @if(Auth::user()->role == 0 && Auth::user()->level == null)
                                -->
                                <button type="button" class="btn btn-sns-line btn-sns-line-danger"
                                        style="display: flex; justify-content: center; align-items: center; top:30px; left: 295px; font-size: 20px; width: 200px; height: 60px;"
                                        onclick="deleteUser('{{Auth::user()->id}}')" id="delete">削除する
                                </button>
                                <!--


                            @endif -->
                        </div>
                    </fieldset>
                </div>
            </div>
        </section>
    </article>
@endsection
@push('script')

    <script src="https://cdn.tailwindcss.com"></script>
    <script src="/js/vue.global.js"></script>
    <script>
        const {createApp, ref} = Vue;
        createApp({
            setup() {
                const newEmail = ref('')
                const code = ref('')
                const errorCodeMessage = ref('')
                const userId = {{ \Illuminate\Support\Facades\Auth::id() }};
                const showChangeEmail = ref(false)
                const showInputCode = ref(false)
                const resendCodeSuccess = ref(false)
                const changeMailSuccess = ref(false);
                const csrfToken = $('meta[name="csrf-token"]').attr('content')
                const sendChangeMailCode = () => {
                    var regexp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                    if (!regexp.test(String(newEmail.value).toLowerCase())) {
                        $('#error_new_email').text('有効なメールアドレスを入力してください。');
                        return
                    }

                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        }
                    });
                    $.ajax({
                        url: '/ajax/send-change-email-code',
                        method: 'post',
                        data: {
                            email: newEmail.value,
                            userId: userId
                        },
                        beforeSend: function () {
                            $.LoadingOverlay('show');
                        },
                        success: function (response) {
                            $.LoadingOverlay('hide');
                            if (response.success) {
                                showInputCode.value = true
                            } else {
                                alert(response.message);
                            }
                        },
                        error: function () {
                            $.LoadingOverlay('hide');
                        }
                    });
                }
                const changeMail = () => {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        }
                    });
                    if (!code.value) {
                        errorCodeMessage.value = '認証コードを入力してください';
                        return;
                    }

                    $.ajax({
                        url: "/ajax/validate-code-change-email",
                        type: 'POST',
                        data: {
                            email: newEmail.value,
                            code: code.value,
                            userId: userId
                        },
                        beforeSend: function () {
                            $('#btn_change_mail_user').prop("disabled", true);
                            $.LoadingOverlay("show");
                        },
                        success: function (res) {
                            $.LoadingOverlay("hide");
                            $('#btn_change_mail_user').prop("disabled", false);
                            if (res.success) {
                                code.value = '';
                                showNotification('changeMail')
                            } else {
                                alert(res.message);
                                $('#btn_change_mail_user').prop("disabled", false);
                            }
                        },
                        error: function () {
                            $.LoadingOverlay('hide');
                        }
                    });
                }
                const reSendCode = async () => {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        }
                    });
                    $.ajax({
                        url: '/ajax/send-change-email-code',
                        method: 'post',
                        data: {
                            email: newEmail.value,
                            userId: userId
                        },
                        beforeSend: function () {
                            $.LoadingOverlay('show');
                        },
                        success: function (response) {
                            $.LoadingOverlay('hide');
                            if (response.success) {
                                showNotification('resend')
                            } else {
                                alert(response.message);
                            }
                        },
                        error: function () {
                            $.LoadingOverlay('hide');
                        }
                    });
                }
                const showNotification = async (type) => {
                    if (type == 'resend') {
                        resendCodeSuccess.value = true
                        await sleep(3000)
                        resendCodeSuccess.value = false
                    }
                    if (type == 'changeMail') {
                        changeMailSuccess.value = true
                        await sleep(3000)
                        changeMailSuccess.value = false
                        location.reload()
                    }
                }
                const sleep = (ms) => {
                    return new Promise(resolve => setTimeout(resolve, ms));
                }
                return {
                    newEmail,
                    code,
                    errorCodeMessage,
                    showChangeEmail,
                    showInputCode,
                    sendChangeMailCode,
                    resendCodeSuccess,
                    changeMailSuccess,
                    changeMail,
                    reSendCode

                };
            },
        }).mount('#setting-email');
    </script>
    <script>
        window.addEventListener('load', function () {
            @if(session()->has('message'))
            alert("{{ session()->get('message') }}");
            @endif
        })

        function backScreen() {
            // if (window.location.href.indexOf("/admin/setting") != -1) {
            //     window.location.href = '/admin/home';
            // } else {
                history.back();
            // }
        }

        function deleteUser(user_id) {
            // message = '本当に削除しますか？';
            // var conf = confirm(message);
            // if (conf) {
            //     $.ajaxSetup({
            //         headers: {
            //             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            //         }
            //     });
            //     $.ajax({
            //         url: `/admin/delete-account-myself/${user_id}`,
            //         method: 'post',
            //         data: {
            //             password: $('#password_delete_user').val(),
            //         },
            //         beforeSend: function() {
            //             $.LoadingOverlay('show');
            //         },
            //         success: function(response) {
            //             $.LoadingOverlay('hide');
            //             console.log(response.success);
            //             if (response.success) {
            //                 window.location.href = '/logout';
            //             } else {
            //                 alert('パスワードを入力してください');
            //             }
            //         },
            //         error: function() {
            //             $.LoadingOverlay('hide');
            //         }
            //     });
            // }
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: `/admin/check-auth-delete-account/${user_id}`,
                method: 'post',
                beforeSend: function () {
                    $.LoadingOverlay('show');
                },
                success: function (response) {
                    $.LoadingOverlay('hide');
                    if (response.success) {
                        if (response.url_redirect)
                            window.location.href = response.url_redirect;
                    } else {
                        alert(response.msg);
                    }

                },
                error: function () {
                    $.LoadingOverlay('hide');
                }
            });
        }

        function sendAuthCode(type, typeAlert, user_id) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var self = this;
            let data = {
                id: user_id,
                type_receiver: type,
                type_alert: typeAlert
            };
            let flagError = 1;
            if ($('#btn_send_auth_code_change_mail_user').disable) {
                flagError = 0;
            }
            if (flagError === 1) {
                $.ajax({
                    url: "/ajax/send-auth-code",
                    type: 'POST',
                    data: data,
                    beforeSend: function () {
                        $('#btn_send_auth_code_change_mail_user').prop("disabled", true);
                        $.LoadingOverlay("show");
                    },
                    success: function (res) {
                        $.LoadingOverlay("hide");
                        $('#btn_send_auth_code_change_mail_user').prop("disabled", false);
                        if (res.status == true) {
                            $('#component-button-send-mail').hide();
                            $('#component-auth-code-change-mail').show();
                            if (typeAlert == "resend") {
                                $('#alert_send_mail').text(res.success);
                                $('#success_alert_send_mail').fadeTo(5000, 500).slideUp(500, function () {
                                    $("#success_alert_send_mail").slideUp(500);
                                });
                            }
                        }
                    },
                    error: function () {
                        $.LoadingOverlay('hide');
                        $('#btn_send_auth_code_change_mail_user').prop("disabled", false);
                    }
                });
            }
        }

        function changeMail(type, user_id) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $('.error-email').text();
            var newEmail = $('#new_email').val().trim();
            var confirmNewEmail = $('#confirm_new_email').val().trim();
            var codeData = $('#code_change_mail').val().trim();
            let flagError = 0;
            console.log(newEmail);
            if (!newEmail || !newEmail.trim()) {
                $('#error_new_email').text('メールアドレスを入力してください。');
                flagError = 1;
            }
            var regexp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            if (!regexp.test(String(newEmail).toLowerCase())) {
                $('#error_new_email').text('有効なメールアドレスを入力してください。');
                flagError = 1;
            }
            if (!confirmNewEmail || !confirmNewEmail.trim()) {
                $('#error_confirm_new_email').text('確認のメールを入力してください。');
                flagError = 1;
            }
            if (newEmail && confirmNewEmail && newEmail != confirmNewEmail) {
                $('#error_confirm_new_email').text('確認のメールが一致していません。');
                flagError = 1;
            }
            if (!codeData || !codeData.trim()) {
                $('#error_code_change_email').text('認証コードを入力してください');
                flagError = 1;
            }
            if (flagError === 1) {
                return;
            }
            let data = {
                user_id: user_id,
                type: type,
                code: codeData,
                new_email: newEmail
            };

            $.ajax({
                url: "/ajax/check-code-auth-delete",
                type: 'POST',
                data: data,
                beforeSend: function () {
                    $('#btn_change_mail_user').prop("disabled", true);
                    $.LoadingOverlay("show");
                },
                success: function (res) {
                    $.LoadingOverlay("hide");
                    $('#btn_change_mail_user').prop("disabled", false);
                    if (res.status == true) {
                        $('#email_1').val(res.new_email);
                        $('#email_2').val(res.new_email);
                        $('#new_email').val('');
                        $('#confirm_new_email').val('');
                        $('#code_change_mail').val('');
                        $('#alert_change_mail').text(res.success);
                        $('#success_alert_change_mail').fadeTo(5000, 500).slideUp(500, function () {
                            $("#success_alert_change_mail").slideUp(500);
                        });

                    } else {
                        alert(res.error);
                        $('#btn_change_mail_user').prop("disabled", false);
                    }
                },
                error: function () {
                    $.LoadingOverlay('hide');
                }
            });
        }

        function ChangeInputFormEmail(value) {
            $('#' + value).text('');
        }
    </script>
@endpush