document.addEventListener('DOMContentLoaded', function () {
    const addVisitorBtn = document.getElementById('add-visitor');
    const visitorsContainer = document.getElementById('visitors-container');
    let visitorCount = 1;

    addVisitorBtn.addEventListener('click', function () {
        visitorCount++;
        const visitorTemplate = `
            <div class="visitor-group border-t mt-4 pt-4">
                <h3 class="text-lg font-semibold">Visitor ${visitorCount}</h3>
                <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);
    });
});