script.js

document.addEventListener('DOMContentLoaded', () => {
    // ---- Global State / Helpers ----
    const STORAGE_KEY = 'mogadishu_fitness_bookings';

    function getBookings() {
        const stored = localStorage.getItem(STORAGE_KEY);
        return stored ? JSON.parse(stored) : [];
    }

    function saveBooking(booking) {
        const bookings = getBookings();
        bookings.push(booking);
        localStorage.setItem(STORAGE_KEY, JSON.stringify(bookings));
    }

    // ---- Mobile Menu Toggle ----
    const menuToggle = document.querySelector('.menu-toggle');
    const navLinks = document.querySelector('.nav-links');

    if (menuToggle && navLinks) {
        menuToggle.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            const icon = menuToggle.querySelector('i');
            if (icon) {
                if (navLinks.classList.contains('active')) {
                    icon.classList.remove('fa-bars');
                    icon.classList.add('fa-times');
                } else {
                    icon.classList.remove('fa-times');
                    icon.classList.add('fa-bars');
                }
            }
        });
    }

    // ---- Header Scroll Effect ----
    const header = document.querySelector('.header');
    if (header) {
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                header.style.backgroundColor = 'rgba(17, 17, 17, 0.98)';
                header.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
            } else {
                header.style.backgroundColor = 'rgba(17, 17, 17, 0.95)';
                header.style.boxShadow = 'none';
            }
        });
    }

    // ==========================================
    // PAGE: BOOKING.HTML
    // ==========================================
    if (window.location.pathname.includes('booking.html')) {
        // --- State ---
        let selectedDate = '12'; // default from HTML
        let selectedMonth = 'Oct';
        let selectedTime = '01:00 PM'; // default

        // --- Elements ---
        const serviceCards = document.querySelectorAll('.service-card');
        const calendarGrid = document.getElementById('calendar-days');
        const timeSlotsContainer = document.getElementById('time-slots');

        const summaryCoach = document.getElementById('summary-coach');
        const summaryType = document.getElementById('summary-type');
        const summaryService = document.getElementById('summary-service-name');
        const summarySubtotal = document.getElementById('summary-subtotal');
        const summaryTotal = document.getElementById('summary-total');
        const summaryImg = document.getElementById('summary-img');
        const summaryDateTime = document.querySelector('.border-bottom .text-primary'); // The Date & Time text in summary

        const adminFee = 2.50;

        // --- 1. Service Selection ---
        if (serviceCards.length > 0) {
            serviceCards.forEach(card => {
                card.addEventListener('click', () => {
                    // Update UI: Active State
                    serviceCards.forEach(c => {
                        c.classList.remove('active');
                        c.style.border = '2px solid transparent';
                        const icon = c.querySelector('.check-icon');
                        if (icon) icon.remove();
                    });

                    card.classList.add('active');
                    card.style.border = '2px solid var(--primary)';

                    // Add check icon
                    const checkIcon = document.createElement('div');
                    checkIcon.className = 'check-icon';
                    checkIcon.innerHTML = '<i class="fas fa-check text-xs"></i>';
                    checkIcon.style.cssText = 'position: absolute; top: 10px; right: 10px; background: var(--primary); color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;';
                    card.appendChild(checkIcon);

                    // Update Summary Data
                    const serviceName = card.dataset.service;
                    const price = parseFloat(card.dataset.price);
                    const coachName = card.dataset.coach;
                    const coachImg = card.dataset.img;

                    if (summaryCoach) summaryCoach.textContent = coachName;
                    if (summaryService) summaryService.textContent = serviceName;
                    if (summarySubtotal) summarySubtotal.textContent = '$' + price.toFixed(2);
                    if (summaryTotal) summaryTotal.textContent = '$' + (price + adminFee).toFixed(2);
                    if (summaryImg) summaryImg.src = coachImg;

                    if (summaryType) {
                        if (serviceName.includes('Boxing')) summaryType.textContent = 'Boxing Specialist';
                        else if (serviceName.includes('Yoga')) summaryType.textContent = 'Yoga Master';
                        else summaryType.textContent = 'Fitness Trainer';
                    }
                });
            });
        }

        // --- 2. Calendar Selection ---
        if (calendarGrid) {
            const days = calendarGrid.querySelectorAll('span');
            days.forEach(day => {
                // If it's a number (not empty or header char like S, M, T...)
                if (!isNaN(day.textContent) && day.textContent.trim() !== '') {
                    day.style.cursor = 'pointer';
                    day.addEventListener('click', () => {
                        // Reset all styles
                        days.forEach(d => {
                            d.style.background = 'transparent';
                            d.style.color = '#888'; // muted default
                            if (!isNaN(d.textContent)) d.style.color = 'var(--text-color)';
                        });

                        // Set Active
                        day.style.background = 'var(--primary)';
                        day.style.color = 'white';
                        day.style.borderRadius = '4px';

                        selectedDate = day.textContent.trim();
                        updateSummaryDateTime();
                    });
                }
            });
        }

        // --- 3. Time Selection ---
        if (timeSlotsContainer) {
            const slots = timeSlotsContainer.querySelectorAll('button');
            slots.forEach(slot => {
                slot.addEventListener('click', () => {
                    // Reset UI
                    slots.forEach(s => {
                        s.classList.remove('btn-primary');
                        s.classList.add('btn-outline');
                    });

                    // Set Active
                    slot.classList.remove('btn-outline');
                    slot.classList.add('btn-primary');

                    selectedTime = slot.textContent.trim();
                    updateSummaryDateTime();
                });
            });
        }

        function updateSummaryDateTime() {
            if (summaryDateTime) {
                // Formatting: Oct 12, 01:00 PM
                summaryDateTime.textContent = `${selectedMonth} ${selectedDate}, ${selectedTime}`;
            }
        }

        // --- 4. Confirm Booking ---
        const confirmBtn = document.getElementById('confirm-booking-btn');
        if (confirmBtn) {
            confirmBtn.addEventListener('click', () => {
                const selectedServiceCard = document.querySelector('.service-card.active');
                if (!selectedServiceCard) return;

                const bookingData = {
                    id: Date.now().toString(), // simple unique id
                    service: selectedServiceCard.dataset.service,
                    coach: selectedServiceCard.dataset.coach,
                    coachImg: selectedServiceCard.dataset.img,
                    date: `${selectedMonth} ${selectedDate}`,
                    time: selectedTime,
                    fullDate: `${selectedMonth} ${selectedDate}, ${selectedTime}`,
                    price: selectedServiceCard.dataset.price, // storing basic price
                    timestamp: new Date().toISOString(),
                    status: 'Scheduled'
                };

                // Animate button
                confirmBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';

                setTimeout(() => {
                    saveBooking(bookingData);
                    alert('Booking Confirmed! Your session has been scheduled.');
                    window.location.href = 'dashboard.html';
                }, 1000);
            });
        }
    }


    // ==========================================
    // PAGE: DASHBOARD.HTML
    // ==========================================
    if (window.location.pathname.includes('dashboard.html')) {
        const upcomingContainer = document.getElementById('upcoming-container');
        const bookings = getBookings();

        // Update Stats
        const totalSessionsEl = document.querySelector('.stat-card:nth-child(1) h2');
        const upcomingCountEl = document.querySelector('.stat-card:nth-child(2) h2');

        // Base numbers + current bookings length
        if (totalSessionsEl) totalSessionsEl.textContent = 24 + bookings.length;
        if (upcomingCountEl) upcomingCountEl.textContent = bookings.length;

        // Render Bookings
        if (upcomingContainer) {
            if (bookings.length === 0) {
                upcomingContainer.innerHTML = `
                    <div class="card text-center p-lg">
                        <div style="font-size: 3rem; color: #333; margin-bottom: 20px;"><i class="fas fa-calendar-times"></i></div>
                        <h3 class="text-xl">No Appointments</h3>
                        <p class="text-muted mt-sm mb-md">You haven't booked any sessions yet.</p>
                        <a href="booking.html" class="btn btn-primary">Book Now</a>
                    </div>
                `;
            } else {
                upcomingContainer.innerHTML = ''; // Start clean

                // Sort by timestamp (newest last) or reverse to show newest first?
                // Usually upcoming is sorted by date closest to now. 
                // Since we don't have real dates, lets just show in order reverse (newest booked at top)
                bookings.reverse().forEach(booking => {
                    const card = document.createElement('div');
                    card.className = 'card mb-sm flex justify-between align-center';
                    card.style.borderLeft = '4px solid var(--primary)';

                    card.innerHTML = `
                        <div class="flex gap-md align-center">
                            <img src="${booking.coachImg}" style="width: 50px; height: 50px; border-radius: 8px; object-fit: cover;">
                            <div>
                                <h3 class="text-lg">${booking.service}</h3>
                                <p class="text-muted text-sm">with ${booking.coach}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="font-bold">${booking.fullDate}</p>
                            <p class="text-muted text-xs">Mogadishu Fitness Center</p>
                        </div>
                    `;
                    upcomingContainer.appendChild(card);
                });
            }
        }
    }

    // ==========================================
    // PAGE: EXPLORE/OTHER
    // ==========================================
    // Filter & Search Logic
    const filterBtns = document.querySelectorAll('.filter-btn');
    const exploreItems = document.querySelectorAll('.explore-item');
    const searchInput = document.getElementById('explore-search');

    if (filterBtns.length > 0 && exploreItems.length > 0) {
        filterBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                filterBtns.forEach(b => {
                    b.classList.remove('btn-primary');
                    b.classList.add('btn-outline');
                    b.style.border = '2px solid transparent';
                });
                btn.classList.remove('btn-outline');
                btn.classList.add('btn-primary');

                const filterValue = btn.getAttribute('data-filter');
                filterItems(filterValue, searchInput ? searchInput.value : '');
            });
        });

        if (searchInput) {
            searchInput.addEventListener('input', (e) => {
                const activeFilter = document.querySelector('.filter-btn.btn-primary').getAttribute('data-filter');
                filterItems(activeFilter, e.target.value);
            });
        }

        function filterItems(category, searchText) {
            const lowerSearch = searchText.toLowerCase();
            exploreItems.forEach(item => {
                const itemType = item.getAttribute('data-type');
                const itemTitle = item.getAttribute('data-title').toLowerCase();

                const matchesCategory = (category === 'all' || itemType === category);
                const matchesSearch = itemTitle.includes(lowerSearch);

                item.style.display = (matchesCategory && matchesSearch) ? 'block' : 'none';
            });
        }
    }

    // ==========================================
    // PAGE: CONTACT.HTML
    // ==========================================
    const contactForm = document.querySelector('form');
    // We check existence because on other pages querySelector('form') might be null or different form
    if (contactForm && window.location.pathname.includes('contact.html')) {
        contactForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const btn = contactForm.querySelector('button');
            const originalText = btn.innerHTML; // Use innerHTML to preserve potential icons if any

            btn.textContent = 'Sending...';
            btn.style.opacity = '0.7';
            btn.disabled = true;

            setTimeout(() => {
                alert('Message Sent Successfully! We will get back to you shortly.');
                contactForm.reset();
                btn.innerHTML = originalText;
                btn.style.opacity = '1';
                btn.disabled = false;
            }, 1000);
        });
    }
});