vb_book/app/Views/user_form.php

356 lines
20 KiB
PHP
Executable File

<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h4 class="header-title"><?= $page_name; ?></h4>
<?php if (session()->getFlashdata('success') || session()->getFlashdata('error')) : ?>
<?php if (session()->getFlashdata('success')) : ?>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<?= session('success') ?>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<?php endif; ?>
<?php if (session()->getFlashdata('error')) : ?>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<?= session('error') ?>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<?php endif; ?>
<?php endif; ?>
<!-- <?php if (session()->getFlashdata('success')) : ?>
<div class="alert alert-success"><?= session()->getFlashdata('success') ?></div>
<?php endif; ?> -->
<form class="parsley-examples" action="<?= base_url() . "insert_users"; ?>" method="post" enctype="multipart/form-data" id="myForm">
<div class="form-group">
<div class="form-row">
<div class="form-group col-md-6">
<label for="email" class="col-form-label">Email<span class="text-danger">*</span></label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email" value="<?= isset($details['email']) ? $details['email'] : '' ?>" required onchange="checkExistingEmail(this.value)" />
<span id="emailValidationMessage"></span>
</div>
<?php if (empty($details)) { ?>
<div class="form-group col-md-6">
<label for="password" class="col-form-label">Password<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="password" name="password" placeholder="Password" value="<?= isset($details['password']) ? $details['password'] : '' ?>" required />
</div>
<?php } ?>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="first_name" class="col-form-label">First Name<span class="text-danger">*</span></label>
<input data-parsley-type="alphanum" type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name" value="<?= isset($details['first_name']) ? $details['first_name'] : '' ?>" required />
</div>
<div class="form-group col-md-6">
<label for="last_name" class="col-form-label">Last Name<span class="text-danger"></span></label>
<input data-parsley-type="alphanum" type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name" value="<?= isset($details['last_name']) ? $details['last_name'] : '' ?>" />
</div>
<!-- <div class="form-group col-md-4">
<label for="date_of_birth" class="col-form-label">Date Of Birth<span class="text-danger">*</span></label>
<input type="date" class="form-control" id="date_of_birth" name="date_of_birth" placeholder="Date Of birth (format : DD/MM/YYYY)" data-toggle="input-mask" data-mask-format="00/00/0000" required />
</div> -->
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="mobile_no" class="col-form-label">Mobile Number<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="mobile_no" name="mobile_no" placeholder="Mobile Number (Enter only numbers)" data-toggle="input-mask" data-mask-format="0000000000" value="<?= isset($details['mobile_no']) ? $details['mobile_no'] : '' ?>" autofocus required>
</div>
<div class="form-group col-md-4">
<label for="role" class="col-form-label" id="role_label">Role<span class="text-danger">*</span></label>
<select id="role" name="role" class="form-control" required>
<option value="">Select Role</option>
<option value="admin" <?= isset($details['role']) && $details['role'] === 'admin' ? 'selected' : '' ?>>Admin</option>
<option value="manager" <?= isset($details['role']) && $details['role'] === 'manager' ? 'selected' : '' ?>>Manager</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="gender" class="col-form-label">Gender<span class="text-danger"></span></label>
<select id="gender" name="gender" class="form-control">
<option value="">Select Gender</option>
<option value="male" <?= isset($details['gender']) && $details['gender'] === 'male' ? 'selected' : '' ?>>Male</option>
<option value="female" <?= isset($details['gender']) && $details['gender'] === 'female' ? 'selected' : '' ?>>Female</option>
</select>
</div>
<div class="form-group col-md-4" id="eventNameContainer">
<label for="event_id" class="col-form-label">Event Name<span class="text-danger"></span></label>
<select id="event_id" name="event_id" class="form-control">
<!-- Add a default option -->
<option value="">Select Event</option>
<!-- Options will be dynamically populated using AJAX -->
</select>
</div>
<input type="hidden" id="selected_event_id" name="selected_event_id" value="<?= isset($details['selected_event_id']) ? $details['selected_event_id'] : '' ?>">
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="address" class="col-form-label">Address<span class="text-danger"></span></label>
<input type="text" class="form-control" id="address" name="address" placeholder="Address (eg : 1234 Main St)" value="<?= isset($details['address']) ? $details['address'] : '' ?>" />
</div>
<div class="form-group col-md-4">
<label for="city" class="col-form-label">City<span class="text-danger"></span></label>
<input type="text" class="form-control" id="city" name="city" placeholder="City" value="<?= isset($details['city']) ? $details['city'] : '' ?>" />
</div>
<div class="form-group col-md-4">
<label for="state" class="col-form-label">State<span class="text-danger"></span></label>
<input type="text" class="form-control" id="state" name="state" placeholder="State" value="<?= isset($details['state']) ? $details['state'] : '' ?>" />
</div>
<!-- Add the event name dropdown and selected event ID input field to your form -->
<!-- Add the event name dropdown and selected event ID input field to your form -->
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="postal_code" class="col-form-label">Postal Code<span class="text-danger"></span></label>
<input data-parsley-type="number" type="text" class="form-control" id="postal_code" name="postal_code" placeholder="Postal Code (PIN)" value="<?= isset($details['postal_code']) ? $details['postal_code'] : '' ?>" pattern="[0-9]{6}" maxlength="6" />
</div>
<?php if (!empty($details['profile_picture'])) { ?>
<div class="form-group col-md-4 mt-3">
<div class="media">
<img src="<?= base_url('public/uploads/' . $details['profile_picture']) ?>" alt="Business Logo" height="50" class="preview-image d-flex align-self-start rounded mr-2">
<div class="media-body">
<h5 class="mt-0">Existing Profile Picture</h5>
<p class="mb-1"><?= $details['profile_picture']; ?></p>
<input type="hidden" id="existing_profile_picture_name" name="existing_profile_picture_name" placeholder="hidden Field for profile picture name" readonly value="<?= $details['profile_picture']; ?>" />
</div>
</div>
</div>
<?php } ?>
<div class="form-group col-md-4">
<label for="profile_picture" class="col-form-label">Profile Picture</label>
<input type="file" name="profile_picture" value="<?= isset($details['profile_picture']) ? $details['profile_picture'] : '' ?>" accept="image/*" onchange="validateFile(this)" />
<div id="error_message" style="color: red;"></div>
</div>
<?php if ($loggedin_person_role === 'sadmin') { ?>
<div class="form-group col-md-4">
<label for="business_id" class="col-form-label">Business<span class="text-danger"></span></label>
<select id="business_id" name="business_id" class="form-control" required>
<option value="">Choose your Business</option>
<?php foreach ($business_details as $value) { ?>
<option value="<?php echo $value['business_id']; ?>" <?php if (isset($details['business_id']) && ($details['business_id'] === $value['business_id'])) echo "selected"; ?>>
<?php echo $value['title']; ?></option>
<?php } ?>
</select>
</div>
<?php } ?>
</div>
<input type="hidden" id="user_id" name="user_id" placeholder="hidden for user id" value="<?= isset($details['user_id']) ? $details['user_id'] : '' ?>" />
<input type="hidden" id="dummy_flag" name="dummy_flag" placeholder="hidden for dummy flag redirect purpose" value="<?= isset($dummy_flag) ? $dummy_flag : '' ?>" />
<?php if (!empty($details) && $loggedin_person_role !== 'manager') { ?>
<div class="form-group text-right m-b-0 checkbox checkbox-purple">
<input type="checkbox" id="isactive" name="isactive" class="form-control" <?= isset($details) && $details['isactive'] == 1 ? 'checked' : '' ?>>
<label for="isactive"> Is Active</label>
</div>
<br>
<?php } ?>
<div class="form-group text-right m-b-0">
<button class="btn btn-success waves-effect waves-light mr-1" type="submit" id="submitBtn">
Submit
</button>
<button type="reset" class="btn btn-primary waves-effect mr-1">
Reset
</button>
<?php if ($loggedin_person_role !== 'manager') : ?>
<a href="<?= base_url() . "user_list"; ?>" class="btn btn-secondary waves-effect">Cancel</a>
<?php endif; ?>
</div>
</div>
</form>
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->
</div><!-- end row -->
<script>
// Get the current date in "yyyy-mm-dd" format
function getCurrentDate() {
const today = new Date();
const year = today.getFullYear();
let month = today.getMonth() + 1;
let day = today.getDate();
// Add leading zeros if month or day is less than 10
if (month < 10) {
month = '0' + month;
}
if (day < 10) {
day = '0' + day;
}
return `${year}-${month}-${day}`;
}
// Set the max attribute of the date input field to the current date
document.getElementById('date_of_birth').setAttribute('max', getCurrentDate());
// Set the min attribute of the date input field to "1965-01-01"
document.getElementById('date_of_birth').setAttribute('min', '1965-01-01');
function validateFile(input) {
const file = input.files[0];
const errorMessage = document.getElementById("error_message");
if (file) {
if (file.type.startsWith("image/")) {
// It's an image file, no error
errorMessage.textContent = "";
} else {
// Invalid file type
errorMessage.textContent = "Invalid file type. Please select an image.";
input.value = ""; // Clear the input field
}
}
}
</script>
<script>
function validateEmail(email) {
// Regular expression for a basic email validation
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var emailInput = document.getElementById("email");
var validationMessage = document.getElementById("emailValidationMessage");
if (emailPattern.test(email)) {
validationMessage.textContent = "";
} else if (email == "") {
validationMessage.textContent = "";
} else {
validationMessage.textContent = "Invalid email address";
validationMessage.style.color = "red";
}
}
function checkExistingEmail(email){
var validationMessage = document.getElementById("emailValidationMessage");
$.ajax({
type: "POST",
url: "<?= base_url() . 'check_existing' ?>",
data: {
value: email,
module: 'users',
field: 'email'
},
success: function(response) {
if (response['data']['status']) {
validationMessage.textContent = response['data']['message'];
validationMessage.style.color = "red";
document.getElementById('email').value = "";
} else {
validationMessage.textContent = "";
}
},
error: function() {
alert("Error occur.");
}
});
}
</script>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
var form = event.target;
// Check if form is valid
if (!form.checkValidity()) {
form.reportValidity(); // Display validation error messages
event.preventDefault(); // Prevent form submission if it's not valid
$('#submitBtn').prop('disabled', false); // Re-enable the button
// Display custom alert message
alert('Please fill out all required fields correctly.');
} else {
$('#submitBtn').prop('disabled', true); // Disable the button to prevent duplicate submissions
}
});
</script>
<!-- Modify the existing JavaScript code -->
<script>
$(document).ready(function () {
var flag_for_validations = "<?= isset($dummy_flag) ? $dummy_flag : '' ?>";
if (flag_for_validations == '1') {
$('#role_label').html('Role');
$('#role').removeAttr("required").prop('disabled', true);
}
// Function to show/hide the event name container based on the selected role
function toggleEventNameContainer() {
var selectedRole = $('#role').val();
var eventNameContainer = $('#eventNameContainer');
if (selectedRole === 'manager') {
eventNameContainer.show();
} else {
eventNameContainer.hide();
}
}
// Trigger the function on page load and on the change event of the role dropdown
$('#role').on('change', toggleEventNameContainer);
toggleEventNameContainer(); // Initial check on page load
// Other existing JavaScript code...
});
</script>
<script>
$(document).ready(function () {
// ...
// Assuming you trigger the AJAX on the change event of the role dropdown
$('#role').on('change', function () {
var selectedRole = $(this).val();
var storedEventId = '<?= isset($details['event_id']) ? $details['event_id'] : '' ?>';
// Check if the selected role is "manager" before making the AJAX request
if (selectedRole === 'manager') {
// Perform AJAX request to fetch event names based on the selected role
$.ajax({
url: "<?= base_url('users/fetch_event_names') ?>",
type: 'GET',
dataType: 'json',
success: function (data) {
// Assuming your response has an array of event names
var eventNames = data.eventNames;
// Clear existing options and add the default option
$('#event_id').empty().append('<option value="">Select Event</option>');
// Add new options based on the fetched data
for (var i = 0; i < eventNames.length; i++) {
$('#event_id').append('<option value="' + eventNames[i].event_id + '">' + eventNames[i].event_name + '</option>');
}
// Set the selected option based on the stored event ID
if (storedEventId && $('#event_id option[value="' + storedEventId + '"]').length > 0) {
// Set the stored event ID if it exists in the new options
$('#event_id').val(storedEventId);
} else {
// Set the default "Select Event" option
$('#event_id').val('');
}
},
error: function (error) {
console.error(error); // Log any errors to the console
}
});
} else {
// Clear event names dropdown if the selected role is not "manager"
$('#event_id').empty().append('<option value="">Select Event</option>');
}
});
// Trigger the change event initially to populate event names on page load
$('#role').change();
// ...
});
</script>