@extends('admin.layout.master')

@section('title')
	Emergicare911 Admin | Manage User
@endsection

@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 Manage User</h4>
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="{{route('admin.userList')}}">Manage User</a></li>
					<li class="breadcrumb-item active" aria-current="page">Edit Manage 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">
							<p>{{ Session::get('errors') }}</p>
						</div>

					@endif

					<form class="card" method="post" action="{{ route('admin.cliUpdate', base64_encode($user->id))}}" onsubmit="return clientEdit()" enctype="multipart/form-data">
						@csrf
						<div class="card-header">
							<h3 class="card-title">Edit Manage User</h3>
						</div>

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

								<div class="col-sm-6 col-md-6">
									<div class="form-group">
										<label class="form-label">Name*</label>
										<input type="text" class="form-control" name="fname" id="editfname" value="{{$user->name}}">
									</div>
								</div>

								<div class="col-sm-6 col-md-6">
									<div class="form-group">
										<label class="form-label">Email Address*</label>
										<input type="email" class="form-control" name="editemail" id="editemail" value="{{$user->email}}" readonly="">
									</div>
								</div>


								<div class="col-sm-6 col-md-4">
									<div class="form-group">
										<label class="form-label">Phone Number*</label>
										<input type="text" class="form-control" name="editcontact_no" id="editcontact_no" value="{{$userInfo->mobile_no}}">
									</div>
								</div>



								<div class="col-sm-6 col-md-4">
									<div class="form-group">
										<label class="form-label">Address*</label>
										<input type="text" class="form-control" name="ADD" id="editADD" value="{{$userInfo->address}}">
									</div>
								</div>


								<div class="col-sm-6 col-md-4">
									<div class="form-group">
										<label class="form-label">Zip Code*</label>
										<input type="text" class="form-control" name="zip" id="editzip" value="{{$userInfo->zip}}">
									</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($userInfo->profile_image == 'useravatars/default_avatar.png' || $userInfo->profile_image == NULL)
										
											<img src="
											{{ asset('storage/avatars/download.png') }}" alt="img" class="header-brand-img">
										@else
											<img src="
											{{ asset('storage/images/api/'.$userInfo->profile_image) }}" alt="img" class="header-brand-img">
										@endif
                                    	</div>
                                    	<br>
										<div class="custom-file">
											<input type="file" class="custom-file-input" name="profile_pic" id="editprofile_pic">
											<label class="custom-file-label">Choose file</label>
										</div>
									</div>
								</div>

								<textarea name="mainpic"  id="editgallery" style="display: none;" ></textarea>

								
							</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">Update</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
@endsection
@section('scripts')
<script type="text/javascript">
	
	function clientEdit() {
		
		var fname   = $('#editfname').val();
		var contact = $('#editcontact_no').val();
		// var email   = $('#editemail').val();
		var addr    = $('#editADD').val();
		var zip     = $('#editzip').val();
		
			
		
		if(fname == '')
		{
			$('#editerrorcheck').show();
			$('#editerrorcheck').html('** Please Fill Name Field');
			setTimeout(function(){
				  $('#editerrorcheck').hide();
				}, 2000);

			return false;
		}
		
		// else if(email == '')
		// {
		// 	$('#editerrorcheck').show();
		// 	$('#editerrorcheck').html('** Please Fill Email Field');
		// 	setTimeout(function(){
		// 		  $('#editerrorcheck').hide();
		// 		}, 2000);

		// 	return false;
		// }

		// else if(email.indexOf('@') <= 0)
		// {
		// 	$('#editerrorcheck').show();
		// 	$('#editerrorcheck').html('** Please Enter Email Address Correctly');
		// 	setTimeout(function(){
		// 		  $('#editerrorcheck').hide();
		// 		}, 2000);

		// 	return false;
		// }

		// else if((email.charAt(email.length-4) != '.') && (email.charAt(email.length-3) != '.'))
		// {
		// 	$('#editerrorcheck').show();
		// 	$('#editerrorcheck').html('** Please Insert Valid Email Address');
		// 	setTimeout(function(){
		// 		  $('#editerrorcheck').hide();
		// 		}, 2000);

		// 	return false;
		// }
		
		else if(contact == '')
		{
			$('#editerrorcheck').show();
			$('#editerrorcheck').html('** Please Fill Phone Number Field');
			setTimeout(function(){
				  $('#editerrorcheck').hide();
				}, 2000);

			return false;
		}

		else if(isNaN(contact))
		{
			$('#editerrorcheck').show();
			$('#editerrorcheck').html('** Please Enter Phone Number Only');
			setTimeout(function(){
				  $('#editerrorcheck').hide();
				}, 2000);

			return false;
		}

		else if((contact.length < 10) || (contact.length > 13))
		{
			$('#editerrorcheck').show();
			$('#editerrorcheck').html('** Phone Number Must Be 10 To 13 Digits');
			setTimeout(function(){
				  $('#editerrorcheck').hide();
				}, 2000);

			return false;
		}

		
		else if(addr == '')
		{
			$('#editerrorcheck').show();
			$('#editerrorcheck').html('** Please Fill Address Field');
			setTimeout(function(){
				  $('#editerrorcheck').hide();
				}, 2000);

			return false;
		}

		else if(zip == '')
		{
			$('#editerrorcheck').show();
			$('#editerrorcheck').html('** Please Fill Zip Code Field');
			setTimeout(function(){
				  $('#editerrorcheck').hide();
				}, 2000);

			return false;
		}


		else if(isNaN(zip))
		{
			$('#editerrorcheck').show();
			$('#editerrorcheck').html('** Please Enter Zip Code Only');
			setTimeout(function(){
				  $('#editerrorcheck').hide();
				}, 2000);

			return false;
		}
		

		else
		{
			return true;
		}



	}
 

</script>

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

     var image_crop = $('#image_demo').croppie({
            enableExif: true,
            viewport: {
                width: 400,
                height: 400,
                type: 'square' //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');
        });

        $('.crop_image').click(function (event) {
            image_crop.croppie('result', {
                type: 'canvas',
                size: 'viewport'
            }).then(function (response) {
            	$('#editgallery').html(response);
            	$('#uploadimageModal').modal('hide');
                // alert(response);
                
        });
    });

});                          
</script>
@endsection