@extends('layouts.master')

@section('content')
<div class="container-fluid">
  <div class="page-header">
      <div class="row align-items-end">
          <div class="col-lg-8">
              <div class="page-header-title">
                  <i class="ik ik-user-check bg-blue"></i>
                  <div class="d-inline">
                      <h5>Profile</h5>
                      <span>Edit profile Anda.</span>
                  </div>
              </div>
          </div>
          <div class="col-lg-4">
              <nav class="breadcrumb-container" aria-label="breadcrumb">
                  <ol class="breadcrumb">
                      <li class="breadcrumb-item">
                          <a href="{{ route('home') }}"><i class="ik ik-home"></i></a>
                      </li>
                      <li class="breadcrumb-item">
                          @canany(['user-list','user-create','user-edit','user-delete'])
                          <a href="{{ route('user.index') }}">
                          @else
                          <a href="#">
                          @endcan
                            User</a>
                      </li>
                      <li class="breadcrumb-item active" aria-current="page">Profile</li>
                  </ol>
              </nav>
          </div>
      </div>
  </div>

  <div class="row">
    <div class="col-lg-3 col-md-5">
      &nbsp;
    </div>
    <div class="col-lg-6 col-md-5">
        <div class="card">
            <div class="card-body">

              <!-- alert -->
              @if ($errors->any())
                <div class="alert alert-danger alert-dismissible" role="alert">
                  <ul>
                    @foreach($errors->all() as $error)
                      <li>{{ $error }}</li>
                    @endforeach
                  </ul>
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">X
                  </button>
                </div>
              @endif

              @foreach(['danger','warning','success','info'] as $msg)
                @if(Session::has('alert-'.$msg))
                  <div class="alert alert-{{ $msg }} alert-dismissible" role="alert">
                    {{ Session::get('alert-'.$msg) }}
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">X
                  </button>
                </div>
                @endif
              @endforeach

              <form method="post" action="{{ route('updateprofile') }}" role="form" class="form-with-validation" enctype="multipart/form-data">
                @csrf
                <div class="text-center">
                  @if(is_null(Auth::user()->avatar) || Auth::user()->avatar == "")
                    <span class="avatar avatar-xl avatar-blue" id="noavatar">{{ getinitial(ucwords(strtolower(Auth::user()->name))) }}</span>
                    <span class="avatar avatar-xl" id="preview" style="background-image: url('/img/user2.jpg');display:none;" ></span>
                  @else
                    <span class="avatar avatar-xl" id="preview" style="background-image: url('/img/avatar/256/{{ Auth::user()->avatar }}');" ></span>
                  @endif
                    <small class="text-muted d-block" style="text-decoration:underline;"><a href="javascript:changeAvatar()">Ganti Avatar</a></small>
                    <input type="file" name="image" id="imageupload" style="display:none;"/>
                    <h4 class="card-title mt-10">{{ ucwords(strtolower(trim($user->name))) }}</h4>
                    <p class="card-subtitle">
                      @foreach($rolenames as $rolename)
                        {{ ucwords(strtolower(trim($rolename))) }}
                      @endforeach
                    </p>
                </div>
            </div>
            <hr class="mb-0">
            <div class="card-body">
              <div class="form-group">
                <label for="name">Nama</label>
                <input type="text" class="form-control" id="name" placeholder="Nama ..." name="name" value="{{ old('name') ? old('name') : isset($user->name) ? ucwords(strtolower(trim($user->name))) : '' }}" required="required" />
              </div>

              <div class="form-group">
                <label for="phonenumber">No HP
                <input type="text" class="form-control" id="phonenumber" placeholder="08123 ..." name="phonenumber" value="{{ old('phonenumber') ? old('phonenumber') : isset($user->phonenumber) ? $user->phonenumber : '08123' }}" required="required" />
              </div>

              <div class="text-muted d-block text-blue" ><a href="#" id="changepass" style="text-decoration:underline;">Ganti Password</a>&nbsp;<i class="ik ik-arrow-left"></i></div>
              <br/>
              <div id="mypassform" style="display:none;">
                <div class="form-group">
                  <label for="current_password">Password Sekarang</label>
                  <input type="password" class="form-control" name="current_password" placeholder="Current Password.."/>
                </div>
                <div class="form-group">
                    <label for="password">Password Baru</label>
                    <input type="password" class="form-control" name="password" placeholder="New Password..."/>
                </div>
                <div class="form-group">
                    <label for="password_confirmation">Konfirmasi Password Baru</label>
                    <input type="password" class="form-control" name="password_confirmation" placeholder="New Password Confirmation..."/>
                </div>
              </div><!-- //mypassform -->
              <div class="form-group">
                <input type="submit" class="btn btn-primary" value="Simpan"/>
              </div>
            </div>
          </form>
        </div>
    </div>
    <div class="col-lg-3 col-md-5">
      &nbsp;
    </div>
  </div><!-- //row -->
</div><!-- //container-fluid -->
@endsection

@push('scripts')
<script>
function changeAvatar(){
    $('#imageupload').click();
  }

$(document).ready(function () {
    $('#changepass').click(function(e){
      e.preventDefault();
      $('#mypassform').toggle();
    });

    $('#imageupload').change(function(){
      var imgPath = this.value;
      var ext = imgPath.substring(imgPath.lastIndexOf('.')+1).toLowerCase();
      if(ext == "gif" || ext == "png" || ext == "jpg" || ext == "jpeg"){
        readURL(this);
      }else{
        alert("Mohon upload file gambar (jpg,jpeg,png)");
      }
    });

    function readURL(input){
      if(input.files && input.files[0]){
        var reader = new FileReader();
        reader.readAsDataURL(input.files[0]);
        reader.onload = function(e){
        //$('#preview').attr('src',e.target.result);
        $('#noavatar').hide();
        $('#preview').show();
        $('#preview').css('background-image', 'url("'+e.target.result+'")');
        }
      }
    }
});
</script>
@endpush