@extends('layouts.app')

@section('content')

<x-flash/>
<div class="container">
	<div class="row justify-content-center">
		<div class="col-md-8">
			<div class="card">
				<div class="card-body d-flex justify-content-center">
					<div class="card" style="width: 18rem;">
					@if($User->avatar)
				        <img src="{{asset('storage/images/profiles/'.$User->avatar)}}" class="card-img-top" id="imgImage" alt="...">
					@else
					    <img src="{{asset('images/avatar.png')}}" class="card-img-top" id="imgImage" alt="...">
					@endif
					<div class="card-body">
					<p class=" d-flex justify-content-center"><b>{{$User->name}}</b></p>
                    <div class="d-flex justify-content-center">
                    <div class="avatar-file">
 					@if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif
                    <form action="../upload" method="post" enctype="multipart/form-data">
                    @csrf
                        <input type="file" name="avatar" onchange="
                                var input=this;
                                if (input.files && input.files[0]) {
                                    var reader = new FileReader();
                                    var size=(Math.round(input.files[0].size/1024));
                                    if(size>1024)
                                    {
                                        alert('Please Upload file lesthan 1MB\nControl load time');
                                        input.value='';
                                    }
                                    else{
                                    reader.onload = function (e) {
                                        $('#imgImage').attr('src', e.target.result); 
                                    }
                                    reader.readAsDataURL(input.files[0]);
                                }
                                }"/>
                        <input type="submit" value="upload"/>
                    </form>
                    <!-- @include('layouts.flash') the problum is can't pass arguments -->
                    <!-- <x-flash>
                        <p>The message from Image Upload</p>
                    </x-flash> -->
					</div>		
                    </div>					
					</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

@endsection