@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.userList')}}">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">
							<p>{{ Session::get('errors') }}</p>
						</div>

					@endif

					<form class="card" method="post" action="{{ route('admin.cliUpdate', base64_encode($user->id))}}" onsubmit="return clientEdit()">
						@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 And Contact Number Are 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">First Name</label>
										<input type="text" class="form-control" name="fname" id="editfname" value="{{$user->first_name}}">
									</div>
								</div>

								<div class="col-sm-6 col-md-4">
									<div class="form-group">
										<label class="form-label">Last Name</label>
										<input type="text" class="form-control" name="lname" id="editlname" value="{{$user->last_name}}">
									</div>
								</div>


								<div class="col-sm-6 col-md-4">
									<div class="form-group">
										<label class="form-label">Contact Number</label>
										<input type="text" class="form-control" name="contact_no" id="editcontact_no" disabled value="{{$user->mobile_number}}">
									</div>
								</div>
								
								<div class="col-sm-6 col-md-12">
									<div class="form-group">
										<label class="form-label">Email Address</label>
										<input type="email" class="form-control" name="email" id="editemail" disabled value="{{$user->email}}">
									</div>
								</div>
								
								<div class="col-sm-6 col-md-3">
									<div class="form-group">
										<label class="form-label">Date Of Birth</label>
										<input class="form-control" type="date" id="example-date-input" name="dob" value="{{$user->dob}}">
									</div>
								</div>


								<div class="col-sm-6 col-md-3">
									<div class="form-group">
										<label class="form-label">Finacial Record IBAN</label>
										<input type="text" class="form-control" name="FRI" id="editFRI" value="{{$user->iban}}">
									</div>
								</div>


								<div class="col-sm-6 col-md-3">
									<div class="form-group">
										<label class="form-label">Credit Card Number</label>
										<input type="text" class="form-control" name="card_no" id="editcard_no" value="{{$user->credit_card_no}}">
									</div>
								</div>

								
								
								<div class="col-sm-6 col-md-3">
									<div class="form-group">
										<label class="form-label">Paypal Account</label>
										<input type="text" class="form-control" name="paypal_acc" id="editpaypal_acc" value="{{$user->paypal_account}}">
									</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($user->avatar_location == NULL)
											<img src="{{ asset('storage/avatars/default_avatar.png') }}" class="header-brand-img">
										@else
											<img src="{{ asset('storage/avatars/'.$user->avatar_location) }}" 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 class="col-sm-6 col-md-6">
									<div class="form-group">
										<label class="form-label">ID Scan Image</label>
										<div class="fileupload-new" style="width: 200px;">
                                       	@if($user->id_scan == NULL)
											<img src="{{ asset('storage/id_scan/no-image.png') }}" class="header-brand-img">
										@else
											<img src="{{ asset('storage/id_scan/'.$user->id_scan) }}" class="header-brand-img">
										@endif
										</div>
										<br>
										<div class="custom-file">
											<input type="file" class="custom-file-input" name="scan_pic" id="editscan_pic">
											<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">Save</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
@endsection
@section('scripts')
<script type="text/javascript">
	
	function clientEdit() {
		
		var fname   = $('#editfname').val();
		var lname   = $('#editlname').val();
		var contact = $('#editcontact_no').val();
		var email   = $('#editemail').val();
		var dob     = $('#example-date-input').val();

			
		
		if(fname == '')
		{
			$('#editerrorcheck').show();
			$('#editerrorcheck').html('** Please Fill First Name Field');
			setTimeout(function(){
				  $('#editerrorcheck').hide();
				}, 2000);

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

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

			return false;
		}

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

			return false;
		}

		else if((contact.length < 10) || (contact.length > 13))
		{
			$('#editerrorcheck').show();
			$('#editerrorcheck').html('** Mobile Number Must Be 10 To 13 Digits');
			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(pword == '')
		{
			$('#editerrorcheck').show();
			$('#editerrorcheck').html('** Please Fill Password Field');
			setTimeout(function(){
				  $('#editerrorcheck').hide();
				}, 2000);

			return false;
		}

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

			return false;
		}

		else if(cword != pword)
		{
			$('#editerrorcheck').show();
			$('#editerrorcheck').html('** Passwords Do Not Match');
			setTimeout(function(){
				  $('#editerrorcheck').hide();
				}, 2000);

			return false;
		}

		else if(dob == '')
		{
			$('#editerrorcheck').show();
			$('#editerrorcheck').html('** Please Fill Date Of Birth Field');
			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