<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="author" content="templatemo">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">

    <title>McGregor Fitness Center</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Additional CSS Files -->
    <link rel="stylesheet" href="assets/css/fontawesome.css">
    <link rel="stylesheet" href="assets/css/templatemo-snapx-photography.css">
    <link rel="stylesheet" href="assets/css/owl.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link rel="stylesheet"href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    
    <!-- Registration Form CSS -->
    <style>
        /* Modal Overlay Styles */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.7);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            overflow-y: auto;
            padding: 20px;
        }
        
        /* Modal Content Styles */
        .registration-modal {
            background-color: #fff;
            padding: 30px;
            border-radius: 10px;
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            position: relative;
            margin: auto;
            animation: modalFadeIn 0.3s ease-out;
        }
        
        @keyframes modalFadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .close-modal {
            position: absolute;
            top: 15px;
            right: 15px;
            font-size: 24px;
            cursor: pointer;
            color: #333;
            transition: color 0.2s;
        }
        
        .close-modal:hover {
            color: #f33f3f;
        }
        
        /* Form Group Styles */
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
        }
        
        .form-group input, 
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        .form-group input:focus, 
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: #f33f3f;
            outline: none;
        }
        
        /* Button Styles */
        .submit-btn {
            background-color: #f33f3f;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 600;
            width: 100%;
            transition: background-color 0.3s;
            font-size: 16px;
            margin-top: 10px;
        }
        
        .submit-btn:hover {
            background-color: #e03535;
        }
        
        /* Success Message Styles */
        .registration-success {
            display: none;
            text-align: center;
            padding: 20px;
        }
        
        .registration-success h3 {
            color: #4CAF50;
            margin-bottom: 15px;
            font-size: 24px;
        }
        
        .registration-success p {
            margin-bottom: 10px;
            color: #555;
        }
        
        /* Error Message Styles */
        .error-message {
            color: #f33f3f;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }
        
        /* Membership Specific Styles */
        .membership-benefits {
            margin: 20px 0;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 5px;
        }
        
        .membership-benefits h5 {
            margin-bottom: 10px;
            color: #333;
        }
        
        .membership-benefits ul {
            padding-left: 20px;
        }
        
        .membership-benefits li {
            margin-bottom: 5px;
            color: #555;
        }
        
        /* Plan Selection Styles */
        .plan-selection {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .plan-option {
            flex: 1;
            min-width: 120px;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 5px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .plan-option:hover {
            border-color: #f33f3f;
        }
        
        .plan-option.selected {
            border-color: #f33f3f;
            background-color: rgba(243, 63, 63, 0.1);
        }
        
        .plan-option h5 {
            margin: 5px 0;
            color: #333;
        }
        
        .plan-option .price {
            font-weight: bold;
            color: #f33f3f;
        }
        
        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .plan-selection {
                flex-direction: column;
            }
            
            .plan-option {
                width: 100%;
            }
            
            .registration-modal {
                padding: 20px;
                width: 95%;
            }
        }
    </style>
  </head>

<body>


  <!-- ***** Header Area Start ***** -->
  <header class="header-area header-sticky">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <nav class="main-nav">
                    <!-- ***** Logo Start ***** -->
                    <a href="index.html" class="logo">
                        <img src="assets/new/logoimg.png" alt="McGregor Fitness Center">
                    </a>
                    <!-- ***** Logo End ***** -->
                    <!-- ***** Menu Start ***** -->
                    <ul class="nav">
                        <li><a href="#" class="active">Home</a></li>
                        <li><a href="#membership">Membership</a></li>
                        <li><a href="#classes">Classes</a></li>
                        <li><a href="#contact">Contact</a></li>
                        
                    </ul>   
                  <div class="border-button">
  <a id="modal_trigger" href="{{ url('/admin/login') }}" class="sign-in-up">
    <i class="fa fa-user"></i> Admin
  </a>
</div>

                    <a class='menu-trigger'>
                        <span>Menu</span>
                    </a>
                    <!-- ***** Menu End ***** -->
                </nav>
            </div>
        </div>
    </div>
  </header>
  <!-- ***** Header Area End ***** -->
    </section>
  </div>

  <!-- ***** Main Banner Area Start ***** -->
  <div class="main-banner">
    <div class="container">
      <div class="row">
        <div class="col-lg-10 offset-lg-1">
          <div class="header-text">
            <h2>Enter a world of <em>Fitness</em> &amp; Amazing <em>Results</em></h2>
            <p>McGregor Fitness Center is Nairobi's premier gym with state-of-the-art facilities, expert trainers, and a variety of classes to help you achieve your fitness goals. Whether you're a beginner or an athlete, we have everything you need to transform your body and mind.</p>
            <div class="buttons">
              <div class="big-border-button">
                <a href="contests.html">Explore Our Programs</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- ***** Main Banner Area End ***** -->


  <section class="featured-items" id="featured-items">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="owl-features owl-carousel" style="position: relative; z-index: 5;">
            <div class="item">
              <div class="thumb">
                <img src="assets/new/istockphoto-1257452341-612x612.jpg" alt="">
                <div class="hover-effect">
                  <div class="content">
                    <h4>Personal Training <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i> <span>(4.8)</span></h4>
                    <ul>
                      <li><span>Top Trainer:</span> McGregor</li>
                      <li><span>Specialty:</span> Strength & Conditioning</li>
                      <li><span>Results:</span> 95% Client Satisfaction</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="thumb">
                <img src="assets/new/istockphoto-1288737575-612x612.jpg" alt="">
                <div class="hover-effect">
                  <div class="content">
                    <h4>HIIT Classes <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i> <span>(4.7)</span></h4>
                    <ul>
                      <li><span>Top Trainer:</span> Sarah Johnson</li>
                      <li><span>Schedule:</span> Mon/Wed/Fri 6-7pm</li>
                      <li><span>Results:</span> 500+ calories burned/session</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="thumb">
                <img src="assets/new/fitness-studio-3675225_960_720.jpg" alt="">
                <div class="hover-effect">
                  <div class="content">
                    <h4>Yoga Studio <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i> <span>(4.9)</span></h4>
                    <ul>
                      <li><span>Top Instructor:</span> Priya Sharma</li>
                      <li><span>Styles:</span> Vinyasa, Hatha, Yin</li>
                      <li><span>Benefits:</span> Stress relief & flexibility</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="thumb">
                <img src="assets/new/danielle-cerullo-CQfNt66ttZM-unsplash.jpg" alt="">
                <div class="hover-effect">
                  <div class="content">
                    <h4>Weightlifting <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i> <span>(4.6)</span></h4>
                    <ul>
                      <li><span>Top Coach:</span> Mike Peterson</li>
                      <li><span>Equipment:</span> Olympic platforms</li>
                      <li><span>Program:</span> Progressive overload</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="thumb">
                <img src="assets/new/istockphoto-665407226-612x612.jpg" alt="">
                <div class="hover-effect">
                  <div class="content">
                    <h4>Spin Classes <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i> <span>(4.8)</span></h4>
                    <ul>
                      <li><span>Top Instructor:</span> David Kim</li>
                      <li><span>Schedule:</span> Tue/Thu/Sat mornings</li>
                      <li><span>Results:</span> Cardio endurance boost</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="thumb">
                <img src="assets/new/istockphoto-615889314-1024x1024.jpg" alt="">
                <div class="hover-effect">
                  <div class="content">
                    <h4>Nutrition Coaching <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i> <span>(4.7)</span></h4>
                    <ul>
                      <li><span>Nutritionist:</span> Emily Wilson</li>
                      <li><span>Approach:</span> Personalized meal plans</li>
                      <li><span>Results:</span> Sustainable habits</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

<section class="popular-categories">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-6">
          <div class="section-heading">
            <h6>Our Classes</h6>
            <h4>Explore <em>our</em> Fitness <em>Classes</em></h4>
          </div>
        </div>
        <div class="col-lg-6 ">
          <div class="main-button">
            <a href="#" >View All Classes</a>
          </div>
        </div>
        
        <!-- HIIT Class -->
        <div class="col-lg-3 col-sm-6">
          <div class="popular-item">
            <div class="top-content">
              <div class="right">
                <h4>HIIT Blast</h4>
                <span><em>Mon/Wed 6:30am</em> High-intensity intervals</span>
              </div>
            </div>
            <div class="thumb">
              <img src="assets/new/hitt-class.webp" alt="">
              <span class="category">Most Popular</span>
              <span class="likes"><i class="fa fa-heart"></i> 224</span>
            </div>
            <div class="border-button">
              <a href="#" class="register-btn" data-class="HIIT Blast" data-class-id="1">Join HIIT Class</a>
            </div>
          </div>
        </div>
        
        <!-- Yoga Fusion -->
        <div class="col-lg-3 col-sm-6">
          <div class="popular-item">
            <div class="top-content">
              <div class="right">
                <h4>Yoga Fusion</h4>
                <span><em>Tue/Thu 7:00pm</em> Mind-body connection</span>
              </div>
            </div>
            <div class="thumb">
              <img src="assets/new/yoga class.webp" alt="">
              <span class="category">Beginner Friendly</span>
              <span class="likes"><i class="fa fa-heart"></i> 187</span>
            </div>
            <div class="border-button">
              <a href="#" class="register-btn" data-class="Yoga Fusion" data-class-id="2">Join Yoga Class</a>
            </div>
          </div>
        </div>
        
        <!-- Functional Training -->
        <div class="col-lg-3 col-sm-6">
          <div class="popular-item">
            <div class="top-content">
              <div class="right">
                <h4>Functional Training</h4>
                <span><em>Mon/Fri 5:30pm</em> Real-world movements</span>
              </div>
            </div>
            <div class="thumb">
              <img src="assets/new/funtional.webp" alt="">
              <span class="category">Trending</span>
              <span class="likes"><i class="fa fa-heart"></i> 156</span>
            </div>
            <div class="border-button">
              <a href="#" class="register-btn" data-class="Functional Training" data-class-id="3">Join Functional Class</a>
            </div>
          </div>
        </div>
        
        <!-- Boxing -->
        <div class="col-lg-3 col-sm-6">
          <div class="popular-item">
            <div class="top-content">
              <div class="right">
                <h4>Boxing Fundamentals</h4>
                <span><em>Wed/Sat 6:00pm</em> Cardio & technique</span>
              </div>
            </div>
            <div class="thumb">
              <img src="assets/new/kickboxing.webp" alt="">
              <span class="category">High Intensity</span>
              <span class="likes"><i class="fa fa-heart"></i> 203</span>
            </div>
            <div class="border-button">
              <a href="#" class="register-btn" data-class="Boxing Fundamentals" data-class-id="4">Join Boxing Class</a>
            </div>
          </div>
        </div>
        
        <!-- Pilates Reformer -->
        <div class="col-lg-3 col-sm-6">
          <div class="popular-item">
            <div class="top-content">
              <div class="right">
                <h4>Pilates Reformer</h4>
                <span><em>Tue/Thu 9:00am</em> Core strength & flexibility</span>
              </div>
            </div>
            <div class="thumb">
              <img src="assets/new/pilates.webp" alt="">
              <span class="category">Low Impact</span>
              <span class="likes"><i class="fa fa-heart"></i> 142</span>
            </div>
            <div class="border-button">
              <a href="#" class="register-btn" data-class="Pilates Reformer" data-class-id="5">Join Pilates Class</a>
            </div>
          </div>
        </div>
        
        <!-- CrossFit -->
        <div class="col-lg-3 col-sm-6">
          <div class="popular-item">
            <div class="top-content">
              <div class="right">
                <h4>CrossFit</h4>
                <span><em>Daily 5am/6pm</em> Varied functional movements</span>
              </div>
            </div>
            <div class="thumb">
              <img src="assets/new/crossfit.webp" alt="">
              <span class="category">Advanced</span>
              <span class="likes"><i class="fa fa-heart"></i> 178</span>
            </div>
            <div class="border-button">
              <a href="#" class="register-btn" data-class="CrossFit" data-class-id="6">Join CrossFit Class</a>
            </div>
          </div>
        </div>
        
        <!-- Barre -->
        <div class="col-lg-3 col-sm-6">
          <div class="popular-item">
            <div class="top-content">
              <div class="right">
                <h4>Barre Fitness</h4>
                <span><em>Mon/Wed 10:00am</em> Ballet-inspired toning</span>
              </div>
            </div>
            <div class="thumb">
              <img src="assets/new/barre.webp" alt="">
              <span class="category">New Class</span>
              <span class="likes"><i class="fa fa-heart"></i> 98</span>
            </div>
            <div class="border-button">
              <a href="#" class="register-btn" data-class="Barre Fitness" data-class-id="7">Join Barre Class</a>
            </div>
          </div>
        </div>
        
        <!-- Aqua Fitness -->
        <div class="col-lg-3 col-sm-6">
          <div class="popular-item">
            <div class="top-content">
              <div class="right">
                <h4>Dumbbell Power Hour</h4>
                <span><em>Fri 7:00pm</em> Build strength with controlled, joint-friendly dumbbell moves.</span>
              </div>
            </div>
            <div class="thumb">
              <img src="assets/new/dumbells.jpg" alt="">
              <span class="category">Joint Friendly</span>
              <span class="likes"><i class="fa fa-heart"></i> 112</span>
            </div>
            <div class="border-button">
              <a href="#" class="register-btn" data-class="Dumbbell Power Hour" data-class-id="8">Join Aqua Class</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Class Registration Modal -->
  <div class="modal-overlay" id="classRegistrationModal">
    <div class="registration-modal">
        <span class="close-modal">&times;</span>
        
        <div id="classRegistrationFormContainer">
            <h3>Register for <span id="className"></span></h3>
            <p>Fill out the form below to register for this class</p>
            
            <form id="classRegistrationForm">
                <input type="hidden" id="classId" name="class_id">
                <input type="hidden" id="class_name" name="class_name">
                
                <div class="form-group">
                    <label for="fullName">Full Name</label>
                    <input type="text" id="fullName" name="full_name" required>
                    <div class="error-message" id="nameError">Please enter your full name</div>
                </div>
                
                <div class="form-group">
                    <label for="email">Email Address</label>
                    <input type="email" id="email" name="email" required>
                    <div class="error-message" id="emailError">Please enter a valid email address</div>
                </div>
                
                <div class="form-group">
                    <label for="phone">Phone Number</label>
                    <input type="tel" id="phone" name="phone" required>
                    <div class="error-message" id="phoneError">Please enter a valid phone number</div>
                </div>
                
                <div class="form-group">
                    <label for="membership">Membership Status</label>
                    <select id="membership" name="membership_status" required>
                        <option value="">Select your membership status</option>
                        <option value="member">Current Member</option>
                        <option value="non-member">Non-Member</option>
                        <option value="guest">Guest Pass</option>
                    </select>
                    <div class="error-message" id="membershipError">Please select your membership status</div>
                </div>
                
                <button type="submit" class="submit-btn">Register Now</button>
            </form>
        </div>
        
        <div class="registration-success" id="classRegistrationSuccess">
            <h3>Registration Successful!</h3>
            <p>Thank you for registering for <span id="successClassName"></span>.</p>
            <p>We've sent a confirmation email to <span id="successEmail"></span>.</p>
            <p>See you in class!</p>
            <button class="submit-btn" id="closeClassSuccess">Close</button>
        </div>
    </div>
  </div>

  <!-- Membership Registration Modal -->
  <div class="modal-overlay" id="membershipRegistrationModal">
    <div class="registration-modal">
        <span class="close-modal">&times;</span>
        
        <div id="membershipRegistrationFormContainer">
            <h3>Join McGregor Fitness Center</h3>
            <p>Select your membership plan and complete the registration</p>
            
            <form id="membershipRegistrationForm">
                <div class="form-group">
                    <label>Select Membership Plan</label>
                    <div class="plan-selection">
                        <div class="plan-option" data-plan="basic" data-price="25">
                            <h5>Basic</h5>
                            <div class="price">$25/month</div>
                        </div>
                        <div class="plan-option" data-plan="standard" data-price="45">
                            <h5>Standard</h5>
                            <div class="price">$45/month</div>
                        </div>
                        <div class="plan-option" data-plan="premium" data-price="85">
                            <h5>Premium</h5>
                            <div class="price">$85/month</div>
                        </div>
                    </div>
                    <input type="hidden" id="selectedPlan" name="membership_plan" required>
                    <input type="hidden" id="selectedPrice" name="membership_price">
                    <div class="error-message" id="planError">Please select a membership plan</div>
                </div>
                
                <div class="membership-benefits" id="planBenefits">
                    <h5>Plan Benefits:</h5>
                    <p>Select a plan to view benefits</p>
                </div>
                
                <div class="form-group">
                    <label for="mFullName">Full Name</label>
                    <input type="text" id="mFullName" name="full_name" required>
                    <div class="error-message" id="mNameError">Please enter your full name</div>
                </div>
                
                <div class="form-group">
                    <label for="mEmail">Email Address</label>
                    <input type="email" id="mEmail" name="email" required>
                    <div class="error-message" id="mEmailError">Please enter a valid email address</div>
                </div>
                
                <div class="form-group">
                    <label for="mPhone">Phone Number</label>
                    <input type="tel" id="mPhone" name="phone" required>
                    <div class="error-message" id="mPhoneError">Please enter a valid phone number</div>
                </div>
                
                <div class="form-group">
                    <label for="mAddress">Address</label>
                    <textarea id="mAddress" name="address" rows="3" required></textarea>
                    <div class="error-message" id="addressError">Please enter your address</div>
                </div>
                
                <div class="form-group">
                    <label for="mPayment">Payment Method</label>
                    <select id="mPayment" name="payment_method" required>
                        <option value="">Select payment method</option>
                        <option value="credit_card">Credit Card</option>
                        <option value="mpesa">M-Pesa</option>
                        <option value="bank_transfer">Bank Transfer</option>
                    </select>
                    <div class="error-message" id="paymentError">Please select a payment method</div>
                </div>
                
                <button type="submit" class="submit-btn">Complete Membership Registration</button>
            </form>
        </div>
        
        <div class="registration-success" id="membershipRegistrationSuccess">
            <h3>Welcome to McGregor Fitness!</h3>
            <p>Your <span id="successPlanName"></span> membership has been successfully registered.</p>
            <p>We've sent all details to <span id="successMEmail"></span>.</p>
            <p>Your membership ID: <strong id="membershipId"></strong></p>
            <button class="submit-btn" id="closeMembershipSuccess">Close</button>
        </div>
    </div>
  </div>

  <section class="pricing-plans" id="membership">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="section-heading text-center">
            <h6>Membership Plans</h6>
            <h4>Affordable <em>Options</em> For Every <em>Fitness Goal</em></h4>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="pricing-item">
            <img src="assets/new/basic.webp" alt="">
            <h4>Basic Membership</h4>
            <ul class="first-plan">
              <li>Access to gym facilities</li>
              <li>Free weights & cardio equipment</li>
              <li>Locker room access</li>
              <li>2 Group classes per week</li>
              <li>Basic fitness assessment</li>
            </ul>
            <span class="price">$25/month</span>
            <div class="border-button">
              <a href="#" class="membership-btn" data-plan="basic" data-price="25">Choose This Plan</a>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="pricing-item">
            <img src="assets/new/stardard.webp" alt="">
            <h4>Standard Membership</h4>
            <ul class="second-plan">
              <li>All Basic Membership benefits</li>
              <li>Unlimited group classes</li>
              <li>Sauna & steam room access</li>
              <li>Monthly progress assessment</li>
              <li>15% discount on personal training</li>
            </ul>
            <span class="price">$45/month</span>
            <div class="border-button">
              <a href="#" class="membership-btn" data-plan="standard" data-price="45">Choose This Plan</a>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="pricing-item">
            <img src="assets/new/premium.webp" alt="">
            <h4>Premium Membership</h4>
            <ul class="third-plan">
              <li>All Standard Membership benefits</li>
              <li>4 Personal training sessions</li>
              <li>Nutrition consultation</li>
              <li>24/7 gym access</li>
              <li>Complimentary towel service</li>
            </ul>
            <span class="price">$85/month</span>
            <div class="border-button">
              <a href="#" class="membership-btn" data-plan="premium" data-price="85">Choose This Plan</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <section class="fitness-blog">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="section-heading text-center">
            <h6>McGregor Gym Blog</h6>
            <h4><em>Fitness Tips</em> & <em>Expert Advice</em></h4>
          </div>
        </div>
        <div class="col-lg-12">
          <div class="owl-features owl-carousel" style="position: relative; z-index: 5;">
            <div class="item">
              <div class="blog-item">
                <div class="thumb">
                  <img src="assets/new/hitt-class.webp" alt="HIIT Workout">
                  <span class="category"><em>Workout:</em> HIIT Training</span>
                  <span class="author">By Coach Mark</span>
                </div>
                <div class="down-content">
                  <h4>Maximize Fat Burn With These HIIT Techniques</h4>
                  <p>Discover how to structure your high-intensity interval training for optimal results in minimal time. Perfect for busy schedules!</p>
                  <div class="border-button">
                    <a href="#">Read More</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="blog-item">
                <div class="thumb">
                  <img src="assets/new/nutrition guide.jpeg" alt="Nutrition Guide">
                  <span class="category"><em>Nutrition:</em> Meal Planning</span>
                  <span class="author">By Nutritionist Sarah</span>
                </div>
                <div class="down-content">
                  <h4>Your Complete Guide to Post-Workout Nutrition</h4>
                  <p>Learn what to eat after different workout types to maximize recovery and muscle growth. Includes sample meal plans!</p>
                  <div class="border-button">
                    <a href="#">Read More</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="blog-item">
                <div class="thumb">
                  <img src="assets/new/injury prevention.jpg" alt="Injury Prevention">
                  <span class="category"><em>Recovery:</em> Injury Prevention</span>
                  <span class="author">By Physio James</span>
                </div>
                <div class="down-content">
                  <h4>5 Essential Mobility Exercises Every Lifter Needs</h4>
                  <p>Prevent injuries and improve performance with these simple mobility drills you can do in just 10 minutes daily.</p>
                  <div class="border-button">
                    <a href="#">Read More</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="blog-item">
                <div class="thumb">
                  <img src="assets/new/mindset.webp" alt="Mindset Training">
                  <span class="category"><em>Mindset:</em> Mental Fitness</span>
                  <span class="author">By Coach Angela</span>
                </div>
                <div class="down-content">
                  <h4>Building Mental Toughness for Your Fitness Journey</h4>
                  <p>Learn psychological strategies to push through plateaus and stay motivated when progress seems slow.</p>
                  <div class="border-button">
                    <a href="#">Read More</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-12">
          <div class="border-button text-center">
            <a href="#">View All Blog Articles</a>
          </div>
        </div>
      </div>
    </div>
  </section>
  


 <footer id="contact">
    <div class="container">
      <div class="row">
        <div class="col-lg-4">
          <h4>Contact Us</h4>
          <ul class="contact-info">
            <li><i class="fa fa-map-marker"></i> Opposite ILRI, Nairobi</li>
            <li><i class="fa fa-phone"></i> +254 700 123456</li>
            <li><i class="fa fa-envelope"></i> info@mcgregorfitness.co.ke</li>
            <li><i class="fa fa-clock-o"></i> Mon-Fri: 5:30am - 10pm<br>Sat-Sun: 7am - 8pm</li>
          </ul>
        </div>
        
        <div class="col-lg-4">
          <h4>Quick Links</h4>
          <ul class="footer-links">
            <li><a href="#">Home</a></li>
            <li><a href="#membership">Membership</a></li>
            <li><a href="#classes">Classes</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
        
        <div class="col-lg-4">
          <h4>Find Us</h4>
          <div class="map-container">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.854454764057!2d36.89112331532837!3d-1.2650408359759956!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMcKwMTUnNTQuMiJTIDM2wrA1MyczNi4wIkU!5e0!3m2!1sen!2ske!4v1620000000000!5m2!1sen!2ske" 
                    width="100%" height="200" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
          </div>
        </div>
        
       <div class="col-lg-12">
  <div class="copyright">
    <p>Copyright © 2025 <a href="#">McGregor Fitness Center</a>. All rights reserved.</p>
    <div class="social-icons">
      <a href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
        </svg>
      </a>
      <a href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
        </svg>
      </a>
      <a href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
        </svg>
      </a>
      <a href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
        </svg>
      </a>
    </div>
  </div>
</div>
      </div>
    </div>
  </footer>

  <!-- Scripts -->
  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

  <script src="assets/js/isotope.min.js"></script>
  <script src="assets/js/owl-carousel.js"></script>

  <script src="assets/js/tabs.js"></script>
  <script src="assets/js/popup.js"></script>
  <script src="assets/js/custom.js"></script>
  
  <!-- Registration Form JavaScript -->
  <script>
 $(document).ready(function() {
        // CSRF Token setup for AJAX requests
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Class Registration Modal
$('.register-btn').click(function(e) {
    e.preventDefault();
    const className = $(this).data('class');
    const classId = $(this).data('class-id');
    
    // Update display
    $('#className').text(className);
    
    // Update form fields
    $('#class_name').val(className);
    $('#classId').val(classId);
    
    $('#classRegistrationModal').fadeIn();
});
        
        // Close modal handlers
        $('.close-modal').click(closeAllModals);
        $(window).click(function(e) {
            if ($(e.target).hasClass('modal-overlay')) {
                closeAllModals();
            }
        });
        
        function closeAllModals() {
            $('#classRegistrationModal').fadeOut();
            $('#membershipRegistrationModal').fadeOut();
        }

        // Class Registration Form Submission
        $('#classRegistrationForm').submit(function(e) {
            e.preventDefault();
            
            // Reset error messages
            $('.error-message').hide();
            
            // Validate form
            let isValid = true;
            
            if ($('#fullName').val().trim() === '') {
                $('#nameError').show();
                isValid = false;
            }
            
            if ($('#email').val().trim() === '' || !isValidEmail($('#email').val())) {
                $('#emailError').show();
                isValid = false;
            }
            
            if ($('#phone').val().trim() === '') {
                $('#phoneError').show();
                isValid = false;
            }
            
            if ($('#membership').val() === '') {
                $('#membershipError').show();
                isValid = false;
            }
            
            if (isValid) {
                registerClass({
                    full_name: $('#fullName').val(),
                    email: $('#email').val(),
                    phone: $('#phone').val(),
                    membership_status: $('#membership').val(),
                    class_name: $('#className').text(),
                    class_schedule: $('#classSchedule').val()
                });
            }
        });
        
        // Membership Registration
        $('.membership-btn').click(function(e) {
            e.preventDefault();
            const plan = $(this).data('plan');
            const price = $(this).data('price');
            
            $('#membershipRegistrationForm')[0].reset();
            $('.plan-option').removeClass('selected');
            $(`.plan-option[data-plan="${plan}"]`).addClass('selected');
            $('#selectedPlan').val(plan);
            $('#selectedPrice').val(price);
            updatePlanBenefits(plan);
            $('#membershipRegistrationModal').fadeIn();
        });
        
        $('.plan-option').click(function() {
            $('.plan-option').removeClass('selected');
            $(this).addClass('selected');
            const plan = $(this).data('plan');
            const price = $(this).data('price');
            $('#selectedPlan').val(plan);
            $('#selectedPrice').val(price);
            updatePlanBenefits(plan);
        });
        
        $('#membershipRegistrationForm').submit(function(e) {
            e.preventDefault();
            
            $('.error-message').hide();
            let isValid = true;
            
            if ($('#selectedPlan').val() === '') {
                $('#planError').show();
                isValid = false;
            }
            
            if ($('#mFullName').val().trim() === '') {
                $('#mNameError').show();
                isValid = false;
            }
            
            if ($('#mEmail').val().trim() === '' || !isValidEmail($('#mEmail').val())) {
                $('#mEmailError').show();
                isValid = false;
            }
            
            if ($('#mPhone').val().trim() === '') {
                $('#mPhoneError').show();
                isValid = false;
            }
            
            if ($('#mAddress').val().trim() === '') {
                $('#addressError').show();
                isValid = false;
            }
            
            if ($('#mPayment').val() === '') {
                $('#paymentError').show();
                isValid = false;
            }
            
            if (isValid) {
                registerMember({
                    membership_plan: $('#selectedPlan').val(),
                    membership_price: $('#selectedPrice').val(),
                    full_name: $('#mFullName').val(),
                    email: $('#mEmail').val(),
                    phone: $('#mPhone').val(),
                    address: $('#mAddress').val(),
                    payment_method: $('#mPayment').val()
                });
            }
        });
        
        // Close success messages
        $('#closeClassSuccess').click(function() {
            $('#classRegistrationModal').fadeOut();
            $('#classRegistrationFormContainer').show();
            $('#classRegistrationSuccess').hide();
            $('#classRegistrationForm')[0].reset();
        });
        
        $('#closeMembershipSuccess').click(function() {
            $('#membershipRegistrationModal').fadeOut();
            $('#membershipRegistrationFormContainer').show();
            $('#membershipRegistrationSuccess').hide();
            $('#membershipRegistrationForm')[0].reset();
        });
        
        // Helper Functions
        function isValidEmail(email) {
            const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return re.test(email);
        }
        
        function updatePlanBenefits(plan) {
            const benefits = {
                basic: `
                    <h5>Basic Membership Benefits:</h5>
                    <ul>
                        <li>Access to gym facilities</li>
                        <li>Free weights & cardio equipment</li>
                        <li>Locker room access</li>
                        <li>2 Group classes per week</li>
                        <li>Basic fitness assessment</li>
                    </ul>`,
                standard: `
                    <h5>Standard Membership Benefits:</h5>
                    <ul>
                        <li>All Basic Membership benefits</li>
                        <li>Unlimited group classes</li>
                        <li>Sauna & steam room access</li>
                        <li>Monthly progress assessment</li>
                        <li>15% discount on personal training</li>
                    </ul>`,
                premium: `
                    <h5>Premium Membership Benefits:</h5>
                    <ul>
                        <li>All Standard Membership benefits</li>
                        <li>4 Personal training sessions</li>
                        <li>Nutrition consultation</li>
                        <li>24/7 gym access</li>
                        <li>Complimentary towel service</li>
                    </ul>`
            };
            
            $('#planBenefits').html(benefits[plan] || '<p>Select a plan to view benefits</p>');
        }
        
       function registerClass() {
    const submitBtn = $('#classRegistrationForm .submit-btn');
    submitBtn.text('Processing...').prop('disabled', true);
    
    $.ajax({
        url: '/register-class',
        type: 'POST',
        data: $('#classRegistrationForm').serialize(), // This includes all form fields
        success: function(response) {
            if (response.success) {
                $('#classRegistrationFormContainer').hide();
                $('#successEmail').text(response.email);
                $('#successClassName').text(response.class_name);
                $('#classRegistrationSuccess').show();
            } else {
                showError(response.message || 'Registration failed');
            }
        },
        error: function(xhr) {
            if (xhr.status === 422) {
                const errors = xhr.responseJSON.errors;
                for (const field in errors) {
                    $(`#${field}Error`).text(errors[field][0]).show();
                }
            } else {
                showError(xhr.responseJSON?.message || 'Server error occurred');
            }
        },
        complete: function() {
            submitBtn.text('Register Now').prop('disabled', false);
        }
    });
}
        
        function registerMember(formData) {
            const submitBtn = $('#membershipRegistrationForm .submit-btn');
            submitBtn.text('Processing...').prop('disabled', true);
            
            $.ajax({
                url: '/register-member',
                type: 'POST',
                data: formData,
                success: function(response) {
                    if (response.success) {
                        $('#membershipRegistrationFormContainer').hide();
                        $('#successMEmail').text(response.email);
                        $('#successPlanName').text(response.plan_name);
                        $('#successPlanPrice').text(response.membership_price);
                        $('#membershipId').text(response.membership_id);
                        $('#membershipRegistrationSuccess').show();
                    } else {
                        showError(response.message || 'Registration failed');
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        // Validation errors
                        const errors = xhr.responseJSON.errors;
                        for (const field in errors) {
                            const fieldId = field.startsWith('m') ? field : 'm' + field.charAt(0).toUpperCase() + field.slice(1);
                            $(`#${fieldId}Error`).text(errors[field][0]).show();
                        }
                    } else {
                        showError(xhr.responseJSON?.message || 'Server error occurred');
                    }
                },
                complete: function() {
                    submitBtn.text('Complete Membership Registration').prop('disabled', false);
                }
            });
        }
        
        function showError(message) {
            // You can replace this with a prettier error display
            alert(message);
        }
    });
  </script>

  </body>
</html>