@extends('layouts.profile')  

@section('content')
<div class="container bg-white mb-4">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox-content forum-container">
            {{-- <h3 class="text-primary">Profile</h3> --}}
            {{ Breadcrumbs::render('profile') }}<hr>
            <div class="container">
                <form method="POST" href="javascript void(0)" enctype="multipart/form-data" >
                    @csrf
                        {{-- <h4 class="text-primary">Edit Profile</h4> --}}
                        <div class="row">
                        <!-- left column -->
                        <div class="col-md-2">
                            <div class="text-center">
                            <img src="{{url('profile-photo')}}/{{ Auth::user()->profile_photo }}" class="avatar img-circle" width="180px" alt="avatar">
                            <input type="file" name="profile_photo" id="profile_photo" class="form-control mt-4">
                            </div>
                        </div>
                        
                        <!-- edit form column -->
                        <div class="col-md-10 personal-info">
                        
                            <h3>Personal info</h3>
                            
                        
                                
                            <div class="form-group my-2">
                                <label class="col-lg-3 control-label">Name:</label>
                                <div class="col-lg-8">
                                <input class="form-control" id="name" name="name" type="text" value="{{Auth::user()->name}}">
                                </div>
                            </div>
                            
                            <div class="form-group my-2">
                                <label class="col-lg-3 control-label">Email:</label>
                                <div class="col-lg-8">
                                <input class="form-control" id="email" name="email" type="text" value="{{Auth::user()->email}}">
                                </div>
                            </div>
                        
                            
                            {{-- <div class="form-group my-2">
                                <label class="col-md-3 control-label">Password:</label>
                                <div class="col-md-8">
                                <input class="form-control" id="password" name="password" type="password" >
                                </div>
                            </div>
                            <div class="form-group my-2">
                                <label class="col-md-3 control-label">Confirm password:</label>
                                <div class="col-md-8">
                                <input class="form-control" id="confirm_password"  name="confirm_password" type="password">
                                </div>
                            </div> --}}
                            <div class="form-group mt-5">
                                <label class="col-md-3 control-label"></label>
                                <div class="col-md-8">
                                <button id="btn-edit-profile" class="btn btn-primary btn-rounded">Save Changes </button>
                                <span></span>
                                <a href="{{url('home')}}" class="btn btn-secondary btn-rounded" >Cancel</a>
                                </div>
                            </div>
                        
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>

<script>
    var APP_URL  = "{{ url('')}}";

  $(document).on("click", "#btn-edit-profile", function (e) {
    $('.is-invalid').removeClass('is-invalid');
    $('.invalid-feedback').remove();
    var _this = $(this);
    $(this).html('Save Changes...<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden"></span>');
    var data = new FormData();
    data.append('profile_photo', $('#profile_photo')[0].files[0]);
    data.append('name', $('#name').val());
    data.append('email', $('#email').val());
    // data.append('password', $('#password').val());
    e.preventDefault();
    $.ajaxSetup({
          headers: {
                  'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
              }
          });
          $.ajax({
                data:data,
                url: APP_URL + "/profile/edit-profile",
                type: "POST",
                dataType: 'json',
                mimeType: 'multipart/form-data',
                contentType: false,
                cache: false,
                processData: false,
                success: function(result) {
                    location.reload();
                },
                error:function (response){
                  $(_this).html('Save Changes')
                  var obj = response.responseJSON.json;
                  $.each(obj, function(key,value) {
                    console.log(key)
                    $('#'+key).addClass('is-invalid');
                    $('#'+key).after('<div class="invalid-feedback">'+value+'</div>')
                  });
                },
          });  
  })
</script>