  <style>
     #drop-area.highlight {
    border-color: #0d6efd;
    background-color: #f0f8ff;
  }
  </style>
  <main class="main-wrapper">
    <div class="main-content">
      <button class="btn guestBtn d-flex gap-2 align-items-center" id="backBtn"><img src="<?= base_url('assets/images/arowleft.svg') ?>" alt="" width="15px"> Back</button>
		<div class="row">
     <div class="col-md-8 my-2">
      <h3 class="fmon">Profile</h3>
     </div>
      
    </div>
    <div class="modal-body">
        
      
     
           <form class="row" action="<?= base_url('site/updateprofile/'.$id) ?>" method="post" enctype="multipart/form-data">
            <div class="col-md-6 my-2">
                <label for="" class="form-label">Name </label>
                <div class="input-group mb-3">
                    <input type="text" class="form-control "
                     placeholder="Recipient's username" 
                     aria-label="Recipient's username" 
                     name="name" id="name"
                     aria-describedby="basic-addon2" required 
                      value="<?php echo $userinfo['name']; ?>">
                    
                  </div>
          </div>
          <div class="col-md-6 my-2">
            <label for="" class="form-label">User Role </label>
            <div class="input-group mb-3">
                <input type="text" class="form-control " placeholder="Recipient's username" aria-label="Recipient's username" 
                aria-describedby="basic-addon2" disabled value="Admin">
                <span class="input-group-text" id="basic-addon2"><img src="<?= base_url('assets/images/lock-solid.svg') ?>" alt="" width="20px"></span>
              </div>
      </div>
      <div class="col-md-6 my-2">
        <label for="" class="form-label">Email </label>
        <div class="input-group mb-3">
            <input type="email" class="form-control " placeholder="Recipient's username" aria-label="Recipient's username"
             aria-describedby="basic-addon2" disabled
              value="<?php echo $userinfo['email']; ?>">
            <span class="input-group-text" id="basic-addon2"><img src="<?= base_url('assets/images/lock-solid.svg') ?>" alt="" width="20px"></span>
          </div>
  </div>
  <div class="col-md-6 my-2">
    <label for="" class="form-label">Company </label>
    <div class="input-group mb-3">
        <input type="text" class="form-control " name="companeyName" id="companeyName" 
        placeholder="Recipient's Company Name " aria-label="Recipient's Company Name"
         aria-describedby="basic-addon2" required
         value="<?php echo $userinfo['companeyName']; ?>">
      </div>
</div>
<div class="col-md-6 my-2">
    <label for="" class="form-label">Password <span class="text-danger">Fill if you want to change</span></label>
    <div class="input-group mb-3">
        <input type="password" class="form-control "
         placeholder="Recipient's Password  " 
 
         name="password" id="password"
         value="">
        <span class="input-group-text" id="basic-addon2"><img src="<?= base_url('assets/images/lock-solid.svg') ?>" alt="" width="20px"></span>
      </div>
</div>

<div class="col-md-6 my-2">
    <label for="" class="form-label">Phone </label>
    <div class="input-group mb-3">
        <input type="text" class="form-control " name="phone" id="phone" 
        placeholder="Recipient's Phone Number " aria-label="Recipient's Phone Number"
         aria-describedby="basic-addon2" required
         value="<?php echo $userinfo['phone']; ?>">
      </div>
</div>

                <div class="col-md-12 my-2">
                 
                      <label for="image" id="drop-area" class="brower2 d-flex justify-content-center align-items-center" style="border: 2px dashed #ccc; padding: 20px;">
  <div class="d-flex flex-column align-items-center">
    <img src="<?php echo base_url(); ?>assets/images/up2.png" alt="" width="20px">
    <small>
      Drag and Drop here or
      <label for="image" class="text-primary" style="cursor: pointer;">Browse Files</label>
    </small>
    <input class="d-none" type="file" name="image" id="image">
  </div>
</label>

                    </div>

         
                  <div class="col-md-12 my-2">
                    <div class="row d-flex justify-content-center mb-3">
                      <div class="col-md-12 my-2 d-flex justify-content-center">
                          <button type="submit" class="btn autBtn py-2 px-5">Change Password</button>
                      </div>
                   </div>
                  </div>
           </form>
       <!-- button for attahmnts -->
     
      
  
    </div>
      </div>
  </div>
    <script>
  const dropArea = document.getElementById("drop-area");
  const fileInput = document.getElementById("image");

  // Prevent default behaviors for drag events
  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, e => e.preventDefault());
    dropArea.addEventListener(eventName, e => e.stopPropagation());
  });

  // Highlight drop area on dragover
  ['dragenter', 'dragover'].forEach(eventName => {
    dropArea.addEventListener(eventName, () => {
      dropArea.classList.add('highlight');
    });
  });

  ['dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, () => {
      dropArea.classList.remove('highlight');
    });
  });

  // Handle dropped files
  dropArea.addEventListener('drop', e => {
    const files = e.dataTransfer.files;
    if (files.length > 0) {
      fileInput.files = files;

      // Optional: Trigger a change event or preview image
      const event = new Event('change', { bubbles: true });
      fileInput.dispatchEvent(event);
    }
  });
</script>

  </main>