@extends('layout.master')

@section('css')
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
@stop

@section('content')
<div class="content">
        <div class="container-fluid">
          <div class="row">
          <div class="col-lg-12 col-md-12">
                <div class="card">
                    <div class="card-header" style="background: #767eee">
                        <h3 class="card-title text-white">{{' My Profile'}}</h3>

                    </div>



                    
                    <div class="card-body">
                        <form name="profile" id="profile" method="post" enctype="multipart/form-data" action="{{ route('patients.myprofile.update',$profile->id) }}">
                        <div class="row">
                            @csrf
                            <div class="col-md-8 col-sm-8 p-3">

                                <div class="row">
                                
                                 <label class="col-sm-3 col-form-label">Change Picture</label>
                                    <div class="col-sm-8 mb-2">


                                        <div class = "file-field input-field">
                                            <div class = "btn btn-info">
                                                <span>Choose Profile</span>
                                                <input type = "file" multiple name="profile_picture" id="profile_picture" />
                                            </div>
                                            <input type="hidden" name="id" value="{{$profile->id}}">
                                            
                                        </div>
                                        @if($errors->has('profile_picture'))
                                            <div class="error"><strong>{{ $errors->first('profile_picture') }}</strong></div>
                                        @endif
                                    </div>


                                        <label class="col-sm-3 col-form-label">My Full Name</label>
                                        <div class="col-sm-8">
                                            <div class="form-group bmd-form-group">
                                            <input type="text" class="form-control" id="full_name" name="full_name" placeholder="Enter  full_name " value="{{$profile->full_name}}" >
                                                @if($errors->has('full_name'))
                                                 <div class="error"><strong>{{ $errors->first('full_name') }}</strong></div>
                                            @endif
                                            </div>

                                        </div>

                                        <label class="col-sm-3 col-form-label">My User Name</label>
                                        <div class="col-sm-8">
                                            <div class="form-group bmd-form-group">
                                            <input type="text" class="form-control" id="username" name="username" placeholder="Enter  username " value="{{$profile->username}}" >
                                                @if($errors->has('username'))
                                                 <div class="error"><strong>{{ $errors->first('username') }}</strong></div>
                                            @endif
                                            </div>

                                        </div>


                                        <label class="col-sm-3 col-form-label">My Email</label>
                                        <div class="col-sm-8">
                                            <div class="form-group bmd-form-group">
                                            <input type="email" class="form-control" id="email   " name="email" placeholder="Enter Email " value="{{ $profile->email }}" readonly>
                                                @if($errors->has('email'))
                                                 <div class="error"><strong>{{ $errors->first('email') }}</strong></div>
                                            @endif
                                            </div>
                                        </div>


                                </div>
                            </div>
                    
                                     <div class="col-md-4 ">
                                                <div class="body">
                                                <label class="col-sm-12"> profile picture</label>
                                                @if($profile->profile_picture=='')
                                                    <img id="pic" src="{{asset('images').'/default.png' }}" style="width: 200px">
                                                @else

                                                    <img id="pic" src="{{asset('uploads/users/'.$profile->id.'/profile_picture/'.$profile->profile_picture) }}" style="width: 200px">
                                                @endif
                                                <input type="hidden" name="profile_picture" value="{{ $profile->profile_picture }}" >
                                                </div>   
                                                
                                    </div>                         
                        </div>
                        <div class="text-center">
                        <a href="{{route('patients.index')}}" class="btn btn-danger w-25">Cancel</a>
                            <input type="submit" class="btn btn-info w-25" name="submit" value="SAVE">
                        </div>
                        </form>
                    </div>

                </div>
            </div>




<!-- password -->
<div class="col-lg-12 col-md-12">
                <div class="card">
                    <div class="card-header" style="background: #767eee">
                        <h3 class="card-title text-white">{{'Change Password'}}</h3>

                    </div>
                    <div class="card-body">
                    <form name="password" id="password" method="post" enctype="multipart/form-data" action="{{ route('patients.password.update',$profile->id) }}">
                        <div class="row">
                            @csrf
                            <div class="col-md-8 col-sm-8 p-3">
                            <div class="row">

                    <label class="col-sm-3 col-form-label">Old Password</label>
                    <div class="col-sm-8">
                        <div class="form-group bmd-form-group">
                        <input type="password" class="form-control" id="password" name="password" placeholder="Enter Old Password " value="">
                            @if($errors->has('password'))
                            <div class="error"><strong>{{ $errors->first('password') }}</strong></div>
                        @endif
                        </div>
                    </div>

                    <label class="col-sm-3 col-form-label">New Password</label>
                    <div class="col-sm-8">
                        <div class="form-group bmd-form-group">
                        <input type="password" class="form-control" id="new_password" name="new_password" placeholder="Enter New Password " value="">
                            @if($errors->has('password'))
                            <div class="error"><strong>{{ $errors->first('password') }}</strong></div>
                        @endif
                        </div>
                    </div>


                    <label class="col-sm-3 col-form-label">Re-Enter New Password</label>
                    <div class="col-sm-8">
                        <div class="form-group bmd-form-group">
                        <input type="password" class="form-control" id="renew_password" name="renew_password" placeholder="Enter  Old Password " value="">
                            @if($errors->has('password'))
                            <div class="error"><strong>{{ $errors->first('password') }}</strong></div>
                        @endif
                        </div>
                    </div>
                    </div>
                 </div>
                                        
                 </div>
                                            <div class="text-center">
                                            <a href="{{route('patients.index')}}" class="btn btn-danger w-25">Cancel</a>
                                                <input type="submit" class="btn btn-info w-25" name="submit" value="SAVE">
                                            </div>
                                            </form>
                                        </div>

                </div>
            </div>
            <!-- end password -->



          </div>
      </div>
</div>
@stop
@section('script')
<style>
    .table-responsive
    {
        overflow-x:hidden !important;
        overflow-y:auto !important;
    }
</style>
<script type="text/javascript">
$(document.body).on('change', '#profile_picture', function(event) {
    
pic(this);   

});

function pic(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    
    reader.onload = function(e) {
      $('#pic').attr('src', e.target.result);
    }
    
    reader.readAsDataURL(input.files[0]); // convert to base64 string
  }
}
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
<script src="{{ asset('js/profile/index.js') }}" type="text/javascript"></script>
@stop