 <!-- Debug: Current timezone: Europe/Helsinki -->
<!-- Debug: Server time: 2025-06-21 12:20:53 -->
<!-- Debug: Today&#039;s date for query: 2025-06-21 -->
<!-- Debug: Database connected: 127.0.0.1:3306 via TCP/IP -->
<!-- Debug: Available tables: -->
<!-- Debug: - admin_users -->
<!-- Debug: - blog_posts -->
<!-- Debug: - calendar_events -->
<!-- Debug: - class_bookings -->
<!-- Debug: - class_schedule -->
<!-- Debug: - courses -->
<!-- Debug: - customers -->
<!-- Debug: - daily_schedule -->
<!-- Debug: - important_info -->
<!-- Debug: - private_session_features -->
<!-- Debug: - private_sessions -->
<!-- Debug: - schedule -->
<!-- Debug: - schedules -->
<!-- Debug: - team_members -->
<!-- Debug: calendar_events table structure: -->
<!-- Debug: - id (int(11)) -->
<!-- Debug: - title (varchar(255)) -->
<!-- Debug: - description (text) -->
<!-- Debug: - start_time (time) -->
<!-- Debug: - end_time (time) -->
<!-- Debug: - duration (int(11)) -->
<!-- Debug: - instructor (varchar(255)) -->
<!-- Debug: - class_type (varchar(100)) -->
<!-- Debug: - level (varchar(50)) -->
<!-- Debug: - date (date) -->
<!-- Debug: - recurring (tinyint(1)) -->
<!-- Debug: - recurring_pattern (varchar(50)) -->
<!-- Debug: - created_at (timestamp) -->
<!-- Debug: - visibility (varchar(20)) -->
<!-- Debug: All events in calendar_events: -->
<!-- Debug: Array
(
    [id] =&gt; 3
    [title] =&gt; Evening Flow
    [description] =&gt; Gentle flow to unwind after a long day.
    [start_time] =&gt; 18:00:00
    [end_time] =&gt; 19:00:00
    [duration] =&gt; 60
    [instructor] =&gt; Annica Hill
    [class_type] =&gt; Vinyasa Flow
    [level] =&gt; All Levels
    [date] =&gt; 2025-04-22
    [recurring] =&gt; 0
    [recurring_pattern] =&gt; 
    [created_at] =&gt; 2025-04-22 17:34:32
    [visibility] =&gt; 
)
 -->
<!-- Debug: Array
(
    [id] =&gt; 6
    [title] =&gt; Candlelight Meditation
    [description] =&gt; Relaxing meditation by candlelight to end your day.
    [start_time] =&gt; 20:00:00
    [end_time] =&gt; 21:00:00
    [duration] =&gt; 60
    [instructor] =&gt; Guru Yogi Prakash
    [class_type] =&gt; Meditation
    [level] =&gt; All Levels
    [date] =&gt; 2025-04-23
    [recurring] =&gt; 0
    [recurring_pattern] =&gt; 
    [created_at] =&gt; 2025-04-22 17:34:32
    [visibility] =&gt; 
)
 -->
<!-- Debug: Array
(
    [id] =&gt; 7
    [title] =&gt; Sunrise Yoga
    [description] =&gt; Energizing morning practice to awaken your body and mind.
    [start_time] =&gt; 06:30:00
    [end_time] =&gt; 07:30:00
    [duration] =&gt; 60
    [instructor] =&gt; Dhanpati Pandey
    [class_type] =&gt; Vinyasa Flow
    [level] =&gt; Intermediate
    [date] =&gt; 2025-04-24
    [recurring] =&gt; 0
    [recurring_pattern] =&gt; 
    [created_at] =&gt; 2025-04-22 17:34:32
    [visibility] =&gt; 
)
 -->
<!-- Debug: Array
(
    [id] =&gt; 30
    [title] =&gt; Hatha Yoga
    [description] =&gt; 
    [start_time] =&gt; 10:00:00
    [end_time] =&gt; 11:00:00
    [duration] =&gt; 60
    [instructor] =&gt; Staff
    [class_type] =&gt; Hatha Yoga
    [level] =&gt; Beginner
    [date] =&gt; 2025-05-18
    [recurring] =&gt; 0
    [recurring_pattern] =&gt; 
    [created_at] =&gt; 2025-05-17 08:49:57
    [visibility] =&gt; 
)
 -->
<!-- Debug: class_schedule table exists -->
<!-- Debug: Table structure: -->
<!-- Debug: Field: id, Type: int(11) -->
<!-- Debug: Field: day, Type: varchar(20) -->
<!-- Debug: Field: time, Type: varchar(50) -->
<!-- Debug: Field: class_name, Type: varchar(100) -->
<!-- Debug: Field: trainer, Type: varchar(100) -->
<!-- Debug: Field: created_at, Type: timestamp -->
<!-- Debug: Sample data: -->
<!-- Debug: Database connected: 127.0.0.1:3306 via TCP/IP -->
<!-- Debug: Table columns: id, day, time, class_name, trainer, created_at -->
<!-- Debug: Found 0 classes for Monday -->
<!-- Debug: Found 0 classes for Tuesday -->
<!-- Debug: Found 0 classes for Wednesday -->
<!-- Debug: Found 0 classes for Thursday -->
<!-- Debug: Found 0 classes for Friday -->
<!-- Debug: Found 0 classes for Saturday -->
<!-- Debug: Found 0 classes for Sunday -->
<!-- Debug: Found 5 daily schedule items -->
<!-- Debug: Important info found: yes -->
<!-- Debug: Found 0 calendar events -->

<!-- Debug: Found 0 dates with classes -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shanti Yoga Center - Class Schedule</title>
    
    <!-- Favicon -->
    <link href="img/logo.png" rel="icon">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- CSS Libraries -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <link href="lib/animate/animate.min.css" rel="stylesheet">
    <link href="lib/flaticon/font/flaticon.css" rel="stylesheet"> 
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
    
    <!-- FullCalendar CSS -->
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css' rel='stylesheet' />
    
    <!-- Custom Stylesheets -->
    <link href="assets/css/modern-class-layout.css" rel="stylesheet">
    
    <!-- Template Stylesheet -->
    <link href="css/style.css" rel="stylesheet">

        <style>
            /* Calendar Redesign Styles */
            .calendar-booking-container {
                background: #fff;
                border-radius: 12px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
                overflow: hidden;
                margin-bottom: 30px;
                padding: 20px;
            }
            
            .calendar-wrapper {
                padding: 20px;
            }
            
            /* FullCalendar Customization */
            .fc-theme-standard .fc-scrollgrid {
                border: none;
            }
            
            .fc .fc-toolbar-title {
                font-family: 'Cormorant Garamond', serif;
                font-size: 1.8rem;
                color: #333;
                font-weight: 600;
            }
            
            .fc .fc-button-primary {
                background-color: #ed732f;
                border-color: #ed732f;
                box-shadow: none;
            }
            
            .fc .fc-button-primary:hover {
                background-color: #d86525;
                border-color: #d86525;
            }
            
            .fc .fc-button-primary:not(:disabled):active,
            .fc .fc-button-primary:not(:disabled).fc-button-active {
                background-color: #c55a1e;
                border-color: #c55a1e;
            }
            
            .fc-daygrid-day-number {
                font-family: 'Poppins', sans-serif;
                font-size: 16px;
                font-weight: 500;
                color: #333;
                padding: 8px;
            }
            
            .fc-daygrid-day.fc-day-today {
                background-color: rgba(237, 115, 47, 0.2);
            }
            
            /* Style for past days */
            .fc-day-past {
                background-color: #f9f9f9;
            }
            
            .fc-day-past .fc-daygrid-day-number {
                color: #888;
            }
            
            .fc-event {
                border-radius: 6px;
                padding: 5px 8px;
                font-size: 14px;
                font-weight: 600;
                border: none;
                cursor: pointer;
                transition: transform 0.2s ease;
            }
            
            .fc-event:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }
            
            .fc-h-event .fc-event-title {
                font-weight: 500;
            }
            
            .fc-day-other .fc-daygrid-day-top {
                opacity: 0.5;
            }
            
            .fc-col-header-cell {
                background-color: #f8f9fa;
                padding: 10px 0;
            }
            
            .fc-col-header-cell-cushion {
                font-family: 'Poppins', sans-serif;
                font-weight: 600;
                font-size: 16px;
                color: #333;
                text-decoration: none !important;
                padding: 12px 0;
            }
            
            /* Booking Modal Redesign */
            .modal-content {
                border: none;
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
            }
            
            .modal-header {
                background: linear-gradient(135deg, #ed732f, #e05e1d);
                color: white;
                border-bottom: none;
                padding: 20px 25px;
            }
            
            .modal-title {
                font-family: 'Cormorant Garamond', serif;
                font-weight: 600;
                font-size: 1.5rem;
            }
            
            .modal-body {
                padding: 25px;
            }
            
            #booking-class-details {
                background-color: #f8f9fa;
                padding: 15px;
                border-radius: 8px;
                margin-bottom: 20px;
            }
            
            #booking-class-title {
                font-size: 1.2rem;
                color: #333;
                margin-bottom: 10px;
            }
            
            .form-group label {
                font-weight: 500;
                color: #555;
                margin-bottom: 8px;
            }
            
            .form-control {
                border-radius: 6px;
                border: 1px solid #ddd;
                padding: 12px 15px;
                font-size: 14px;
                transition: all 0.3s ease;
            }
            
            .form-control:focus {
                border-color: #ed732f;
                box-shadow: 0 0 0 3px rgba(237, 115, 47, 0.1);
            }
            
            .modal-footer {
                border-top: none;
                padding: 15px 25px 25px;
            }
            
            .btn-primary {
                background-color: #ed732f;
                border-color: #ed732f;
                border-radius: 6px;
                padding: 10px 20px;
                font-weight: 500;
                transition: all 0.3s ease;
            }
            
            .btn-primary:hover {
                background-color: #d86525;
                border-color: #d86525;
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }
            
            .btn-secondary {
                background-color: #f8f9fa;
                border-color: #ddd;
                color: #555;
                border-radius: 6px;
                padding: 10px 20px;
                font-weight: 500;
                transition: all 0.3s ease;
            }
            
            .btn-secondary:hover {
                background-color: #e9ecef;
                border-color: #ccc;
            }
            
            /* Success Modal */
            #successModal .modal-header {
                background: linear-gradient(135deg, #4CAF50, #388E3C);
            }
            
            .schedule-hero {
                background: #ed732f;
                padding: 60px 0;
                text-align: center;
                color: #fff;
            }

            .schedule-hero h1 {
                font-family: 'Cormorant Garamond', serif;
                font-size: 3.5rem;
                margin-bottom: 20px;
                font-weight: 600;
                position: relative;
                padding-bottom: 15px;
            }

            .schedule-hero h1:after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 80px;
                height: 3px;
                background: #fff;
            }

            .schedule-section {
                padding: 80px 0;
                background: #fff;
            }

            .schedule-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 40px;
            }

            .schedule-header h2 {
                font-family: 'Cormorant Garamond', serif;
                font-size: 2.5rem;
                margin: 0;
            }

            .filter-dropdown {
                position: relative;
                display: inline-block;
                margin-left: 15px;
            }

            .filter-dropdown select {
                appearance: none;
                padding: 10px 40px 10px 20px;
                font-size: 1rem;
                border: 1px solid #ddd;
                border-radius: 25px;
                background: #fff;
                cursor: pointer;
                outline: none;
                min-width: 180px;
            }

            .filter-group {
                display: flex;
                gap: 15px;
            }

            .schedule-layout {
                display: grid;
                grid-template-columns: 2fr 1fr;
                gap: 30px;
                margin-bottom: 40px;
            }

            .calendar-section {
                background: #fff;
                border-radius: 24px 24px 0 0;
                box-shadow: 0 10px 30px rgba(0,0,0,0.05);
                overflow: hidden;
            }

            .calendar-nav {
                background: #ed732f;
                padding: 20px 25px;
                color: #fff;
                border-radius: 10px 10px 0 0;
            }
            
            .header-content {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            
            .schedule-title {
                display: flex;
                align-items: center;
                gap: 10px;
            }
            
            .icon-container {
                background-color: rgba(255, 255, 255, 0.2);
                width: 40px;
                height: 40px;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.2rem;
            }
            
            .schedule-title h3 {
                font-size: 1.8rem;
                margin: 0;
                font-weight: 500;
            }
            
            .date-display {
                font-size: 1.2rem;
                color: #fff;
                font-weight: 500;
            }

            .calendar-nav h3 {
                font-family: 'Cormorant Garamond', serif;
                font-size: 2rem;
                margin: 0;
                display: flex;
                align-items: center;
                gap: 15px;
                color: #fff;
            }

            .calendar-nav h3:before {
                content: '\f133';
                font-family: 'Font Awesome 5 Free';
                font-weight: 400;
                font-size: 1.8rem;
                background: rgba(255, 255, 255, 0.2);
                width: 45px;
                height: 45px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 12px;
                backdrop-filter: blur(5px);
            }

            .hourly-schedule {
                padding: 0;
                background: #fff;
            }

            .time-slots {
                display: flex;
                flex-direction: column;
            }

            .time-slot {
                display: flex;
                margin-bottom: 15px;
                position: relative;
                perspective: 1000px;
            }

            .time-label {
                width: 100px;
                font-weight: 600;
                color: #333;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding-right: 15px;
                position: relative;
                font-size: 1.1rem;
                border-right: 2px dashed #ed732f;
                margin-right: 20px;
            }

            .time-classes {
                flex: 1;
                display: flex;
                padding: 0;
                position: relative;
            }

            .class-card {
                background: white;
                border-radius: 0;
                padding: 20px;
                min-width: 220px;
                flex: 1;
                transition: all 0.3s ease;
                position: relative;
                overflow: hidden;
                border-top: 3px solid #ed732f;
                box-shadow: 0 3px 10px rgba(0,0,0,0.1);
                transform-style: preserve-3d;
                transform: rotateX(0deg);
            }

            .class-card::after {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0 20px 20px 0;
                border-color: transparent #ed732f transparent transparent;
            }

            .class-card:hover {
                transform: rotateX(5deg);
                box-shadow: 0 15px 20px rgba(0,0,0,0.1);
            }

            .class-time {
                font-size: 0.8rem;
                color: #fff;
                margin-bottom: 12px;
                background: #ed732f;
                display: inline-block;
                padding: 3px 8px;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                position: relative;
            }

            .class-name {
                font-weight: 700;
                font-size: 1.2rem;
                margin-bottom: 10px;
                color: #333;
                border-bottom: 1px solid #eee;
                padding-bottom: 10px;
            }

            .class-instructor {
                font-size: 0.9rem;
                color: #666;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                font-style: italic;
            }

            .no-class {
                color: #999;
                font-style: italic;
                width: 100%;
                text-align: center;
                padding: 20px;
                background: #f9f9f9;
                border: 1px dashed #ddd;
            }

            .day-name {
                font-size: 0.85rem;
                color: #666;
                margin-bottom: 5px;
                font-weight: 500;
                transition: color 0.3s ease;
            }

            .day-number {
                font-size: 1.2rem;
                color: #333;
                font-weight: 600;
                transition: color 0.3s ease;
            }

            .calendar-days {
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                gap: 15px;
                padding: 25px;
            }

            .full-calendar-link {
                color: #fff;
                text-decoration: none;
                padding: 10px 20px;
                border-radius: 12px;
                background: rgba(255, 255, 255, 0.2);
                backdrop-filter: blur(5px);
                transition: all 0.3s ease;
            }

            .full-calendar-link:hover {
                background: rgba(255, 255, 255, 0.3);
                transform: translateY(-2px);
            }

            .daily-schedule {
                background: #fff;
                border-radius: 24px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.05);
                overflow: hidden;
            }

            .daily-schedule-header {
                background: linear-gradient(135deg, #ed732f 0%, #f5a76c 100%);
                padding: 25px;
                color: #fff;
            }

            .daily-schedule-header h3 {
                font-family: 'Cormorant Garamond', serif;
                font-size: 1.6rem;
                margin: 0;
                color: #fff;
            }

            .schedule-content {
                padding: 25px;
            }

            .schedule-item {
                display: flex;
                align-items: flex-start;
                gap: 15px;
                padding: 12px;
                border-radius: 12px;
                transition: all 0.3s ease;
                cursor: pointer;
                border: 1px solid transparent;
            }

            .schedule-item:hover {
                background: rgba(243, 100, 56, 0.05);
                border-color: rgba(243, 100, 56, 0.1);
                transform: translateX(5px);
            }

            .schedule-time {
                min-width: 90px;
                padding: 8px;
                background: #f8f9fa;
                border-radius: 8px;
                text-align: center;
                font-size: 0.85rem;
                font-weight: 600;
                color: #ed732f;
            }

            .schedule-activity {
                font-size: 0.9rem;
                color: #333;
                padding-top: 8px;
            }

            .schedule-note {
                margin-top: 20px;
                padding: 20px;
                background: rgba(243, 100, 56, 0.05);
                border-radius: 12px;
                border: 1px dashed rgba(243, 100, 56, 0.2);
            }

            .schedule-note h4 {
                color: #ed732f;
                font-size: 1rem;
                margin-bottom: 12px;
                font-weight: 600;
            }

            .schedule-note p {
                font-size: 0.85rem;
                color: #666;
                margin-bottom: 8px;
                line-height: 1.6;
            }

            .contact-info {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-top: 12px;
                color: #ed732f;
                font-size: 0.85rem;
            }

            .class-list {
                margin-top: 0;
                background: #fff;
                border-radius: 0 0 24px 24px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.05);
                padding: 25px;
                border-top: 1px solid rgba(243, 100, 56, 0.1);
            }

            .class-list h4 {
                margin-bottom: 20px;
                font-size: 1.8rem;
                font-family: 'Cormorant Garamond', serif;
                color: #333;
                padding-bottom: 15px;
                border-bottom: 2px solid rgba(243, 100, 56, 0.1);
                position: relative;
            }

            .class-list h4:after {
                content: '';
                position: absolute;
                bottom: -2px;
                left: 0;
                width: 60px;
                height: 2px;
                background: #ed732f;
            }

            .class-item {
                display: flex;
                align-items: center;
                padding: 20px;
                border-radius: 12px;
                margin-bottom: 15px;
                transition: all 0.3s ease;
                background: #f8f9fa;
                border: 1px solid transparent;
            }

            .class-item:hover {
                background: rgba(243, 100, 56, 0.05);
                border-color: rgba(243, 100, 56, 0.1);
                transform: translateX(5px);
            }

            .class-time {
                min-width: 100px;
                text-align: center;
            }

            .class-time .time {
                font-size: 1.1rem;
                font-weight: 600;
                color: #ed732f;
                margin-bottom: 5px;
            }

            .class-time .duration {
                font-size: 0.85rem;
                color: #888;
            }

            .instructor-avatar {
                width: 50px;
                height: 50px;
                border-radius: 12px;
                margin: 0 20px;
                object-fit: cover;
                border: 2px solid rgba(243, 100, 56, 0.2);
            }

            .class-info {
                flex-grow: 1;
            }

            .class-title {
                font-size: 1.1rem;
                margin-bottom: 5px;
                color: #333;
            }

            .instructor-name {
                color: #666;
                font-size: 0.9rem;
                margin-bottom: 5px;
            }

            .class-location {
                color: #888;
                font-size: 0.85rem;
            }

            .details-btn {
                background: #fff;
                color: #ed732f;
                padding: 12px 25px;
                border-radius: 12px;
                text-decoration: none;
                transition: all 0.3s ease;
                border: 1px solid rgba(243, 100, 56, 0.2);
                font-weight: 500;
                white-space: nowrap;
                display: flex;
                align-items: center;
                gap: 8px;
                cursor: pointer;
            }

            .details-btn i {
                font-size: 1.1rem;
            }

            .details-btn:hover {
                background: rgba(243, 100, 56, 0.05);
                border-color: rgba(243, 100, 56, 0.3);
                transform: translateX(5px);
            }

            @media (max-width: 576px) {
                .details-btn {
                    width: 100%;
                    justify-content: center;
                }
            }

            @media (max-width: 768px) {
                .schedule-header {
                    flex-direction: column;
                    align-items: stretch;
                }

                .filter-group {
                    flex-direction: column;
                    width: 100%;
                }

                .filter-dropdown {
                    width: 100%;
                    margin-left: 0;
                }

                .filter-dropdown select {
                    width: 100%;
                }

                .calendar-days {
                    grid-template-columns: repeat(4, 1fr);
                    padding: 20px;
                    gap: 10px;
                }

                .calendar-nav {
                    padding: 20px;
                    flex-direction: column;
                    gap: 15px;
                    text-align: center;
                }

                .calendar-nav h3 {
                    justify-content: center;
                }

                .day-circle.today:before {
                    top: -20px;
                    font-size: 0.65rem;
                    padding: 3px 10px;
                }

                .full-calendar-link {
                    width: 100%;
                    justify-content: center;
                }

                .class-item {
                    flex-wrap: wrap;
                    gap: 15px;
                    padding: 15px;
                }

                .class-time {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding-bottom: 10px;
                    border-bottom: 1px solid rgba(243, 100, 56, 0.1);
                }

                .instructor-avatar {
                    margin: 10px auto;
                }

                .class-info {
                    width: 100%;
                    text-align: center;
                }
            }

            @media (max-width: 480px) {
                .schedule-hero h1 {
                    font-size: 2.5rem;
                }

                .schedule-header h2 {
                    font-size: 2rem;
                }

                .calendar-nav h3 {
                    font-size: 1.6rem;
                }

                .day-circle {
                    padding: 8px 5px;
                }

                .day-number {
                    width: 35px;
                    height: 35px;
                    line-height: 35px;
                    font-size: 1rem;
                }

                .day-name {
                    font-size: 0.75rem;
                }
            }

            .schedule-section .container {
                max-width: 1300px;
            }

            @media (max-width: 992px) {
                .schedule-layout {
                    grid-template-columns: 1fr;
                    gap: 20px;
                }

                .calendar-days {
                    gap: 10px;
                }

                .day-circle {
                    padding: 8px 5px;
                }

                .schedule-content {
                    padding: 20px;
                }
            }

            .modal-backdrop {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                backdrop-filter: blur(5px);
                z-index: 1000;
                display: none;
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            .modal-backdrop.show {
                display: flex;
                opacity: 1;
            }

            .class-details-modal {
                background: #fff;
                width: 90%;
                max-width: 600px;
                margin: auto;
                border-radius: 24px;
                overflow: hidden;
                position: relative;
                transform: translateY(-20px);
                transition: transform 0.3s ease;
            }

            .modal-backdrop.show .class-details-modal {
                transform: translateY(0);
            }

            .modal-header {
                background: linear-gradient(135deg, #ed732f 0%, #f5a76c 100%);
                padding: 25px;
                color: #fff;
                position: relative;
            }

            .modal-header h3 {
                font-family: 'Cormorant Garamond', serif;
                font-size: 1.8rem;
                margin: 0 0 10px 0;
            }

            .modal-close {
                position: absolute;
                top: 20px;
                right: 20px;
                background: rgba(255, 255, 255, 0.2);
                border: none;
                color: #fff;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
            }

            .modal-close:hover {
                background: rgba(255, 255, 255, 0.3);
                transform: rotate(90deg);
            }

            .modal-body {
                padding: 25px;
            }

            .class-meta {
                display: flex;
                gap: 20px;
                margin-bottom: 25px;
                padding-bottom: 20px;
                border-bottom: 1px solid rgba(243, 100, 56, 0.1);
            }

            .meta-item {
                display: flex;
                align-items: center;
                gap: 10px;
                color: #666;
            }

            .meta-item i {
                color: #ed732f;
                font-size: 1.2rem;
            }

            .instructor-profile {
                display: flex;
                align-items: center;
                gap: 20px;
                padding: 20px;
                background: #f8f9fa;
                border-radius: 12px;
                margin-bottom: 25px;
            }

            .instructor-profile img {
                width: 80px;
                height: 80px;
                border-radius: 12px;
                object-fit: cover;
                border: 2px solid rgba(243, 100, 56, 0.2);
            }

            .instructor-info h4 {
                color: #333;
                margin: 0 0 5px 0;
                font-size: 1.2rem;
            }

            .instructor-info p {
                color: #666;
                font-size: 0.9rem;
                margin: 0;
                line-height: 1.6;
            }

            .class-description {
                margin-bottom: 25px;
            }

            .class-description h4 {
                color: #333;
                margin: 0 0 15px 0;
                font-size: 1.1rem;
            }

            .class-description p {
                color: #666;
                font-size: 0.95rem;
                line-height: 1.6;
                margin: 0 0 15px 0;
            }

            .class-benefits {
                background: rgba(243, 100, 56, 0.05);
                padding: 20px;
                border-radius: 12px;
                margin-bottom: 25px;
            }

            .class-benefits h4 {
                color: #333;
                margin: 0 0 15px 0;
                font-size: 1.1rem;
            }

            .benefits-list {
                list-style: none;
                padding: 0;
                margin: 0;
            }

            .benefits-list li {
                display: flex;
                align-items: center;
                gap: 10px;
                color: #666;
                font-size: 0.95rem;
                margin-bottom: 10px;
            }

            .benefits-list li:last-child {
                margin-bottom: 0;
            }

            .benefits-list li i {
                color: #ed732f;
            }

            .modal-footer {
                padding: 20px 25px;
                background: #f8f9fa;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-top: 1px solid rgba(243, 100, 56, 0.1);
            }

            .modal-footer .price {
                font-size: 1.2rem;
                font-weight: 600;
                color: #333;
            }

            .modal-footer .price span {
                font-size: 0.9rem;
                color: #666;
                font-weight: normal;
            }

            @media (max-width: 576px) {
                .class-meta {
                    flex-direction: column;
                    gap: 15px;
                }

                .instructor-profile {
                    flex-direction: column;
                    text-align: center;
                }

                .modal-footer {
                    flex-direction: column;
                    gap: 15px;
                    text-align: center;
                }

                .modal-footer .details-btn {
                    width: 100%;
                }
            }

            .calendar-modal-backdrop {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s ease, visibility 0.3s ease;
                z-index: 9999;
            }

            .calendar-modal-backdrop.show {
                opacity: 1;
                visibility: visible;
            }

            .full-calendar-modal {
                background: #fff;
                width: 90%;
                max-width: 600px;
                margin: auto;
                border-radius: 24px;
                overflow: hidden;
                position: relative;
                transform: translateY(-20px);
                transition: transform 0.3s ease;
            }

            .calendar-modal-backdrop.show .full-calendar-modal {
                transform: translateY(0);
            }

            .calendar-modal-header {
                padding: 20px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            }

            .month-nav {
                display: flex;
                align-items: center;
                gap: 20px;
            }

            .month-title {
                font-size: 1.4rem;
                font-weight: 600;
                color: #333;
            }

            .nav-btn {
                background: none;
                border: none;
                padding: 8px;
                cursor: pointer;
                color: #666;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
            }

            .nav-btn:hover {
                color: #ed732f;
            }

            .calendar-grid {
                padding: 20px;
            }

            .weekdays {
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                text-align: center;
                margin-bottom: 15px;
            }

            .weekday {
                font-size: 0.9rem;
                color: #666;
                font-weight: 500;
                padding: 5px;
            }

            .days-grid {
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                gap: 8px;
            }

            .day-cell {
                aspect-ratio: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1rem;
                color: #333;
                background: #f8f9fa;
                border-radius: 12px;
                cursor: pointer;
                transition: all 0.3s ease;
                border: 1px solid transparent;
            }

            .day-cell:hover {
                background: rgba(243, 100, 56, 0.1);
                color: #ed732f;
            }

            .day-cell.inactive {
                color: #ccc;
                background: none;
                cursor: default;
            }

            .day-cell.today {
                background: #fff;
                border-color: #ed732f;
                color: #ed732f;
                font-weight: 600;
            }

            .day-cell.selected {
                background: rgba(243, 100, 56, 0.1);
                color: #ed732f;
                border-color: #ed732f;
            }

            .calendar-modal-footer {
                padding: 20px;
                display: flex;
                justify-content: flex-end;
                gap: 15px;
                border-top: 1px solid rgba(0, 0, 0, 0.1);
            }

            .calendar-btn {
                padding: 12px 25px;
                border-radius: 12px;
                font-size: 0.95rem;
                font-weight: 500;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .btn-cancel {
                background: #fff;
                color: #666;
                border: 1px solid #ddd;
            }

            .btn-cancel:hover {
                background: #f8f9fa;
                border-color: #ccc;
            }

            .btn-apply {
                background: #ed732f;
                color: #fff;
                border: none;
            }

            .btn-apply:hover {
                background: #e55a30;
            }

            @media (max-width: 480px) {
                .full-calendar-modal {
                    width: 95%;
                }

                .month-title {
                    font-size: 1.2rem;
                }

                .day-cell {
                    font-size: 0.9rem;
                }
            }

            /* Daily Schedule Styles */
            .daily-schedule-section {
                background: #fff;
                border-radius: 24px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.05);
                overflow: hidden;
                margin-top: 30px;
            }

            .daily-schedule-header {
                background: linear-gradient(135deg, #ed732f 0%, #f5a76c 100%);
                padding: 25px;
                color: #fff;
            }

            .daily-schedule-header h3 {
                font-family: 'Cormorant Garamond', serif;
                font-size: 2rem;
                margin: 0;
                color: #fff;
                display: flex;
                align-items: center;
                gap: 15px;
            }

            .daily-schedule-header h3:before {
                content: '\f017';
                font-family: 'Font Awesome 5 Free';
                font-weight: 900;
                font-size: 1.8rem;
                background: rgba(255, 255, 255, 0.2);
                width: 45px;
                height: 45px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 12px;
                backdrop-filter: blur(5px);
            }

            .daily-schedule-content {
                padding: 25px;
            }

            .schedule-item {
                display: flex;
                align-items: center;
                padding: 15px;
                border-radius: 12px;
                transition: all 0.3s ease;
                margin-bottom: 10px;
            }

            .schedule-item:hover {
                background: rgba(243, 100, 56, 0.05);
            }

            .schedule-time {
                font-weight: 600;
                color: #ed732f;
                min-width: 120px;
            }

            .schedule-activity {
                flex-grow: 1;
                color: #333;
            }

            /* Important Information Styles */
            .important-info {
                background: #fff;
                border-radius: 24px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.05);
                overflow: hidden;
                margin-top: 30px;
            }

            .important-info-header {
                background: linear-gradient(135deg, #ed732f 0%, #f5a76c 100%);
                padding: 25px;
                color: #fff;
            }

            .important-info-header h3 {
                font-family: 'Cormorant Garamond', serif;
                font-size: 2rem;
                margin: 0;
                color: #fff;
                display: flex;
                align-items: center;
                gap: 15px;
            }

            .important-info-header h3:before {
                content: '\f05a';
                font-family: 'Font Awesome 5 Free';
                font-weight: 900;
                font-size: 1.8rem;
                background: rgba(255, 255, 255, 0.2);
                width: 45px;
                height: 45px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 12px;
                backdrop-filter: blur(5px);
            }

            .important-info-content {
                padding: 25px;
            }

            .info-item {
                display: flex;
                align-items: start;
                margin-bottom: 20px;
            }

            .info-icon {
                color: #ed732f;
                margin-right: 15px;
                width: 20px;
                text-align: center;
            }

            .info-text {
                flex-grow: 1;
            }

            .info-text strong {
                display: block;
                margin-bottom: 5px;
                color: #333;
            }

            .today-classes {
                margin-top: 30px;
            }

            .class-item {
                background: white;
                border-radius: 12px;
                padding: 20px;
                margin-bottom: 15px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.05);
                display: flex;
                align-items: center;
                gap: 20px;
            }

            .class-time {
                font-size: 1.1em;
                font-weight: bold;
                color: #ed732f;
                min-width: 140px;
            }

            .class-details {
                flex-grow: 1;
            }

            .class-details h4 {
                margin: 0 0 5px;
                color: #333;
            }

            .instructor {
                color: #666;
                margin: 0 0 5px;
                font-size: 0.9em;
            }

            .class-type {
                color: #888;
                margin: 0;
                font-size: 0.9em;
            }

            .no-classes {
                text-align: center;
                padding: 40px 20px;
                color: #666;
            }

            .no-classes i {
                font-size: 3em;
                color: #ddd;
                margin-bottom: 15px;
            }

            .no-classes p {
                margin: 5px 0;
                font-size: 1.1em;
            }

            .no-classes .sub-text {
                font-size: 0.9em;
                color: #999;
            }

            .class-actions {
                display: flex;
                gap: 10px;
            }

            .book-btn {
                background: #ed732f;
                color: #fff;
                padding: 12px 25px;
                border-radius: 12px;
                border: none;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .book-btn:hover {
                background: #e55a30;
                transform: translateY(-2px);
            }

            .class-type, .class-level {
                font-size: 0.9em;
                color: #666;
                margin: 2px 0;
            }

            .class-location {
                font-size: 0.85em;
                color: #888;
                margin-top: 5px;
                display: flex;
                align-items: center;
                gap: 5px;
            }

            .class-location i {
                color: #ed732f;
            }

            @media (max-width: 768px) {
                .day-circle.active .day-name,
                .day-circle.active .day-number {
                    color: white !important;
                }
            }
        </style>

        <style>
            /* Additional styles for the full calendar modal */
            .calendar-modal-backdrop.show {
                opacity: 1;
                visibility: visible;
            }
            
            .full-calendar-modal {
                position: relative;
                background: white;
                width: 90%;
                max-width: 500px;
                border-radius: 12px;
                padding: 25px;
                box-shadow: 0 5px 30px rgba(0,0,0,0.3);
                z-index: 1001;
                overflow: hidden;
                transform: translateY(0);
            }
            
            .calendar-modal-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
                position: relative;
            }
            
            .month-nav {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
            }
            
            .month-title {
                font-size: 24px;
                font-weight: 600;
                margin: 0 15px;
                text-align: center;
            }
            
            .class-time-modern {
                min-width: 100px;
                text-align: center;
                margin-right: 15px;
            }
            
            .time-modern {
                font-size: 24px;
                font-weight: 600;
                color: #ff6b35;
            }
            
            .class-icon {
                margin-right: 20px;
            }
            
            .yoga-icon {
                width: 60px;
                height: 60px;
                object-fit: contain;
            }
            
            .class-details-modern {
                flex: 1;
            }
            
            .class-title-modern {
                font-size: 20px;
                font-weight: 600;
                margin-bottom: 5px;
                color: #333;
            }
            
            .instructor-modern, .class-type-modern, .class-level-modern {
                margin-bottom: 3px;
                color: #666;
            }
            
            .class-location-modern {
                color: #ff6b35;
                margin-top: 5px;
            }
            
            .view-details-btn {
                margin-left: 15px;
            }
            
            .view-details-btn button {
                color: #ff6b35;
                border-color: #ff6b35;
                padding: 8px 15px;
                transition: all 0.3s ease;
            }
            
            .view-details-btn button:hover {
                background-color: #ff6b35;
                color: white;
            }
            
            .nav-btn {
                background: transparent;
                border: none;
                font-size: 18px;
                cursor: pointer;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                transition: all 0.2s;
            }
            
            .nav-btn:hover {
                background: #f0f0f0;
            }
            
            .modal-close {
                position: absolute;
                top: 0;
                right: 0;
                background: transparent;
                border: none;
                font-size: 24px;
                cursor: pointer;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .weekdays {
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                text-align: center;
                font-weight: 600;
                color: #666;
                margin-bottom: 15px;
            }
            
            .weekday {
                padding: 10px 0;
            }
            
            .days-grid {
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                gap: 8px;
            }
            
            .day-cell {
                aspect-ratio: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 18px;
                border-radius: 8px;
                cursor: pointer;
                transition: all 0.2s;
                background: #f5f5f5;
                position: relative;
            }
            
            .day-cell:hover {
                background: #e9e9e9;
            }
            
            .day-cell.inactive {
                color: #aaa;
                background: #f0f0f0;
            }
            
            .day-cell.today {
                background: #e0f7fa;
                color: #00838f;
                font-weight: 600;
            }
            
            .day-cell.selected {
                background: #4db6ac;
                color: white;
                font-weight: 600;
            }
            
            .day-cell.has-events:after {
                content: '';
                position: absolute;
                bottom: 5px;
                left: 50%;
                transform: translateX(-50%);
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background: #ed732f;
            }
            
            .calendar-footer {
                display: flex;
                justify-content: space-between;
                margin-top: 25px;
                padding-top: 15px;
                border-top: 1px solid #eee;
            }
            
            .calendar-footer button {
                padding: 10px 25px;
                border-radius: 8px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.2s;
            }
            
            .btn-secondary {
                background: #f0f0f0;
                color: #333;
                border: none;
            }
            
            .btn-primary {
                background: #ed732f;
                color: white;
                border: none;
            }
            
            .btn-secondary:hover {
                background: #e0e0e0;
            }
            
            .btn-primary:hover {
                background: #e55328;
            }
        </style>

    </head>

    <body>
        <!-- Custom Dropdown CSS -->
<link rel="stylesheet" href="css/dropdown-fix.css">
<!-- Custom Dropdown JavaScript Fix -->
<script src="js/dropdown-fix.js"></script>
<!-- Top Bar Start -->
<div class="top-bar d-none d-md-block">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8">
                <div class="top-bar-left">
                    <div class="text">
                        <i class="far fa-clock"></i>
                        <h2>8:00 - 9:00</h2>
                        <p>Mon - Fri</p>
                    </div>
                    <div class="text">
                        <i class="fa fa-phone-alt"></i>
                        <h2>+358 449751693</h2>
                        <p>For Appointment</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="top-bar-right">
                    <div class="language-switcher">
                        <span>Language:</span>
                        <a href="?lang=en" class="active">EN</a>
                        <span class="lang-divider">|</span>
                        <a href="?lang=fi" class="">FI</a>
                    </div>
                    <div class="social">
                        <a href=""><i class="fab fa-twitter"></i></a>
                        <a href=""><i class="fab fa-facebook-f"></i></a>
                        <a href=""><i class="fab fa-linkedin-in"></i></a>
                        <a href=""><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Top Bar End -->

<!-- Nav Bar Start -->
<div class="navbar navbar-expand-lg bg-dark navbar-dark">
            <div class="container-fluid">
                <a href="index.php" class="navbar-brand"><img src="img/logo.png" alt="Hero Image">&nbsp; Shanti&nbsp;Yoga&nbsp;Center</a>
                <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
                    <div class="navbar-nav ml-auto">
                            <a href="about.php" class="nav-item nav-link">About Us</a>
                        <div class="nav-item dropdown">
                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Offer</a>
                        <div class="dropdown-menu">
                        <a href="dailyclass.php" class="dropdown-item">Daily Class</a>
                            <a href="register.php" class="dropdown-item">Online Class</a>
                            <a href="private.php" class="dropdown-item">Private Class</a>
                        
                           
                        </div>
                        </div>
                        <!-- <div class="nav-item dropdown">
                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Classes</a>
                        <div class="dropdown-menu">
                            <a href="register.php" class="dropdown-item">Register</a>
                            <a href="schedule.php" class="dropdown-item">Schedule</a>
                            <a href="courses.php" class="dropdown-item">Courses</a>
                        </div>
                        </div> -->
                        <div class="nav-item dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Tantra Yoga</a>
                            <div class="dropdown-menu">
                                <!-- <a href="tantra.php" class="dropdown-item">Tantra</a> -->
                                <a href="curriculum.php" class="dropdown-item">Curriculum</a>
                                <!-- <a href="mantra.php" class="dropdown-item">Mantras</a>
                                <a href="chakra.php" class="dropdown-item">Chakras</a>
                                <a href="asana.php" class="dropdown-item">Asanas</a>
                                <a href="sanskrit.php" class="dropdown-item">Sanskrit</a>
                                <a href="disciple.php" class="dropdown-item">Guru Disciple</a> -->
                            </div>
                        </div>
                       
                        <!-- <a href="class.php" class="nav-item nav-link">Class</a> -->
                        <div class="nav-item dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Books</a>
                            <div class="dropdown-menu">
                                <a href="theory.php" class="dropdown-item">Tantra Yoga Theory</a>
                                <a href="med.php" class="dropdown-item">Tantra Yoga: Meditation</a>
                                
                            </div>
                        </div>
                        <a href="team.php" class="nav-item nav-link">Teacher</a>
                        <div class="nav-item dropdown">
                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Out Tradition</a>
                        <div class="dropdown-menu">
                        <a href="about.php" class="dropdown-item">Ashram</a>
                        </div>
                        </div>                       
                         <!-- <a href="blog.php" class="nav-item nav-link">Blog</a> -->
                        <!-- <div class="nav-item dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Blog</a>
                            <div class="dropdown-menu">
                                <a href="blog.php" class="dropdown-item">Blog Grid</a>
                                <a href="single.php" class="dropdown-item">Blog Detail</a>
                            </div>
                        </div> -->
                        <a href="contact.php" class="nav-item nav-link">Contact</a>
                    </div>
                </div>
            </div>
        </div>
<!-- Nav Bar End -->

<!-- Language Switcher Styles -->
<style>
    /* Override Bootstrap dropdown item color */
    .navbar .dropdown-menu .dropdown-item,
    .navbar-dark .navbar-nav .dropdown-menu .dropdown-item,
    .navbar .dropdown-menu a.dropdown-item,
    .dropdown-menu > .dropdown-item,
    .dropdown-menu a.dropdown-item {
        color: #ffffff !important;
        background-color: #343a40 !important;
    }
    
    .navbar .dropdown-menu .dropdown-item:hover,
    .navbar-dark .navbar-nav .dropdown-menu .dropdown-item:hover,
    .navbar .dropdown-menu a.dropdown-item:hover,
    .dropdown-menu > .dropdown-item:hover,
    .dropdown-menu a.dropdown-item:hover {
        color: #ed732f !important;
        background-color: #2d3339 !important;
    }
    .language-switcher {
        display: inline-flex;
        align-items: center;
        margin-right: 15px;
        color: #ffffff;
    }
    
    .language-switcher span {
        margin-right: 8px;
        font-size: 14px;
    }
    
    .language-switcher a {
        color: #ffffff;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        padding: 0 5px;
        transition: all 0.3s;
    }
    
    .language-switcher a:hover,
    .language-switcher a.active {
        color: #ed732f;
    }
    
    .lang-divider {
        color: #ffffff;
        opacity: 0.5;
    }
    
    .top-bar-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    
    /* Mobile Dropdown Fix */
    @media (max-width: 991.98px) {
        .navbar-nav .dropdown-menu {
            display: none;
            opacity: 1;
            visibility: visible;
            background-color: #343a40;
            border: none;
            padding: 0;
            margin: 0;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .navbar-nav .dropdown-menu.show {
            display: block !important;
            position: static !important;
            float: none !important;
            width: 100% !important;
            transform: none !important;
        }
        
        .navbar-nav .nav-link,
        .navbar-nav .dropdown-toggle {
            padding: 10px 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            color: #ffffff !important;
        }
        
        .navbar-nav .dropdown-item {
            color: #ffffff;
            padding: 8px 20px 8px 35px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .navbar-nav .dropdown-item:hover,
        .navbar-nav .dropdown-item:focus {
            background-color: #2d3339;
            color: #ed732f !important;
        }
        
        .navbar-nav .dropdown-toggle.active {
            color: #ed732f !important;
        }
        

        
        .navbar-nav .nav-item:last-child .nav-link {
            border-bottom: none;
        }
    }
</style>

<!-- Mobile Dropdown JavaScript Fix -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Fix for mobile dropdown menus
        if (window.innerWidth < 992) {
            const dropdownToggleLinks = document.querySelectorAll('.dropdown-toggle');
            
            dropdownToggleLinks.forEach(function(link) {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    // Close all other dropdowns
                    dropdownToggleLinks.forEach(function(otherLink) {
                        if (otherLink !== link) {
                            otherLink.classList.remove('active');
                            const otherDropdown = otherLink.nextElementSibling;
                            if (otherDropdown) {
                                otherDropdown.classList.remove('show');
                            }
                        }
                    });
                    
                    // Toggle current dropdown
                    const dropdown = this.nextElementSibling;
                    if (dropdown) {
                        dropdown.classList.toggle('show');
                        this.classList.toggle('active');
                    }
                });
            });
            
            // Close dropdowns when clicking outside
            document.addEventListener('click', function(e) {
                if (!e.target.closest('.dropdown-menu') && !e.target.classList.contains('dropdown-toggle')) {
                    dropdownToggleLinks.forEach(function(link) {
                        link.classList.remove('active');
                        const dropdown = link.nextElementSibling;
                        if (dropdown) {
                            dropdown.classList.remove('show');
                        }
                    });
                }
            });
        }
    });
</script>

        <!-- Hero Section Start -->
        <div class="schedule-hero">
            <div class="container">
                <img src="img/schedulebg.png" alt="Hero Image" style="width: 30%; height: 30%; object-fit: cover;">

                <h1>Find a Class</h1>
            </div>
        </div>
        <!-- Hero Section End -->

        <!-- Schedule Section Start -->
        <div class="schedule-section">
            <div class="container">
                                
                <div class="schedule-header">
                  
                    <!-- Removed filter dropdowns -->
                </div>

                <div class="schedule-layout">
                    <!-- Hourly Schedule Column -->
                    <div class="calendar-section">
                        <div class="calendar-nav">
                                                        <div class="header-content">
                                <div class="schedule-title">
                                    <span class="icon-container"><i class="far fa-calendar-alt"></i></span>
                                    <span class="icon-container"><i class="fas fa-book"></i></span>
                                    <h3>Class Booking Calendar</h3>
                                </div>
                                <div class="date-display">
                                    Saturday, June 21, 2025                                </div>
                            </div>
                        </div>

                        <div class="calendar-booking-container">
                                                        
                          
                            
                            <div class="calendar-wrapper">
                                <div id="calendar"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Daily Schedule Column -->
                    <div class="daily-schedule">
                        <div class="daily-schedule-header">
                            <h3>Daily Schedule</h3>
                        </div>
                        
                        <div class="schedule-content">
                                                        <div class="schedule-item">
                                <div class="schedule-time">07:00 - 08:00</div>
                                <div class="schedule-activity">Tantra Yoga</div>
                                </div>
                                                        <div class="schedule-item">
                                <div class="schedule-time">08:15 - 09:15</div>
                                <div class="schedule-activity">Hatha Yoga</div>
                                </div>
                                                        <div class="schedule-item">
                                <div class="schedule-time">17:00 - 18:00</div>
                                <div class="schedule-activity">Astanga Yoga</div>
                                </div>
                                                        <div class="schedule-item">
                                <div class="schedule-time">18:15 - 19:15</div>
                                <div class="schedule-activity">Tantra Yoga</div>
                                </div>
                                                        <div class="schedule-item">
                                <div class="schedule-time">19:30 - 20:30</div>
                                <div class="schedule-activity">Kirtan</div>
                                </div>
                            
                            <div class="schedule-note">
                                <h4>Important Information</h4>
                                <p>Classes will be between tuesday to sunday (Guru Yogi Prakash is the hosting Teacher until june 8 )<br>
                                We willbe closing on MONDAY</p>
                                <p>Fredrikinkatu 61 A 16, Kamppi
 is the studio address. 
0449871693 you can call this number if any info needed. 
</p>
                                <div class="contact-info">
                                    <i class="far fa-envelope"></i>
                                    For registration and questions: <a href="mailto:pandeydhanpati34@gmail.com">pandeydhanpati34@gmail.com</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Schedule Section End -->

         <!-- Footer Start -->
 <!-- Mobile Footer Fix CSS -->
<style>
@media (max-width: 767px) {
    .footer .footer-info {
        text-align: center;
    }
    .footer .footer-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 15px;
    }
    .footer .footer-menu p {
        margin-bottom: 5px;
    }
    .footer .footer-social {
        display: flex;
        justify-content: center;
        margin-top: 15px;
    }
    .footer .copyright .row {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .footer .copyright .col-md-6 {
        width: 100%;
        margin-bottom: 10px;
    }
    .footer .copyright p {
        margin-bottom: 5px;
        text-align: center !important;
    }
}
</style>

<div class="footer wow fadeIn" data-wow-delay="0.3s">
            <div class="container-fluid">
                <div class="container">
                    <div class="footer-info">
                        <a href="index.php" class="footer-logo">S<span>hanti</span>&nbsp;Y<span>oga</span>&nbsp;C<span>enter</span></a>
                        <h3>Helsinki, Finland</h3>
                        <div class="footer-menu">
                            <p>+358 45 783 9327</p>
                            <p>contact@shantiyogacenter.fi</p>
                        </div>
                        <div class="footer-social">
                            <a href=""><i class="fab fa-twitter"></i></a>
                            <a href=""><i class="fab fa-facebook-f"></i></a>
                            <a href=""><i class="fab fa-youtube"></i></a>
                            <a href=""><i class="fab fa-instagram"></i></a>
                            <a href=""><i class="fab fa-linkedin-in"></i></a>
                        </div>
                    </div>
                </div>
                <div class="container copyright">
                    <div class="row">
                        <div class="col-md-6 col-sm-12 text-center text-md-left mb-2 mb-md-0">
                            <p>&copy; <a href="index.php">Shanti Yoga Center</a>, All Right Reserved.</p>
                        </div>
                        <div class="col-md-6 col-sm-12 text-center text-md-right">
                            <p>Designed By <a href="https://imbibepro.com/">Imbibe Pro</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer End -->

<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>

        <!-- Class Details Modal -->
        <div id="classDetailsModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="classDetailsModalLabel" aria-hidden="true" data-keyboard="true">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #ed732f; color: white;">
                        <h5 class="modal-title" id="classDetailsModalLabel" style="font-size: 22px; font-weight: 600;">Class Details</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body p-4">
                        <div class="class-details-content">
                            <!-- Content will be dynamically inserted here -->
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Full Calendar Modal -->
        <div id="fullCalendarModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 9999; align-items: center; justify-content: center;">
            <div style="background: white; width: 90%; max-width: 500px; border-radius: 12px; padding: 25px; box-shadow: 0 5px 30px rgba(0,0,0,0.3);">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <button id="calendarPrevBtn" style="background: transparent; border: none; font-size: 24px; cursor: pointer; padding: 0 15px;">&lt;</button>
                    <div id="calendarMonthTitle" style="font-size: 24px; font-weight: 600; margin: 0 15px; text-align: center;">April 2025</div>
                    <button id="calendarNextBtn" style="background: transparent; border: none; font-size: 24px; cursor: pointer; padding: 0 15px;">&gt;</button>
                </div>
                
                <script>
                    // Direct event handlers for the calendar buttons
                    document.getElementById('calendarPrevBtn').onclick = function() {
                        document.getElementById('calendarMonthTitle').textContent = 'March 2025';
                    };
                    
                    document.getElementById('calendarNextBtn').onclick = function() {
                        document.getElementById('calendarMonthTitle').textContent = 'May 2025';
                    };
                </script>
                
                <div>
                    <div style="display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: 600; color: #666; margin-bottom: 15px;">
                        <div style="padding: 10px 0;">Su</div>
                        <div style="padding: 10px 0;">Mo</div>
                        <div style="padding: 10px 0;">Tu</div>
                        <div style="padding: 10px 0;">We</div>
                        <div style="padding: 10px 0;">Th</div>
                        <div style="padding: 10px 0;">Fr</div>
                        <div style="padding: 10px 0;">Sa</div>
                    </div>
                    
                    <div id="calendarDaysGrid" style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;">
                        <!-- Calendar days will be generated by JavaScript -->
                    </div>
                </div>
                
                <div style="display: flex; justify-content: space-between; margin-top: 25px; padding-top: 15px; border-top: 1px solid #eee;">
                    <button onclick="closeFullCalendar()" style="padding: 10px 25px; border-radius: 8px; font-weight: 600; cursor: pointer; background: #f0f0f0; color: #333; border: none;">Cancel</button>
                    <button id="applyDateBtn" style="padding: 10px 25px; border-radius: 8px; font-weight: 600; cursor: pointer; background: #ed732f; color: white; border: none;">Apply</button>
                </div>
            </div>
        </div>

        <!-- New Full Calendar Modal -->
        <div id="newCalendarModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 99999; align-items: center; justify-content: center; overflow-y: auto; padding: 15px 0;">
            <div style="background: white; width: 90%; max-width: 325px; border-radius: 8px; padding: 20px; box-shadow: 0 5px 30px rgba(0,0,0,0.3); position: relative; margin: auto;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                    <h2 style="margin: 0; font-size: 18px; font-weight: 600; color: #333;">Select Month:</h2>
                    <button onclick="closeNewCalendarModal()" style="background: transparent; border: none; font-size: 20px; cursor: pointer; padding: 0; margin: 0; line-height: 1;">&times;</button>
                </div>
                
                <div style="margin-bottom: 15px;">
                    <select id="monthSelect" style="width: 100%; padding: 8px 12px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 16px; appearance: menulist; background-color: white;" onchange="changeCalendarMonth(this.value)">
                        <option value="0-2025">January</option>
                        <option value="1-2025">February</option>
                        <option value="2-2025">March</option>
                        <option value="3-2025" selected>April</option>
                        <option value="4-2025">May</option>
                        <option value="5-2025">June</option>
                        <option value="6-2025">July</option>
                        <option value="7-2025">August</option>
                        <option value="8-2025">September</option>
                        <option value="9-2025">October</option>
                        <option value="10-2025">November</option>
                        <option value="11-2025">December</option>
                    </select>
                </div>
                <h3 id="calendarMonthTitle" style="display: none;">April</h3>
                
                <div id="calendarGrid" style="display: none;">
                    <!-- First row (March 30-April 5) -->
                    <div style="padding: min(10px, 2vw); text-align: center; color: #aaa;">30</div>
                    <div style="padding: min(10px, 2vw); text-align: center; color: #aaa;">31</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-01')">1</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-02')">2</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-03')">3</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-04')">4</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-05')">5</div>
                    
                    <!-- Second row (April 6-12) -->
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-06')">6</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-07')">7</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-08')">8</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-09')">9</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-10')">10</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-11')">11</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-12')">12</div>
                    
                    <!-- Third row (April 13-19) -->
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-13')">13</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-14')">14</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-15')">15</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-16')">16</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-17')">17</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-18')">18</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-19')">19</div>
                    
                    <!-- Fourth row (April 20-26) -->
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-20')">20</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-21')">21</div>
                    <div style="padding: min(10px, 2vw); text-align: center; background-color: #4db6ac; color: white; border-radius: 50%; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-22')">22<span style="position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background-color: white; border-radius: 50%;"></span></div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-23')">23<span style="position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background-color: #f36438; border-radius: 50%;"></span></div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-24')">24<span style="position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background-color: #f36438; border-radius: 50%;"></span></div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-25')">25</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-26')">26</div>
                    
                    <!-- Fifth row (April 27-May 3) -->
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-27')">27</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-28')">28</div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-29')">29<span style="position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background-color: #f36438; border-radius: 50%;"></span></div>
                    <div style="padding: min(10px, 2vw); text-align: center; position: relative; cursor: pointer;" onclick="selectCalendarDate('2025-04-30')">30<span style="position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background-color: #f36438; border-radius: 50%;"></span></div>
                    <div style="padding: min(10px, 2vw); text-align: center; color: #aaa;">1</div>
                    <div style="padding: min(10px, 2vw); text-align: center; color: #aaa;">2</div>
                    <div style="padding: min(10px, 2vw); text-align: center; color: #aaa;">3</div>
                </div>
                
                <div style="text-align: right; margin-top: 15px; display: flex; justify-content: flex-end; align-items: center;">
                    <button onclick="closeNewCalendarModal()" style="padding: 6px 15px; border-radius: 4px; background: #f5f5f5; color: #333; border: none; cursor: pointer; font-size: 14px; margin-right: 8px;">Cancel</button>
                    <button onclick="applyNewCalendarDate()" style="padding: 6px 15px; border-radius: 4px; background: #ed732f; color: white; border: none; cursor: pointer; font-size: 14px;">Apply</button>
                </div>
            </div>
        </div>

        <script>
            // Add console logging for debugging
            console.log('Script loaded');
            
            // Get the calendar class dates from PHP
            const calendarClassDates = ["2025-04-22","2025-04-23","2025-04-24","2025-04-29","2025-04-30"];
            console.log('Calendar class dates:', calendarClassDates);
            
            // Function to check if a date has a class
            function hasClass(dateString) {
                return calendarClassDates.includes(dateString);
            }
            
            // Test function
            function testModal() {
                alert("JavaScript is working!");
                const modal = document.getElementById('fullCalendarModal');
                if (modal) {
                    alert("Modal element found!");
                    modal.style.display = 'flex';
                    alert("Display style set to flex");
                } else {
                    alert("Modal element NOT found!");
                }
            }
            
            // Get current date
            const today = new Date(); // Use the actual current date
            console.log('Today:', today);
            
            // Store all calendar events from PHP
            const calendarEvents = <br />
<b>Deprecated</b>:  htmlspecialchars(): Passing null to parameter #1 ($string) of type string is deprecated in <b>/home/u729492380/domains/shantiyoga.fi/public_html/dailyclass.php</b> on line <b>2466</b><br />
[{"id":"3","title":"Evening Flow","description":"Gentle flow to unwind after a long day.","date":"2025-04-22","start_time":"18:00:00","end_time":"19:00:00","duration":"60","instructor":"Annica Hill","class_type":"Vinyasa Flow","level":"All Levels"},{"id":"6","title":"Candlelight Meditation","description":"Relaxing meditation by candlelight to end your day.","date":"2025-04-23","start_time":"20:00:00","end_time":"21:00:00","duration":"60","instructor":"Guru Yogi Prakash","class_type":"Meditation","level":"All Levels"},{"id":"7","title":"Sunrise Yoga","description":"Energizing morning practice to awaken your body and mind.","date":"2025-04-24","start_time":"06:30:00","end_time":"07:30:00","duration":"60","instructor":"Dhanpati Pandey","class_type":"Vinyasa Flow","level":"Intermediate"},{"id":"30","title":"Hatha Yoga","description":"","date":"2025-05-18","start_time":"10:00:00","end_time":"11:00:00","duration":"60","instructor":"Staff","class_type":"Hatha Yoga","level":"Beginner"}];
            
            console.log('Calendar Events:', calendarEvents);
            
            // Function to format time
            function formatTime(timeStr) {
                const [hours, minutes] = timeStr.split(':');
                const date = new Date();
                date.setHours(parseInt(hours), parseInt(minutes));
                return date.toLocaleTimeString('en-US', {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: true
                });
            }
            
            // Function to get events for a specific date
            function getEventsForDate(date) {
                console.log('Looking for events on:', date);
                // Use Set to ensure unique events based on start_time
                const events = Array.from(new Set(
                    calendarEvents
                        .filter(event => event.date === date)
                        .map(event => JSON.stringify(event))
                ))
                .map(event => JSON.parse(event));
                
                console.log(`Events for ${date}:`, events);
                return events;
            }
            
            // Function to get trainer image based on instructor name
            function getTrainerImage(instructorName) {
                switch(instructorName) {
                    case 'Guru Yogi Prakash':
                        return 'img/trainer0.png';
                    case 'Dhanpati Pandey':
                        return 'img/trainer1.png';
                    case 'Annica Hill':
                        return 'img/trainer3.png';
                    default:
                        return 'img/trainer0.png';
                }
            }

            // Function to update class list
            function updateClassList(date) {
                console.log('Updating class list for date:', date);
                const events = getEventsForDate(date);
                const classList = document.querySelector('.class-list');
                
                if (!classList) return;
                
                // Update the heading to show selected date
                const dateObj = new Date(date);
                const formattedDate = dateObj.toLocaleDateString('en-US', { 
                    weekday: 'long', 
                    year: 'numeric', 
                    month: 'long', 
                    day: 'numeric' 
                });
                
                let html = `<h4>Classes for ${formattedDate}</h4>`;
                
                if (events.length === 0) {
                    html += `
                        <div class="no-classes">
                            <i class="far fa-calendar-times"></i>
                            <p>No classes scheduled for this date</p>
                            <p class="sub-text">Please select another date or check back later</p>
                        </div>
                    `;
                } else {
                    // Sort events by start_time
                    events.sort((a, b) => a.start_time.localeCompare(b.start_time));
                    
                    events.forEach(event => {
                        const trainerImage = getTrainerImage(event.instructor);
                        html += `
                            <div class="class-item">
                                <div class="class-time">
                                    <div class="time">${formatTime(event.start_time)}</div>
                                </div>
                                <img src="${trainerImage}" alt="${event.instructor}" class="instructor-avatar">
                                <div class="class-info">
                                    <h5 class="class-title">${event.title}</h5>
                                    <div class="instructor-name">${event.instructor}</div>
                                    <div class="class-type">${event.class_type}</div>
                                    <div class="class-level">${event.level}</div>
                                    <div class="class-location">
                                        <i class="fas fa-map-marker-alt"></i>
                                        Shanti Yoga Helsinki
                                    </div>
                                </div>
                                <div class="class-actions">
                                    <button class="details-btn" onclick="showClassDetails('${event.id}')">
                                        <i class="fas fa-info-circle"></i> View Details
                                    </button>
                                </div>
                            </div>
                        `;
                    });
                }
                
                classList.innerHTML = html;
            }

            function showModal() {
                document.getElementById('classDetailsModal').classList.add('show');
                document.body.style.overflow = 'hidden';
            }

            function closeModal() {
                document.getElementById('classDetailsModal').classList.remove('show');
                document.body.style.overflow = 'auto';
            }

            // Full Calendar Modal Functions
            function openFullCalendar() {
                console.log('Opening full calendar modal');
                const modal = document.getElementById('fullCalendarModal');
                console.log('Modal element:', modal);
                // Use inline style to ensure it works
                modal.style.display = 'flex';
                modal.style.alignItems = 'center';
                modal.style.justifyContent = 'center';
                renderCalendar(new Date());
            }
            
            function closeFullCalendar() {
                console.log('Closing full calendar modal');
                document.getElementById('fullCalendarModal').style.display = 'none';
            }
            
            function showNewCalendarModal() {
                // Show the modal
                document.getElementById('newCalendarModal').style.display = 'flex';
                
                // Set the initial month title
                document.getElementById('calendarMonthTitle').textContent = 'April 2025';
            }
            
            function closeNewCalendarModal() {
                document.getElementById('newCalendarModal').style.display = 'none';
            }
            
            // Wait for the document to be fully loaded
            document.addEventListener('DOMContentLoaded', function() {
                // Get the navigation buttons
                const prevButton = document.getElementById('prevMonthBtn');
                const nextButton = document.getElementById('nextMonthBtn');
                
                if (prevButton) {
                    prevButton.onclick = function() {
                        document.getElementById('calendarMonthTitle').textContent = 'March 2025';
                        return false;
                    };
                }
                
                if (nextButton) {
                    nextButton.onclick = function() {
                        document.getElementById('calendarMonthTitle').textContent = 'May 2025';
                        return false;
                    };
                }
            });
            
            // Add event listeners when the document is loaded
            document.addEventListener('DOMContentLoaded', function() {
                // Get the navigation buttons
                const prevBtn = document.getElementById('prevMonthBtn');
                // ... rest of the code remains the same ...
                const nextBtn = document.getElementById('nextMonthBtn');
                
                // Add click event listeners
                if (prevBtn) {
                    prevBtn.addEventListener('click', previousMonth);
                    console.log('Previous month button listener added');
                }
                
                if (nextBtn) {
                    nextBtn.addEventListener('click', nextMonth);
                    console.log('Next month button listener added');
                }
            });
            
            function updateFullCalendarMonth() {
                // Update the month title
                const monthYearTitle = document.getElementById('calendarMonthTitle');
                if (monthYearTitle) {
                    monthYearTitle.textContent = currentCalendarMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
                }
                
                // Get the calendar grid container
                const calendarGrid = document.getElementById('calendarGrid');
                if (!calendarGrid) return;
                
                // Clear the current grid
                calendarGrid.innerHTML = '';
                
                // Get year and month
                const year = currentCalendarMonth.getFullYear();
                const month = currentCalendarMonth.getMonth();
                
                // Create the weekday headers
                const weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
                weekdays.forEach(day => {
                    const dayHeader = document.createElement('div');
                    dayHeader.textContent = day;
                    calendarGrid.appendChild(dayHeader);
                });
                
                // Get the first day of the month
                const firstDay = new Date(year, month, 1);
                const startingDay = firstDay.getDay(); // 0 = Sunday, 1 = Monday, etc.
                
                // Get the last day of the month
                const lastDay = new Date(year, month + 1, 0);
                const totalDays = lastDay.getDate();
                
                // Get the last day of the previous month
                const prevMonthLastDay = new Date(year, month, 0).getDate();
                
                // Add days from previous month
                for (let i = 0; i < startingDay; i++) {
                    const prevMonthDay = prevMonthLastDay - startingDay + i + 1;
                    const dayCell = document.createElement('div');
                    dayCell.style.padding = 'min(10px, 2vw)';
                    dayCell.style.textAlign = 'center';
                    dayCell.style.color = '#aaa';
                    dayCell.textContent = prevMonthDay;
                    calendarGrid.appendChild(dayCell);
                }
                
                // Add days of current month
                for (let i = 1; i <= totalDays; i++) {
                    const dayCell = document.createElement('div');
                    dayCell.style.padding = 'min(10px, 2vw)';
                    dayCell.style.textAlign = 'center';
                    dayCell.style.position = 'relative';
                    dayCell.style.cursor = 'pointer';
                    
                    // Format the date string (YYYY-MM-DD)
                    const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`;
                    
                    // Add click event
                    dayCell.onclick = function() { selectCalendarDate(dateStr); };
                    
                    // Add day number
                    dayCell.textContent = i;
                    
                    // Check if this date has classes
                    if (calendarClassDates.includes(dateStr)) {
                        // Add the dot indicator for dates with classes
                        const indicator = document.createElement('span');
                        indicator.style.position = 'absolute';
                        indicator.style.bottom = '3px';
                        indicator.style.left = '50%';
                        indicator.style.transform = 'translateX(-50%)';
                        indicator.style.width = '4px';
                        indicator.style.height = '4px';
                        indicator.style.backgroundColor = '#f36438';
                        indicator.style.borderRadius = '50%';
                        dayCell.appendChild(indicator);
                    }
                    
                    calendarGrid.appendChild(dayCell);
                }
                
                // Calculate how many cells we need to fill from the next month
                const totalCells = 42; // 6 rows of 7 days
                const remainingCells = totalCells - (startingDay + totalDays);
                
                // Add days from next month
                for (let i = 1; i <= remainingCells; i++) {
                    const dayCell = document.createElement('div');
                    dayCell.style.padding = 'min(10px, 2vw)';
                    dayCell.style.textAlign = 'center';
                    dayCell.style.color = '#aaa';
                    dayCell.textContent = i;
                    calendarGrid.appendChild(dayCell);
                }
                
                console.log('Calendar month updated to:', currentCalendarMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }));
            }
            
            function renderCalendar(date) {
                const year = date.getFullYear();
                const month = date.getMonth();
                
                // Update month title
                const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
                document.getElementById('calendarMonthTitle').textContent = `${monthNames[month]} ${year}`;
                
                // Get first day of month and last day of month
                const firstDay = new Date(year, month, 1);
                const lastDay = new Date(year, month + 1, 0);
                
                // Get the day of the week the first day falls on (0 = Sunday, 6 = Saturday)
                let firstDayOfWeek = firstDay.getDay();
                
                // Calculate days from previous month to show
                const daysFromPrevMonth = firstDayOfWeek;
                
                // Calculate total days to show (previous month days + current month days)
                const totalDays = daysFromPrevMonth + lastDay.getDate();
                
                // Calculate rows needed (ceil to account for partial rows)
                const rows = Math.ceil(totalDays / 7);
                
                // Total cells needed
                const totalCells = rows * 7;
                
                // Get the grid container
                const daysGrid = document.getElementById('calendarDaysGrid');
                daysGrid.innerHTML = '';
                
                // Get previous month's last day
                const prevMonthLastDay = new Date(year, month, 0).getDate();
                
                // Current date for highlighting today
                const todayObj = new Date();
                const isCurrentMonth = todayObj.getMonth() === month && todayObj.getFullYear() === year;
                const todayDate = todayObj.getDate();
                
                // Counter for next month days
                let nextMonthCounter = 1;
                
                // Create the calendar cells
                for (let i = 0; i < totalCells; i++) {
                    const dayCell = document.createElement('div');
                    dayCell.className = 'day-cell';
                    
                    // Previous month days
                    if (i < firstDayOfWeek) {
                        const prevMonthDay = prevMonthLastDay - (firstDayOfWeek - i - 1);
                        dayCell.textContent = prevMonthDay;
                        dayCell.classList.add('inactive');
                        dayCell.dataset.date = new Date(year, month - 1, prevMonthDay).toISOString().split('T')[0];
                    } 
                    // Current month days
                    else if (i < firstDayOfWeek + lastDay.getDate()) {
                        const currentDay = i - firstDayOfWeek + 1;
                        dayCell.textContent = currentDay;
                        dayCell.dataset.date = new Date(year, month, currentDay).toISOString().split('T')[0];
                        
                        // Check if this day has events
                        const hasEvents = calendarEvents.some(event => {
                            const eventDate = new Date(event.date);
                            return eventDate.getDate() === currentDay && 
                                   eventDate.getMonth() === month && 
                                   eventDate.getFullYear() === year;
                        });
                        
                        if (hasEvents) {
                            dayCell.classList.add('has-events');
                        }
                        
                        // Highlight today
                        if (isCurrentMonth && currentDay === todayDate) {
                            dayCell.classList.add('today');
                        }
                    } 
                    // Next month days
                    else {
                        dayCell.textContent = nextMonthCounter++;
                        dayCell.classList.add('inactive');
                        dayCell.dataset.date = new Date(year, month + 1, nextMonthCounter - 1).toISOString().split('T')[0];
                    }
                    
                    // Add click event to select a date
                    dayCell.addEventListener('click', function() {
                        // Remove selected class from all cells
                        document.querySelectorAll('.day-cell.selected').forEach(cell => {
                            cell.classList.remove('selected');
                        });
                        
                        // Add selected class to clicked cell
                        this.classList.add('selected');
                        
                        // Store selected date
                        selectedDate = this.dataset.date;
                    });
                    
                    daysGrid.appendChild(dayCell);
                }
            }
            
            // Initialize variables for calendar
            let selectedDate = null;
            
            // Add event listeners when DOM is loaded
            document.addEventListener('DOMContentLoaded', function() {
                // Previous month button
                document.getElementById('prevMonth').addEventListener('click', function() {
                    const currentDate = new Date(document.getElementById('calendarMonthTitle').textContent);
                    currentDate.setMonth(currentDate.getMonth() - 1);
                    renderCalendar(currentDate);
                });
                
                // Next month button
                document.getElementById('nextMonth').addEventListener('click', function() {
                    const currentDate = new Date(document.getElementById('calendarMonthTitle').textContent);
                    currentDate.setMonth(currentDate.getMonth() + 1);
                    renderCalendar(currentDate);
                });
                
                // Apply button
                document.getElementById('applyDateBtn').addEventListener('click', function() {
                    if (selectedDate) {
                        // Update class list for selected date
                        updateClassList(selectedDate);
                        
                        // Update the day circles to highlight the selected date
                        document.querySelectorAll('.day-circle').forEach(day => {
                            if (day.dataset.date === selectedDate) {
                                // Remove active class from all days
                                document.querySelectorAll('.day-circle').forEach(d => d.classList.remove('active'));
                                // Add active class to matching day
                                day.classList.add('active');
                            }
                        });
                    }
                    // Close the modal
                    closeFullCalendar();
                });
            });
            
            // Initialize calendar with current week
            document.addEventListener('DOMContentLoaded', () => {
                // Set initial date to current date
                const initialDate = today.toISOString().split('T')[0];
                
                // Update calendar display
                document.querySelectorAll('.day-circle').forEach(day => {
                    const dateStr = day.getAttribute('data-date');
                    if (dateStr === initialDate) {
                        day.classList.add('active');
                    }
                    
                    day.addEventListener('click', function() {
                        // Remove active class from all days
                        document.querySelectorAll('.day-circle').forEach(d => d.classList.remove('active'));
                        // Add active class to clicked day
                        this.classList.add('active');
                        
                        // Get the date from the data attribute
                        const dateStr = this.getAttribute('data-date');
                        console.log('Clicked date:', dateStr);
                        
                        // Update the displayed classes
                        updateClassList(dateStr);
                    });
                });

                // Initialize with current date classes
                updateClassList(today.toISOString().split('T')[0]);
            });
            
            // Functions for the new calendar modal
            function openNewCalendarModal() {
                console.log('Opening new calendar modal');
                const modal = document.getElementById('newCalendarModal');
                modal.style.display = 'flex';
                
                // Initialize the calendar grid for the current month
                const today = new Date();
                const currentMonth = today.getMonth();
                const currentYear = today.getFullYear();
                
                // Set the month dropdown to the current month
                document.getElementById('monthSelect').value = `${currentMonth}-${currentYear}`;
                
                // Generate the calendar grid
                regenerateCalendarGrid(today);
            }
            
            function closeNewCalendarModal() {
                console.log('Closing new calendar modal');
                document.getElementById('newCalendarModal').style.display = 'none';
            }
            
            // Variables to store the selected date and month
            let selectedCalendarDate = null;
            let selectedCalendarMonth = "3-2025"; // Default to April 2025
            
            function selectCalendarDate(date) {
                console.log('Selected date:', date);
                selectedCalendarDate = date;
                
                // Add visual feedback for the selected date
                const allDays = document.querySelectorAll('[onclick^="selectCalendarDate"]');
                allDays.forEach(day => {
                    // Reset all days to their original styling
                    day.style.backgroundColor = '';
                    day.style.color = '';
                    
                    // If this is today, keep its special styling
                    if (day.innerHTML.includes('22') && day.style.backgroundColor === '#4db6ac') {
                        day.style.backgroundColor = '#4db6ac';
                        day.style.color = 'white';
                    }
                });
                
                // Find the clicked day and highlight it
                const clickedDay = Array.from(allDays).find(day => 
                    day.getAttribute('onclick').includes(date)
                );
                
                if (clickedDay) {
                    clickedDay.style.backgroundColor = '#ed732f';
                    clickedDay.style.color = 'white';
                }
            }
            
            function changeCalendarMonth(monthYearValue) {
                console.log('Changing calendar month to:', monthYearValue);
                
                // Parse the month and year from the value (format: "month-year")
                const [month, year] = monthYearValue.split('-');
                
                // Create a date object for the first day of the selected month
                const selectedDate = new Date(parseInt(year), parseInt(month), 1);
                
                // Update the hidden month title (for compatibility with existing code)
                const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
                document.getElementById('calendarMonthTitle').textContent = `${monthNames[parseInt(month)]}`;
                
                // Store the selected month for later use
                selectedCalendarMonth = monthYearValue;
            }
            
            function regenerateCalendarGrid(date) {
                // Get the calendar grid container
                const calendarGrid = document.getElementById('calendarGrid');
                if (!calendarGrid) return;
                
                // Clear the current grid
                calendarGrid.innerHTML = '';
                
                // Get year and month
                const year = date.getFullYear();
                const month = date.getMonth();
                
                // We're not showing weekday headers as requested
                
                // Get the first day of the month
                const firstDay = new Date(year, month, 1);
                const startingDay = firstDay.getDay(); // 0 = Sunday, 1 = Monday, etc.
                
                // Get the last day of the month
                const lastDay = new Date(year, month + 1, 0);
                const totalDays = lastDay.getDate();
                
                // Get the last day of the previous month
                const prevMonthLastDay = new Date(year, month, 0).getDate();
                
                // Add days from previous month
                for (let i = 0; i < startingDay; i++) {
                    const prevMonthDay = prevMonthLastDay - startingDay + i + 1;
                    const dayCell = document.createElement('div');
                    dayCell.style.padding = 'min(10px, 2vw)';
                    dayCell.style.textAlign = 'center';
                    dayCell.style.color = '#aaa';
                    dayCell.textContent = prevMonthDay;
                    calendarGrid.appendChild(dayCell);
                }
                
                // Add days of current month
                for (let i = 1; i <= totalDays; i++) {
                    const dayCell = document.createElement('div');
                    dayCell.style.padding = 'min(10px, 2vw)';
                    dayCell.style.textAlign = 'center';
                    dayCell.style.position = 'relative';
                    dayCell.style.cursor = 'pointer';
                    
                    // Format the date string (YYYY-MM-DD)
                    const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`;
                    
                    // Add click event
                    dayCell.setAttribute('onclick', `selectCalendarDate('${dateStr}')`);
                    
                    // Add day number
                    dayCell.textContent = i;
                    
                    // Check if this date has classes
                    if (calendarClassDates.includes(dateStr)) {
                        // Add the dot indicator for dates with classes
                        const indicator = document.createElement('span');
                        indicator.style.position = 'absolute';
                        indicator.style.bottom = '3px';
                        indicator.style.left = '50%';
                        indicator.style.transform = 'translateX(-50%)';
                        indicator.style.width = '4px';
                        indicator.style.height = '4px';
                        indicator.style.backgroundColor = '#ed732f';
                        indicator.style.borderRadius = '50%';
                        dayCell.appendChild(indicator);
                    }
                    
                    calendarGrid.appendChild(dayCell);
                }
                
                // Calculate how many cells we need to fill from the next month
                const totalCells = 42; // 6 rows of 7 days
                const remainingCells = totalCells - (startingDay + totalDays);
                
                // Add days from next month
                for (let i = 1; i <= remainingCells; i++) {
                    const dayCell = document.createElement('div');
                    dayCell.style.padding = 'min(10px, 2vw)';
                    dayCell.style.textAlign = 'center';
                    dayCell.style.color = '#aaa';
                    dayCell.textContent = i;
                    calendarGrid.appendChild(dayCell);
                }
            }
            
            // Function to show class details in a modal
            function showClassDetails(classId) {
                console.log('Showing details for class ID:', classId);
                
                // Get the modal and content container
                const modal = $('#classDetailsModal');
                const contentContainer = modal.find('.class-details-content');
                
                // Clear previous content
                contentContainer.html('<div class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading class details...</div>');
                
                // Show the modal
                modal.modal('show');
                
                // Fetch class details from the server
                fetch(`get_class_details.php?id=${classId}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.error) {
                            contentContainer.html(`<div class="alert alert-danger">${data.error}</div>`);
                            return;
                        }
                        
                        const classData = data.class;
                        if (!classData) {
                            contentContainer.html('<div class="alert alert-warning">Class not found</div>');
                            return;
                        }
                        
                        // Format time for display
                        const startTime = formatTime(classData.start_time);
                        const endTime = formatTime(classData.end_time);
                        const trainerImage = getTrainerImage(classData.instructor);
                        
                        // Build the HTML for class details
                        const detailsHtml = `
                            <div class="class-details">
                                <div style="background-color: #f8f4f9; border-radius: 10px; padding: 20px; margin-bottom: 25px;">
                                    <div class="row">
                                        <div class="col-md-4 text-center">
                                            <img src="${trainerImage}" alt="${classData.instructor}" class="img-fluid rounded-circle mb-3" style="width: 150px; height: 150px; object-fit: cover; border: 4px solid #ed732f; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
                                            <h5 style="font-size: 20px; font-weight: 600; color: #333;">${classData.instructor}</h5>
                                        </div>
                                        <div class="col-md-8">
                                            <h3 style="font-size: 28px; font-weight: 700; color: #ed732f; margin-bottom: 20px;">${classData.title}</h3>
                                            <div style="font-size: 16px; line-height: 1.8;">
                                                <div style="display: flex; align-items: center; margin-bottom: 12px;">
                                                    <div style="width: 36px; height: 36px; background-color: #ed732f; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                                        <i class="far fa-calendar-alt" style="color: white;"></i>
                                                    </div>
                                                    <div>
                                                        <strong style="display: block; color: #555;">Date</strong>
                                                        <span style="font-size: 18px;">${new Date(classData.date).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</span>
                                                    </div>
                                                </div>
                                                
                                                <div style="display: flex; align-items: center; margin-bottom: 12px;">
                                                    <div style="width: 36px; height: 36px; background-color: #ed732f; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                                        <i class="far fa-clock" style="color: white;"></i>
                                                    </div>
                                                    <div>
                                                        <strong style="display: block; color: #555;">Time</strong>
                                                        <span style="font-size: 18px;">${startTime} - ${endTime} (${classData.duration} min)</span>
                                                    </div>
                                                </div>
                                                
                                                <div style="display: flex; align-items: center; margin-bottom: 12px;">
                                                    <div style="width: 36px; height: 36px; background-color: #ed732f; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                                        <i class="fas fa-tag" style="color: white;"></i>
                                                    </div>
                                                    <div>
                                                        <strong style="display: block; color: #555;">Class Type</strong>
                                                        <span style="font-size: 18px;">${classData.class_type}</span>
                                                    </div>
                                                </div>
                                                
                                                <div style="display: flex; align-items: center; margin-bottom: 12px;">
                                                    <div style="width: 36px; height: 36px; background-color: #ed732f; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                                        <i class="fas fa-signal" style="color: white;"></i>
                                                    </div>
                                                    <div>
                                                        <strong style="display: block; color: #555;">Level</strong>
                                                        <span style="font-size: 18px;">${classData.level}</span>
                                                    </div>
                                                </div>
                                                
                                                <div style="display: flex; align-items: center;">
                                                    <div style="width: 36px; height: 36px; background-color: #ed732f; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                                        <i class="fas fa-map-marker-alt" style="color: white;"></i>
                                                    </div>
                                                    <div>
                                                        <strong style="display: block; color: #555;">Location</strong>
                                                        <span style="font-size: 18px;">Shanti Yoga Helsinki</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div style="background-color: white; border-radius: 10px; padding: 25px; border: 1px solid #eee; margin-bottom: 25px;">
                                    <h5 style="font-size: 22px; font-weight: 600; color: #333; margin-bottom: 15px; border-bottom: 2px solid #ed732f; padding-bottom: 10px; display: inline-block;">About This Class</h5>
                                    <p style="font-size: 16px; line-height: 1.8; color: #444;">${classData.description || 'No description available.'}</p>
                                </div>
                                

                            </div>
                        `;
                        
                        // Update the modal content
                        contentContainer.html(detailsHtml);
                    })
                    .catch(error => {
                        console.error('Error fetching class details:', error);
                        contentContainer.html(`<div class="alert alert-danger">Error loading class details: ${error.message}</div>`);
                    });
            }
            
            function applyNewCalendarDate() {
                console.log('Applying selected month:', selectedCalendarMonth);
                
                // Parse the month and year from the selected month value
                const [monthIndex, year] = selectedCalendarMonth.split('-');
                const monthNum = parseInt(monthIndex) + 1; // Convert 0-based to 1-based month
                
                // Get the month name for display
                const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
                const monthName = monthNames[parseInt(monthIndex)];
                
                console.log(`Fetching classes for ${monthName} ${year}`);
                
                // Get the class list container
                const classList = document.querySelector('.class-list');
                console.log('Class list container found:', classList);
                
                if (classList) {
                    // First, update the heading
                    const heading = classList.querySelector('h4');
                    if (heading) {
                        heading.textContent = `Classes for ${monthName} ${year}`;
                    }
                    
                    // Remove all existing class items and other content except the heading
                    Array.from(classList.children).forEach(child => {
                        if (child.tagName !== 'H4') {
                            child.remove();
                        }
                    });
                    
                    // Add loading indicator
                    const loadingEl = document.createElement('p');
                    loadingEl.textContent = 'Loading classes...';
                    loadingEl.id = 'loading-classes';
                    classList.appendChild(loadingEl);
                    
                    // Fetch classes from the database for the selected month
                    console.log(`Fetching classes for month: ${monthNum}, year: ${year}`);
                    
                    // Add a timestamp to prevent caching
                    const timestamp = new Date().getTime();
                    fetch(`get_month_classes.php?month=${monthNum}&year=${year}&_=${timestamp}`)
                        .then(response => {
                            console.log('Response status:', response.status);
                            if (!response.ok) {
                                throw new Error('Network response was not ok');
                            }
                            return response.text().then(text => {
                                console.log('Raw response:', text);
                                try {
                                    return JSON.parse(text);
                                } catch (e) {
                                    console.error('Error parsing JSON:', e);
                                    throw new Error('Invalid JSON response: ' + text);
                                }
                            });
                        })
                        .then(data => {
                            console.log('Response data:', data);
                            
                            // Remove loading indicator
                            const loadingEl = document.getElementById('loading-classes');
                            if (loadingEl) loadingEl.remove();
                            
                            // Check if there's an error in the response
                            if (data && data.error) {
                                console.error('Error from server:', data.error);
                                classList.insertAdjacentHTML('beforeend', `<p>Error: ${data.error}</p>`);
                                return;
                            }
                            
                            // Extract classes from the response
                            const classes = data.classes || [];
                            console.log('Classes to display:', classes);
                            
                            // Display classes or no classes message
                            if (!classes || classes.length === 0) {
                                console.log('No classes found for the selected month');
                                classList.insertAdjacentHTML('beforeend', `
                                    <div class="no-classes">
                                        <i class="far fa-calendar-times"></i>
                                        <p>No classes scheduled for ${monthName} ${year}</p>
                                        <p class="sub-text">Please select another month or check back later</p>
                                    </div>
                                `);
                            } else {
                                console.log(`Displaying ${classes.length} classes for ${monthName}`);
                                
                                // Group classes by date
                                const classesByDate = {};
                                classes.forEach(classItem => {
                                    if (!classesByDate[classItem.date]) {
                                        classesByDate[classItem.date] = [];
                                    }
                                    classesByDate[classItem.date].push(classItem);
                                });
                                
                                // Sort dates
                                const sortedDates = Object.keys(classesByDate).sort();
                                
                                // Display classes grouped by date
                                sortedDates.forEach(date => {
                                    const dateObj = new Date(date);
                                    const formattedDate = dateObj.toLocaleDateString('en-US', { 
                                        weekday: 'long', 
                                        month: 'long', 
                                        day: 'numeric' 
                                    });
                                    
                                    // Add date header
                                    classList.insertAdjacentHTML('beforeend', `
                                        <div class="date-header" style="margin-top: 20px; padding: 8px 12px; background-color: #f5f5f5; border-radius: 5px; font-weight: 600;">
                                            ${formattedDate}
                                        </div>
                                    `);
                                    
                                    // Sort classes for this date by start time
                                    classesByDate[date].sort((a, b) => a.start_time.localeCompare(b.start_time));
                                    
                                    // Display each class for this date
                                    classesByDate[date].forEach(classItem => {
                                        const trainerImage = getTrainerImage(classItem.instructor);
                                        const formattedTime = classItem.start_time ? 
                                            formatTime(classItem.start_time) : 
                                            'Time not specified';
                                        
                                        classList.insertAdjacentHTML('beforeend', `
                                            <div class="class-item">
                                                <div class="class-time">
                                                    <div class="time">${formattedTime}</div>
                                                </div>
                                                <img src="${trainerImage}" alt="${classItem.instructor}" class="instructor-avatar">
                                                <div class="class-info">
                                                    <h5 class="class-title">${classItem.title}</h5>
                                                    <div class="instructor-name">${classItem.instructor}</div>
                                                    <div class="class-type">${classItem.class_type}</div>
                                                    <div class="class-level">${classItem.level}</div>
                                                    <div class="class-location">
                                                        <i class="fas fa-map-marker-alt"></i>
                                                        <span>Main Studio</span>
                                                    </div>
                                                </div>
                                                <button class="details-btn" onclick="showClassDetails('${classItem.id}')">
                                                    <i class="fas fa-info-circle"></i> View Details
                                                </button>
                                            </div>
                                        `);
                                    });
                                });
                            }
                        })
                        .catch(error => {
                            console.error('Error fetching classes:', error);
                            
                            // Remove loading indicator
                            const loadingEl = document.getElementById('loading-classes');
                            if (loadingEl) loadingEl.remove();
                            
                            // Display error message
                            classList.insertAdjacentHTML('beforeend', `
                                <div class="error-message">
                                    <i class="fas fa-exclamation-circle"></i>
                                    <p>Error loading classes</p>
                                    <p class="sub-text">${error.message}</p>
                                </div>
                            `);
                        });
                }
                
                // Close the modal
                closeNewCalendarModal();
            }
        </script>
        <script src="calendar-fix.js"></script>
        
        <!-- Class Booking Modal (for existing classes) -->
        <div class="modal fade" id="bookingModal" tabindex="-1" role="dialog" aria-labelledby="bookingModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="bookingModalLabel">Book Class</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div id="booking-class-details" class="mb-4">
                            <h6 id="booking-class-title" class="font-weight-bold"></h6>
                            <p id="booking-class-time" class="mb-1"></p>
                            <p id="booking-class-instructor" class="mb-1"></p>
                        </div>
                        <form id="booking-form">
                            <input type="hidden" id="class_id" name="class_id">
                            <div class="form-group">
                                <label for="name">Your Name</label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                            <div class="form-group">
                                <label for="email">Email Address</label>
                                <input type="email" class="form-control" id="email" name="email" required>
                            </div>
                            <div class="form-group">
                                <label for="phone">Phone Number</label>
                                <input type="tel" class="form-control" id="phone" name="phone" required>
                            </div>
                            <div class="form-group">
                                <label for="notes">Special Notes (Optional)</label>
                                <textarea class="form-control" id="notes" name="notes" rows="3"></textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary" id="submit-booking">Book Now</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Day Booking Modal (when clicking on a day) -->
        <div class="modal fade" id="dayBookingModal" tabindex="-1" role="dialog" aria-labelledby="dayBookingModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #ed732f; color: white;">
                        <h5 class="modal-title" id="dayBookingModalLabel">Book Class</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: white;">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="day-booking-form" method="post" action="process-booking.php">
                            <input type="hidden" id="selected_date" name="date">
                            
                            <div class="form-group">
                                <label style="font-weight: 500; display: block; margin-bottom: 10px;">Class Time</label>
                                <div class="time-selection-container" style="display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px;">
                                    <div style="flex: 1; min-width: 140px;">
                                        <label for="start_time" style="font-weight: 500; font-size: 14px; display: block; margin-bottom: 5px;">Start Time</label>
                                        <input type="time" class="form-control" id="start_time" name="start_time" value="10:00" style="font-size: 16px; height: auto; padding: 10px 12px; border-radius: 6px; border: 1px solid #ddd;" required>
                                    </div>
                                    <div style="flex: 1; min-width: 140px;">
                                        <label for="end_time" style="font-weight: 500; font-size: 14px; display: block; margin-bottom: 5px;">End Time</label>
                                        <input type="time" class="form-control" id="end_time" name="end_time" value="11:00" style="font-size: 16px; height: auto; padding: 10px 12px; border-radius: 6px; border: 1px solid #ddd;" required>
                                    </div>
                                </div>
                                <small class="form-text text-muted" style="font-size: 14px;">Please select times between 7:00 AM and 8:00 PM</small>
                            </div>
                            
                            <div class="form-group">
                                <label for="class_type" style="font-weight: 500;">Class Type</label>
                                <select class="form-control" id="class_type" name="class_type" required style="font-size: 16px; height: auto; padding: 10px 12px;">
                                    <option value="Hatha Yoga">Hatha Yoga</option>
                                    <option value="Ashtanga Yoga">Ashtanga Yoga</option>
                                    <option value="Kundalini Yoga">Kundalini Yoga</option>
                                    <option value="Meditation">Meditation</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="level" style="font-weight: 500;">Level</label>
                                <select class="form-control" id="level" name="level" required style="font-size: 16px; height: auto; padding: 10px 12px;">
                                    <option value="Beginner">Beginner</option>
                                    <option value="Intermediate">Intermediate</option>
                                    <option value="Advanced">Advanced</option>
                                </select>
                            </div>
                            
                            <hr>
                            
                            <div class="form-group">
                                <label for="name" style="font-weight: 500;">Your Name</label>
                                <input type="text" class="form-control" id="name" name="name" required style="font-size: 16px; height: auto; padding: 10px 12px;">
                            </div>
                            <div class="form-group">
                                <label for="email" style="font-weight: 500;">Email Address</label>
                                <input type="email" class="form-control" id="email" name="email" required style="font-size: 16px; height: auto; padding: 10px 12px;">
                            </div>
                            <div class="form-group">
                                <label for="phone" style="font-weight: 500;">Phone Number</label>
                                <input type="tel" class="form-control" id="phone" name="phone" required style="font-size: 16px; height: auto; padding: 10px 12px;">
                            </div>
                            <div class="form-group">
                                <label for="notes" style="font-weight: 500;">Special Notes (Optional)</label>
                                <textarea class="form-control" id="notes" name="notes" rows="3" style="font-size: 16px; padding: 10px 12px;"></textarea>
                            </div>
                            
                            <div class="text-right">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal" style="font-size: 16px; padding: 8px 20px;">Cancel</button>
                                <button type="submit" class="btn btn-primary" style="background-color: #ed732f; border-color: #ed732f; font-size: 16px; padding: 8px 20px;">Book Now</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Success Modal -->
        <div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header bg-success text-white">
                        <h5 class="modal-title">Booking Successful!</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body text-center py-4">
                        <i class="fas fa-check-circle text-success" style="font-size: 4rem; margin-bottom: 1rem;"></i>
                        <h4>Thank You!</h4>
                        <p>Your booking has been successfully submitted.</p>
                        <p>We've sent a confirmation email to your address.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- JavaScript Libraries -->
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
        <script src="lib/easing/easing.min.js"></script>
        <script src="lib/waypoints/waypoints.min.js"></script>
        <script src="lib/owlcarousel/owl.carousel.min.js"></script>
        <script src="lib/isotope/isotope.pkgd.min.js"></script>
        <script src="lib/lightbox/js/lightbox.min.js"></script>
        
        <!-- FullCalendar JavaScript -->
        <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js'></script>

        <!-- Template Javascript -->
        <script src="js/main.js"></script>
        
        <!-- Calendar Booking Script -->
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Initialize calendar with classes data
                const calendarEl = document.getElementById('calendar');
                const classes = [];
                
                if (!calendarEl) {
                    console.error('Calendar element not found!');
                    return;
                }
                
                // Get the list of class IDs that have bookings
                const bookedClassIds = [30];
                
                // Format classes data for FullCalendar - EXCLUDE any classes that have bookings
                const events = classes
                    .filter(classItem => !bookedClassIds.includes(parseInt(classItem.id)))
                    .map(classItem => {
                        // Parse date and time
                        const date = classItem.date;
                        const startTime = classItem.start_time;
                        const endTime = classItem.end_time;
                        
                        // Create event object
                        return {
                            id: classItem.id,
                            title: classItem.title,
                            start: date + 'T' + startTime,
                            end: date + 'T' + endTime,
                            extendedProps: {
                                instructor: classItem.instructor,
                                class_type: classItem.class_type,
                                level: classItem.level,
                                description: classItem.description
                            },
                            backgroundColor: getClassColor(classItem.class_type),
                            borderColor: getClassColor(classItem.class_type)
                        };
                    });
                
                // Initialize FullCalendar with enhanced options
                const calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth',
                    headerToolbar: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,listWeek'
                    },
                    events: events,
                    eventClick: function(info) {
                        showBookingModal(info.event);
                    },
                    dateClick: function(info) {
                        // Check if the clicked date is in the past
                        const clickedDate = new Date(info.dateStr);
                        const today = new Date();
                        today.setHours(0, 0, 0, 0); // Reset time part for comparison
                        
                        if (clickedDate < today) {
                            alert('Sorry, you cannot book classes for past dates.');
                            return;
                        }
                        
                        // Show day booking modal
                        showDayBookingModal(info.dateStr);
                    },
                    height: 'auto',
                    contentHeight: 'auto',
                    // Enhanced options for better appearance
                    dayMaxEvents: true, // allow "more" link when too many events
                    weekNumbers: false,
                    navLinks: true, // can click day/week names to navigate views
                    selectable: true,
                    selectMirror: true,
                    nowIndicator: true,
                    slotMinTime: '07:00:00', // Start at 7am
                    slotMaxTime: '20:00:00', // End at 8pm
                    businessHours: {
                        daysOfWeek: [0, 1, 2, 3, 4, 5, 6], // 0=Sunday, 1=Monday, etc.
                        startTime: '07:00',
                        endTime: '20:00',
                    },
                    // Allow past dates to be visible but not clickable
                    // We'll handle the past date check in the dateClick callback
                    // Custom event rendering
                    eventContent: function(arg) {
                        let timeText = '';
                        if (arg.view.type !== 'dayGridMonth') {
                            const startTime = new Date(arg.event.start).toLocaleTimeString('en-US', {
                                hour: '2-digit',
                                minute: '2-digit',
                                hour12: true
                            });
                            timeText = `<div class="fc-event-time">${startTime}</div>`;
                        }
                        
                        return { html: `
                            ${timeText}
                            <div class="fc-event-title-container">
                                <div class="fc-event-title">${arg.event.title}</div>
                                ${arg.view.type !== 'dayGridMonth' ? `<div class="fc-event-desc">${arg.event.extendedProps.instructor}</div>` : ''}
                            </div>
                        `};
                    },
                    // Customize the calendar header
                    viewDidMount: function(view) {
                        // Add a class to the header for styling
                        $('.fc-header-toolbar').addClass('calendar-header-custom');
                    }
                });
                
                calendar.render();
                
                // Apply filters
                document.getElementById('instructor-filter').addEventListener('change', applyFilters);
                document.getElementById('class-type-filter').addEventListener('change', applyFilters);
                document.getElementById('level-filter').addEventListener('change', applyFilters);
                
                function applyFilters() {
                    const instructorFilter = document.getElementById('instructor-filter').value;
                    const classTypeFilter = document.getElementById('class-type-filter').value;
                    const levelFilter = document.getElementById('level-filter').value;
                    
                    calendar.getEvents().forEach(event => {
                        let visible = true;
                        
                        if (instructorFilter && event.extendedProps.instructor !== instructorFilter) {
                            visible = false;
                        }
                        
                        if (classTypeFilter && event.extendedProps.class_type !== classTypeFilter) {
                            visible = false;
                        }
                        
                        if (levelFilter && event.extendedProps.level !== levelFilter) {
                            visible = false;
                        }
                        
                        if (visible) {
                            event.setProp('display', 'auto');
                        } else {
                            event.setProp('display', 'none');
                        }
                    });
                }
                
                // Show booking modal for existing classes
                function showBookingModal(event) {
                    const modal = $('#bookingModal');
                    const classId = event.id;
                    const title = event.title;
                    const start = event.start;
                    const end = event.end;
                    const instructor = event.extendedProps.instructor;
                    
                    // Format date and time
                    const dateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
                    const timeOptions = { hour: '2-digit', minute: '2-digit' };
                    const dateStr = start.toLocaleDateString('en-US', dateOptions);
                    const timeStr = start.toLocaleTimeString('en-US', timeOptions) + ' - ' + 
                                   end.toLocaleTimeString('en-US', timeOptions);
                    
                    // Set modal content
                    $('#booking-class-title').text(title);
                    $('#booking-class-time').text(dateStr + ', ' + timeStr);
                    $('#booking-class-instructor').text('Instructor: ' + instructor);
                    $('#class_id').val(classId);
                    
                    // Show modal
                    modal.modal('show');
                }
                
                // Show booking modal when clicking on a day
                function showDayBookingModal(dateStr) {
                    const modal = $('#dayBookingModal');
                    const selectedDate = new Date(dateStr);
                    const today = new Date();
                    
                    // Check if selected date is in the past
                    if (selectedDate < today && selectedDate.toDateString() !== today.toDateString()) {
                        alert('Sorry, you cannot book classes for past dates.');
                        return;
                    }
                    
                    // Format date for display
                    const dateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
                    const formattedDate = selectedDate.toLocaleDateString('en-US', dateOptions);
                    
                    // Set modal title to include the date
                    $('#dayBookingModalLabel').text('Book a Class for ' + formattedDate);
                    
                    // Set the hidden date input
                    $('#selected_date').val(dateStr);
                    
                    // Reset form
                    $('#day-booking-form')[0].reset();
                    
                    // Show modal
                    modal.modal('show');
                }
                
                // This section previously contained functions for updating the modal header
                // These have been removed as they're no longer needed with the new design
                
                // Validate start and end times
                function validateTimes() {
                    const startTime = $('#start_time').val();
                    const endTime = $('#end_time').val();
                    
                    if (!startTime) {
                        return;
                    }
                    
                    // Store the start time in the hidden input for form submission
                    $('#class_time').val(startTime + ':00');
                    
                    // If end time is set, make sure it's after start time
                    if (endTime && startTime >= endTime) {
                        // Calculate a default end time (1 hour after start)
                        const [hours, minutes] = startTime.split(':');
                        const startDateTime = new Date();
                        startDateTime.setHours(parseInt(hours));
                        startDateTime.setMinutes(parseInt(minutes));
                        
                        const endDateTime = new Date(startDateTime.getTime() + 60 * 60 * 1000);
                        const endHours = endDateTime.getHours().toString().padStart(2, '0');
                        const endMinutes = endDateTime.getMinutes().toString().padStart(2, '0');
                        
                        // Only set if the calculated end time is valid (before 8 PM)
                        if (parseInt(endHours) < 20 || (parseInt(endHours) === 20 && parseInt(endMinutes) === 0)) {
                            $('#end_time').val(`${endHours}:${endMinutes}`);
                        } else {
                            // If calculated end time is after 8 PM, set to 8 PM
                            $('#end_time').val('20:00');
                        }
                    }
                }
                
                // Handle booking form submission for existing classes
                $('#submit-booking').on('click', function() {
                    const form = $('#booking-form');
                    
                    // Basic validation
                    if (!form[0].checkValidity()) {
                        form[0].reportValidity();
                        return;
                    }
                    
                    // Collect form data
                    const formData = {
                        class_id: $('#class_id').val(),
                        name: $('#name').val(),
                        email: $('#email').val(),
                        phone: $('#phone').val(),
                        notes: $('#notes').val()
                    };
                    
                    // Submit booking
                    $.ajax({
                        type: 'POST',
                        url: 'book-class.php',
                        data: formData,
                        dataType: 'json',
                        success: function(response) {
                            $('#bookingModal').modal('hide');
                            
                            if (response.success) {
                                // Show success message
                                $('#successModal').modal('show');
                                
                                // Reset form
                                $('#booking-form')[0].reset();
                                
                                // Refresh calendar to show new booking
                                calendar.refetchEvents();
                            } else {
                                // Show error message
                                alert('Booking failed: ' + response.message);
                            }
                        },
                        error: function(xhr, status, error) {
                            alert('An error occurred while processing your booking. Please try again.');
                            console.error(xhr.responseText);
                        }
                    });
                });
                
                // Handle day booking form submission
                $('#submit-day-booking').on('click', function(e) {
                    e.preventDefault(); // Prevent default button behavior
                    
                    // Debug
                    console.log('Book Now button clicked');
                    
                    const form = $('#day-booking-form');
                    
                    // Validate form
                    if (!form[0].checkValidity()) {
                        form.addClass('was-validated');
                        return;
                    }
                    
                    // Get selected date and times
                    const selectedDate = $('#selected_date').val();
                    const startTime = $('#start_time').val();
                    const endTime = $('#end_time').val();
                    
                    // Validate times are selected
                    if (!startTime || !endTime) {
                        alert('Please select both start and end times');
                        return;
                    }
                    
                    // Validate start time is before end time
                    if (startTime >= endTime) {
                        alert('End time must be after start time');
                        return;
                    }
                    
                    // Validate times are within allowed range (7am-8pm)
                    const startHour = parseInt(startTime.split(':')[0]);
                    const endHour = parseInt(endTime.split(':')[0]);
                    const endMinutes = parseInt(endTime.split(':')[1]);
                    
                    if (startHour < 7 || (endHour > 20 || (endHour === 20 && endMinutes > 0))) {
                        alert('Class times must be between 7:00 AM and 8:00 PM');
                        return;
                    }
                    
                    // Store the start time in the hidden input for form submission
                    $('#class_time').val(startTime);
                    
                    // For reference in the code below
                    const startTimeObj = new Date(`${selectedDate}T${startTime}`);
                    const endTimeStr = endTime;
                    
                    // Collect form data
                    const formData = {
                        date: selectedDate,
                        start_time: startTime,
                        end_time: endTimeStr,
                        title: $('#class_type').val(),
                        instructor: 'Staff', // Default instructor since field was removed
                        class_type: $('#class_type').val(),
                        level: $('#level').val(),
                        name: $('#day_booking_name').val(),
                        email: $('#day_booking_email').val(),
                        phone: $('#day_booking_phone').val(),
                        notes: $('#day_booking_notes').val(),
                        day_booking: 'true' // Flag to indicate this is a day booking
                    };
                    
                    // Debug form data
                    console.log('Form data being submitted:', formData);
                    
                    // Log form data for debugging
                    console.log('Submitting booking with data:', formData);
                    
                    // Convert form data to FormData object for more reliable submission
                    const formDataObj = new FormData();
                    Object.keys(formData).forEach(key => {
                        formDataObj.append(key, formData[key]);
                    });
                    
                    // Submit day booking
                    $.ajax({
                        type: 'POST',
                        url: 'book-class.php',
                        data: formData,
                        dataType: 'json',
                        cache: false,
                        success: function(response) {
                            console.log('Response received:', response);
                            $('#dayBookingModal').modal('hide');
                            
                            if (response.success) {
                                // Show success message
                                $('#successModal').modal('show');
                                
                                // Reset form
                                $('#day-booking-form')[0].reset();
                                
                                // Add the new event to the calendar
                                if (response.event_id) {
                                    const newEvent = {
                                        id: response.event_id,
                                        title: formData.title,
                                        start: `${selectedDate}T${startTime}`,
                                        end: `${selectedDate}T${endTimeStr}`,
                                        extendedProps: {
                                            instructor: formData.instructor,
                                            class_type: formData.class_type,
                                            level: formData.level
                                        },
                                        backgroundColor: getClassColor(formData.class_type),
                                        borderColor: getClassColor(formData.class_type)
                                    };
                                    
                                    calendar.addEvent(newEvent);
                                } else {
                                    // If no event_id returned, just refresh all events
                                    calendar.refetchEvents();
                                }
                            } else {
                                // Show error message
                                alert('Booking failed: ' + response.message);
                            }
                        },
                        error: function(xhr, status, error) {
                            alert('An error occurred while processing your booking. Please try again.');
                            console.error(xhr.responseText);
                        }
                    });
                });
                
                // Helper function to get color based on class type
                function getClassColor(classType) {
                    const colorMap = {
                        'Hatha Yoga': '#4CAF50',
                        'Vinyasa Flow': '#2196F3',
                        'Yin Yoga': '#9C27B0',
                        'Meditation': '#FF9800',
                        'Ashtanga': '#F44336',
                        'Kundalini': '#673AB7',
                        'Restorative': '#3F51B5',
                        'Prenatal': '#E91E63'
                    };
                    
                    return colorMap[classType] || '#607D8B'; // Default color
                }
            });
        </script>
        
        <!-- Direct fix for calendar navigation -->
        <script>
            // Wait until the page is fully loaded
            window.addEventListener('load', function() {
                // Function to fix the calendar buttons
                function fixCalendarButtons() {
                    console.log('Fixing calendar buttons directly');
                    
                    // Create new buttons with direct onclick attributes
                    var prevButton = document.createElement('button');
                    prevButton.innerHTML = '&lt;';
                    prevButton.style.background = 'transparent';
                    prevButton.style.border = 'none';
                    prevButton.style.fontSize = '24px';
                    prevButton.style.cursor = 'pointer';
                    prevButton.style.padding = '0 15px';
                    prevButton.onclick = function() {
                        document.getElementById('calendarMonthTitle').textContent = 'March 2025';
                        console.log('Changed to March');
                    };
                    
                    var nextButton = document.createElement('button');
                    nextButton.innerHTML = '&gt;';
                    nextButton.style.background = 'transparent';
                    nextButton.style.border = 'none';
                    nextButton.style.fontSize = '24px';
                    nextButton.style.cursor = 'pointer';
                    nextButton.style.padding = '0 15px';
                    nextButton.onclick = function() {
                        document.getElementById('calendarMonthTitle').textContent = 'May 2025';
                        console.log('Changed to May');
                    };
                    
                    // Get the calendar header
                    var calendarHeader = document.querySelector('#fullCalendarModal .calendar-header') || 
                                        document.querySelector('#fullCalendarModal div:first-child');
                    
                    if (calendarHeader) {
                        // Clear the header
                        calendarHeader.innerHTML = '';
                        
                        // Add the new buttons and title
                        calendarHeader.appendChild(prevButton);
                        
                        var monthTitle = document.createElement('div');
                        monthTitle.id = 'calendarMonthTitle';
                        monthTitle.style.fontSize = '24px';
                        monthTitle.style.fontWeight = '600';
                        monthTitle.style.margin = '0 15px';
                        monthTitle.style.textAlign = 'center';
                        monthTitle.textContent = 'April 2025';
                        calendarHeader.appendChild(monthTitle);
                        
                        calendarHeader.appendChild(nextButton);
                        
                        console.log('Calendar buttons replaced');
                    } else {
                        console.log('Could not find calendar header');
                    }
                }
                
                // Run the fix when the calendar is opened
                var originalShowFullCalendar = window.showFullCalendar;
                if (originalShowFullCalendar) {
                    window.showFullCalendar = function() {
                        originalShowFullCalendar.apply(this, arguments);
                        setTimeout(fixCalendarButtons, 100);
                    };
                    console.log('Hooked into showFullCalendar function');
                } else {
                    console.log('Could not find showFullCalendar function');
                }
            });
        </script>