@push('css')
    <style>
        .user_info{
            width: 600px;
            position: absolute;
            top: 200%;
            left: 50%;
            transform: translate(-50%,-50%);

        }
        .user_info h1   {
            float: left;
            font-size: 40px;
            border-bottom: 6px solid;
            margin-bottom: 50px;
            padding: 13px 0;
        }
        .textBox{
            width: 100%;
            overflow:  hidden;
            font-size: 20px;
            padding: 8px 0;
            margin:8px 0;
            /*border-bottom: 1px solid #29e1ff;*/
        }
        .textBox i {
            width: 25%;
            padding: 10px 0;
            float: left;
            text-align: center;
        }
        .textBox input{
            width: 60% !important;
            border: 1px solid #36C9FF;
            border-radius: 5px;
            outline: none;
            background: none;
            color: #0c0c0c;
            font-size: 20px;
            float: left;
            margin: 10px;
            height: 35px;
            padding-bottom: 10px;
            padding-top: 10px;
            padding-left: 20px;
        }
        .user_info_btn{
            width: 100%;
            background: none;
            padding: 5px;
            font-size: 18px;
            text-align: center;
        }
    </style>
@endpush
@extends('layout.basic.main')
@section('content')
    <article class="sub">
        <section class="user">
            <h2>ユーザー情報</h2>
            <div class="container">
                <div class="user_info">
                    <div class="textBox">
                        <i > 旧パスワード </i>
                        <input type="password" name="password"   >
                    </div>
                    <div class="textBox">
                        <i > メールアドレス  </i>
                        <input type="password" name="newPass" value="" >
                    </div>
                    <div class="textBox">
                        <i>登録日 </i>
                        <input type="password"  name="confirmPass" value="" >
                    </div>
                    <div class="user_info_btn">
                        <a href="/basic/profile" class="btn btn-primary" id="changeName"><i class="glyphicon glyphicon-user"></i> ユーザー情報を編集する</a>
                        <p class="btn btn-primary" id="changePass"><i class="glyphicon glyphicon-lock"></i>  パスワードの変更</p>
                    </div>
                </div>
            </div>

            <br><br>

        </section>
    </article>
@endsection

@push('js')

    <script>
        $(document).ready(function () {
            $('body').append('<div class="modal-overlay"></div>');
            $('#changePass').on('click',function () {
                $(this).attr('disabled',true);
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                var oldPassWord = $('input[name=password]').val();
                var confirmPass = $('input[name=confirmPass]').val();
                var newPass = $('input[name=newPass]').val();

                if(oldPassWord == null || oldPassWord == '')
                {
                    $('input[name=password]').focus();
                    return !1;
                }
                if(newPass == null || newPass == '')
                {
                    alert('新しいパスワードは空白にできません。 ');
                    return !1;
                }
                if(newPass != confirmPass)
                {
                    alert('パスワードが一致しません。');
                    return !1;
                }
                $.ajax({
                    type: 'POST',
                    url: '/basic/profile-change-info',
                    dataType: 'json',
                    data: {
                        newPass :newPass,
                        confirmPass:confirmPass,
                        oldPass: oldPassWord,
                        changePass:1
                    },
                    success : function (result) {
                        $('#changePass').attr('disabled', false);
                        alert(result.message);
                    },
                    error :function (result) {
                        $('#changePass').attr('disabled', false);
                        alert(result.message);
                    }
                });
            })
        })
    </script>
@endpush