68 lines
4.3 KiB
JavaScript
68 lines
4.3 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const addVisitorBtn = document.getElementById('add-visitor');
|
|
const visitorsContainer = document.getElementById('visitors-container');
|
|
|
|
function updateVisitorIndices() {
|
|
const visitorGroups = visitorsContainer.querySelectorAll('.visitor-group');
|
|
visitorGroups.forEach((group, index) => {
|
|
const visitorIndex = index + 1;
|
|
group.querySelector('h3').textContent = `Visitor ${visitorIndex}`;
|
|
group.querySelectorAll('[id^="visitor_"]').forEach(input => {
|
|
const oldId = input.id;
|
|
const newId = oldId.replace(/_\d+$/, `_${visitorIndex}`);
|
|
input.id = newId;
|
|
const label = document.querySelector(`[for="${oldId}"]`);
|
|
if (label) {
|
|
label.htmlFor = newId;
|
|
}
|
|
});
|
|
group.querySelectorAll('[name^="visitors["]').forEach(input => {
|
|
input.name = input.name.replace(/\[\d+\]/, `[${visitorIndex}]`);
|
|
});
|
|
});
|
|
}
|
|
|
|
addVisitorBtn.addEventListener('click', function () {
|
|
const visitorCount = visitorsContainer.querySelectorAll('.visitor-group').length + 1;
|
|
const visitorTemplate = `
|
|
<div class="visitor-group border-t mt-4 pt-4">
|
|
<div class="flex justify-between items-center">
|
|
<h3 class="text-lg font-semibold">Visitor ${visitorCount}</h3>
|
|
<button type="button" class="text-red-500 hover:text-red-700 delete-visitor">Delete</button>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2">
|
|
<div>
|
|
<label for="visitor_full_name_${visitorCount}" class="block text-sm font-medium text-gray-700">Full Name</label>
|
|
<input type="text" id="visitor_full_name_${visitorCount}" name="visitors[${visitorCount}][full_name]" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
|
|
</div>
|
|
<div>
|
|
<label for="visitor_id_or_passport_${visitorCount}" class="block text-sm font-medium text-gray-700">National ID or Passport Number</label>
|
|
<input type="text" id="visitor_id_or_passport_${visitorCount}" name="visitors[${visitorCount}][id_or_passport]" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
|
|
</div>
|
|
<div>
|
|
<label for="visitor_id_image_${visitorCount}" class="block text-sm font-medium text-gray-700">Scanned ID/Passport Image</label>
|
|
<input type="file" id="visitor_id_image_${visitorCount}" name="visitors[${visitorCount}][id_image]" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none" required>
|
|
</div>
|
|
<div>
|
|
<label for="visitor_mobile_phone_${visitorCount}" class="block text-sm font-medium text-gray-700">Mobile Phone Number</label>
|
|
<input type="text" id="visitor_mobile_phone_${visitorCount}" name="visitors[${visitorCount}][mobile_phone]" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<label for="visitor_mailing_address_${visitorCount}" class="block text-sm font-medium text-gray-700">Mailing Address</label>
|
|
<textarea id="visitor_mailing_address_${visitorCount}" name="visitors[${visitorCount}][mailing_address]" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
visitorsContainer.insertAdjacentHTML('beforeend', visitorTemplate);
|
|
});
|
|
|
|
visitorsContainer.addEventListener('click', function(e) {
|
|
if (e.target.classList.contains('delete-visitor')) {
|
|
e.target.closest('.visitor-group').remove();
|
|
updateVisitorIndices();
|
|
}
|
|
});
|
|
});
|