@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="text" name="userName" value="{{$user->username}}" >
                      </div>
                      <div class="textBox">
                          <i > メールアドレス  </i>
                          <input type="text" name="userEmail" value="{{$user->email}}" disabled>
                      </div>
                      <div class="textBox">
                          <i>登録日 </i>
                          <input type="text" value={{$user->created_at}} disabled>
                      </div>
                    <div class="user_info_btn">
                        <p class="btn btn-primary" id="changeName"><i class="glyphicon glyphicon-user"></i> ユーザー情報を編集する</p>
                        <a href="/basic/profile?id=1" class="btn btn-primary" ><i class="glyphicon glyphicon-lock"></i>  パスワードの変更</a>
                    </div>

                  </div>

                </div>

                <br><br>

            </section>
        </article>
@endsection

@push('js')

    <script>
        $(document).ready(function () {

            $('#changeName').on('click',function () {
                $('#changePass').attr('disabled', true);
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
               var name = $('input[name=userName]').val();
               $.ajax({
                   type: 'POST',
                   url: '/basic/profile-change-info',
                   dataType: 'json',
                   data: {
                       nameUser :name
                   },
                   success : function (result) {
                       $('#changePass').attr('disabled', false);
                       alert(result.message);
                   },
                   error :function (result) {
                       $('#changePass').attr('disabled', false);
                       alert(result.message);
                   }
               });
            })
        })
    </script>
@endpush