<title>Edit Profile -https://bestleearning.com/</title>

<?php $__env->startSection('css'); ?>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
    <link rel="stylesheet" href="https://moneyupwork.com/resources/css/argon.css" type="text/css">
    <link rel="stylesheet" href="https://moneyupwork.com/resources/css/myapp.css" type="text/css">
    <link rel="stylesheet" href="https://moneyupwork.com/resources/css/bttn.css" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <style>
        .profile-image {
            width: 150px;
            height: 150px;
            border: 1px solid #eaeaea;
        }

        .custom-file-label-drop {
            padding: 10px 15px 10px 15px;
            text-align: center;
            border: 1px solid #eaeaea;
            background: #eaeaea;
            border-radius: 5px;
        }
      
             #count_message_title {
              background-color: smoke;
              margin-top: -33px;
              margin-right: 5px;
              font-size: 14px;
             font-weight: bold;
          }
          .hidden-input {
            display: none;
        }
    </style>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('user-content'); ?>

<form action="<?php echo e(route('user.profile.update', Auth::user()->id)); ?>" method="POST" enctype="multipart/form-data" id="updateForm">
	<?php echo csrf_field(); ?>
    <div class="row justify-content-md-center">
        <div class="col-lg-8">
            <div class="card mt-2">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 text-center">
    						<?php if(file_exists(Auth::user()->image)): ?>
                                <img alt="" class="rounded-circle border-dark profile-image" src="<?php echo e(URL::to(Auth::user()->image)); ?>" width="150px" height="150px" id="profileDisplay">
                            <?php else: ?>
                                <img class="rounded-circle border-dark profile-image" src="<?php echo e(asset('frontend/img/user.png')); ?>" alt="User Image" width="150px" height="150px" id="displayImage">
                            <?php endif; ?>
                            <div id="imageContainer"style="margin-top: 10px" class="text-right">
                               <input type="file" class="form-control hidden-input" name="image" id="profilePicture" accept="image/x-png,image/jpg,image/jpeg" onchange="readURL()" lang="en">
                                    <small class="text-danger" id="file-error"></small>
                                    <img id="imagePreview" src="#" alt="Image Preview" style="display: none; max-width: 200px; margin-top: 10px;">


                                <label class="custom-file-label-drop" for="profilePicture">
                                    <i class="fas fa-camera"></i> Select new image
                                </label>
                            </div>
                       </div>
                   </div>
                   <br><!--<button type="submit" class="btn btn-outline-info" onclick="submitForm('image')">Update Image</button>--><button type="submit" name="update_image" class="btn btn-outline-info bttn">Update Image</button>
               </div>

                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h3 class="mb-0">Edit profile </h3>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <h6 class="heading-small text-muted mb-4">Account information</h6>
                            <div class="pl-lg-4">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="name" class="form-label">Full Name</label>
                                            <input class="form-control" type="text" name="name" placeholder="name" value="<?php echo e(Auth::user()->name); ?>" <?php if(Auth::user()->premium_status == 1): ?> readonly <?php endif; ?> required>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <marquee bgcolor="transparent" style="padding: 5px;border-radius: 5px;border: 1px solid black;" behavior="scroll">
                                            <a style="font-size:15px; color: black;">
                                                <i class="fe fe-link me-2" aria-hidden="true"></i>Don't share your Email with anyone
                                            </a>
                                        </marquee>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
    										<label for="email" class="form-label">Email Address</label>
    										<input class="form-control" type="email" readonly value="<?php echo e(Auth::user()->email); ?>" placeholder="email">
    									</div>
                                    </div>
                                </div>
                                <div class="row">
                                    <!--<div class="col-lg-6">
                                         <div class="form-group">
    										<label for="age" class="form-label">Age</label>
    										<textarea class="form-control" name="age" placeholder="Enter your age"><?php echo e(session('user_age')); ?></textarea>
    									</div>
                                    </div>-->
                                    <div class="col-lg-6">
    									<div class="form-group">
    										<label for="country" class="form-label">Country</label>
    										<input class="form-control" type="text" value="<?php echo e(country(Auth::user()->country)); ?>" readonly placeholder="Country">
    									</div>
    								</div>
    							</div>
    						</div>
    							<hr class="my-4">
    							<!-- Description -->
    							<h6 class="heading-small text-muted mb-4">About me</h6>
    							<div class="pl-lg-4">
    							    <div class="form-group">
                                        <label for="phone" class="form-label">Bio</label>
                                        <input class="form-control" type="text" value="<?php echo e(Auth::user()->phone); ?>" name="phone" placeholder="Enter your bio">
                                    </div>
    							</div>
    							<button type="submit" name="" class="btn btn-outline-info bttn">Update Information</button>
    				</div>
    	    	</div>
				<div class="card">
					<div class="card-body">
						 <h6 class="heading-small text-muted mb-4">Account Password</h6>
							<div class="pl-lg-4">
								<div class="row">
									<div class="col-lg-6">
										<div class="form-group">
											<label for="password" class="form-label">New Password</label>
											<input class="form-control" type="password" name="password" placeholder="Password">
										</div>
									</div>
								</div>
							</div>
							<!--<button type="submit" class="btn btn-outline-info" onclick="submitForm('password')">Update Password</button>-->
							<button type="submit" name="update_password" class="btn btn-outline-info bttn">
        Update Password
    </button>
					</div>
				</div>
		  </div>
	   </div>
  </div>
</form>

<?php $__env->stopSection(); ?>
<?php $__env->startSection('js'); ?>
<script>
   function triggerFileInput() {
        document.getElementById('profilePicture').click();
    }

    function displayImage(input) {
        var preview = document.getElementById('profileDisplay');
        var defaultImage = document.getElementById('displayImage');

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                preview.src = e.target.result;
                preview.style.display = 'block'; // Display the preview
                defaultImage.style.display = 'none'; // Hide the default image
            };

            reader.readAsDataURL(input.files[0]);
        }
    }
    function readURL() {
        var fileInput = document.getElementById('profilePicture');
        var file = fileInput.files[0];
        var errorElement = document.getElementById('file-error');
        var previewElement = document.getElementById('imagePreview');
    
        // Clear previous error and hide the preview initially
        errorElement.textContent = "";
        previewElement.style.display = "none";
    
        if (file) {
            // Validate file size (max 1MB)
            if (file.size > 1048576) { // 1MB in bytes
                errorElement.textContent = "File size must be less than or equal to 1MB.";
                fileInput.value = ""; // Clear the input
                return;
            }
    
            // Show image preview
            var reader = new FileReader();
            reader.onload = function (e) {
                previewElement.src = e.target.result;
                previewElement.style.display = "block";
            };
            reader.readAsDataURL(file);
        }
    }

        
</script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('user.layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/bestleea/public_html/resources/views/user/pages/profile-manage.blade.php ENDPATH**/ ?>