@extends('admin.layout.master')

@section('content')
<div id="uploadimageModal" class="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Upload & Crop Image</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <div id="image_demo" style="width:350px; margin-top:30px"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success crop_image">Crop & Upload Image</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="app-content  my-3 my-md-5">
		<div class="side-app">
			<div class="page-header">
				<h4 class="page-title">Edit User</h4>
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="{{route('admin.user')}}">User</a></li>
					<li class="breadcrumb-item active" aria-current="page">Edit User</li>
				</ol>

			</div>
			<div class="row ">
				
				<div class="col-lg-12">
					@if(Session::has('success'))

						<div class="alert alert-primary">
							<p>{{ Session::get('success') }}</p>
						</div>

					@endif

					@if(Session::has('errors'))

						<div class="alert alert-danger">
							<ul>
					            @foreach ($errors->all() as $error)
					                <li>{{ $error }}</li>
					            @endforeach
					        </ul>
						</div>

					@endif

					<form class="card" method="post" action="{{ route('admin.userUpdate', base64_encode($userdetails->id))}}" onsubmit="return clientEdit()" enctype="multipart/form-data">
						@csrf
						<div class="card-header">
							<h3 class="card-title">Edit User</h3>
							<span style="padding: 15px 175px 0"><p style="color: red;"><b>*NOTE:</b> Email Address is Not Editable</p></span>
						</div>

						<div class="card-body">
							<div class="row">

								<div class="col-sm-6 col-md-4">
									<div class="form-group">
										<label class="form-label">Email</label>
										<label class="form-control">{{$userdetails->email}}</label>
									</div>
								</div>

								<div class="col-sm-6 col-md-4">
									<div class="form-group">
										<label class="form-label">UserName</label>
										<input type="text" class="form-control" name="username" id="username" value="{{$userdetails->username}}">
									</div>
								</div>

								<div class="col-sm-6 col-md-6">
									<div class="form-group">
										<label class="form-label">Profile Image</label>
										<div class="fileupload-new" style="width: 200px;">
                                       	@if($userdetails->profile_pic == NULL)
											<img src="{{ asset('storage/avatars/default_avatar.png') }}" class="header-brand-img">
										@else
											<img src="{{ asset('storage/avatars/'.$userdetails->profile_pic) }}" class="header-brand-img">
										@endif
                                    	</div>
                                    	<br>
										<div class="custom-file">
											<input type="file" class="custom-file-input" name="profile_pic" id="editprofile_pic">
											<input type="hidden" id="image" name="image">
											<label class="custom-file-label">Choose file</label>
										</div>
									</div>
								</div>
								
							</div>
						</div>
						<div class="card-footer text-center">
							<span><p id="editerrorcheck" style="color: red; display: none;"></p></span>
							<button type="submit" class="btn btn-primary btn-lg custom-btn mr-2 submit">Save</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
@endsection
@section('scripts')
<script type="text/javascript">
	
	function clientEdit() {	
		$('.submit').html('<i class="fa fa-circle-o-notch fa-spin"></i> Save');	
		$('.submit').attr('disabled', 'disabled');	
		var username   = $('#username').val();
		if(username == ''){
			$('.submit').html('Save');	
			$('.submit').attr('disabled', false);
			$('#editerrorcheck').show();
			$('#editerrorcheck').html('** Please Fill Username Field');
			setTimeout(function(){
				  $('#editerrorcheck').hide();
				}, 2000);

			return false;
		}
	}
 

</script>

<script>
    $(document).ready(function () {

     var image_crop = $('#image_demo').croppie({
            enableExif: true,
            viewport: {
                width: 400,
                height: 400,
                type: 'circle' //circle
            },
            boundary: {
                width: 300,
                height: 300
            }
        });

        $('#editprofile_pic').on('change', function () {
            var reader = new FileReader();
            reader.onload = function (event) {
                image_crop.croppie('bind', {
                    url: event.target.result
                }).then(function () {
                    console.log('jQuery bind complete');                    
                });
            }
            console.log(this.files[0]);
            reader.readAsDataURL(this.files[0]);
            $('#uploadimageModal').modal('show');
            var fileName = $(this).val();
	        var f = fileName.split("\\");
	        $(this).next('.custom-file-label').html(f[2]);
        });

        $('.crop_image').click(function (event) {
            image_crop.croppie('result', {
                type: 'canvas',
                size: 'viewport'
            }).then(function (response) {
            	$('.header-brand-img').attr('src',response);            	
            	$('#image').val(response);            	
            	$('#uploadimageModal').modal('hide');
        });
    });

});                          
</script>
@endsection