<?php $__env->startSection('content'); ?>
<style>
    .profile-container {
      position: relative;
      width: 130px;
      height: 130px;
      margin-bottom: 20px;
    }

    .profile-image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #eee;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      transition: 0.3s ease;
    }

    .edit-icon {
      position: absolute;
      bottom: 8px;
      right: 8px;
      background-color: #007bff;
      color: white;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: 2px solid #fff;
      transition: background-color 0.3s ease;
    }

    .edit-icon:hover {
      background-color: #0056b3;
    }

    input[type="file"] {
      display: none;
    }

    .save-btn {
      background-color: #007bff;
      color: #fff;
      padding: 10px 25px;
      border: none;
      border-radius: 25px;
      cursor: pointer;
      font-size: 15px;
      transition: background-color 0.3s ease;
    }

    .save-btn:hover {
      background-color: #0056b3;
    }
  </style>
   <div class="appHeader text-light ico1" style="display: none;">
            <div class="left">
                                    <a href="javascript:void()" onclick="history.back();" class="headerButton">
                        <ion-icon name="chevron-back-outline" role="img" class="icon md hydrated" aria-label="chevron back outline"></ion-icon>
                    </a>
                               
                
            </div>
            <div class="pageTitle">
                <img src="<?php echo e(siteLogo()); ?>" width="150" alt="">
            </div>
            <div class="right">
                <a href="<?php echo e(route('user.alerts')); ?>" class="headerButton">
                    <ion-icon class="icon md hydrated" name="notifications" role="img" aria-label="notifications"></ion-icon>
                </a>
            </div>
        </div>
        <div id="appCapsule" class="container">
    <div>
        
  <form action="<?php echo e(route('user.upload.image')); ?>" method="POST" enctype="multipart/form-data" style=" display: flex;align-items: center;
      flex-direction: column;">
      
     <?php echo csrf_field(); ?>
    <div class="profile-container">
      <img id="profileImage" src="<?php echo e($user->image ? getImage(getFilePath('userProfile') . '/' . $user->image) : asset('/assets/images/default.png')); ?>" alt="Profile" class="profile-image">

      <!-- Pencil icon to open file picker -->
      <label for="imageUpload" class="edit-icon">
        <i class="fa fa-pencil"></i>
      </label>

      <!-- Hidden file input -->
      <input type="file" id="imageUpload" name="image" accept="image/*">
    </div>

    <button type="submit" class="save-btn">Save</button>
  </form>

        <div class="listview-title mt-1">Theme</div>
        <ul class="listview image-listview text inset no-line">
            <li>
                <div class="item">
                    <div class="in">
                        <div>
                            Dark Mode
                        </div>
                        <div class="form-check form-switch ms-2">
                            <input class="form-check-input dark-mode-switch" type="checkbox" id="darkmodeSwitch">
                            <label class="form-check-label" for="darkmodeSwitch"></label>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

        <div class="listview-title mt-1">Notifications</div>
        <ul class="listview image-listview text inset">
            <li>
                <div class="item">
                    <div class="in">
                        <div>
                            Payment Alert
                            <div class="text-muted">
                                Send notification when new payment received
                            </div>
                        </div>
                        <div class="form-check form-switch ms-2">
                            <input class="form-check-input" checked="" disabled="disabled" type="checkbox" id="SwitchCheckDefault1">
                            <label class="form-check-label" for="SwitchCheckDefault1"></label>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

        <div class="listview-title mt-1">Profile Settings</div>
        <ul class="listview image-listview text inset">
            <li>
                <a href="#" data-bs-toggle="modal" data-bs-target="#changePhoneNumber" class="item">
                    <div class="in">
                        <div>Update Phone Number</div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item" data-bs-toggle="modal" data-bs-target="#updateEmail">
                    <div class="in">
                        <div>Update E-mail</div>
                    </div>
                </a>
            </li>
        </ul>

        <div class="listview-title mt-1">Security</div>
        <ul class="listview image-listview text mb-2 inset">
            <li>
                <a href="#" class="item" data-bs-toggle="modal" data-bs-target="#changePassword">
                    <div class="in">
                        <div>Change Password</div>
                    </div>
                </a>
            </li>
            <li>
                <a href="pin" class="item">
                    <div class="in">
                        <div>Transaction Pin</div>
                    </div>
                </a>
            </li>
            <li>
                <div class="item">
                    <div class="in">
                        <div>
                            2 Step Verification
                        </div>
                        <div id="ContentPlaceHolder1_UpdatePanel1">
                            <form class="profile-form" data-type="two step verification">
                                <div class="form-check form-switch ms-2">
                                    <input name="" type="checkbox" id="two-step" class="form-check-input">
                                    <label class="form-check-label" for="two-step"></label>
                                    <input type="submit" name="" value="Button" id="ContentPlaceHolder1_Btn_Set2Fa" style="display: none;">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <a href="<?php echo e(route('user.logout')); ?>" class="item">
                    <div class="in">
                        <div class="text-danger"><span><ion-icon name="Power" class="text-danger md hydrated" style="position:relative;top:2px; font-weight:900" role="img" aria-label="power"></ion-icon></span> Log out</div>
                    </div>
                </a>
            </li>
        </ul>
        <div class="modal fade" id="changePhoneNumber" role="dialog">
            <div class="modal-dialog " role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Update Phone Number</h5>
                    </div>
                    <div class="modal-body">
                    <form class="profile-form" data-modal="changePhoneNumber" data-type="phone number" method="post" action="<?php echo e(route('user.submit.mobile')); ?>">
                    <?php echo csrf_field(); ?>
                        <div class="action-sheet-content" style="overflow-x: hidden;">
                            <div class="form-group basic">
                                <label class="impo">Phone Number *</label>
                                <input name="mobile" type="text" value="<?php echo e($user->mobile); ?>" class="form-control form-control-lg" required="">
                            </div>

                            <div class="form-group basic text-end">
                                <button type="button" class="btn border border-danger text-danger" style="border-radius:0;" data-bs-dismiss="modal"><ion-icon style="font-size:15px;" name="close-circle" role="img" class="md hydrated" aria-label="close circle"></ion-icon> Cancel</button>
                                    <button type="submit" class="btn btn-primary profile-btn" style="border-radius:0;"><ion-icon style="font-size:15px;" name="save" role="img" class="md hydrated" aria-label="save"></ion-icon> Save</button>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="updateEmail" tabindex="-1" role="dialog">
            <div class="modal-dialog " role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Update Email Address</h5>
                    </div>
                    <div class="modal-body">
                    <form class="profile-form" data-modal="updateEmail" data-type="email address" method="post" action="<?php echo e(route('user.submit.email')); ?>">
                    <?php echo csrf_field(); ?>
                        <div class="action-sheet-content" style="overflow-x: hidden;">
                            <div class="form-group basic">
                                <label class="impo">Email Address *</label>
                                <input name="email" type="email" value="<?php echo e($user->email); ?>" class="form-control form-control-lg" required="">
                            </div>

                            <div class="form-group basic text-end">
                                <button type="button" class="btn border border-danger text-danger" style="border-radius:0;" data-bs-dismiss="modal"><ion-icon style="font-size:15px;" name="close-circle" role="img" class="md hydrated" aria-label="close circle"></ion-icon> Cancel</button>
                                    <button type="submit" class="btn btn-primary profile-btn" style="border-radius:0;"><ion-icon style="font-size:15px;" name="save" role="img" class="md hydrated" aria-label="save"></ion-icon> Save</button>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="changePassword" tabindex="-1" role="dialog">
            <div class="modal-dialog " role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Change Password</h5>
                    </div>
                    <div class="modal-body">
                        <form class="profile-form" data-modal="changePassword" data-type="password" method="post" action="<?php echo e(route('user.change.password')); ?>">
                    <?php echo csrf_field(); ?>
                            <div class="action-sheet-content" style="overflow-x: hidden;">
                                <div class="form-group basic">
                                    <label>Current Password</label>
    
                                    <input name="current_password" type="password" class="form-control form-control-lg" autocomplete="new-password" required="">
                                </div>
                                <div class="form-group basic">
                                    <label>New Password</label>
    
                                    <input name="password" type="password" class="form-control form-control-lg" autocomplete="new-password" required="">
                                </div>
                                <div class="form-group basic">
                                    <label>Repeat Password</label>
    
                                    <input name="password_confirmation" type="password" class="form-control form-control-lg" autocomplete="new-password" required="">
                                </div>
    
                                <div class="form-group basic text-end">
                                    <button type="button" class="btn border border-danger text-danger" style="border-radius:0;" data-bs-dismiss="modal"><ion-icon style="font-size:15px;" name="close-circle" role="img" class="md hydrated" aria-label="close circle"></ion-icon> Cancel</button>
                                    <button type="submit" class="btn btn-primary profile-btn" style="border-radius:0;"><ion-icon style="font-size:15px;" name="save" role="img" class="md hydrated" aria-label="save"></ion-icon> Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(document).on("change", "input[id*=Enable2Fa]", function (e) {
                e.preventDefault();
                $("input[id*=Btn_Set2Fa]").click();
                return false;
            });
        
    const imageUpload = document.getElementById('imageUpload');
    const profileImage = document.getElementById('profileImage');

    imageUpload.addEventListener('change', function(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
          profileImage.src = e.target.result; // Update the preview
        };
        reader.readAsDataURL(file);
      }
    });
  </script>

        <script src="/assets/js/settings.js"></script>
    </div>
</div>
<?php $__env->stopSection(); ?>
<?php echo $__env->make($activeTemplate . 'layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/syqhlpzd/web3worldchainsecurity.org/core/resources/views/templates/invester/user/profile_setting.blade.php ENDPATH**/ ?>