app.js

// Hospital Website JavaScript

// Application data
const appData = {
  "doctors": [
    {
      "id": 1,
      "name": "Dr. ABC",
      "specialty": "Cardiology",
      "photo": "https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=200",
      "rating": 4.8,
      "experience": "15 years",
      "availability": ["09:00", "10:30", "14:00", "15:30"],
      "status": "available"
    },
    {
      "id": 2,
      "name": "Dr. Michael Chen",
      "specialty": "Neurology",
      "photo": "https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?w=200",
      "rating": 4.9,
      "experience": "12 years",
      "availability": ["08:30", "11:00", "16:00"],
      "status": "available"
    },
    {
      "id": 3,
      "name": "Dr. Emily Rodriguez",
      "specialty": "Pediatrics",
      "photo": "https://images.unsplash.com/photo-1594824750880-bb2cfb73c7d5?w=200",
      "rating": 4.7,
      "experience": "10 years",
      "availability": ["09:30", "13:00", "17:00"],
      "status": "unavailable"
    },
    {
      "id": 4,
      "name": "Dr. James Wilson",
      "specialty": "Orthopedics",
      "photo": "https://images.unsplash.com/photo-1582750433449-648ed127bb54?w=200",
      "rating": 4.6,
      "experience": "18 years",
      "availability": ["10:00", "12:30", "15:00"],
      "status": "available"
    }
  ],
  "backupDoctors": [
    {
      "id": 5,
      "name": "Dr. Lisa Thompson",
      "specialty": "General Medicine",
      "photo": "https://images.unsplash.com/photo-1638202993928-7267aad84c31?w=200",
      "rating": 4.5,
      "experience": "8 years",
      "availability": ["24/7"],
      "status": "backup"
    },
    {
      "id": 6,
      "name": "Dr. Robert Kim",
      "specialty": "Emergency Medicine",
      "photo": "https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?w=200",
      "rating": 4.4,
      "experience": "6 years",
      "availability": ["24/7"],
      "status": "backup"
    }
  ],
  "staff": [
    {
      "id": 1,
      "name": "Nurse Jennifer Adams",
      "department": "ICU",
      "photo": "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=200"
    },
    {
      "id": 2,
      "name": "Technician Mark Davis",
      "department": "Radiology",
      "photo": "https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=200"
    },
    {
      "id": 3,
      "name": "Receptionist Maria Garcia",
      "department": "Front Desk",
      "photo": "https://images.unsplash.com/photo-1594824750880-bb2cfb73c7d5?w=200"
    }
  ],
  "patientData": {
    "name": "John Doe",
    "id": "P12345",
    "age": 45,
    "medications": [
      {"name": "Lisinopril", "dosage": "10mg", "frequency": "Once daily", "time": "8:00 AM"},
      {"name": "Metformin", "dosage": "500mg", "frequency": "Twice daily", "time": "8:00 AM, 8:00 PM"}
    ],
    "vitalSigns": {
      "heartRate": [72, 75, 70, 73, 71],
      "bloodPressure": ["120/80", "118/78", "122/82", "119/79", "121/81"],
      "temperature": [98.6, 98.4, 98.7, 98.5, 98.6]
    },
    "appointments": [
      {"date": "2025-01-15", "doctor": "Dr. Sarah Mitchell", "type": "Cardiology Checkup"},
      {"date": "2025-01-20", "doctor": "Dr. Michael Chen", "type": "Neurology Consultation"}
    ],
    "treatments": [
      {"name": "Physical Therapy", "progress": 75, "nextSession": "2025-01-18"},
      {"name": "Cardiac Rehabilitation", "progress": 60, "nextSession": "2025-01-16"}
    ]
  }
};

// State management
let currentSection = 'home';
let selectedTimeSlot = null;
let selectedDoctor = null;
let feedbackData = [];
let staffReviews = [];

// DOM Content Loaded
document.addEventListener('DOMContentLoaded', function() {
    initializeApp();
});

function initializeApp() {
    setupNavigation();
    setupConsultationForm();
    setupDoctorsSection();
    setupFeedbackSection();
    setupStaffReviewSection();
    setupDashboard();
    setupBackupDoctors();
    setupModals();
    setupVideoInterface();
    
    // Set minimum date for consultation booking
    const today = new Date().toISOString().split('T')[0];
    document.getElementById('consultationDate').min = today;
}

// Navigation
function setupNavigation() {
    const navItems = document.querySelectorAll('.nav-item');
    const heroBtn = document.querySelector('.hero .btn--primary');
    
    navItems.forEach(item => {
        item.addEventListener('click', () => {
            const section = item.dataset.section;
            navigateToSection(section);
        });
    });
    
    if (heroBtn) {
        heroBtn.addEventListener('click', () => {
            navigateToSection('consultation');
        });
    }
}

function navigateToSection(sectionName) {
    // Update nav items
    document.querySelectorAll('.nav-item').forEach(item => {
        item.classList.remove('active');
        if (item.dataset.section === sectionName) {
            item.classList.add('active');
        }
    });
    
    // Update sections
    document.querySelectorAll('.section').forEach(section => {
        section.classList.remove('active');
    });
    
    document.getElementById(sectionName).classList.add('active');
    currentSection = sectionName;
    
    // Trigger section-specific initialization
    if (sectionName === 'dashboard') {
        setTimeout(initializeCharts, 100);
    }
}

// Consultation Form
function setupConsultationForm() {
    const form = document.getElementById('consultationForm');
    const doctorSelect = document.getElementById('consultationDoctor');
    const dateInput = document.getElementById('consultationDate');
    const timeSlotsContainer = document.getElementById('timeSlots');
    
    // Populate doctor dropdown
    appData.doctors.filter(doc => doc.status === 'available').forEach(doctor => {
        const option = document.createElement('option');
        option.value = doctor.id;
        option.textContent = `${doctor.name} - ${doctor.specialty}`;
        doctorSelect.appendChild(option);
    });
    
    // Handle doctor selection
    doctorSelect.addEventListener('change', function() {
        if (this.value) {
            selectedDoctor = appData.doctors.find(doc => doc.id == this.value);
            updateTimeSlots();
        } else {
            timeSlotsContainer.innerHTML = '';
        }
    });
    
    dateInput.addEventListener('change', updateTimeSlots);
    
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        if (validateConsultationForm()) {
            bookConsultation();
        }
    });
}

function updateTimeSlots() {
    const timeSlotsContainer = document.getElementById('timeSlots');
    timeSlotsContainer.innerHTML = '';
    
    if (selectedDoctor && selectedDoctor.availability) {
        selectedDoctor.availability.forEach(time => {
            const slot = document.createElement('div');
            slot.className = 'time-slot';
            slot.textContent = time;
            slot.addEventListener('click', () => selectTimeSlot(slot, time));
            timeSlotsContainer.appendChild(slot);
        });
    }
}

function selectTimeSlot(element, time) {
    document.querySelectorAll('.time-slot').forEach(slot => {
        slot.classList.remove('selected');
    });
    element.classList.add('selected');
    selectedTimeSlot = time;
}

function validateConsultationForm() {
    const name = document.getElementById('patientName').value;
    const doctor = document.getElementById('consultationDoctor').value;
    const date = document.getElementById('consultationDate').value;
    
    if (!name || !doctor || !date || !selectedTimeSlot) {
        alert('Please fill in all required fields and select a time slot.');
        return false;
    }
    return true;
}

function bookConsultation() {
    const formData = {
        name: document.getElementById('patientName').value,
        doctor: selectedDoctor.name,
        date: document.getElementById('consultationDate').value,
        time: selectedTimeSlot,
        reason: document.getElementById('visitReason').value
    };
    
    showSuccessModal(`Consultation booked successfully! 
        Doctor: ${formData.doctor}
        Date: ${formData.date}
        Time: ${formData.time}`);
    
    // Reset form
    document.getElementById('consultationForm').reset();
    selectedTimeSlot = null;
    selectedDoctor = null;
    document.getElementById('timeSlots').innerHTML = '';
}

// Doctors Section
function setupDoctorsSection() {
    renderDoctors();
    setupDoctorFilters();
}

function renderDoctors(doctors = appData.doctors) {
    const grid = document.getElementById('doctorsGrid');
    grid.innerHTML = '';
    
    doctors.forEach(doctor => {
        const doctorCard = createDoctorCard(doctor);
        grid.appendChild(doctorCard);
    });
}

function createDoctorCard(doctor) {
    const card = document.createElement('div');
    card.className = 'doctor-card';
    
    const statusClass = doctor.status === 'available' ? 'available' : 'unavailable';
    const statusText = doctor.status === 'available' ? 'Available' : 'Unavailable';
    
    card.innerHTML = `
        <div class="availability-status ${statusClass}">
            <div class="availability-dot"></div>
            ${statusText}
        </div>
        <div class="doctor-header">
            <img src="${doctor.photo}" alt="${doctor.name}" class="doctor-photo" loading="lazy">
            <div class="doctor-info">
                <h4>${doctor.name}</h4>
                <div class="doctor-specialty">${doctor.specialty}</div>
                <div class="doctor-rating">
                    <span>⭐ ${doctor.rating}</span>
                    <span>• ${doctor.experience}</span>
                </div>
            </div>
        </div>
        <div class="time-slots-list">
            ${doctor.availability.map(time => `<span class="time-slot-mini">${time}</span>`).join('')}
        </div>
        <button class="btn ${doctor.status === 'available' ? 'btn--primary' : 'btn--outline'} btn--full-width" 
                ${doctor.status === 'unavailable' ? 'disabled' : ''}>
            ${doctor.status === 'available' ? 'Book Appointment' : 'Currently Unavailable'}
        </button>
    `;
    
    const bookBtn = card.querySelector('.btn');
    if (doctor.status === 'available') {
        bookBtn.addEventListener('click', () => {
            navigateToSection('consultation');
            setTimeout(() => {
                document.getElementById('consultationDoctor').value = doctor.id;
                selectedDoctor = doctor;
                updateTimeSlots();
            }, 100);
        });
    }
    
    return card;
}

function setupDoctorFilters() {
    const searchInput = document.getElementById('doctorSearch');
    const specialtyFilter = document.getElementById('specialtyFilter');
    const availabilityFilter = document.getElementById('availabilityFilter');
    
    [searchInput, specialtyFilter, availabilityFilter].forEach(element => {
        element.addEventListener('input', filterDoctors);
    });
}

function filterDoctors() {
    const searchTerm = document.getElementById('doctorSearch').value.toLowerCase();
    const specialtyFilter = document.getElementById('specialtyFilter').value;
    const availabilityFilter = document.getElementById('availabilityFilter').value;
    
    let filtered = appData.doctors.filter(doctor => {
        const matchesSearch = doctor.name.toLowerCase().includes(searchTerm) || 
                             doctor.specialty.toLowerCase().includes(searchTerm);
        const matchesSpecialty = !specialtyFilter || doctor.specialty === specialtyFilter;
        const matchesAvailability = !availabilityFilter || doctor.status === availabilityFilter;
        
        return matchesSearch && matchesSpecialty && matchesAvailability;
    });
    
    renderDoctors(filtered);
}

// Feedback Section
function setupFeedbackSection() {
    setupStarRatings();
    setupFeedbackForm();
    renderFeedbackList();
}

function setupStarRatings() {
    document.querySelectorAll('.star-rating').forEach(rating => {
        const stars = rating.querySelectorAll('.star');
        stars.forEach((star, index) => {
            star.addEventListener('click', () => {
                setStarRating(rating, index + 1);
            });
            star.addEventListener('mouseover', () => {
                highlightStars(rating, index + 1);
            });
        });
        
        rating.addEventListener('mouseleave', () => {
            const currentRating = rating.dataset.currentRating || 0;
            highlightStars(rating, currentRating);
        });
    });
}

function setStarRating(container, rating) {
    container.dataset.currentRating = rating;
    highlightStars(container, rating);
}

function highlightStars(container, rating) {
    const stars = container.querySelectorAll('.star');
    stars.forEach((star, index) => {
        if (index < rating) {
            star.classList.add('active');
        } else {
            star.classList.remove('active');
        }
    });
}

function setupFeedbackForm() {
    const form = document.getElementById('feedbackForm');
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        submitFeedback();
    });
}

function submitFeedback() {
    const name = document.getElementById('feedbackName').value;
    const text = document.getElementById('feedbackText').value;
    
    const ratings = {};
    document.querySelectorAll('.star-rating').forEach(rating => {
        const category = rating.dataset.rating;
        const value = parseInt(rating.dataset.currentRating) || 0;
        ratings[category] = value;
    });
    
    const feedback = {
        id: Date.now(),
        name: name,
        text: text,
        ratings: ratings,
        date: new Date().toLocaleDateString()
    };
    
    feedbackData.unshift(feedback);
    renderFeedbackList();
    showSuccessModal('Thank you for your feedback!');
    
    // Reset form
    document.getElementById('feedbackForm').reset();
    document.querySelectorAll('.star-rating').forEach(rating => {
        rating.dataset.currentRating = 0;
        highlightStars(rating, 0);
    });
}

function renderFeedbackList() {
    const list = document.getElementById('feedbackList');
    list.innerHTML = '';
    
    if (feedbackData.length === 0) {
        list.innerHTML = '<p class="text-secondary">No feedback yet. Be the first to share your experience!</p>';
        return;
    }
    
    feedbackData.slice(0, 5).forEach(feedback => {
        const item = document.createElement('div');
        item.className = 'feedback-item';
        
        const ratingsHtml = Object.entries(feedback.ratings)
            .map(([category, rating]) => `
                <div class="feedback-rating">
                    <span>${category.charAt(0).toUpperCase() + category.slice(1)}:</span>
                    <span>${'⭐'.repeat(rating)}</span>
                </div>
            `).join('');
        
        item.innerHTML = `
            <div class="feedback-header">
                <span class="feedback-author">${feedback.name}</span>
                <span class="feedback-date">${feedback.date}</span>
            </div>
            <div class="feedback-ratings">${ratingsHtml}</div>
            <div class="feedback-text">${feedback.text}</div>
        `;
        
        list.appendChild(item);
    });
}

// Staff Review Section
function setupStaffReviewSection() {
    const staffSelect = document.getElementById('staffMember');
    
    // Populate staff dropdown
    appData.staff.forEach(staff => {
        const option = document.createElement('option');
        option.value = staff.id;
        option.textContent = `${staff.name} - ${staff.department}`;
        staffSelect.appendChild(option);
    });
    
    const form = document.getElementById('staffReviewForm');
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        submitStaffReview();
    });
}

function submitStaffReview() {
    const staffId = document.getElementById('staffMember').value;
    const comments = document.getElementById('staffComments').value;
    const anonymous = document.getElementById('anonymous').checked;
    
    if (!staffId) {
        alert('Please select a staff member.');
        return;
    }
    
    const ratings = {};
    ['punctuality', 'politeness', 'bedside', 'communication'].forEach(category => {
        const checkedInput = document.querySelector(`input[name="${category}"]:checked`);
        if (checkedInput) {
            ratings[category] = parseInt(checkedInput.value);
        }
    });
    
    if (Object.keys(ratings).length === 0) {
        alert('Please provide at least one rating.');
        return;
    }
    
    const staff = appData.staff.find(s => s.id == staffId);
    const review = {
        id: Date.now(),
        staffId: staffId,
        staffName: staff.name,
        ratings: ratings,
        comments: comments,
        anonymous: anonymous,
        date: new Date().toLocaleDateString()
    };
    
    staffReviews.push(review);
    showSuccessModal('Staff review submitted successfully!');
    
    // Reset form
    document.getElementById('staffReviewForm').reset();
}

// Patient Dashboard
function setupDashboard() {
    displayPatientInfo();
    displayMedications();
    displayTreatmentProgress();
    displayAppointments();
}

function displayPatientInfo() {
    const patient = appData.patientData;
    document.getElementById('patientInfoName').textContent = patient.name;
    document.getElementById('patientInfoId').textContent = patient.id;
    document.getElementById('patientInfoAge').textContent = patient.age;
}

function displayMedications() {
    const list = document.getElementById('medicationList');
    list.innerHTML = '';
    
    appData.patientData.medications.forEach(med => {
        const item = document.createElement('div');
        item.className = 'medication-item';
        item.innerHTML = `
            <div class="medication-info">
                <h5>${med.name}</h5>
                <div class="medication-details">${med.dosage} - ${med.frequency}</div>
            </div>
            <div class="medication-time">${med.time}</div>
        `;
        list.appendChild(item);
    });
}

function displayTreatmentProgress() {
    const container = document.getElementById('treatmentProgress');
    container.innerHTML = '';
    
    appData.patientData.treatments.forEach(treatment => {
        const item = document.createElement('div');
        item.className = 'treatment-item';
        item.innerHTML = `
            <div class="treatment-header">
                <span class="treatment-name">${treatment.name}</span>
                <span class="progress-percentage">${treatment.progress}%</span>
            </div>
            <div class="progress-bar">
                <div class="progress-fill" style="width: ${treatment.progress}%"></div>
            </div>
            <div class="next-session">Next session: ${treatment.nextSession}</div>
        `;
        container.appendChild(item);
    });
}

function displayAppointments() {
    const list = document.getElementById('upcomingAppointments');
    list.innerHTML = '';
    
    appData.patientData.appointments.forEach(appointment => {
        const item = document.createElement('div');
        item.className = 'appointment-item';
        item.innerHTML = `
            <div class="appointment-date">${appointment.date}</div>
            <div class="appointment-details">
                <div class="appointment-doctor">${appointment.doctor}</div>
                <div class="appointment-type">${appointment.type}</div>
            </div>
        `;
        list.appendChild(item);
    });
}

function initializeCharts() {
    const ctx = document.getElementById('vitalsChart');
    if (!ctx) return;
    
    const vitals = appData.patientData.vitalSigns;
    
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5'],
            datasets: [{
                label: 'Heart Rate (bpm)',
                data: vitals.heartRate,
                borderColor: '#1FB8CD',
                backgroundColor: 'rgba(31, 184, 205, 0.1)',
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: false,
                    min: 60,
                    max: 80
                }
            },
            plugins: {
                legend: {
                    display: true,
                    position: 'top'
                }
            }
        }
    });
}

// Backup Doctors
function setupBackupDoctors() {
    renderBackupDoctors();
    setupEmergencyBooking();
}

function renderBackupDoctors() {
    const grid = document.getElementById('backupDoctorsGrid');
    grid.innerHTML = '';
    
    appData.backupDoctors.forEach(doctor => {
        const card = document.createElement('div');
        card.className = 'backup-doctor-card';
        card.innerHTML = `
            <img src="${doctor.photo}" alt="${doctor.name}" class="doctor-photo" loading="lazy">
            <h4>${doctor.name}</h4>
            <div class="doctor-specialty">${doctor.specialty}</div>
            <div class="doctor-rating">⭐ ${doctor.rating} • ${doctor.experience}</div>
            <div class="availability-status available">
                <div class="availability-dot"></div>
                Available 24/7
            </div>
            <button class="btn btn--primary btn--full-width contact-btn" data-doctor-name="${doctor.name}">Contact Now</button>
        `;
        
        const contactBtn = card.querySelector('.contact-btn');
        contactBtn.addEventListener('click', (e) => {
            const doctorName = e.target.getAttribute('data-doctor-name');
            showSuccessModal(`Connecting you with ${doctorName}. Please wait...`);
        });
        
        grid.appendChild(card);
    });
}

function setupEmergencyBooking() {
    const btn = document.getElementById('emergencyBooking');
    btn.addEventListener('click', () => {
        document.getElementById('emergencyModal').classList.remove('hidden');
    });
    
    const form = document.getElementById('emergencyForm');
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        handleEmergencyBooking();
    });
}

function handleEmergencyBooking() {
    const name = document.getElementById('emergencyName').value;
    const type = document.getElementById('emergencyType').value;
    const description = document.getElementById('emergencyDescription').value;
    
    if (!name || !type || !description) {
        alert('Please fill in all fields.');
        return;
    }
    
    // Assign random backup doctor
    const assignedDoctor = appData.backupDoctors[Math.floor(Math.random() * appData.backupDoctors.length)];
    
    document.getElementById('emergencyModal').classList.add('hidden');
    showSuccessModal(`Emergency consultation booked! 
        You have been assigned to ${assignedDoctor.name}.
        Please wait for the video call connection.`);
    
    document.getElementById('emergencyForm').reset();
}

// Video Interface
function setupVideoInterface() {
    const videoToggle = document.getElementById('videoToggle');
    const audioToggle = document.getElementById('audioToggle');
    const endCall = document.getElementById('endCall');
    
    let videoOn = false;
    let audioOn = false;
    
    videoToggle.addEventListener('click', () => {
        videoOn = !videoOn;
        videoToggle.textContent = videoOn ? '📹' : '📷';
        videoToggle.style.background = videoOn ? 'var(--color-success)' : 'var(--color-secondary)';
    });
    
    audioToggle.addEventListener('click', () => {
        audioOn = !audioOn;
        audioToggle.textContent = audioOn ? '🎤' : '🔇';
        audioToggle.style.background = audioOn ? 'var(--color-success)' : 'var(--color-secondary)';
    });
    
    endCall.addEventListener('click', () => {
        showSuccessModal('Call ended. Thank you for using our video consultation service!');
        videoToggle.textContent = '📷';
        audioToggle.textContent = '🔇';
        videoToggle.style.background = 'var(--color-secondary)';
        audioToggle.style.background = 'var(--color-secondary)';
        videoOn = false;
        audioOn = false;
    });
}

// Modal Functions
function setupModals() {
    const modals = document.querySelectorAll('.modal');
    
    modals.forEach(modal => {
        const closeBtn = modal.querySelector('.modal-close');
        if (closeBtn) {
            closeBtn.addEventListener('click', () => {
                modal.classList.add('hidden');
            });
        }
        
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                modal.classList.add('hidden');
            }
        });
    });
    
    const closeSuccessBtn = document.getElementById('closeSuccessModal');
    if (closeSuccessBtn) {
        closeSuccessBtn.addEventListener('click', () => {
            document.getElementById('successModal').classList.add('hidden');
        });
    }
}

function showSuccessModal(message) {
    const modal = document.getElementById('successModal');
    const messageElement = document.getElementById('successMessage');
    messageElement.textContent = message;
    modal.classList.remove('hidden');
    
    // Auto-hide after 5 seconds
    setTimeout(() => {
        modal.classList.add('hidden');
    }, 5000);
}

// Utility Functions
function formatDate(dateString) {
    const options = { year: 'numeric', month: 'long', day: 'numeric' };
    return new Date(dateString).toLocaleDateString(undefined, options);
}

function generateStars(rating) {
    return '⭐'.repeat(Math.floor(rating)) + '☆'.repeat(5 - Math.floor(rating));
}

// Add some sample feedback data for demonstration
feedbackData = [
    {
        id: 1,
        name: "Alice Johnson",
        text: "Excellent service! The staff was very professional and the facilities were clean.",
        ratings: { overall: 5, service: 5, cleanliness: 4 },
        date: "2025-01-05"
    },
    {
        id: 2,
        name: "Bob Smith",
        text: "Good experience overall. The wait time was a bit long but the care was great.",
        ratings: { overall: 4, service: 4, cleanliness: 5 },
        date: "2025-01-03"
    }
];

// Animation helpers
function addLoadingAnimation(element) {
    element.innerHTML = '<div class="loading"></div>';
}

function removeLoadingAnimation(element, content) {
    element.innerHTML = content;
}

// Initialize feedback display
setTimeout(() => {
    if (feedbackData.length > 0) {
        renderFeedbackList();
    }
}, 500);