@include('layout.header')

<section id="content">
  <section class="bgGrey py-4">
    <div class="container">
      <div class="row flex-lg-nowrap">
        <div class="col">
          <div class="row">
            <div class="col mb-3">
              <div class="card">
                <div class="card-body">
                  <div class="e-profile">
                    @if (\Session::has('success'))
                    <div class="alert alert-success">
                        <ul class="m-0 pl-3">
                        <li>{!! \Session::get('success') !!}</li>
                        </ul>
                    </div>
                    @endif
                    @if($errors->any())
                    <div class="alert alert-danger">
                        <ul class="m-0 pl-3">
                        <li>{{$errors->first()}}</li>
                        </ul>
                    </div>
                    @endif
                    <form class="form" enctype="multipart/form-data" method="POST" action="{{url('user/profile/'.Auth::User()->id)}}">
                      {{ csrf_field() }}
                      <div class="row">
                        <div class="col-12 col-sm-auto mb-3">
                          <div class="mx-auto" style="width: 140px;">
                            <div class="d-flex justify-content-center align-items-center rounded" style="height: 140px; background-color: rgb(233, 236, 239);">
                              @if(Auth::User()->picture != null)         
                                <img src="{{asset(Auth::User()->picture)}}" style="height: 100%;" class="rounded" alt="Profile Picture">
                              @else
                                <img src="{{asset('assets')}}/img/user.png" style="height: 100%;" class="rounded" alt="Profile Picture">
                              @endif
                            </div>
                          </div>
                        </div>
                        <div class="col d-flex flex-column flex-sm-row justify-content-between mb-3">
                          <div class="text-center text-sm-left mb-2 mb-sm-0">
                            <h4 class="pt-sm-2 pb-1 mb-0 text-nowrap">{{Auth::User()->name}}</h4>
                            <p class="mb-0">{{$position}}</p>
                            {{-- <div class="text-muted"><small>Last seen 2 hours ago</small></div> --}}
                            <div class="mt-2">
                              <div class="custom-file">
                                <input type="file" class="custom-file-input" id="customFile" name="photo">
                                <label class="custom-file-label" for="customFile">Ubah Foto</label>
                              </div>
                            </div>
                          </div>
                          <div class="text-center text-sm-right">
                            <span class="badge badge-success">Active</span>
                            <div class="text-muted"><small>Joined {{date('d, M Y', strtotime(Auth::User()->created_at))}}</small></div>
                          </div>
                        </div>
                      </div>
                    
                      <div class="tab-content pt-3">
                        <div class="tab-pane active">
                          <div class="row">
                            <div class="col">
                              <div class="row">
                                <div class="col">
                                  <div class="form-group">
                                    <label>NIK</label>
                                    <input class="form-control" type="text" name="nik" value="{{Auth::User()->nik}}" disabled>
                                  </div>
                                </div>
                                <div class="col">
                                  <div class="form-group">
                                    <label>Nama Lengkap</label>
                                    <input class="form-control" type="text" name="name" value="{{Auth::User()->name}}" disabled>
                                  </div>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col">
                                  <div class="form-group">
                                    <label>Email</label>
                                    <input class="form-control" type="text" name="email" value="{{Auth::User()->email}}" disabled>
                                  </div>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col">
                                  <div class="form-group">
                                    <label>Position</label>
                                    <input class="form-control" type="text" name="position" value="{{$position}}" disabled>
                                  </div>
                                </div>
                                <div class="col">
                                  <div class="form-group">
                                    <label>Phone</label>
                                    <input class="form-control" type="text" name="phone" value="{{Auth::User()->phone}}">
                                  </div>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col mb-3">
                                  <div class="form-group">
                                    <label>Motto</label>
                                    <textarea class="form-control" rows="5" name="motto" placeholder="Motto">{{Auth::User()->motto}}</textarea>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col d-flex justify-content-end">
                              <button class="btn btn-danger" type="submit">Simpan</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
      
        </div>
      </div>
    </div>
  </section>
</section>
@include('layout.footer')

<script>
  $(".custom-file-input").on("change", function() {
    var fileName = $(this).val().split("\\").pop();
    $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
  });
</script>