Kirillsasa/interview-scheduler-pro

1document.addEventListener('DOMContentLoaded', function() {2    // Mock data - in a real app this would come from an API3    const availableSlots = [4        { date: '2023-06-15', time: '09:00', available: true, maxParticipants: 3, currentParticipants: 1 },5        { date: '2023-06-15', time: '11:00', available: true, maxParticipants: 3, currentParticipants: 0 },6        { date: '2023-06-15', time: '14:00', available: true, maxParticipants: 3, currentParticipants: 2 },7        { date: '2023-06-16', time: '10:00', available: true, maxParticipants: 3, currentParticipants: 0 },8        { date: '2023-06-16', time: '13:00', available: false, maxParticipants: 3, currentParticipants: 3 },9        { date: '2023-06-17', time: '15:00', available: true, maxParticipants: 3, currentParticipants: 1 }10    ];11 12    const calendar = document.getElementById('calendar');13    const bookingForm = document.getElementById('bookingForm');14    const selectedSlotInfo = document.getElementById('selectedSlotInfo');15    const selectedDateSpan = document.getElementById('selectedDate');16    const selectedTimeSpan = document.getElementById('selectedTime');17    18    let selectedSlot = null;19 20    // Render calendar with available slots21    function renderCalendar() {22        calendar.innerHTML = '';23        24        const groupedByDate = availableSlots.reduce((acc, slot) => {25            if (!acc[slot.date]) {26                acc[slot.date] = [];27            }28            acc[slot.date].push(slot);29            return acc;30        }, {});31 32        for (const [date, slots] of Object.entries(groupedByDate)) {33            const dateCard = document.createElement('div');34            dateCard.className = 'bg-white rounded-lg shadow p-4';35            36            const dateHeader = document.createElement('h3');37            dateHeader.className = 'font-bold text-lg mb-3 text-gray-800';38            dateHeader.textContent = new Date(date).toLocaleDateString('en-US', { 39                weekday: 'long', 40                month: 'long', 41                day: 'numeric' 42            });43            44            dateCard.appendChild(dateHeader);45            46            const slotsContainer = document.createElement('div');47            slotsContainer.className = 'space-y-2';48            49            slots.forEach(slot => {50                const slotButton = document.createElement('button');51                slotButton.className = `time-slot w-full text-center py-2 rounded-md ${slot.available && slot.currentParticipants < slot.maxParticipants ? 'available' : 'booked'}`;52                slotButton.innerHTML = `53                    ${slot.time} 54                    <span class="text-xs">(${slot.currentParticipants}/${slot.maxParticipants})</span>55                `;56                57                if (slot.available && slot.currentParticipants < slot.maxParticipants) {58                    slotButton.addEventListener('click', () => selectSlot(slot));59                }60                61                slotsContainer.appendChild(slotButton);62            });63            64            dateCard.appendChild(slotsContainer);65            calendar.appendChild(dateCard);66        }67    }68 69    function selectSlot(slot) {70        selectedSlot = slot;71        selectedDateSpan.textContent = new Date(slot.date).toLocaleDateString('en-US', { 72            weekday: 'long', 73            month: 'long', 74            day: 'numeric' 75        });76        selectedTimeSpan.textContent = slot.time;77        selectedSlotInfo.classList.remove('hidden');78        79        // Update active state in UI80        document.querySelectorAll('.time-slot').forEach(el => {81            el.classList.remove('selected');82        });83        84        // Find and select the clicked slot85        const allSlots = document.querySelectorAll('.time-slot');86        for (const el of allSlots) {87            if (el.textContent.includes(slot.time)) {88                el.classList.add('selected');89                break;90            }91        }92    }93 94    bookingForm.addEventListener('submit', function(e) {95        e.preventDefault();96        97        if (!selectedSlot) {98            alert('Please select a time slot first');99            return;100        }101 102        const fullName = document.getElementById('fullName').value;103        const email = document.getElementById('email').value;104        105        // In a real app, you would send this data to your backend106        console.log('Booking details:', {107            fullName,108            email,109            date: selectedSlot.date,110            time: selectedSlot.time111        });112        113        // Show confirmation114        const confirmation = document.createElement('div');115        confirmation.className = 'booking-confirmation bg-green-50 text-green-800 p-4 rounded-md mt-4';116        confirmation.innerHTML = `117            <div class="flex items-center">118                <i data-feather="check-circle" class="text-green-500 mr-2"></i>119                <p>Your interview has been booked for ${selectedDateSpan.textContent} at ${selectedTimeSpan.textContent}. We've sent a confirmation to ${email}.</p>120            </div>121        `;122        123        bookingForm.appendChild(confirmation);124        feather.replace();125        126        // Reset form127        bookingForm.reset();128        selectedSlot = null;129        selectedSlotInfo.classList.add('hidden');130        131        // Re-render calendar to update availability132        setTimeout(renderCalendar, 1500);133    });134 135    renderCalendar();136});