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();
        }
    });
});